29:null 2a:["$","title",null,{"children":"Dataflow Templating | Tom Larkworthy | Observable"}] 2f:T5a0,### Why? There is a reusability gap with notebooks (and spreadsheets for that matter). When you express a complex chain of computation, they build upon a set of initial inputs, unrolled across a series of cells. But then you realize, there is no way you can reuse the same logic with a different set of inputs in the same way you can with a function. The cells are single use. But I love dataflow, notebooks, inspectable cells and the accompanying documentation! The inspectability of intermediate steps with dataflow programming speeds development through tight feedback. I love that I can build a program up one step at a time incrementally without needing to know the end game and without having to frequently rerun a program from scratch. However, the reusability gap bites hard when trying to generalize from a notebook's incrementally developed single solution to reusable library functions. Dataflow templating addresses this reusability problem. We take a working dataflow graph and logically clone it. The clones contain distinct isolated reactive variables, but identical computation, so the values flowing through them can be different, but they all compute the same thing. This avoids workarounds such as a single dataflow chain processing collection values [[1](https://observablehq.com/@tomlarkworthy/visualizer)], or using queues to process values one-at-a-time [[2](https://observablehq.com/@tomlarkworthy/flow-queue)]. 30:T4ab,instancingCost = { const sanitize = (s) => s.replace(/[^\w$]/g, "_"); const templateNames = new Set(template.map((v) => sanitize(v._name))); const captureNames = new Set(instances.captures.map(sanitize)); // both arms name their variables "dynamic ", so the uid comes off the end const stem = (n) => (n.match(/^dynamic (?:bridge )?(.+) [^ ]+$/) || [])[1]; // scoped to this notebook's own module: editor-5 is instanced on this page too, and its bridges // carry the same names (Inputs, htl, Generators) as ours const dynamic = [...runtime._variables] .filter((v) => v._module === template[0]._module) .map((v) => v._name) .filter((n) => typeof n === "string" && n.startsWith("dynamic ")); return { widgets: widgetCount, "cloneDataflow → variables added to this page's runtime": dynamic.filter( (n) => !n.startsWith("dynamic bridge ") && templateNames.has(stem(n)) ).length, "instantiateDataflow → variables added to this page's runtime": dynamic.filter( (n) => n.startsWith("dynamic bridge ") && captureNames.has(stem(n)) ).length, "instantiateDataflow → modules in the sandbox runtime": instances.count }; }31:T5ff,md`### API \`\`\`js // One factory per page. It creates the sandbox Runtime lazily and shares it across instances. instantiateDataflow = instantiateDataflowFactory(runtime.constructor, { builtins: {} // builtins for the sandbox Runtime; default is none }) instance = instantiateDataflow( template, // Variable[] — the same argument cloneDataflow takes { params: {}, // {name: value} injected; the template variable of that name is not created observers: (name) => ({fulfilled, rejected, pending}), // as cloneDataflow's observerFactory watch: onCodeChange // (cb) => unsub; without it the instance ignores later source edits } ) instance.value("widget") // promise of a cell's value instance.observe("widget", obs) // attach an observer afterwards; returns a detach function instance.variables // Map — the instance body instance.captures // names bridged in from the origin module instance.diagnostics // [{code, name}] — warn/mixed-modules, warn/shadowed instance.dispose() // true the first time, false after instantiateDataflow.stats() // {sandboxRuntime, bridges, modules} instantiateDataflow.destroy() // dispose the sandbox Runtime and every bridge \`\`\` \`params\` is the one thing \`cloneDataflow\` has no answer for. The parameter is defined ahead of the body, so the template variable of that name is never created and everything downstream reads the injected value.`32:T4cb,md`### Captures A name a template variable reads but does not define — \`Inputs\`, \`htl\`, the shared \`time\` range — is a **capture**, and it cannot resolve across runtimes. Each one gets a bridge: a single variable in the origin module named \`dynamic bridge \`, republished into the sandbox as an async generator. Bridges are keyed by \`(module, name)\` and shared by every instance, which is why the count above stops growing after the first widget. \`invalidation\`, \`visibility\` and \`@variable\` are never bridged. They are symbols the runtime resolves per variable, so the sandbox mints its own. A capture reaches the instance one tick after the origin settles it. That latency is the real cost of a bridge. **Writes still cross.** A bridge republishes the capture's *value*, and for a \`mutable\` or a \`viewof\` element that value is the same object the origin holds — so \`mutable count = 42\` in a template runs the origin's setter, and the new value returns through the same bridge. What no bridge does is let a variable in the origin module depend on one in the sandbox. \`cloneDataflow\` cannot do that either: its clones are named \`dynamic \` and nothing references them.`33:T4c9,md`### Which to use \`cloneDataflow\` is still here and still supported. Its instances are ordinary variables in the page, so a debugger can plot them and an exporter can serialise them — sometimes that is exactly what you want. The case for the sandbox is that those same variables are indistinguishable from real cells. On [@tomlarkworthy/editor-5](https://observablehq.com/@tomlarkworthy/editor-5), 862 of 3107 variables were clones, and seven unrelated modules had grown a hand-rolled \`dynamic \` name filter to keep them out of the exporter, the change history and three cell lists. Two of those filters are correctness guards rather than cosmetics. Moving editor-5 onto the sandbox took the page to 2297 variables and its module scope from 1031 to 212. Not speed. The pass that walks those variables cost 0.33ms with them and 0.19ms without, and it is debounced. To migrate, \`cloneViaSandbox\` has \`cloneDataflow\`'s signature and returns the same disposal function, so a call site moves by one identifier: \`\`\`js dispose = cloneViaSandbox(template, observerFactory) \`\`\` All four consumers in the lopecode corpus moved on 2026-08-09: \`editor-5\`, \`robocoop-2\`, \`robocoop-3\` and \`parametric-svg\`.`34:T497,function cloneDataflow(variables, observerFactory = () => ({})) { const uid = Math.random().toString(36).slice(2); const sanitize = (s) => s.replace(/[^\w$]/g, "_"); const cloneNameOf = (v) => `dynamic ${sanitize(v._name)} ${uid}`; const sources = new Map(variables.map((v) => [v._name, v])); const clones = new Map(); let runtime; for (const [name, v] of sources) { const inputs = v._inputs.map((i) => sources.has(i._name) ? cloneNameOf(i) : i._name ); const t = v._module .variable(observerFactory(v._name)) .define(cloneNameOf(v), inputs, v._definition); clones.set(name, t); if (!runtime) runtime = t._module._runtime; } const unobserve = observeSet(runtime._variables, () => { for (const [name, v] of sources) { const t = clones.get(name); if (v._definition !== t._definition) { const inputs = v._inputs.map((i) => sources.has(i._name) ? cloneNameOf(i) : i._name ); t.define(cloneNameOf(v), inputs, v._definition); } } }); return () => { for (const [name, v] of clones) v.delete(); sources.clear(); clones.clear(); unobserve(); }; }35:T1dcd,instantiateDataflowFactory = { // instantiateDataflow — cloneDataflow, but the instance lives in a sandbox Runtime. // // cloneDataflow defines its clones into the module it copied from, so every instance is a variable // in the primary runtime. Seven unrelated modules carry a `dynamic ` name filter to keep those out // of the exporter, the change history, the cell map and three cell lists. This instantiates into a // separate Runtime instead, so there is nothing to filter. // // Import-free on purpose: `make-cells.mjs` lifts this file into notebook cells verbatim, so the // Runtime constructor arrives as a factory argument rather than an import. const SENTINELS = new Set(["invalidation", "visibility", "@variable"]); const sanitize = (s) => String(s).replace(/[^\w$]/g, "_"); // A one-way live edge from a variable in the primary runtime into the sandbox. One per // (module, name), shared by every instance that captures it, refcounted. function makeBridge(originModule, name, uid) { const waiters = new Set(); let state = { v: -1, s: "pending" }; let seq = 0; const emit = (next) => { state = next; for (const w of waiters) w(); waiters.clear(); }; const holder = originModule .variable({ pending() {}, fulfilled(value) { emit({ v: seq++, s: "ok", value }); }, rejected(error) { emit({ v: seq++, s: "err", error }); } }) // `dynamic ` prefix so the five existing corpus guards that test for it already exclude these. .define(`dynamic bridge ${sanitize(name)} ${uid}`, [name], (x) => x); const changed = () => new Promise((r) => waiters.add(r)); // Yields only when the upstream value actually changes; re-yielding on every pull would spin the // runtime, which schedules the next `next()` immediately after each yield. async function* follow() { let seen = -1; for (;;) { while (state.v === seen || state.s === "pending") await changed(); seen = state.v; if (state.s === "err") throw state.error; yield state.value; } } return { name, follow, refs: 0, variable: holder, destroy() { holder.delete(); waiters.clear(); } }; } function instantiateDataflowFactory(Runtime, options = {}) { const { builtins = {} } = options; let sandbox = null; const sandboxOf = () => sandbox || (sandbox = new Runtime(builtins)); // module -> name -> bridge const bridges = new Map(); // runtime._modules is keyed by the define function and only records runtime.module(define), // so anonymous instance modules never appear there — count them here instead. const live = new Set(); let uidSeq = 0; const nextUid = () => `b${(uidSeq++).toString(36)}${Math.random().toString(36).slice(2, 8)}`; function acquire(originModule, name) { let byName = bridges.get(originModule); if (!byName) bridges.set(originModule, (byName = new Map())); let bridge = byName.get(name); if (!bridge) byName.set(name, (bridge = makeBridge(originModule, name, nextUid()))); bridge.refs++; return bridge; } function release(originModule, bridge) { if (--bridge.refs > 0) return; const byName = bridges.get(originModule); if (byName) byName.delete(bridge.name); bridge.destroy(); } /** * variables Variable[] the template, exactly as cloneDataflow takes it * options * params {name: value} injected; shadows a template variable of the same name * observers (name) => observer same shape as cloneDataflow's observerFactory * watch (cb) => unsub fires when upstream code may have changed (pass observeSet) */ function instantiateDataflow(variables, opts = {}) { if (!variables || !variables.length) throw new Error("instantiateDataflow: no variables"); const { params = {}, observers = () => ({}), watch = null } = opts; const originModule = variables[0]._module; const templateNames = new Set(variables.map((v) => v._name)); const paramNames = new Set(Object.keys(params)); const mod = sandboxOf().module(); live.add(mod); const diagnostics = []; for (const v of variables) { if (v._module !== originModule) diagnostics.push({ code: "warn/mixed-modules", name: v._name }); if (v._shadow && v._shadow.size) diagnostics.push({ code: "warn/shadowed", name: v._name }); } const created = []; const held = []; for (const [name, value] of Object.entries(params)) created.push(mod.variable().define(name, [], () => value)); const captured = new Set(); for (const v of variables) { if (paramNames.has(v._name)) continue; for (const i of v._inputs) { const n = i._name; if (typeof n !== "string") continue; if (templateNames.has(n) || paramNames.has(n) || SENTINELS.has(n)) continue; captured.add(n); } } for (const name of captured) { const bridge = acquire(originModule, name); held.push(bridge); created.push(mod.variable().define(name, [], () => bridge.follow())); } // The body, under its real names — no uid mangling, because the module is private. const body = new Map(); for (const v of variables) { if (paramNames.has(v._name)) continue; const inputs = v._inputs.map((i) => i._name); const t = mod.variable(observers(v._name)).define(v._name, inputs, v._definition); body.set(v._name, t); created.push(t); } // Same trigger cloneDataflow uses: re-define a clone whose source definition changed. let unwatch = null; if (watch) { unwatch = watch(() => { for (const v of variables) { if (paramNames.has(v._name)) continue; const t = body.get(v._name); if (!t || v._definition === t._definition) continue; t.define(v._name, v._inputs.map((i) => i._name), v._definition); } }); } let disposed = false; return { module: mod, variables: body, captures: [...captured], diagnostics, value: (name) => mod.value(name), observe(name, observer) { const v = mod.variable(observer).define(null, [name], (x) => x); created.push(v); return () => v.delete(); }, dispose() { if (disposed) return false; disposed = true; if (unwatch) try { unwatch(); } catch {} // Reverse order, then sweep. Deleting a variable that still has outputs does not free its // scope entry — variable.js:129-137 substitutes a fresh implicit variable so references // stay wired — so dependents must go first, and whatever survives is swept afterwards. for (let i = created.length - 1; i >= 0; i--) created[i].delete(); created.length = 0; for (let guard = 0; guard < 8 && mod._scope.size; guard++) for (const v of [...mod._scope.values()]) v.delete(); body.clear(); live.delete(mod); for (const b of held) release(originModule, b); held.length = 0; return true; } }; } instantiateDataflow.stats = () => { let total = 0; for (const byName of bridges.values()) total += byName.size; return { sandboxRuntime: sandbox, bridges: total, modules: live.size }; }; instantiateDataflow.destroy = () => { for (const [m, byName] of bridges) for (const b of byName.values()) b.destroy(); bridges.clear(); live.clear(); if (sandbox) sandbox.dispose(); sandbox = null; }; return instantiateDataflow; } return instantiateDataflowFactory; }36:[{"id":"2c9efeb6f92ffdbfd4643ca6749a24a323f5692d6658c99e1f80448cd10d863537917ccf4d1f128ec8e659e4bf8c9a33fb90d6bcd3257eff7ea7987f72584235","href":"https://static.observableusercontent.com/files/2c9efeb6f92ffdbfd4643ca6749a24a323f5692d6658c99e1f80448cd10d863537917ccf4d1f128ec8e659e4bf8c9a33fb90d6bcd3257eff7ea7987f72584235","name":"dataflow_templating@1.svg","type":"image/svg+xml","lastModified":1765110368850.482,"size":19541}] 2d:{"id":"c49519b3eb941810","slug":"dataflow-templating","title":"Dataflow Templating","thumbnail":"d9b7d8bad3de85323497f886abd9b81a7198fe792128ccc4943748d2787fa662","access_level":"public","create_time":"$D2025-12-07T12:26:08.850Z","update_time":"$D2026-08-09T21:58:06.875Z","view_time":null,"first_public_time":"$D2025-12-07T19:52:41.252Z","has_unpublished_edits":null,"fork":true,"stars":6,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":1458,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"},{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"de6effaee7717612","slug":"patterns","title":"patterns","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"Dataflow Templating","cells":[{"id":0,"value":"# Dataflow Templating\n\n## The missing generative abstraction for dataflow programming.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1402,"value":"\n~~~js\nimport {instantiateDataflow, cloneViaSandbox, cloneDataflow, thisModule, lookupVariable} from '@tomlarkworthy/dataflow-templating'\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1153,"value":"dataflow_templating1 = FileAttachment(\"dataflow_templating@1.svg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"# Example: A Dashboard Charting Widget","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"With a dashboard we often want to show multiple slices of a high dimensional datasource but with a shared time axis.\n\nWe start with defining the prototype.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"dataset = pizza","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"time = [startDay, endDay]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"viewof startDay = Inputs.date({\n label: \"startDay\",\n value: d3.min(dataset, (d) => d.order_date)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"viewof endDay = Inputs.date({\n label: \"endDay\",\n value: d3.max(dataset, (d) => d.order_date)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"For each widget should look at a different dimension.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"viewof dimension = Inputs.select(Object.getOwnPropertyNames(dataset[0]), {\n label: \"dimension\",\n value: \"orders\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"pizzaChoices = [...new Set(dataset.map((d) => d.name))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"and slice by pizza type.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":410,"value":"viewof pizzaChoice = Inputs.select(pizzaChoices, {\n label: \"pizza\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"With a dimension and slice, we can plot a timeseries. Note the chart is reactive to the UI earlier in the dataflow. If you change the `startDay` or `endDay` the chart axis updates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"chart = Plot.plot({\n title: `${pizzaChoice}, ${dimension}`,\n x: {\n domain: time\n },\n marks: [\n Plot.dot(\n dataset.filter((d) => d.name == pizzaChoice),\n {\n x: \"order_date\",\n y: dimension,\n symbol: \"dot\" // or square?\n }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"We want to combine all our UI controls and the chart into a single HTML widget","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"viewof combine = Inputs.toggle({ label: \"smoosh into single component\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"#### assembled widget prototype","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"widget = combine\n ? htl.html`

