2c:null 2d:["$","title",null,{"children":"Visualizer: Own Cell Renderer | Tom Larkworthy | Observable"}] 32:T428,## Instructions The ordering of the cells is synced to the insertion of the runtime variable set, so there is a **single global ordering of cells** that all visualizers share. While it might make more sense for each visualizer to have its own ordering, the advantage of using the runtime ordering is that this is preserved when [single file exporting](https://observablehq.com/@tomlarkworthy/exporter). Thus, the global ordering changes are be preserved after export. Usage ```js visualizer(runtime, { // get a runtime reference from @mootari/access-runtime invalidation, // the visualizer need a reference to the invalidation promise to tear down DOM state if being used dynamically module, // default main, filter: (cell_name, variables, cellIndex, status) => true, // filter what variables are displayed inspector: /* default */ Inspector.into, // factory for creating cells detachNodes: false, // detach DOM nodes from their current parent when evaluating, so new visualizer can steal them classList: "" // additional class string to add }) ```33:T721,### Differences to other works - The Observable's [export cell renderer](https://observablehq.com/documentation/embeds/advanced#rendering-cells) describes a pattern tofirst create a `div`, a CSS style tag, and then use Inspector.into when starting the runtime, - [@asg017/v0-6-0-of-the-unofficial-observablehq-compiler](https://observablehq.com/@asg017/v0-6-0-of-the-unofficial-observablehq-compiler#cell-214) follows a similar pattern of setting up the framing and rendering of the runtime before starting a notebook using Inspector.into This approach here is very different. The problem with the above approaches is only one Inspector can be used, _**and**_ it has to be decided before running the notebook in a privileged context, and you have to select a CSS stylesheet all in advance. In contrast, the [visualizer](https://observablehq.com/@tomlarkworthy/visualizer) allows multiple Inspectors to be attached dynamically after the runtime is started, and the can be added from inside the notebook environment like any other notebook logic. The workhorse of the methodology is being able to attached Observers to variables dynamically, which is implemented [here](https://observablehq.com/@tomlarkworthy/runtime-sdk#cell-159). So this means you no longer need to choose a stylesheet upfront, or add a div, or even instantiate an Inspector before starting a runtime, as these decisions can be done inside the loaded notebook, allowing you to start the runtime _headless_, then add multiple views of the notebook as needed. ```html ``` 34:T4d0,why = md`## How panes are built A pane is an \`instantiateDataflow\` instance of \`vizPaneTemplate\`, parameterised by its root, module, filter and inspector. Each drawn cell is an instance of \`vizCellTemplate\`, parameterised by its variable. A cell's observer is released through its instance's \`invalidation\`, so deleting a cell or disposing a pane is \`instance.dispose()\`. Instances live in [dataflow templating](https://observablehq.com/@tomlarkworthy/dataflow-templating)'s sandbox Runtime, so the page runtime gains no variables per pane or per cell. \`vizPaneCells\` reads [cell-map](https://observablehq.com/@tomlarkworthy/cell-map)'s \`liveCellMap\`, which groups Notebook Kit variables (\`cell N\`, \`viewof$x\`, projections) as well as classic ones. A cell defined by [js-toolchain](https://observablehq.com/@tomlarkworthy/js-toolchain)'s \`defineCell\` renders its Notebook Kit display root, attached once through js-toolchain's \`attachDisplay\`, so \`display()\` called twice shows two nodes. Other cells render through the inspector. \`syncers\` is \`vizSynced\`, the count of pane syncs; editor-5 reads it as a trigger. A template edit reaches panes and cells created after it, not nodes already mounted.`35:T50c,visualizer = ( runtime, { invalidation, module = main, filter = () => true, inspector = Inspector.into, detachNodes = false, classList = "" } = {} ) => { const root = document.createElement("div"); root.className = `observablehq-root lope-viz ${classList}`.trim(); root.style.cssText = "min-height: 2rem; min-width: 2rem;"; const visualizer = document.createElement("div"); visualizer.className = "lopecode-visualizer"; visualizer.appendChild(root); visualizer.detachNodes = detachNodes; Object.assign(root, { filter, module, inspector, detachNodes, visualizer }); const factory = inspector(root); const vizInspector = (variable, ...args) => { const observer = factory(variable, ...args); observer._node.variable = variable; if (variable._name) observer._node.setAttribute("cell", variable._name); return observer; }; const pane = instantiateDataflow(vizPaneTemplate, { params: { vizRoot: root, vizModule: module, vizFilter: filter, vizInspector, vizDetachNodes: detachNodes }, observers: (name) => (name === "vizPaneSync" ? {} : undefined), watch: onCodeChange }); root.pane = pane; invalidation?.then(() => { pane.dispose(); root.remove(); visualizer.remove(); }); return visualizer; }36:Tb09,vizPaneSync = { if (!vizRoot) return 0; const { cells, headers } = vizPaneState; const desired = []; const seenVars = new Set(); const seenHeaders = new Set(); const isKnown = (imported) => { try { return !!vizModule._scope.has(imported); } catch { return true; } }; vizPaneCells.forEach((cell, i) => { if (cell?.type === "import") { const ii = cell.importInfo; if (!ii || ii.type !== "import" || ii.specifier === "builtin") return; const key = `${String(ii.specifier ?? "")}#${String(cell.name ?? i)}`; seenHeaders.add(key); let header = headers.get(key); if (!header) headers.set(key, (header = createImportCellHeader(cell))); header.__viz.cell = cell; header.variable = cell.variables[0]; header.__viz.statement.replaceChildren(renderImportCell(cell, { isKnown })); desired.push(header); return; } const v = drawnVariable(cell); if (!v) return; // a nested visualizer that detaches its nodes is not drawn again here if (v._value?.classList?.contains?.("lopecode-visualizer") && v._value.detachNodes) return; seenVars.add(v); let entry = cells.get(v); // an exported Notebook Kit head registers its display state on first compute, after its node was made if (entry && entry.nk !== !!displayStateOf(v)) { cells.delete(v); entry.instance.dispose(); entry = undefined; } if (!entry) { const instance = instantiateDataflow(vizCellTemplate, { params: { vizVariable: v, vizInspector, vizDetachNodes }, observers: (name) => (name === "vizCellNode" ? {} : undefined) }); entry = { instance, node: instance.value("vizCellNode"), nk: !!displayStateOf(v) }; cells.set(v, entry); } desired.push(entry); }); for (const [v, entry] of [...cells]) { if (seenVars.has(v)) continue; cells.delete(v); entry.instance.dispose(); const node = await entry.node.catch(() => null); if (node?.parentNode === vizRoot) node.remove(); } for (const [key, header] of [...headers]) { if (seenHeaders.has(key)) continue; headers.delete(key); header.remove(); } const nodes = (await Promise.all(desired.map((d) => (d.instance ? d.node.catch(() => null) : d)))).filter(Boolean); const managed = (n) => !!n?.classList?.contains("observablehq"); const keep = new Set(nodes); for (const child of [...vizRoot.childNodes]) if (managed(child) && !keep.has(child)) child.remove(); let cursor = vizRoot.firstChild; for (const node of nodes) { while (cursor && !managed(cursor)) cursor = cursor.nextSibling; if (node === cursor) { cursor = cursor.nextSibling; continue; } vizRoot.insertBefore(node, cursor); } vizSyncEvents.notify(); return nodes.length; }37:T6fa,renderImportCell = (cell, { isKnown = () => true } = {}) => { const ii = cell?.importInfo ?? null; const span = document.createElement("span"); span.className = "observablehq--inspect observablehq--import"; if (!ii || ii.type !== "import") { span.appendChild(document.createTextNode("invalid importInfo")); return span; } if (typeof ii.source === "string" && ii.source.trim().startsWith("import")) { span.appendChild(document.createTextNode(ii.source.trim())); return span; } const moduleId = String(ii.notebook ?? ii.specifier ?? ii.from ?? "").trim(); const specs = (Array.isArray(ii.specifiers) ? ii.specifiers : []) .map((s) => ({ imported: s?.imported == null ? "" : String(s.imported), local: s?.local == null ? "" : String(s.local) })) .filter((d) => d.imported || d.local); span.appendChild(document.createTextNode("import {")); specs.forEach((s, i) => { if (i) span.appendChild(document.createTextNode(", ")); const imported = s.imported || s.local; const local = s.local || s.imported; const a = document.createElement("a"); a.textContent = imported; if (isKnown(imported) && moduleId) a.href = navHref({ open: moduleId, cell: imported }); else a.className = "observablehq--unknown"; span.appendChild(a); if (imported !== local) span.appendChild(document.createTextNode(` as ${local}`)); }); span.appendChild(document.createTextNode("} from ")); if (!moduleId) { span.appendChild(document.createTextNode(`"${String(ii.from ?? ii.specifier ?? "")}"`)); return span; } const fromLink = span.appendChild(document.createElement("a")); fromLink.href = navHref({ open: moduleId }); fromLink.textContent = `"${String(ii.from ?? ii.specifier ?? moduleId)}"`; return span; }38:Tb77,vt = { const skipped = "skipped: turn on 'Run visualizer tests' (or add &viz_tests to the hash) to run this scenario"; const host = () => { let h = document.getElementById("viz-tests-host"); if (!h) { h = Object.assign(document.createElement("div"), {id: "viz-tests-host"}); h.style.cssText = "position:absolute;left:-10000px;top:0;width:640px"; document.body.appendChild(h); } return h; }; const until = async (fn, what = "condition", timeout = 8000) => { const t0 = Date.now(); for (;;) { let ok = false; try { ok = fn(); } catch {} if (ok) return ok; if (Date.now() - t0 > timeout) throw new Error(`vt.until: ${what} not reached within ${timeout}ms`); await new Promise((r) => setTimeout(r, 50)); } }; // for asserting that nothing happens: long enough for runtime_variables -> cellMap -> syncers to run more than once const quiet = (ms = 2500) => new Promise((r) => setTimeout(r, ms)); const titles = new WeakSet(); const shown = (n) => n.classList.contains("observablehq") && !titles.has(n.variable) && n.variable?._type !== 2 && n.getAttribute("data-module-name") !== "builtin"; const nodes = (root) => [...root.children].filter(shown); const label = (n) => n.classList.contains("lope-viz-import") ? `import ${n.getAttribute("data-module-name")}` : n.getAttribute("cell") ?? ""; const names = (root) => nodes(root).map(label); const node = (root, name) => nodes(root).find((n) => n.getAttribute("cell") === name); const text = (root, name) => node(root, name)?.textContent ?? null; const own = (module) => [...runtime._variables].filter((v) => v._module === module && v._type === 1 && !titles.has(v)); let counter = 0; const scenario = (fn, opts = {}) => !viz_tests_enabled ? Promise.resolve(skipped) : ui.scenario(async (t) => { const made = [], mounted = []; const fixture = () => { const name = `@viz-tests/fixture-${Date.now().toString(36)}-${counter++}`; made.push(name); const module = createModule(name, runtime); titles.add(module.variable().define("title", [], () => name)); return module; }; const mount = (module, options = {}) => { let invalidate; const invalidation = new Promise((r) => (invalidate = r)); const el = visualizer(runtime, {invalidation, module, ...options}); host().appendChild(el); const m = {el, root: el.firstElementChild, unmount: () => { invalidate(); el.remove(); }}; mounted.push(m); return m; }; try { return await fn({...t, fixture, mount, until, quiet, nodes, names, node, text, own}); } finally { for (const m of mounted) m.unmount(); for (const name of made) { try { deleteModule(name, runtime); } catch {} } await ui.settle(); } }, {timeout: 30000, ...opts}); return {scenario, skipped, host, until, quiet, nodes, names, node, text, own}; }39:T6f6,test_viz_imports_render_one_header_per_module = vt.scenario(async (t) => { const urls = [...runtime._variables].find((v) => v._name === "module @tomlarkworthy/lopepage-urls" && v._value)?._value; expect(!!urls).toBe(true); const module = t.fixture(); const a = module.variable().define("a", [], () => 1); module.variable().define("module @tomlarkworthy/lopepage-urls", [], () => urls); module.variable().define("linkTo", ["module @tomlarkworthy/lopepage-urls", "@variable"], (_, v) => v.import("linkTo", _)); module.variable().define("nh", ["module @tomlarkworthy/lopepage-urls", "@variable"], (_, v) => v.import("navHref", "nh", _)); const {root} = t.mount(module); await t.until(() => root.querySelector(".lope-viz-import[data-module-name='@tomlarkworthy/lopepage-urls'] a"), "import header with links"); const headers = root.querySelectorAll(".lope-viz-import[data-module-name='@tomlarkworthy/lopepage-urls']"); expect(headers.length).toBe(1); const header = headers[0]; expect(header.getAttribute("data-cell-type")).toBe("import"); expect(t.names(root)).toEqual(["a", "import @tomlarkworthy/lopepage-urls"]); const statement = header.querySelector(".lope-viz-import-statement").textContent; expect(statement).toContain("linkTo"); expect(statement).toContain("as nh"); expect(statement).toContain('"@tomlarkworthy/lopepage-urls"'); const link = [...header.querySelectorAll("a")].find((el) => el.textContent === "linkTo"); expect(link.getAttribute("href")).toContain("open="); a.define("a", [], () => 2); await t.until(() => t.text(root, "a")?.includes("2"), "a = 2"); expect(root.querySelector(".lope-viz-import[data-module-name='@tomlarkworthy/lopepage-urls']") === header).toBe(true); return `one import header: ${statement}`; })3a:T4c4,test_viz_filter_sees_every_cell_with_its_index = vt.scenario(async (t) => { const module = t.fixture(); module.variable().define("a", [], () => 1); module.variable().define("b", [], () => 2); module.variable().define("c", [], () => 3); const calls = []; const filter = (name, variables, i, state) => { calls.push({name, i, state, variables}); return name !== "b"; }; const {root} = t.mount(module, {filter}); await t.until(() => t.names(root).join() === "a,c" && t.text(root, "c")?.includes("3"), "a and c rendered, b filtered out"); const passes = []; for (const c of calls) { if (c.i === 0) passes.push([]); passes.at(-1).push(c); } for (const p of passes) { expect(p.map((c) => c.i)).toEqual(p.map((_, k) => k)); expect(new Set(p.map((c) => c.state)).size).toBe(1); } expect(new Set(passes.map((p) => p[0].state)).size).toBe(passes.length); const last = passes.at(-1); expect(last.map((c) => c.name)).toEqual(["title", "a", "b", "c"]); expect(last.every((c) => Array.isArray(c.variables) && c.variables[0]?._name === c.name)).toBe(true); return `${passes.length} sync passes, each calling filter for every cell with i = 0.. and one fresh state object`; })3b:T4f7,test_viz_custom_inspector_nodes_carry_their_variable = vt.scenario(async (t) => { const module = t.fixture(); module.variable().define("a", [], () => 1); module.variable().define("b", ["a"], (a) => a + 1); const roots = []; const inspector = (root) => { roots.push(root); return (variable) => { const node = document.createElement("div"); node.className = "observablehq viz-custom-probe"; return { _node: node, pending() { node.dataset.state = "pending"; }, fulfilled(value) { node.dataset.state = "fulfilled"; node.textContent = `${variable._name}=${value}`; }, rejected(error) { node.dataset.state = "rejected"; node.textContent = String(error); } }; }; }; const {root} = t.mount(module, {inspector}); await t.until(() => t.nodes(root).map((n) => n.textContent).join() === "a=1,b=2", "custom nodes a=1, b=2"); expect(roots.length).toBe(1); expect(roots[0] === root).toBe(true); for (const n of t.nodes(root)) { expect(n.classList.contains("viz-custom-probe")).toBe(true); expect(n.variable._name).toBe(n.getAttribute("cell")); expect(n.dataset.state).toBe("fulfilled"); } return "the factory was called once with the root; its nodes carry .variable and cell="; })3c:[] 30:{"id":"f6282eaf525a00db","slug":"visualizer","title":"Visualizer: Own Cell Renderer","thumbnail":"5088db591a169753248f1bb2f7d467991a1fdf3b941dc000cfd4a07a1abd636f","access_level":"public","create_time":"$D2024-12-08T17:53:20.186Z","update_time":"$D2026-09-15T16:52:15.410Z","view_time":null,"first_public_time":"$D2024-12-28T16:25:09.644Z","has_unpublished_edits":null,"fork":{"id":"3671f17adcc7c100","slug":"editable-exports","title":"👋 Editor with Exporter","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"stars":4,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":2496,"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":5,"collection":{"id":"cf72f19f55f3a048","slug":"lopebook","title":"lopecode","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"titling":"auto","title":"Visualizer: Own Cell Renderer","cells":[{"id":0,"value":"# Visualizer: Own Cell Renderer\n\nInstead of cells being rendered into a `div` that is setup before the runtime is started, we invert, by rendering cells into a div hosted _inside_ the notebook. Through this inversion, it is possible to change radically change how notebook renders within userspace. For example, creating a minimap, grid or both at the same time. \n\n```js\nimport {visualizer, lopeviz_handle_css} from '@tomlarkworthy/visualizer'\n```\n\nOn its own this notebook is not very useful. It lays a foundation for total transformation of how notebooks can be rendered, but those new formats need to be developed.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"title","database":"$undefined"},{"id":2049,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"lopeviz_handle_css","database":"$undefined"},{"id":1846,"value":"### Example - Rendering _this notebook_'s runtime-sdk-dependancy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1510,"value":"visualizer(runtime, {\n invalidation,\n module: runtimSdkModule,\n classList: \"runtimeSdk\",\n detachNodes: false\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2305,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1577,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1379,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"instructions","database":"$undefined"},{"id":1714,"value":"## Customizing the visual representation\n\nThe `inspector` variable defines a factory of variable observers, matching the signature of Observable's [`Inspector.into`](https://github.com/observablehq/inspector#Inspector_into) method. The visualizer uses this factory to build listeners to the runtime's variables. By default it is the default observable inspector, which renders cells in the way you are familiar, however, you can change this to anything. In this notebook we also provide examples around the [minicell](https://observablehq.com/@tomlarkworthy/minicell), which renders just the variables's name, giving a minimap feel, but the possibilities are endless.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1731,"value":"---\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1743,"value":"## Runtime Tooling Compatible\n\nVisualizer uses the underlying runtime as the authoritative state, so it composes with the [single file exporter](https://observablehq.com/@tomlarkworthy/exporter) and [editor](https://observablehq.com/@tomlarkworthy/editor) (not shown), enabling editable, reordering and offline-first notebooks that (re)serialise to single files. Try clicking \"tab\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1883,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1757,"value":"---\n\n## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2463,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"viewof allVariables = variables(runtime)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2464,"value":"templates_doc = md`### Templates\n\n\\`vizVariable\\`, \\`vizInspector\\`, \\`vizDetachNodes\\`, \\`vizRoot\\`, \\`vizModule\\` and \\`vizFilter\\` are the templates' parameters, supplied by each instance. In this module they hold defaults (\\`null\\`, \\`false\\`, \\`() => true\\`), and \\`vizCellNode\\` returns \\`null\\` without a variable and an inspector.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2465,"value":"vizVariable = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2466,"value":"vizInspector = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2467,"value":"vizDetachNodes = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2468,"value":"vizRoot = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2469,"value":"vizModule = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2470,"value":"vizFilter = () => true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2471,"value":"drawnVariable = (cell) => {\n if (!cell || cell.type === \"import\") return null;\n const vars = cell.variables || [];\n const displayed = vars.find((v) => displayStateOf(v));\n if (displayed) return displayed;\n // classic mutable is [initial x, mutable x, x]: draw x, not the seed (#159)\n return (cell.type === \"mutable\" ? vars[2] : vars[0]) ?? null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2472,"value":"vizCellNode = {\n if (!vizVariable || !vizInspector) return null;\n const state = displayStateOf(vizVariable);\n let node, release;\n if (state) {\n // The display root is the cell node, so a second pane takes it rather than copying it.\n node = state.root;\n node.classList.add(\"observablehq\", \"lope-viz-nk\");\n release = attachDisplay(vizVariable, observe);\n } else {\n const observer = vizInspector(vizVariable);\n node = observer._node;\n const unobserve = observe(vizVariable, observer, { detachNodes: vizDetachNodes });\n release = () => {\n const value = vizVariable._value;\n if (value && value.nodeType && value.parentNode === node) node.removeChild(value);\n unobserve?.();\n };\n }\n node.variable = vizVariable;\n if (vizVariable._name) node.setAttribute(\"cell\", vizVariable._name);\n invalidation.then(release);\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2473,"value":"vizCellTemplate = {\n // read so the lookup refreshes when a template cell is redefined\n [vizVariable, vizInspector, vizDetachNodes, vizCellNode];\n return lookupVariable([\"vizVariable\", \"vizInspector\", \"vizDetachNodes\", \"vizCellNode\"], visualizerModule);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2474,"value":"vizPaneCells = {\n const cells = (vizModule && liveCellMap.get(vizModule)) || [];\n const filterState = {};\n return cells.filter((cell, i) => vizFilter(cell?.name, cell?.variables, i, filterState));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2475,"value":"vizPaneState = {\n const state = { cells: new Map(), headers: new Map() };\n invalidation.then(() => {\n for (const entry of state.cells.values()) entry.instance.dispose();\n state.cells.clear();\n state.headers.clear();\n });\n return state;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2476,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2477,"value":"vizSyncEvents = {\n // Fired after a pane reorders its cell nodes. Siblings the pane does not manage (editor hosts) are\n // left where they were, so their owners rerun placement on vizSynced.\n const target = new EventTarget();\n return Object.assign(target, { notify: () => target.dispatchEvent(new Event(\"sync\")) });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2478,"value":"vizSynced = Generators.observe((notify) => {\n let syncs = 0;\n const onSync = () => notify(++syncs);\n vizSyncEvents.addEventListener(\"sync\", onSync);\n notify(syncs);\n return () => vizSyncEvents.removeEventListener(\"sync\", onSync);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2479,"value":"vizPaneTemplate = {\n // no value deps: instantiateDataflow copies each definition when a pane is made and watch re-syncs edits,\n // while a dep on vizPaneCells re-ran visualizer, and every cell depending on it, on each cell-map change\n return lookupVariable(\n [\"vizRoot\", \"vizModule\", \"vizFilter\", \"vizInspector\", \"vizDetachNodes\", \"vizPaneCells\", \"vizPaneState\", \"vizPaneSync\"],\n visualizerModule\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2232,"value":"TRACE_CELL = trace_variable","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2320,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2416,"value":"createImportCellHeader = (cell) => {\n const header = document.createElement(\"div\");\n header.className = \"observablehq lope-viz-import\";\n header.setAttribute(\"data-cell-type\", \"import\");\n header.setAttribute(\"data-cell-name\", String(cell?.name ?? \"\"));\n if (cell?.module_name)\n header.setAttribute(\"data-module-name\", String(cell.module_name));\n header.setAttribute(\"cell\", String(cell?.name ?? \"import\"));\n const line = document.createElement(\"div\");\n line.className = \"lope-viz-import-line\";\n const statement = document.createElement(\"div\");\n statement.className = \"lope-viz-import-statement\";\n line.appendChild(statement);\n header.appendChild(line);\n header.__viz = { statement, cell };\n return header;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2414,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2349,"value":"syncers = vizSynced","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1832,"value":"### module handle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1440,"value":"viewof visualizerModule = thisModule()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2462,"value":"md`## Tests\n\nEach \\`test_viz_*\\` cell makes a throwaway module with runtime-sdk's \\`createModule\\`, mounts \\`visualizer(runtime, options)\\` on it in an off-screen host, changes the module's variables, and waits for the DOM to follow. Everything a test creates is deleted in \\`finally\\`.\n\nA fixture's first cell is a \\`title\\` string. \\`@tomlarkworthy/modules\\` computes a module's first cell to find its title, so without it the first cell under test would run before any visualizer observed it. Title cells, builtin variables (\\`Generators\\`, \\`@variable\\`) and the builtin import header are left out of the names the tests compare.\n\nThe tests create and delete modules, so each resolves to a \\`skipped:\\` string until *Run visualizer tests* is on. Add \\`&viz_tests\\` to the hash to start with it on.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2443,"value":"viewof viz_tests_enabled = Inputs.toggle({\n label: \"Run visualizer tests\",\n value: /(^#|&)viz_tests(=|&|$)/.test(location.hash)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2444,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2445,"value":"test_viz_renders_cells_in_runtime_order = vt.scenario(async (t) => {\n const module = t.fixture();\n module.variable().define(\"a\", [], () => 1);\n module.variable().define(\"b\", [\"a\"], (a) => a + 1);\n module.variable().define(null, [\"b\"], (b) => b * 10);\n const {root} = t.mount(module);\n await t.until(() => t.nodes(root).length === 3 && t.nodes(root)[2].textContent.includes(\"20\"), \"3 rendered cells\");\n expect(t.names(root)).toEqual([\"a\", \"b\", \"\"]);\n const vars = t.own(module);\n expect(t.nodes(root).map((n, i) => n.variable === vars[i])).toEqual([true, true, true]);\n expect(t.text(root, \"a\")).toContain(\"1\");\n expect(t.text(root, \"b\")).toContain(\"2\");\n return `rendered ${t.names(root).join(\", \")} in runtime order`;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2446,"value":"test_viz_an_unobserved_cell_computes_once_rendered = vt.scenario(async (t) => {\n const module = t.fixture();\n let runs = 0;\n module.variable().define(\"lazy\", [], () => ++runs);\n await t.quiet(1500);\n expect(runs).toBe(0);\n const {root} = t.mount(module);\n await t.until(() => t.text(root, \"lazy\")?.includes(\"1\"), \"lazy rendered\");\n await t.quiet(1000);\n expect(runs).toBe(1);\n return \"a lazy cell ran once, when the visualizer observed it\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2447,"value":"test_viz_redefinition_updates_the_same_node = vt.scenario(async (t) => {\n const module = t.fixture();\n const a = module.variable().define(\"a\", [], () => 1);\n module.variable().define(\"b\", [\"a\"], (a) => a + 1);\n const {root} = t.mount(module);\n await t.until(() => t.text(root, \"b\")?.includes(\"2\"), \"b = 2\");\n const [na, nb] = [t.node(root, \"a\"), t.node(root, \"b\")];\n a.define(\"a\", [], () => 41);\n await t.until(() => t.text(root, \"b\")?.includes(\"42\"), \"b = 42 after redefining a\");\n expect(t.node(root, \"a\") === na).toBe(true);\n expect(t.node(root, \"b\") === nb).toBe(true);\n expect(t.names(root)).toEqual([\"a\", \"b\"]);\n return \"redefining a updated a and b in their existing nodes\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2448,"value":"test_viz_renamed_variable_keeps_its_node = vt.scenario(async (t) => {\n // The node's cell= attribute is set when its inspector is made and is not updated on a rename\n // (measured 2026-09-13: still \"a\" after renaming to z). Not asserted either way.\n const module = t.fixture();\n const a = module.variable().define(\"a\", [], () => 1);\n module.variable().define(\"b\", [], () => 2);\n const {root} = t.mount(module);\n await t.until(() => t.names(root).join() === \"a,b\", \"a and b\");\n const na = t.nodes(root)[0];\n a.define(\"z\", [], () => 26);\n await t.until(() => t.nodes(root)[0]?.textContent.includes(\"26\"), \"renamed cell shows 26\");\n expect(t.nodes(root)[0] === na).toBe(true);\n expect(t.nodes(root).length).toBe(2);\n return \"renaming a to z kept its node and position\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2449,"value":"test_viz_delete_removes_only_that_node = vt.scenario(async (t) => {\n const module = t.fixture();\n module.variable().define(\"a\", [], () => 1);\n const b = module.variable().define(\"b\", [], () => 2);\n module.variable().define(\"c\", [], () => 3);\n const {root} = t.mount(module);\n await t.until(() => t.names(root).join() === \"a,b,c\" && t.text(root, \"c\")?.includes(\"3\"), \"a, b, c\");\n const [na, nc] = [t.node(root, \"a\"), t.node(root, \"c\")];\n b.delete();\n await t.until(() => t.names(root).join() === \"a,c\", \"b removed\");\n expect(t.node(root, \"a\") === na).toBe(true);\n expect(t.node(root, \"c\") === nc).toBe(true);\n return \"deleting b removed its node and kept a and c\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2450,"value":"test_viz_a_cell_leaving_the_map_releases_its_observer = vt.scenario(async (t) => {\n // cell-map drops \"dynamic …\" variables, so renaming one takes it out of the map while it still exists\n const module = t.fixture();\n module.variable().define(\"a\", [], () => 1);\n const b = module.variable().define(\"b\", [], () => 2);\n const {root} = t.mount(module);\n await t.until(() => t.names(root).join() === \"a,b\" && t.text(root, \"b\")?.includes(\"2\"), \"a, b\");\n expect(!!b._observer?.__observe_listeners__).toBe(true);\n b.define(\"dynamic b\", [], () => 3);\n await t.until(() => t.names(root).join() === \"a\", \"b's node removed\");\n await t.until(() => !b._observer?.__observe_listeners__, \"b's observer released\");\n return \"a variable that left the cell map lost both its node and its observer\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2451,"value":"test_viz_new_and_moved_cells_follow_runtime_order = vt.scenario(async (t) => {\n const module = t.fixture();\n module.variable().define(\"a\", [], () => 1);\n const b = module.variable().define(\"b\", [], () => 2);\n const {root} = t.mount(module);\n await t.until(() => t.names(root).join() === \"a,b\", \"a, b\");\n const d = module.variable().define(\"d\", [], () => 4);\n await t.until(() => t.names(root).join() === \"a,b,d\" && t.text(root, \"d\")?.includes(\"4\"), \"d appended\");\n const nd = t.node(root, \"d\");\n repositionSetElement(runtime._variables, d, [...runtime._variables].indexOf(b));\n await t.until(() => t.names(root).join() === \"a,d,b\", \"d moved before b\");\n expect(t.node(root, \"d\") === nd).toBe(true);\n return \"a new cell rendered last, and moving it in runtime._variables moved its node\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2452,"value":"test_viz_viewof_renders_one_node_holding_the_view = vt.scenario(async (t) => {\n const module = t.fixture();\n const input = Object.assign(document.createElement(\"input\"), {type: \"range\", min: 0, max: 10, step: 1});\n input.value = \"3\";\n module.variable().define(\"viewof x\", [], () => input);\n module.variable().define(\"x\", [\"Generators\", \"viewof x\"], (G, _) => G.input(_));\n module.variable().define(\"y\", [\"x\"], (x) => x * 2);\n const {root} = t.mount(module);\n await t.until(() => t.text(root, \"y\")?.includes(\"6\"), \"y = 6\");\n expect(t.names(root)).toEqual([\"viewof x\", \"y\"]);\n expect(t.node(root, \"viewof x\").contains(input)).toBe(true);\n await t.set(input, 7);\n await t.until(() => t.text(root, \"y\")?.includes(\"14\"), \"y = 14 after moving the range\");\n expect(t.node(root, \"viewof x\").contains(input)).toBe(true);\n return \"viewof x rendered once, holding its input; moving it updated y\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2453,"value":"test_viz_mutable_renders_its_live_value = vt.scenario(async (t) => {\n const module = t.fixture();\n module.variable().define(\"initial m\", [], () => 1);\n module.variable().define(\"mutable m\", [\"Mutable\", \"initial m\"], (M, v) => new M(v));\n module.variable().define(\"m\", [\"mutable m\"], (_) => _.generator);\n module.variable().define(\"twice\", [\"m\"], (m) => m * 2);\n const {root} = t.mount(module);\n await t.until(() => t.text(root, \"twice\")?.includes(\"2\"), \"twice = 2\");\n expect(t.names(root)).toEqual([\"m\", \"twice\"]);\n (await module.value(\"mutable m\")).value = 5;\n await t.until(() => t.text(root, \"m\")?.includes(\"5\") && t.text(root, \"twice\")?.includes(\"10\"), \"m = 5, twice = 10\");\n return \"mutable m rendered as one node showing m, and followed an assignment\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2454,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2455,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2456,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2457,"value":"test_viz_error_and_pending_states = vt.scenario(async (t) => {\n const module = t.fixture();\n let release;\n module.variable().define(\"boom\", [], () => { throw new Error(\"boom\"); });\n module.variable().define(\"slow\", [], () => new Promise((r) => (release = r)));\n const {root} = t.mount(module);\n await t.until(() => t.node(root, \"boom\")?.classList.contains(\"observablehq--error\"), \"boom shows an error\");\n expect(t.text(root, \"boom\")).toContain(\"boom\");\n await t.until(() => release && t.node(root, \"slow\")?.classList.contains(\"observablehq--running\"), \"slow shows running\");\n release(7);\n await t.until(() => t.text(root, \"slow\")?.includes(\"7\") && !t.node(root, \"slow\").classList.contains(\"observablehq--running\"), \"slow resolves to 7\");\n return \"a throwing cell renders observablehq--error; a pending one observablehq--running until it resolves\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2458,"value":"test_viz_two_visualizers_of_one_module_are_independent = vt.scenario(async (t) => {\n const module = t.fixture();\n const a = module.variable().define(\"a\", [], () => 1);\n const A = t.mount(module), B = t.mount(module);\n await t.until(() => t.text(A.root, \"a\")?.includes(\"1\") && t.text(B.root, \"a\")?.includes(\"1\"), \"a in both\");\n expect(t.node(A.root, \"a\") === t.node(B.root, \"a\")).toBe(false);\n a.define(\"a\", [], () => 2);\n await t.until(() => t.text(A.root, \"a\")?.includes(\"2\") && t.text(B.root, \"a\")?.includes(\"2\"), \"a = 2 in both\");\n A.unmount();\n a.define(\"a\", [], () => 3);\n await t.until(() => t.text(B.root, \"a\")?.includes(\"3\"), \"a = 3 in B after A unmounted\");\n expect(A.root.isConnected).toBe(false);\n return \"two visualizers of one module each rendered a; unmounting one left the other live\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2459,"value":"test_viz_unmount_hands_variables_back = vt.scenario(async (t) => {\n // a disposed pane leaves its nodes in the detached root\n const module = t.fixture();\n const a = module.variable().define(\"a\", [], () => 1);\n const m = t.mount(module);\n await t.until(() => t.text(m.root, \"a\")?.includes(\"1\"), \"a rendered\");\n expect(!!a._observer?.__observe_listeners__).toBe(true);\n const before = t.nodes(m.root).length;\n m.unmount();\n module.variable().define(\"later\", [], () => 0);\n await t.until(() => !a._observer?.__observe_listeners__, \"observer handed back\");\n a.define(\"a\", [], () => 2);\n await t.quiet(1500);\n expect(m.root.isConnected).toBe(false);\n expect(t.nodes(m.root).length).toBeLessThanOrEqual(before);\n expect(t.text(m.root, \"a\") ?? \"\").not.toContain(\"2\");\n return \"after invalidation: observer restored; later changes neither add nodes to the root nor update them\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2460,"value":"test_viz_foreign_children_survive_a_sync = vt.scenario(async (t) => {\n const module = t.fixture();\n const a = module.variable().define(\"a\", [], () => 1);\n module.variable().define(\"b\", [], () => 2);\n const {root} = t.mount(module);\n await t.until(() => t.names(root).join() === \"a,b\", \"a, b\");\n const note = Object.assign(document.createElement(\"p\"), {textContent: \"not a cell\"});\n root.insertBefore(note, t.node(root, \"b\"));\n a.define(\"a\", [], () => 5);\n module.variable().define(\"c\", [], () => 3);\n await t.until(() => t.names(root).join() === \"a,b,c\" && t.text(root, \"a\")?.includes(\"5\"), \"a = 5 and c added\");\n expect(note.parentNode === root).toBe(true);\n return \"a child without the observablehq class stayed in the root across syncs\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2461,"value":"test_viz_detachNodes_takes_an_element_value = vt.scenario(async (t) => {\n const module = t.fixture();\n const probe = (text) => Object.assign(document.createElement(\"span\"), {className: \"viz-probe\", textContent: text});\n const el = module.variable().define(\"el\", [], () => probe(\"one\"));\n const A = t.mount(module);\n await t.until(() => A.root.querySelector(\".viz-probe\"), \"element rendered in A\");\n const B = t.mount(module, {detachNodes: true});\n await t.until(() => B.root.querySelector(\".viz-probe\"), \"element taken by B\");\n expect(A.root.querySelector(\".viz-probe\")).toBe(null);\n el.define(\"el\", [], () => probe(\"two\"));\n await t.until(() => B.root.querySelector(\".viz-probe\")?.textContent === \"two\", \"B holds the redefined element\");\n expect(A.root.querySelector(\".viz-probe\")).toBe(null);\n return \"a detachNodes visualizer took the element from the first, and kept the redefined one\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1835,"value":"### imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"import { Inspector } from \"@tomlarkworthy/inspector\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"import { myModule as runtimSdkModule, unorderedSync, repositionSetElement, runtime, main, variables, lookupVariable, observe, thisModule, trace_variable, createModule, deleteModule, onCodeChange } from \"@tomlarkworthy/runtime-sdk\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2237,"value":"import { liveCellMap } from \"@tomlarkworthy/cell-map\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2419,"value":"import { navHref } from \"@tomlarkworthy/lopepage-urls\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2441,"value":"import { ui } from \"@tomlarkworthy/ui-testing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2442,"value":"import { expect } from \"@tomlarkworthy/jest-expect-standalone\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2480,"value":"import { instantiateDataflow } from \"@tomlarkworthy/dataflow-templating\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2481,"value":"import { displayStateOf, attachDisplay } from \"@tomlarkworthy/js-toolchain\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 31:"$30:body"