| ' + esc(k) + ' | "' + esc(e.value[k]) + '" | ';
+ }).join("")));
+ }
+ return box;
+ }
+ /* Every change so far, one row each. The latest row is open and shows
+ the three steps, with the step the change has reached highlighted, in
+ step with the pipeline card. Earlier rows collapse to one line. */
+ function changesCard(ctx, list, total, settled) { // settled: the latest change isn't the latest thing that happened
+ var L = ctx.L, card = el("div", "rcr-card rdi-changes");
+ card.appendChild(el("div", "rcr-cardhead", "Changes" + (total ? '' + list.length + " of " + total + "" : "")));
+ list.forEach(function (s, i) {
+ var ch = ctx.S.changes[s.key];
+ if (!ch) return;
+ var current = i === list.length - 1 && !settled;
+ var stage = current && L && L.stmt === s && !ctx.done ? L.stage : 0;
+ card.appendChild(changeRow(s, ch, stage, current));
+ });
+ return card;
+ }
+ function changeRow(s, ch, stage, current) {
+ var k = s.key, d = el("details", "rdi-crow" + (current ? " is-current" : ""));
+ var sum = el("summary", "", '' + OPERATIONS[s.op] + "" +
+ '' + esc(s.what) + '' + esc(ch.key) + "" +
+ (stage ? '' : ""));
+ d.appendChild(sum);
+ /* Plain blocks, not a list or paragraphs, so the site's content styles
+ for numbered lists and paragraphs don't apply. */
+ var steps = el("div", "rdi-steps");
+ changeSteps(s, ch, st.structure).forEach(function (x, i) {
+ var state = !stage || i + 1 < stage ? "done" : i + 1 === stage ? "active" : "pending";
+ var li = el("div", "rdi-step is-" + state);
+ li.appendChild(el("div", "rdi-stephead", '' + (i + 1) + '' + esc(x.stage) +
+ "" + esc(x.title)));
+ var body = el("div", "rdi-stepbody");
+ if (x.sql) body.appendChild(el("code", "rdi-stepsql", esc(x.sql)));
+ if (x.text) body.appendChild(el("div", "rdi-steptext", x.text));
+ if (x.diff.length) body.appendChild(el("div", "rdi-diff", x.diff.map(function (f) {
+ return '' + esc(f.field) + ' ' + esc(f.from) +
+ ' โ ' + esc(f.to) + "
";
+ }).join("")));
+ if (x.note) body.appendChild(el("div", "rdi-stepnote", x.note));
+ if (x.record) {
+ var rec = remember(el("details", "rdi-rec"), "rec:" + k);
+ rec.appendChild(el("summary", "", "Show the captured change"));
+ rec.appendChild(el("pre", "rcr-code rcr-code-sm", jsonHtml(x.record)));
+ rec.appendChild(el("div", "rdi-stepnote", "A job with " + code("row_format: full") + " reads these fields. " + code("after") + " is " +
+ code("null") + " for a delete."));
+ body.appendChild(rec);
+ }
+ li.appendChild(body);
+ steps.appendChild(li);
+ });
+ d.appendChild(steps);
+ /* The latest row records only the reader's own clicks, so it collapses
+ like the others when the next change arrives. */
+ if (current) {
+ d.open = st.open["now:" + k] !== false;
+ sum.addEventListener("click", function () { st.open["now:" + k] = !d.open; });
+ } else remember(d, "chg:" + k);
+ return d;
+ }
+ /* The choices stay in place: finished ones are ticked and disabled, and
+ all of them are disabled while a change plays, so nothing jumps. With
+ `ordered`, they're numbered and only the next one can be chosen. */
+ function optionsCard(label, items, isDone, render, pick, ordered) {
+ var c = el("div", "rcr-card rdi-composer");
+ c.appendChild(el("span", "rcr-lbl", esc(label)));
+ var list = el("div", "rdi-options");
+ var next = ordered ? items.filter(function (it) { return !isDone(it); })[0] : null;
+ items.forEach(function (it, i) {
+ var done = isDone(it), later = ordered && !done && it !== next;
+ var mark = done ? 'โ' : ordered ? '' + (i + 1) + "" : "";
+ var b = el("button", "rcr-chip rdi-option" + (done ? " is-done" : "") + (later ? " is-later" : ""), '' +
+ mark + esc(it.label || it.what) + (done ? ' (done)' : "") + "" + render(it));
+ b.type = "button";
+ b.disabled = done || later || st.busy;
+ if (later) b.title = "Do step " + (items.indexOf(next) + 1) + " first.";
+ b.addEventListener("click", function () { pick(it.key); });
+ list.appendChild(b);
+ });
+ c.appendChild(list);
+ return c;
+ }
+
+ /* ---- tab 1: initial sync ---- */
+
+ function renderSync(ctx) {
+ var p = panels.sync;
+ p.innerHTML = "";
+ p.appendChild(el("p", "rcr-lede", "The food delivery app keeps its customers, restaurants, and orders in PostgreSQL. RDI copies them into Redis " +
+ "and keeps them in sync, so the app and its agents read from Redis instead. Choose how RDI stores each row, then deploy the pipeline."));
+ p.appendChild(pipelineCard(ctx));
+ var pick = el("div", "rdi-pick");
+ pick.appendChild(el("span", "rcr-lbl", "Default data structure"));
+ [["json", "JSON"], ["hash", "Hash"]].forEach(function (o) {
+ var b = el("button", "rcr-chip" + (st.structure === o[0] ? " is-on" : ""), o[1]);
+ b.type = "button";
+ b.setAttribute("aria-pressed", st.structure === o[0] ? "true" : "false");
+ b.disabled = st.deployed;
+ b.addEventListener("click", function () { st.structure = o[0]; renderCurrent(); });
+ pick.appendChild(b);
+ });
+ if (st.deployed) pick.appendChild(el("span", "rcr-faint", "Set when the pipeline was deployed. Restart to change it."));
+ p.appendChild(pick);
+ p.appendChild(grid(sourceCard(ctx), redisCard(ctx)));
+ p.appendChild(callout(syncNotes(st, ctx.S, ctx.done)));
+ p.appendChild(controlsRow(!st.deployed ? { label: "Deploy pipeline", fn: deploy } :
+ ctx.done ? { label: "Next: change data capture", fn: function () { advance("cdc"); } } : null));
+ }
+ function deploy() {
+ if (st.busy || st.deployed) return;
+ st.deployed = true;
+ st.sel = null;
+ replay(0, { collapsed: true });
+ }
+
+ /* ---- tab 2: change data capture ---- */
+
+ function renderCdc(ctx) {
+ var p = panels.cdc;
+ p.innerHTML = "";
+ p.appendChild(el("p", "rcr-lede", "The pipeline is streaming. Run statements against PostgreSQL, in any order, and follow each change " +
+ "through the pipeline into Redis."));
+ p.appendChild(pipelineCard(ctx));
+ p.appendChild(optionsCard("Run a statement in PostgreSQL", STATEMENTS, function (s) { return st.ran.indexOf(s.key) >= 0; },
+ function (s) { return "" + esc(sqlOf(s)) + ""; }, runStatement));
+ var ran = st.ran.map(function (k) { return byKey(STATEMENTS, k); });
+ if (ran.length) p.appendChild(changesCard(ctx, ran, STATEMENTS.length));
+ p.appendChild(grid(sourceCard(ctx), redisCard(ctx)));
+ var L = ctx.L && ctx.L.stmt !== POINTS ? ctx.L : null;
+ p.appendChild(callout(cdcNotes(st, L, ctx.done)));
+ var left = STATEMENTS.length - st.ran.length;
+ p.appendChild(controlsRow({ label: "Next: job files", fn: function () { advance("jobs"); },
+ wait: left ? "Run " + (left === STATEMENTS.length ? "all four statements" : left === 1 ? "the last statement" : "the other " + ["", "one", "two", "three"][left] + " statements") + " first." : null }));
+ }
+ function runStatement(key) {
+ if (st.busy || st.ran.indexOf(key) >= 0) return;
+ var from = records(st).length;
+ st.ran.push(key);
+ replay(from);
+ }
+
+ /* ---- tab 3: job files ---- */
+
+ function renderJobs(ctx) {
+ var p = panels.jobs;
+ p.innerHTML = "";
+ p.appendChild(el("p", "rcr-lede", "Default keys like " + code("customers:id:u101") + " work, but your app may expect " + code("customer:u101") +
+ ". A job file customizes how RDI writes one table: its key, its data structure, and its fields."));
+ p.appendChild(pipelineCard(ctx));
+ var job = el("div", "rcr-card rdi-job");
+ job.appendChild(el("div", "rcr-cardhead", 'jobs/customers.yaml' +
+ (st.jobDeployed ? "deployed" : "not deployed") + ""));
+ job.appendChild(jobFile(st.structure));
+ p.appendChild(job);
+ if (st.jobDeployed) {
+ p.appendChild(optionsCard("Apply the job to existing data", ACTIONS, function (a) { return st.actions.indexOf(a.key) >= 0; }, function (a) {
+ return '' + esc(a.question) + "" +
+ (a.key === "points" ? "" + esc(a.detail) + "" : '' + esc(a.detail) + "");
+ }, runAction, true));
+ }
+ /* Once the reset or flush runs, the update is history, so its row collapses. */
+ if (st.actions.indexOf("points") >= 0) p.appendChild(changesCard(ctx, [POINTS], 0, st.actions[st.actions.length - 1] !== "points"));
+ p.appendChild(grid(sourceCard(ctx), redisCard(ctx)));
+ p.appendChild(callout(jobNotes(st, ctx.S, ctx.done, ctx.L)));
+ p.appendChild(controlsRow(!st.jobDeployed ? { label: "Deploy the job", fn: deployJob } : null));
+ }
+ /* The job file, with the two parts that differ from the default
+ highlighted and numbered, and what each one does underneath. */
+ function jobFile(structure) {
+ var box = el("div", "rdi-jobfile"), block = 0, html = "";
+ jobYaml(structure).split("\n").forEach(function (line) {
+ var start = /^transform:/.test(line) ? 1 : /^ key:/.test(line) ? 2 : 0;
+ if (start) block = start;
+ else if (/^output:/.test(line)) block = 0;
+ html += '' + (start ? '' + start + "" : "") + esc(line) + "";
+ });
+ /* YAML depends on indentation, so lines never wrap: the file scrolls
+ sideways instead, and the body spans the widest line so the
+ highlighted blocks reach across it. */
+ box.appendChild(el("pre", "rcr-code rdi-yaml", '' + html + ""));
+ box.appendChild(el("div", "rdi-annlist",
+ '1' + code("remove_field") + " drops the " + code("email") +
+ " column before RDI writes the row, so email addresses never reach Redis.
" +
+ '2' + code("key") + " builds each key from the text " + code("customer:") + " and the row's " +
+ code("id") + ", so Maya's key is " + code("customer:u101") + ". Without a " + code("key") + " block, RDI uses its default pattern, " +
+ code("customers:id:u101") + ".
"));
+ return box;
+ }
+ function deployJob() {
+ if (st.busy || st.jobDeployed) return;
+ var from = records(st).length;
+ st.jobDeployed = true;
+ st.srcTab = "customers";
+ replay(from);
+ }
+ function runAction(key) {
+ if (st.busy || st.actions.indexOf(key) >= 0) return;
+ var from = records(st).length;
+ st.actions.push(key);
+ st.srcTab = "customers";
+ if (key !== "points") st.sel = null;
+ replay(from, { land: key === "points" ? null : "customer:u101" });
+ }
+
+ renderCurrent();
+ }
+
+ function boot() { Array.prototype.forEach.call(document.querySelectorAll(".rdi[data-rdi]"), init); }
+ if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot); else boot();
+
+ /* Exposed for tests. */
+ window.RdiDemo = { TABLES: TABLES, STATEMENTS: STATEMENTS, ACTIONS: ACTIONS, POINTS: POINTS, records: records, apply: apply,
+ keyFor: keyFor, rowValue: rowValue, sqlOf: sqlOf, configYaml: configYaml, jobYaml: jobYaml, statusText: statusText,
+ syncNotes: syncNotes, cdcNotes: cdcNotes, jobNotes: jobNotes, latestStatement: latestStatement, changeSteps: changeSteps };
+})();