\n ${viewof dimension}\n ${viewof pizzaChoice}\n ${chart}\n

`\n : \"You need to tick combine to see the UI assembled into a element\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"## Cloning the dataflow","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"Now that example was cool, we built it up incrementally. It is interactive, so we can test it easily, but it's a single chart, and we want a dashboard! So this is where cloning the dataflow will allow us to extract this chain of logic into a single programmable unit, based on the prototype.\n\nFirst we gain access to the enclosing module hosting the variables via `thisModule` from the `runtime-sdk`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"viewof myModule = thisModule()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"Then we find the variables we wish to clone, using `lookupVariable` from `runtime-sdk`. Note a `viewof` is really two reactive variables so you need them both (`viewof foo` _and_ `foo`)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1255,"value":"template = lookupVariable(\n [\n \"viewof dimension\",\n \"dimension\",\n \"viewof pizzaChoice\",\n \"pizzaChoice\",\n \"chart\",\n \"widget\"\n ],\n myModule\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1269,"value":"Then we call `cloneDataflow` with the variables to be extracted and an Observer factory to be notified of value changes. The Observer factory argument is the same signature used in the [Observable Runtime API](https://github.com/observablehq/runtime?tab=readme-ov-file#runtimemoduledefine-observer). \n\n```js\nobserver: (name: string) => ({\n fulfilled: (value) => unknown,\n error: (error) => unknown,\n pending: () => unknown\n}) | null\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1331,"value":"For simple rendering of a repeated UI component, we listen only to the \"widget\" values, and pipe the fulfilled values to an enclosing Generator's\\* notify, so that the HTML element in the clone becomes exposed to the top level notebook.\n\n\\* [Introduction to Generators](https://observablehq.com/@observablehq/introduction-to-generators)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1216,"value":"Generators.observe((notify) => {\n return cloneDataflow(\n // variables we wish to duplicate\n template,\n // Observer factory to pass to the template variables (same as Runtime API)\n (name) => {\n if (name == \"widget\")\n // we only care about the internal \"widget\" cell.\n return {\n // We stream the widget variable's values (a HTML form)\n // to be the result of this enclosing cells Generator.\n fulfilled: notify\n };\n }\n );\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"auto_smoosh = {\n visibility().then(() => {\n viewof combine.value = true;\n viewof combine.dispatchEvent(new Event(\"input\"));\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"This is cool, we have a totally independent copy of the original dataflow. This is useful enough for templating common UI components that are always intended to be top level cells.\n\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":510,"value":"The other cool thing to note is that we did not include the timerange when cloning. That variable was not templated so all the widgets share that reactive reference and so have aligned time ranges.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":529,"value":"### One-to-many, Reading and Writing\n\nFor a dashboard we want to create `n` widgets and arrange them on a single HTML element. Reading out a single dataflow element and putting in a cell can be done with a generator, but when we want to create many, we can't associate every widget with a unique parent reactive variable.\n\nInstead, we can use the Observable inspector (itself an implementor of the Observer API) to stream the cell changes to a DOM element. Furthermore, sometimes we want to manipulate the dataflow inside the clones programatically. To achieve this we resolve the first value of a control view to a promise, gaining access to the underlying view.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":552,"value":"dataflows = Array.from({ length: widgetCount }).map(() => {\n const widget = document.createElement(\"DIV\");\n const control = new Promise((resolve) => {\n invalidation.then(\n cloneDataflow(template, (name) => {\n if (name == \"widget\") {\n return new Inspector(widget);\n }\n if (name == \"viewof pizzaChoice\") {\n return {\n fulfilled: resolve\n };\n }\n })\n );\n });\n return {\n widget,\n control\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"viewof widgetCount = Inputs.range([1, 4], {\n label: \"widget count\",\n step: 1,\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"From the array of DOM elements we can easily render them to a container HTML element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":531,"value":"htl.html`

\n \n ${dataflows.map((df) => df.widget)}\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"Inputs.bind(\n Inputs.date({\n label: \"startDay\"\n }),\n viewof startDay\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"Inputs.bind(\n Inputs.date({\n label: \"endDay\"\n }),\n viewof endDay\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"An array of views also can be manipulated programmatically, which is changing the individual dataflow values inside the clones.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1297,"value":"controls = Promise.all(dataflows.map((df) => df.control))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"Inputs.button(\"randomize pizzaChoices\", {\n reduce: () => {\n controls.forEach((control) => {\n control.value =\n pizzaChoices[Math.floor(Math.random() * pizzaChoices.length)];\n control.dispatchEvent(new Event(\"input\"));\n });\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"### Reactive code updates\n\nSo far we have shown how to duplicate dataflow logic and pass independent data through the clones. There is one more trick that allows changes to the source dataflow logic to propagate to the clones. Try changing the chart plot's symbol `dot` mark to `square` [here](#chart) in source code to see for yourself.... all the clones update when the source dataflow's logic changes too.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":739,"value":"### ⚠️ Dataflow topological changes\n\nBeyond changing the code of an individual variable, you might add or remove variables from the source dataflow, changing the topology of the dataflow. There is no support for reacting to that. Generally you will need to change the templating parameters anyway so it did not seem worth dealing with the complexity when often you will cause a broken state anyway if the `cloneDataflow` call is not adjusted. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":745,"value":"## Releasing Resources\n\n`cloneDataflow` creates non-visible reactive variables. These will accumulate over time unless you call the returned disposal function. You can use the [dataflow debugger](https://observablehq.com/@tomlarkworthy/debugger) to help identify leaks as it is able to plot a variables in the runtime, even those not visible in the notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1439,"value":"md`## instantiateDataflow\n\nEverything above defines the clones into the module they were copied from, so each instance is a set of variables in the page's own runtime. \\`instantiateDataflow\\` builds the instance in a **second \\`Runtime\\`** instead. The templating is the same — same \\`template\\`, same observer factory — but the page's runtime never sees the instance.\n\nHere is the pizza widget again, instanced that way, with a live count of what each approach costs the page. The \\`cloneDataflow\\` figure counts every instance on the page, including the single widget further up, so read the slope and not the number: six more variables per widget, against none.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1453,"value":"Inputs.bind(Inputs.range([1, 4], { label: \"widgets\", step: 1 }), viewof widgetCount)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"instances = {\n const root = document.createElement(\"div\");\n root.style = \"display: flex; flex-wrap: wrap; gap: 4px;\";\n\n const live = Array.from({ length: widgetCount }, () => {\n const cell = document.createElement(\"div\");\n root.append(cell);\n return instantiateDataflow(template, {\n observers: (name) => (name === \"widget\" ? new Inspector(cell) : null)\n });\n });\n invalidation.then(() => live.forEach((instance) => instance.dispose()));\n\n root.captures = live[0] ? live[0].captures : [];\n root.count = live.length;\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1455,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1442,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"## cloneDataflow","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1050,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1443,"value":"md`## instantiateDataflow`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1445,"value":"instantiateDataflow = instantiateDataflowFactory(runtime.constructor, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"cloneViaSandbox = (variables, observerFactory = () => ({})) => {\n const inst = instantiateDataflow(variables, {\n observers: observerFactory,\n watch: onCodeChange\n });\n return () => inst.dispose();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"## References\n\nWhile this Dataflow Templating implementation is for Observable Runtime Dataflow. The overarching concept is applicable to any dataflow languages in the style of `FrTime`, see _\"Embedding Dynamic Dataflow in a Call-by-Value Language\"_ 2006, Gregory H. Cooper, Shriram Krishnamurthi ([pdf](https://cs.brown.edu/~sk/Publications/Papers/Published/ck-frtime/paper.pdf))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"import { getPromiseState, descendants, runtime, thisModule, lookupVariable, toObject, observeSet, onCodeChange, observe } from \"@tomlarkworthy/runtime-sdk\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"import { inspect, Inspector } from \"@tomlarkworthy/inspector\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2e:"$2d:body"