}); node.addEventListener('mouseover', () => { const colors = {}; colors[svg.value] = 'yellow'; colors[+node.firstElementChild.textContent] = nodeColors.highlighted; colorNodes(colors); svg.dispatchEvent( new CustomEvent('module_mouseover', { detail: +node.firstElementChild.textContent }) ); }); node.addEventListener('mouseout', () => { mouseout(); svg.dispatchEvent(new CustomEvent('module_mouseout')); }); } function mouseout() { const colors = {}; colors[svg.value] = 'yellow'; colorNodes(colors); } svg.addEventListener('var_mouseover', ({ detail }) => { const colors = {}; colors[svg.value] = 'yellow'; colors[detail] = nodeColors.highlighted; colorNodes(colors); }); svg.addEventListener('var_mouseout', mouseout); svg.addEventListener('var_click', ({ detail }) => { update(detail); }); svg.addEventListener('change_module', ({ detail }) => { update(detail._module._id); }); function variableMouseover({ detail }) { const colors = {}; colors[svg.value] = 'yellow'; colors[nbAllVariables[detail]._module._id] = nodeColors.highlighted; colorNodes(colors); } viewof nbMain.addEventListener('variable_mouseover', variableMouseover); viewof nbMain.addEventListener('variable_mouseout', mouseout); update((this && this.value) || 1); invalidation.then(() => { viewof nbMain.removeEventListener('variable_mouseover', variableMouseover); viewof nbMain.removeEventListener('variable_mouseout', mouseout); }); return svg; }32:T925,viewof dotSourceModule = { const source = `digraph "${id}" { rankdir = ${orientModule}; ${(!showUnreachable ? nbReachableModules : nbAllModules) .map(m => // nodes are modules, labeled by their slugs // border colored blue if the module was created by module_copy showBuiltinNode || m !== nbMain._runtime._builtin ? `${m._id} [label = "${m === nbMain ? '👑 ' : ''}${m._slug}"${ m._copySource ? ', color = "blue"' : '' }${ // slug text colored grey if it is "_builtin" m._slug === '_builtin' ? ', fontcolor="#777777"' : '' }${ nbReachableModulesSet.has(m) ? "" : `, style="filled", fillcolor = "${nodeColors.unreachable}"` }]; ${Array.from( // remove duplicate edges? new Set( m._importedBy // edges correspond to imports .filter(d => showUnreachable || d.variable._reachable) .map( d => `${ d.from // arrow from the notebook to any notebook that imports / derives / causes it to be copied ? `${m._id} -> ${d.from._id}` : m !== nbMain // d.from = null means imported by main notebook ? `${m._id} -> ${nbMain._id}` : "" // don't draw self-loop on main notebook }` ) ) ).join(" ")}` : `` ) .join("\n ")} }`; const pre = md`\`\`\` ${source} \`\`\``; const container = html``; const checkSource = html`<input type="checkbox">`; const showSource = html`<label style="font-size: 80%">${checkSource} Show module graph source`; const download = html` ${DOM.download( new Blob([source], { type: "text/vnd.graphviz" }), id + '.gv', "Download module graph as GV" )} `; const div = html`${download} ${showSource}${container}`; checkSource.onclick = e => { if (checkSource.checked) { container.appendChild(pre); } else { container.removeChild(pre); } }; checkSource.oninput = e => { e.stopPropagation(); }; div.value = source; pre.style = "overflow:auto; height:300px; resize:vertical;"; div.dispatchEvent(new CustomEvent("update")); return div; }33:T13f4,variableGraph = { const svg = await dot`${dotSourceVariable}`; const nodes = svg.querySelectorAll('.node'); function getVarOf(node) { return nbAllVariables[+node.children[0].textContent]; } function nodeColor(v) { return v._reachable ? v._errored ? nodeColors.errored : nbRuntime._scheduled.has(v) ? nbRuntime._evalQueue.has(v) ? nodeColors.queued : nodeColors.scheduled : "none" : nodeColors.unreachable; } function colorNodes(colors) { for (const node of nodes) { const v = getVarOf(node); node.children[1].setAttribute("fill", colors[v._id] || nodeColor(v)); } } for (const node of nodes) { const variable = getVarOf(node); const currModule = variable._module; if (currModule._id !== moduleGraph) { node.setAttribute('cursor', 'pointer'); node.addEventListener('mouseover', () => { const colors = {}; for (const v of nbAllVariables) { if (v._module === currModule) colors[v._id] = nodeColors.highlighted; } colorNodes(colors); viewof moduleGraph.dispatchEvent( new CustomEvent('var_mouseover', { detail: currModule._id }) ); }); node.addEventListener('mouseout', () => { viewof moduleGraph.dispatchEvent(new CustomEvent('var_mouseout')); colorNodes({}); }); node.addEventListener('click', () => { viewof moduleGraph.dispatchEvent( new CustomEvent('var_click', { detail: currModule._id }) ); }); } else if ( nbRuntime._evalQueue.has(variable) || (currModule === nbMain && variable._observer && variable._observer.label) ) { const target = (variable._observer && variable._observer.label) || nbContainer; node.setAttribute('cursor', 'pointer'); node.addEventListener('mouseover', () => { target.dispatchEvent( new CustomEvent('inspector_mouseover', { detail: variable, bubbles: true }) ); }); node.addEventListener('mouseout', () => { target.dispatchEvent( new CustomEvent('inspector_mouseout', { detail: variable, bubbles: true }) ); }); node.addEventListener('click', () => { mutable lastClicked = variable; target.dispatchEvent( new CustomEvent('inspector_click', { detail: variable, bubbles: true }) ); }); } } function variableMouseover({ detail }) { const colors = {}; for (const v of nbAllVariables) { if (v._id === detail) colors[v._id] = nodeColors.highlighted; } colorNodes(colors); } function moduleMouseover({ detail }) { const colors = {}; for (const v of nbAllVariables) { if (v._module === nbAllModules[detail]) colors[v._id] = nodeColors.highlighted; } colorNodes(colors); } function moduleMouseout() { colorNodes({}); } colorNodes({}); function inspectorClick({ detail }) { const node = Array.from(nodes).find(node => getVarOf(node) === detail); // need to target ellipse; firefox won't scroll properly to the g if (node) // scrollParentToChild(svg, node.children[1]); node.children[1].scrollIntoView({ behavior: "smooth", block: "nearest" }); else viewof moduleGraph.dispatchEvent( new CustomEvent('change_module', { detail, bubbles: true }) ); } if (mutable lastClicked && mutable needToScroll) { const node = Array.from(nodes).find( node => getVarOf(node) === mutable lastClicked ); if (node) { // scrollParentToChild(svg, node.children[1]); setTimeout(() => { node.children[1].scrollIntoView({ behavior: "smooth", block: "nearest" }); mutable needToScroll = false; }, 100); } } viewof moduleGraph.addEventListener('module_mouseover', moduleMouseover); viewof moduleGraph.addEventListener('module_mouseout', moduleMouseout); viewof nbMain.addEventListener('variable_mouseover', variableMouseover); viewof nbMain.addEventListener('variable_mouseout', moduleMouseout); viewof nbMain.addEventListener('update_queue', moduleMouseout); viewof nbMain.addEventListener('scroll_to_queued', inspectorClick); nbContainer.addEventListener('inspector_click', inspectorClick); invalidation.then(() => { viewof moduleGraph.removeEventListener('module_mouseover', moduleMouseover); viewof moduleGraph.removeEventListener('module_mouseout', moduleMouseout); viewof nbMain.removeEventListener('variable_mouseover', variableMouseover); viewof nbMain.removeEventListener('variable_mouseout', moduleMouseout); viewof nbMain.removeEventListener('update_queue', moduleMouseout); viewof nbMain.removeEventListener('scroll_to_queued', inspectorClick); nbContainer.removeEventListener('inspector_click', inspectorClick); }); return svg; }34:Tae3,viewof dotSourceVariable = { const main = nbAllModules[moduleGraph]; const variables = (!showUnreachable ? nbReachableVariables : nbAllVariables) .filter(({ _module }) => _module === main) .filter(({ _name }) => anon || _name !== null); const varSet = new Set(variables); const extraVars = []; // Should I try to do something with duplicate cells? const source = `digraph "${main._slug}" { rankdir = ${orientVariable}; ${Array.from( variables, v => `${v._id} [${v._name ? `label = "${v._name}"` : `label = "#${v._id}"`}${ v._module === main._runtime._builtin ? `, color = "gray", fontcolor = "#555555"` : v._inputs.length === 1 && v._inputs[0]._module !== v._module ? `, color = "${nodeColors.importBorder}"` : "" }${nodeFill(v)}]; ${v._inputs .map(i => { if (!varSet.has(i)) { varSet.add(i); extraVars.push(i); } return i._id !== undefined ? `${i._id} -> ${v._id} ${ v._module !== i._module ? `[color = "#20b2aa"]` : "" };` : (console.log('untagged variable:', i, 'in _inputs of;', v), ``); }) .join(" ")}` ).join("\n ")} ${Array.from( extraVars, v => `${v._id} [${ v._name ? `label = "${ v._module !== main ? // need a check here: many same-module cells are marked as unreachable before evaluation starts // so they end up in this array `${v._module === nbMain ? '👑 ' : ''}${ v._module !== main._runtime._builtin ? `${v._module._slug}#` : `` }` : '' }${v._name}"` : `` }${ v._module === main._runtime._builtin ? `, color = "gray", fontcolor = "#555555"` : `, style = "dashed", fontcolor = "#555555"` }${nodeFill(v)}];` ).join("\n ")} }`; const pre = md`\`\`\` ${source} \`\`\``; const container = html``; const check = html`<input type="checkbox">`; const show = html`<label style="font-size: 80%">${check} Show variable graph source`; const download = html` ${DOM.download( new Blob([source], { type: "text/vnd.graphviz" }), id + '.gv', "Download variable graph as GV" )} `; const div = html`${download} ${show}${container}`; check.onclick = () => { if (check.checked) { container.appendChild(pre); } else { container.removeChild(pre); } }; check.oninput = e => { e.stopPropagation(); }; div.value = source; pre.style = "overflow:auto; height:300px; resize:vertical;"; div.dispatchEvent(new CustomEvent("update")); return div; }35:T292b,viewof nbMain = { let evalQueue; let runtime; let mainVariables; async function init() { evalQueue = new ComputeMap([]); filterSelect.oninput(); historyCheck.onclick(); runtime = new Runtime(nbImportMap, evalQueue); const main = nbDefine(runtime, InspectorInto(nbContainer)); main._slug = [...nbImportMap.values()][0]; mainVariables = Array.from(runtime._allVariables).filter( ({ _module }) => _module === main ); div.value = main; div.queue = evalQueue; div.dispatchEvent(new CustomEvent('input')); } const mainView = html`<span class="miniInspector">`; const mainContainer = html`<div class="miniContainer"><span style="margin-right:1em;">main module:</span> ${mainView}`; const mainInspector = new Inspector(mainView); const runtimeView = html`<span class="miniInspector">`; const runtimeInspector = new Inspector(runtimeView); const runtimeDispose = html`<button class="miniButton">🗑 dispose!`; const runtimeRestart = html`<button class="miniButton">♻️ restart!`; const runtimeButtons = html`<span class="miniButtons">${runtimeRestart} ${runtimeDispose}`; const runtimeContainer = html`<div class="miniContainer">${runtimeButtons} ${runtimeView}`; const justComputed = html`<span class="miniInspector">`; const justComputedContainer = html`<div class="miniContainer"><span style="margin-right:1em;">last manual resolve / reject:</span> ${justComputed}`; const justComputedInspector = new Inspector(justComputed); let queueItems = new Map(); const queueView = html`<div style="height: 4.5em; overflow: auto; padding-left: 0.5em; padding-right: 0.5em; resize: vertical; border: solid black 1px;">`; const updateQueueButton = html`<button class="miniButton">refresh`; const queueSize = html`<output>`; const queueCheck = html`<input type="checkbox" checked>`; queueCheck.onclick = () => (queueView.style.display = queueCheck.checked ? "block" : "none"); const resolveNext = html`<button class="miniButton">✅ resolve next`; resolveNext.onclick = () => { const o = evalQueue.values().next().value; if (o) { const { variable } = o; justComputedInspector.fulfilled(variable); if (log.computation) console.log('manual resolve:', o); o.res(); queueView.removeChild(queueItems.get(o).nextContainer); queueItems.delete(o); setTimeout(updateQueue, 250); } }; const filterSelect = html`<select> <option value="nothing">nothing (choose another option to pause)</option> <option value="runtime_compute" selected>each runtime_compute cycle</option> <option value="main">variables in the 👑 main module</option> <option value="everything">every variable</option> `; const filterControl = html`<label>manually execute: ${filterSelect}`; filterSelect.oninput = () => { const { value } = filterSelect; evalQueue.filter = value === 'everything' ? () => false : value === 'nothing' ? () => true : value === "runtime_compute" ? v => v !== "runtime_compute" : v => v._module !== div.value && v !== "runtime_compute"; }; const historyCheck = html`<input type="checkbox">`; historyCheck.onclick = () => { evalQueue._trackHistory = historyCheck.checked; }; const historyView = html`<label>[track history ${historyCheck}]`; const div = html`<h3>Execution Control</h3><div>${mainContainer}</div> ${runtimeContainer} ${updateQueueButton} evaluation queue (size: ${queueSize}): <label>[show ${queueCheck}]</label> ${resolveNext} [${filterControl}] ${queueView} ${justComputedContainer} ${historyView}`; function queueItem(o) { const { variable } = o; const nextViewInner = html`<span class="miniInspector">`; const nextInspector = new Inspector(nextViewInner); const nextViewIcon = html`<span style="cursor:pointer;" title="${variable !== 'runtime_compute' && variable._module._slug}#${variable !== "runtime_compute" && (variable._name || '#' + variable._id)}">${ variable._observer && variable._observer.label ? '👀' : '👁' }`; const nextView = html`<span class="miniInspectorHolder queued" style="border-radius: 20px; border: solid ${ variable === "runtime_compute" ? "yellow" : variable._inputs.length === 1 && variable._inputs[0]._module !== variable._module ? nodeColors.importBorder : "black" } 1px;">${ variable === "runtime_compute" ? '' : nextViewIcon }${nextViewInner}`; const resolveNext = html`<button class="miniButton">✅ resolve`; const rejectNext = variable !== "runtime_compute" ? html`<button class="miniButton">❌ reject` : ''; const buttons = html`<span class="miniButtons">${resolveNext} ${rejectNext}`; const nextContainer = html`<div class="miniContainer">${buttons} ${nextView}`; resolveNext.onclick = () => { justComputedInspector.fulfilled(variable); if (log.computation) console.log('manual resolve:', o); o.res(); queueView.removeChild(nextContainer); queueItems.delete(o); setTimeout(updateQueue, 250); }; if (o.variable !== "runtime_compute") { rejectNext.onclick = () => { justComputedInspector.fulfilled(variable); if (log.computation) console.log('manual reject:', o); o.rej(); queueView.removeChild(nextContainer); queueItems.delete(o); setTimeout(updateQueue, 250); }; nextContainer.onmouseover = () => { div.dispatchEvent( new CustomEvent('variable_mouseover', { detail: variable._id }) ); nextView.classList.add('highlighted'); if (variable._observer && variable._observer.label) variable._observer.label.classList.add('highlighted'); }; nextContainer.onmouseout = () => { div.dispatchEvent(new CustomEvent('variable_mouseout')); nextView.classList.remove('highlighted'); if (variable._observer && variable._observer.label) variable._observer.label.classList.remove('highlighted'); }; nextViewIcon.onclick = () => { mutable lastClicked = variable; variable._observer && variable._observer.label && scrollParentToChild(nbContainer, variable._observer.label); nextContainer.dispatchEvent( new CustomEvent('scroll_to_queued', { detail: variable, bubbles: true }) ); setTimeout( () => div.dispatchEvent( new CustomEvent('variable_mouseover', { detail: variable._id }) ), 200 ); }; } nextInspector.fulfilled(variable); queueView.appendChild(nextContainer); return { resolveNext, rejectNext, nextView, nextContainer, nextInspector }; } function updateQueue() { runtimeInspector.fulfilled(runtime); for (const variable of mainVariables) { if (variable._observer && variable._observer.label) { const { label } = variable._observer; if (variable._errored) label.classList.add('errored'); else label.classList.remove('errored'); if (evalQueue.has(variable)) label.classList.add('queued'); else label.classList.remove('queued'); if (runtime._scheduled.has(variable)) label.classList.add('scheduled'); else label.classList.remove('scheduled'); } } for (const o of evalQueue.values()) { if (!queueItems.has(o)) { queueItems.set(o, queueItem(o)); } const { variable } = o; } const { size } = evalQueue; queueSize.value = size; queueView.style.height = Math.min(4.5 * size, 25) + 'em'; div.dispatchEvent(new CustomEvent('update_queue')); div.dispatchEvent(new CustomEvent('input')); } nbContainer.addEventListener('update_queue', updateQueue); updateQueueButton.onclick = updateQueue; runtimeDispose.onclick = () => { runtime.dispose(); evalQueue.clear(); for (const { nextContainer } of queueItems.values()) { queueView.removeChild(nextContainer); } queueItems.clear(); updateQueue(); }; runtimeRestart.onclick = async () => { clear(); nbContainer.addEventListener('inspector_mouseover', inspectorMouseover); nbContainer.addEventListener('inspector_mouseout', inspectorMouseout); nbContainer.addEventListener('inspector_click', inspectorClick); runtime.dispose(); for (const { nextContainer } of queueItems.values()) { queueView.removeChild(nextContainer); } queueItems.clear(); await init(); mainInspector.fulfilled(div.value); justComputedInspector.fulfilled(null); updateQueue(); }; function clear() { while (nbContainer.firstChild) { nbContainer.removeChild(nbContainer.firstChild); } nbContainer.removeEventListener('update_queue', updateQueue); nbContainer.removeEventListener('inspector_mouseover', inspectorMouseover); nbContainer.removeEventListener('inspector_mouseout', inspectorMouseout); nbContainer.removeEventListener('inspector_click', inspectorClick); } function inspectorMouseover({ target, detail }) { target.classList.add('highlighted'); div.dispatchEvent( new CustomEvent('variable_mouseover', { detail: detail._id }) ); if (evalQueue.has(detail)) { const { nextView } = queueItems.get(evalQueue.get(detail)); nextView.classList.add('highlighted'); } } function inspectorMouseout({ target, detail }) { target.classList.remove('highlighted'); div.dispatchEvent( new CustomEvent('variable_mouseout', { detail: detail._id }) ); if (evalQueue.has(detail)) { const { nextView } = queueItems.get(evalQueue.get(detail)); nextView.classList.remove('highlighted'); } } function inspectorClick({ detail, target }) { mutable lastClicked = detail; scrollParentToChild(nbContainer, target); if (evalQueue.has(detail)) { const { nextView } = queueItems.get(evalQueue.get(detail)); scrollParentToChild(queueView, nextView); } } nbContainer.addEventListener('inspector_mouseover', inspectorMouseover); nbContainer.addEventListener('inspector_mouseout', inspectorMouseout); nbContainer.addEventListener('inspector_click', inspectorClick); invalidation.then(clear); await init(); mainInspector.fulfilled(div.value); justComputedInspector.fulfilled(null); updateQueue(); return div; }36:T151b,instructions = md`## Instructions The first diagram (the **module graph**) shows the imports (arrows from <span class="node-inline">black nodes</span>) and import-withs (arrows from / to <span style="border-color:blue;" class="node-inline">blue nodes</span>) between the dependencies of the notebook. Notebooks that have not (yet) been marked "reachable" are <span style="background-color:${nodeColors.unreachable};" class="node-inline">filled with ${nodeColors.unreachable}</span> (if you choose to display them), and the "main" notebook is marked with a crown "👑". To be more precise, these are the ["module objects"](https://github.com/observablehq/runtime#modules) that are created by the [Observable runtime](https://github.com/observablehq/runtime) when the notebook you entered above is loaded. Beneath the module graph is the **variable graph**, an adaptation of Mike Bostock's [Notebook Visualizer](https://observablehq.com/@mbostock/notebook-visualizer) to show the [variables](https://github.com/observablehq/runtime#variables) (roughly speaking, notebook cells) in a <span style="background-color: yellow;" class="node-inline">selected module</span>. Variables in the variable graph are color-coded: - <span style="border-color: ${nodeColors.importBorder}" class="node-inline">imported variables</span>, - <span style="background-color: ${nodeColors.errored}" class="node-inline">errored variables</span>, - <span style="background-color: ${nodeColors.scheduled}" class="node-inline">"scheduled" variables</span>, - <span style="background-color: ${nodeColors.queued}" class="node-inline">queued variables</span>, Underneath that is a **live embedding** of the main notebook itself. Each cell is labeled with either <span style="padding:.1em;" class="inspectorLabel tooltip-right" data-tooltip="#anonCell">✧</span> (for an anonymous cell) or <span style="padding:.1em;" class="inspectorLabel tooltip-right" data-tooltip="namedCell">✦</span> (for a named cell). These elements are color-coded like the variables in the variable graph. *Note that import variables do not (currently?) appear and the values of view / mutable cells show up unnecessarily.* Finally, there is an **execution control** form that allows you to step through the evaluation of the variables in the notebook. See the tutorial ["How Observable runs"](https://observablehq.com/@observablehq/how-observable-runs) for a high-level description of Observable's execution model. - The "evaluation queue" contains the variables that are ready to execute. As variables are resolved, more variables may become ready to execute and get added to the queue. - Sometimes the queue will not be up to date. This may occur for cells that rely on the \`visibility\` promise, and possibly for other generators as well. Click the "Refresh" button to update the UI if you suspect this is happening. - When the queue is cleared (or when the runtime is (re)started), it shows a special <span class="node-inline" style="border-color: yellow; background-color: ${nodeColors.queued}; color: var(--syntax_string);">\`"runtime_compute"\`</span> element that marks the start of the next round of execution. - Each item in the queue can be manually resolved (executed normally) or rejected (an error is thrown). - The dropdown menu allows you to select which variables end up in the manual queue and which are executed automatically (you can customize this further by assigning to \`nbRuntime._evalQueue.filter\`, see [the description of the \`ComputeMap\`](#evalQueueDoc)). - You can also track the history of executed cells in \`nbRuntime._evalQueue.history\` by checking the "track history" box. The graphics are interactive: - In the module graph: - Hovering over a node <span style="background-color: ${nodeColors.highlighted};" class="node-inline">highlights</span> the module's variables in the variable graph (if any), - Clicking on a node opens that module in the variable graph. - In the variable graph: - Hovering over the source variable of an import (with dashed outline) highlights its "sibling" variables and the corresponding module in the module graph. - Clicking on the source variable of an import opens that module in the variable graph. - Clicking on a variable which is also displayed the live embedding and / or execution control will scroll those elements to make that variable visible. - In the live embedding: - You can interact with most notebook cells as usual. However, note that generators, view cells and mutable cells will not update until the next \`runtime_compute\` cycle is triggered. Also be aware that the cells are not embedded in an iframe so there's a chance that they can interact with cells in this notebook. - Hovering over a label will display a tooltip with the name of the cell or an index assigned to anonymous cells by this notebook. - Variables which are displayed in more than one of the variable graph, live embedding and evaluation queue can be hovered over and clicked on to highlight and be scrolled to in the other graphics. - Items in the evaluation queue which are only visible in the variable graph are marked by a single eye 👁 emoji. Items which are visible in both the variable graph and the live embedding are marked by two eyes 👀. - The variable that was last clicked in any of the graphics above is stored in the mutable cell \`lastClicked\`.`37:T591,sliderEffects = { function zoom(svg, percentage, height) { svg.style.maxWidth = 'none'; svg.style.width = Math.round((percentage * width) / 100) + 'px'; const ratio = (percentage * (width / 100)) / svg.width.baseVal.value; const newHeight = Math.round(ratio * svg.height.baseVal.value); svg.parentElement.style.height = Math.min(height, newHeight + 25 /* scrollbar height */) + 'px'; svg.parentElement.style.overflow = 'scroll'; // percentage > 100 || newHeight > height ? 'scroll' : 'visible'; svg.parentElement.style.resize = 'vertical'; } zoom(viewof moduleGraph, moduleGraphPercentage, mutable moduleGraphHeight); zoom(variableGraph, variableGraphPercentage, mutable variableGraphHeight); function resizeModuleGraph() { mutable moduleGraphHeight = viewof moduleGraph.parentElement.getBoundingClientRect().height; } function resizeVariableGraph() { mutable variableGraphHeight = variableGraph.parentElement.getBoundingClientRect().height; } viewof moduleGraph.parentElement.addEventListener( 'mouseup', resizeModuleGraph ); variableGraph.parentElement.addEventListener('mouseup', resizeVariableGraph); invalidation.then(() => { viewof moduleGraph.parentElement.removeEventListener( 'mouseup', resizeModuleGraph ); variableGraph.parentElement.removeEventListener( 'mouseup', resizeVariableGraph ); }); }38:T556,scrollParentToChild = { const animMap = new Map(); const scrollAmount = 50; // https://stackoverflow.com/a/45411081 return function scrollParentToChild(parent, child) { // Where is the parent on page var parentRect = parent.getBoundingClientRect(); // What can you see? var parentViewableArea = { height: parent.clientHeight, width: parent.clientWidth }; // Where is the child var childRect = child.getBoundingClientRect(); // Is the child viewable? var isViewable = childRect.top >= parentRect.top && childRect.top <= parentRect.top + parentViewableArea.height; // cancel if different if (animMap.get(parent)) //&& animMap.get(parent).child !== child) cancelAnimationFrame(animMap.get(parent).id); // if you can't see the child try to scroll parent if (!isViewable) { // scroll by offset relative to parent // parent.scrollTop = childRect.top + parent.scrollTop - parentRect.top; const diff = childRect.top - parentRect.top; if (Math.abs(diff) < scrollAmount) parent.scrollTop = childRect.top + parent.scrollTop - parentRect.top; else parent.scrollTop += Math.sign(diff) * scrollAmount; animMap.set(parent, { child, id: requestAnimationFrame(() => scrollParentToChild(parent, child)) }); } }; }39:T4e6,function InspectorInto(container, inspectors) { if (typeof container === "string") { container = document.querySelector(container); if (container == null) throw new Error("container not found"); } return function(name) { const div = html`<span class="miniInspector">`; const inspector = new Inspector(div); inspector.node = div; const label = html`<div class="inspectorLabel tooltip-right" ${ name ? `data-tooltip="${name}"` : '' }>${name ? `✦` : '✧'}`; inspector.label = label; const divContainer = html`<div class="miniContainer">${label} ${div}`; label.onclick = () => { label.dispatchEvent( new CustomEvent('inspector_click', { detail: inspector.variable, bubbles: true }) ); }; label.onmouseover = () => { label.dispatchEvent( new CustomEvent('inspector_mouseover', { detail: inspector.variable, bubbles: true }) ); }; label.onmouseout = () => { label.dispatchEvent( new CustomEvent('inspector_mouseout', { detail: inspector.variable, bubbles: true }) ); }; container.appendChild(divContainer); return inspector; }; }3a:Tf70,// https://chrisbracco.com/a-simple-css-tooltip/ html`<style> /** * Tooltip Styles */ /* Base styles for the element that has a tooltip */ [data-tooltip], .tooltip { position: relative; cursor: pointer; } /* Base styles for the entire tooltip */ [data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after { position: absolute; visibility: hidden; opacity: 0; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); transform: translate3d(0, 0, 0); pointer-events: none; } /* Show the entire tooltip on hover and focus */ [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { visibility: visible; opacity: 1; } /* Base styles for the tooltip's directional arrow */ .tooltip:before, [data-tooltip]:before { z-index: 1001; border: 6px solid transparent; background: transparent; content: ""; } /* Base styles for the tooltip's content area */ .tooltip:after, [data-tooltip]:after { z-index: 1000; padding: 8px; width: auto; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); font-size: 14px; font-family: monospace; line-height: 1.2; white-space: pre; } /* Directions */ /* Top (default) */ [data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after, .tooltip-top:before, .tooltip-top:after { bottom: 100%; left: 50%; } [data-tooltip]:before, .tooltip:before, .tooltip-top:before { margin-left: -6px; margin-bottom: -12px; border-top-color: #000; border-top-color: hsla(0, 0%, 20%, 0.9); } /* Horizontally align top/bottom tooltips */ [data-tooltip]:after, .tooltip:after, .tooltip-top:after { margin-left: -80px; } [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after, .tooltip-top:hover:before, .tooltip-top:hover:after, .tooltip-top:focus:before, .tooltip-top:focus:after { transform: translateY(-12px); } /* Left */ .tooltip-left:before, .tooltip-left:after { right: 100%; bottom: 50%; left: auto; } .tooltip-left:before { margin-left: 0; margin-right: -12px; margin-bottom: 0; border-top-color: transparent; border-left-color: #000; border-left-color: hsla(0, 0%, 20%, 0.9); } .tooltip-left:hover:before, .tooltip-left:hover:after, .tooltip-left:focus:before, .tooltip-left:focus:after { -webkit-transform: translateX(-12px); -moz-transform: translateX(-12px); transform: translateX(-12px); } /* Bottom */ .tooltip-bottom:before, .tooltip-bottom:after { top: 100%; bottom: auto; left: 50%; } .tooltip-bottom:before { margin-top: -12px; margin-bottom: 0; border-top-color: transparent; border-bottom-color: #000; border-bottom-color: hsla(0, 0%, 20%, 0.9); } .tooltip-bottom:hover:before, .tooltip-bottom:hover:after, .tooltip-bottom:focus:before, .tooltip-bottom:focus:after { transform: translateY(12px); } /* Right */ .tooltip-right:after { bottom: 50%; left: 100%; } .tooltip-right:before { bottom: 10%; left: 100%; margin-bottom: 0; margin-left: -12px; border-top-color: transparent; border-right-color: #000; border-right-color: hsla(0, 0%, 20%, 0.9); } .tooltip-right:hover:before, .tooltip-right:hover:after, .tooltip-right:focus:before, .tooltip-right:focus:after { transform: translateX(12px); } /* Move directional arrows down a bit for left/right tooltips */ .tooltip-left:before, .tooltip-right:before { top: 3px; } /* Vertically center tooltip content for left/right tooltips */ .tooltip-left:after, .tooltip-right:after { margin-left: 0; margin-bottom: -16px; } `3b:T446,// https://github.com/observablehq/stdlib/blob/3c2c5dd60d7723ba61337ece7a4df4f94c78b796/src/fileAttachment.js#L7 class FileAttachmentObject { constructor(url, name) { Object.defineProperties(this, { _url: { value: url }, name: { value: name, enumerable: true } }); } async url() { return (await this._url) + ""; } async blob() { return (await remote_fetch(this)).blob(); } async arrayBuffer() { return (await remote_fetch(this)).arrayBuffer(); } async text() { return (await remote_fetch(this)).text(); } async json() { return (await remote_fetch(this)).json(); } async stream() { return (await remote_fetch(this)).body; } async image() { const url = await this.url(); return new Promise((resolve, reject) => { const i = new Image(); if (new URL(url, document.baseURI).origin !== new URL(location).origin) { i.crossOrigin = "anonymous"; } i.onload = () => resolve(i); i.onerror = () => reject(new Error(`Unable to load file: ${this.name}`)); i.src = url; }); } }3c:Tb71,modified = md`### Modified Runtime I made two types of modifications to the Observable runtime library. I tried to mark changes to the original code with comment tags formatted like this: \`\`\`js ... // * a modified line // * begin // a block of added or modified lines // * end \`\`\` The following modifications make the Runtime, Module, and Variable classes a little easier to inspect and understand: - Made several properties \`enumerable\` so that they appear in the inspector - Runtime objects keep track of the stack of "define" functions that are executing in \`_defineStack\` - Runtime objects require two new arguments to their constructor: - \`importMap\`, the output of the function [\`fetchImportMap\`](#fetchImportMap) (used to fill in the \`_slug\` fields of Module objects) - \`evalQueue\`, an empty Map. As computation is scheduled by the runtime, the keys of this map will be the variables ready for computation, and the values will be objects with fields \`res\` (a function that resolves the associated variable), \`rej\` (a function that rejects the variable), \`variable\` (a reference to the variable itself). - Runtime objects also contain a new field \`_allVariables\` which stores references to all variables as they are created. - The Module constructor accepts two additional (optional) arguments: - \`from\`, the module responsible for calling the constructor, - \`caller\`, an object with information about the function that called the constructor - Module objects have several new fields: - \`_slug\`, contains the notebook slug - \`_copySource\`, if this notebook is created by \`module_copy\`, this contains a reference to the notebook this is copied from - \`_copyMaps\`, an array of the Maps used when this module is copied (see \`module_copy\`) - \`_createdBy\`, an object that stores the \`from\` and \`caller\` information from the constructor as well as a copy of the runtime's \`_defineStack\` when the module was created. - \`_importedBy\`, an array of objects representing variables imported from this notebook. It is added to only in the \`variable_import\` function in the Variable class. The keys of the object are: - \`from\`, a reference to the module that imported this one - \`remote\`, \`name\`, arguments to \`variable_import\` - \`variable\`, a reference to the import variable in \`from\` - Similarly, the Variable constructor accepts an additional \`caller\` argument for tracing purposes; this is also an object with information about the function that called this constructor. - That information is stored in the \`_createdBy\` field of the Variable object, along with the \`_defineStack\` at the time of creation. - Togglable console logging for several events: - \`runtime_module\` pre- & post-\`define\`-evaluation - \`module_derive\` pre- & post-Promise resolution - \`module_copy\` when labeling copies with their \`_slug\` `3d:T80c,evalQueueDoc = md`I also modified the Runtime class to wrap each variable computation in a promise that can be triggered manually. The resolve and reject functions for these promises are placed into objects with keys: - \`res\`: resolve function - \`rej\`: reject function - \`variable\`: reference to the variable whose execution is "paused" These objects are stored in an instance \`evalQueue\` of the following custom "ComputeMap" class (which extends JS's built-in [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) class). The keys are Variable objects and the values are the objects described above, thus \`evalQueue\` contains the set of variables whose execution is waiting for manual execution. The main new features of this class the following: - The ComputeMap constructor accepts a filter function as its second argument (A no-op function \`() => {}\` by default, can also be modified by setting the \`.filter\` property). - When one calls \`evalQueue.set()\` with a key where \`evalQueue.filter(key) == true\`, the key-value pair is not added, instead, \`value.res()\` is called. In other words, the filter function picks out variables whose execution will continue **without** being placed in the manual queue. - When one calls \`evalQueue.delete()\` and the queue becomes empty, then if no new elements are added to the queue within a short delay (100 ms), a promise in the \`.emptyPromise\` field resolves. This is used in the Runtime class (see \`runtime_computeSoon()\`) to trigger the next runtime compute cycle (which grabs new values from generators, etc.). - The ComputeMap constructor accepts a boolean \`trackHistory\` as its third argument (\`false\` by default, this can also be modified by setting the \`._trackHistory\` property). - If \`trackHistory\` is \`true\`, \`evalQueue.history\` will contain an array of past variable computations. This is rather crude; the class simply appends the key of each object that has been deleted or automatically computed in \`.set()\` to this array. `3e:T656,class ComputeMap extends Map { constructor(obj, filter = function do_nothing() {}, trackHistory = false) { super(obj); this.filter = filter; this._res = null; this._timer = new CoalescedTimer(); this.emptyPromise = this.size ? new Promise(res => (this._res = res)) : Promise.resolve(); this._trackHistory = trackHistory; this.history = []; this._resolveEmptyPromise = this._resolveEmptyPromise.bind(this); } _resolveEmptyPromise() { this._res(); this._res = null; } set(key, value) { // reset promise if (!this._res) this.emptyPromise = new Promise(res => (this._res = res)); if (this.filter && this.filter(key)) { // compute if matched by the filter function value.res(); if (this._trackHistory) this.history.push({ type: 'auto', key }); if (this.size === 0) this._timer.do(100, this._resolveEmptyPromise); return this; } super.set(key, value); this._timer.do(0, () => {}); return this; } delete(key) { // assume manual resolve / reject actually occurred if (this._trackHistory && this.has(key)) this.history.push({ type: 'manual', key }); const exist = super.delete(key); if (exist && this.size === 0) { // need to delay this._timer.do(100, this._resolveEmptyPromise); } return exist; } clear() { if (this._trackHistory) { const events = Array.from(this.keys(), key => ({ type: 'clear', key })); this.history.push(...events); // this is unsupported... } super.clear(); this._timer.do(100, this._resolveEmptyPromise); } }3f:T3ecf,Runtime = { function Runtime( moduleMap, // * new argument evalQueue, // * new argument builtins = new Library(), global = window_global ) { this._defineStack = [null]; // * var builtin = this.module(); builtin._slug = '_builtin'; // * Object.defineProperties(this, { /* no-compute start */ _dirty: { value: new Set() }, _updates: { value: new Set() }, _computing: { value: null, writable: true }, /* no-compute end */ _init: { value: null, writable: true }, _modules: { value: new Map(), enumerable: true }, _variables: { value: new Set(), enumerable: true }, _builtin: { value: builtin }, _global: { value: global }, // * begin new properties _allVariables: { value: [], enumerable: true }, _moduleMap: { value: moduleMap }, _defineStack: { enumerable: false }, _evalQueue: { value: evalQueue, enumerable: true }, _scheduled: { value: new Set(), enumerable: true } // * end new properties }); if (log.runtime || log.module || log.variable || log.computation) console.log('------- Runtime called -------'); // * if (builtins) for (var name in builtins) { new Variable(TYPE_IMPLICIT, builtin, null, { caller: 'runtime_builtins' }).define(name, [], builtins[name]); } } Object.defineProperties(Runtime.prototype, { /* no-compute start */ _compute: { value: runtime_compute, writable: true, configurable: true }, _computeSoon: { value: runtime_computeSoon, writable: true, configurable: true }, _computeNow: { value: runtime_computeNow, writable: true, configurable: true }, dispose: { value: runtime_dispose, writable: true, configurable: true }, /* no-compute end */ module: { value: runtime_module, writable: true, configurable: true }, fileAttachments: { value: FileAttachments, writable: true, configurable: true } }); /* no-compute start */ function runtime_dispose() { if (log.computation) console.log('******* Runtime disposed *******'); // * this._computing = Promise.resolve(); this._disposed = true; this._variables.forEach(v => { v._invalidate(); v._version = NaN; }); } /* no-compute end */ function runtime_module(define, observer = noop) { let module; const { _defineStack } = this; if (define === undefined) { if ((module = this._init)) { this._init = null; return module; } return new Module(this, [], _defineStack[_defineStack.length - 1], { // * caller: 'runtime_module' }); } module = this._modules.get(define); if (module) { return module; } this._init = module = new Module( this, [], _defineStack[_defineStack.length - 1], { caller: 'runtime_module', define } ); this._modules.set(define, module); try { // * begin module._slug = this._moduleMap.get(define.toString()); _defineStack.push(module); if (log.runtime) console.log( `${Array(_defineStack.length - 2) .fill(' ') .join('')}defining`, module._slug ); // * end define(this, observer); } finally { this._init = null; } // * begin if (log.runtime) console.log( `${Array(_defineStack.length - 2) .fill(' ') .join('')}finished`, module._slug ); _defineStack.pop(); // * end return module; } /* no-compute start */ function runtime_compute() { return ( this._computing || (this._computing = this._evalQueue.emptyPromise .then(() => { // * begin if (log.computation) console.log('runtime_compute ready'); const evalQueue = this._evalQueue; const variable = 'runtime_compute'; const o = { res: null, rej: null, variable }; return new Promise((res, rej) => { o.res = () => { evalQueue.delete(variable); res(); }; evalQueue.set(variable, o); }); }) .then(() => this._computeSoon())) ); } function runtime_computeSoon() { var runtime = this; return new Promise(function(resolve) { frame(function() { resolve(); runtime._disposed || runtime._computeNow(); }); }); } function runtime_computeNow() { if (log.computation) console.log('runtime_computeNow: started'); // * var queue = [], variables, variable; // Compute the reachability of the transitive closure of dirty variables. // Any newly-reachable variable must also be recomputed. // Any no-longer-reachable variable must be terminated. variables = new Set(this._dirty); variables.forEach(function(variable) { variable._inputs.forEach(variables.add, variables); const reachable = variable_reachable(variable); if (reachable > variable._reachable) { this._updates.add(variable); } else if (reachable < variable._reachable) { if (log.computation) console.log('invalidating (unreachable):', variable); // * variable._invalidate(); } variable._reachable = reachable; }, this); // Compute the transitive closure of updating, reachable variables. variables = new Set(this._updates); variables.forEach(function(variable) { if (variable._reachable) { variable._indegree = 0; variable._outputs.forEach(variables.add, variables); } else { variable._indegree = NaN; variables.delete(variable); } }); this._computing = null; this._updates.clear(); this._dirty.clear(); // Compute the indegree of updating variables. variables.forEach(function(variable) { variable._outputs.forEach(variable_increment); }); do { // Identify the root variables (those with no updating inputs). variables.forEach(function(variable) { if (variable._indegree === 0) { queue.push(variable); } }); // Compute the variables in topological order. while ((variable = queue.pop())) { variable_compute(variable); variable._outputs.forEach(postqueue); variables.delete(variable); } // Any remaining variables are circular, or depend on them. variables.forEach(function(variable) { if (variable_circular(variable)) { variable_error(variable, new RuntimeError("circular definition")); variable._outputs.forEach(variable_decrement); variables.delete(variable); } }); } while (variables.size); function postqueue(variable) { if (--variable._indegree === 0) { queue.push(variable); } } if (log.computation) console.log('runtime_computeNow: ended'); // * } function variable_circular(variable) { const inputs = new Set(variable._inputs); for (const i of inputs) { if (i === variable) return true; i._inputs.forEach(inputs.add, inputs); } return false; } function variable_increment(variable) { ++variable._indegree; } function variable_decrement(variable) { --variable._indegree; } function variable_value(variable) { return variable._promise.catch(variable._rejector); } function variable_invalidator(variable) { return new Promise(function(resolve) { variable._invalidate = resolve; }); } function variable_intersector(invalidation, variable) { let node = typeof IntersectionObserver === "function" && variable._observer && variable._observer._node; let visible = !node, resolve = noop, reject = noop, promise, observer; if (node) { observer = new IntersectionObserver( ([entry]) => (visible = entry.isIntersecting) && ((promise = null), resolve()) ); observer.observe(node); invalidation.then( () => (observer.disconnect(), (observer = null), reject()) ); } return function(value) { if (visible) return Promise.resolve(value); if (!observer) return Promise.reject(); if (!promise) promise = new Promise((y, n) => ((resolve = y), (reject = n))); return promise.then(() => value); }; } function variable_compute(variable) { if (log.computation) console.log('invalidating (variable_compute):', variable); // * variable._module._runtime._scheduled.add(variable); // * variable._errored = null; // * variable._invalidate(); variable._invalidate = noop; variable._pending(); const queuedPromise = Promise.all( variable._inputs.map(variable_value) ).then(inputs => { // * begin if (log.computation) console.log('inputs ready for', variable); const evalQueue = variable._module._runtime._evalQueue; const o = { res: null, rej: null, variable }; return new Promise((res, rej) => { o.res = () => { evalQueue.delete(variable); variable._module._runtime._scheduled.delete(variable); res(inputs); }; o.rej = () => { evalQueue.delete(variable); variable._module._runtime._scheduled.delete(variable); rej(`manual rejection`); // should be caught later on, so we don't need to do other cleanup }; evalQueue.set(variable, o); }); }); // * end var value0 = variable._value, version = ++variable._version, invalidation = null, promise = (variable._promise = queuedPromise .then(function(inputs) { if (variable._version !== version) return; // Replace any reference to invalidation with the promise, lazily. for (var i = 0, n = inputs.length; i < n; ++i) { switch (inputs[i]) { case variable_invalidation: { inputs[i] = invalidation = variable_invalidator(variable); break; } case variable_visibility: { if (!invalidation) invalidation = variable_invalidator(variable); inputs[i] = variable_intersector(invalidation, variable); break; } } } // Compute the initial value of the variable. if (log.computation) console.log('computing:', variable, value0, inputs); // * return variable._definition.apply(value0, inputs); }) .then(function(value) { // If the value is a generator, then retrieve its first value, // and dispose of the generator if the variable is invalidated. // Note that the cell may already have been invalidated here, // in which case we need to terminate the generator immediately! if (generatorish(value)) { if (variable._version !== version) return void value.return(); (invalidation || variable_invalidator(variable)).then( variable_return(value) ); return variable_precompute(variable, version, promise, value); } return value; })); promise.then( function(value) { if (variable._version !== version) return; variable._value = value; variable._fulfilled(value); }, function(error) { if (variable._version !== version) return; variable._value = undefined; variable._rejected(error); variable._errored = error || true; // * } ); } function variable_precompute(variable, version, promise, generator) { function recompute() { var promise = new Promise(function(resolve) { variable._module._runtime._scheduled.add(variable); // * resolve(generator.next()); }).then(function(next) { return next.done ? (variable._module._runtime._scheduled.delete(variable), undefined) : Promise.resolve(next.value).then(function(value) { if (variable._version !== version) return; // * loop is here: // * variable_postrecompute returns the runtime._computing promise, // * which is resolved in the next "frame" const queuedPromise = variable_postrecompute( variable, value, promise ).then(() => { // * begin if (log.computation) console.log('generator yielded:', variable); const evalQueue = variable._module._runtime._evalQueue; const o = { res: null, rej: null, variable }; return new Promise((res, rej) => { o.res = () => { evalQueue.delete(variable); variable._module._runtime._scheduled.delete(variable); recompute(res()); }; o.rej = () => { evalQueue.delete(variable); variable._module._runtime._scheduled.delete(variable); rej(`manual rejection`); // should be caught later on, so we don't need to do other cleanup }; evalQueue.set(variable, o); }); }); variable._observer && variable._observer.node && variable._observer.node.dispatchEvent( new CustomEvent('update_queue', { bubbles: true }) ); // This part was moved into o.res: // queuedPromise.then(() => { // recompute(); // }); // * end variable._fulfilled(value); return value; }); }); promise.catch(function(error) { if (variable._version !== version) return; variable_postrecompute(variable, undefined, promise); variable._rejected(error); variable._errored = error || true; // * }); } // * This returns the first value and then sets up a loop in recompute return new Promise(function(resolve) { resolve(generator.next()); }).then(function(next) { if (next.done) return; promise.then(recompute); return next.value; }); } function variable_postrecompute(variable, value, promise) { var runtime = variable._module._runtime; variable._value = value; variable._promise = promise; variable._outputs.forEach(runtime._updates.add, runtime._updates); // TODO Cleaner? // * begin const runtimePromise = runtime._compute(); setTimeout( () => variable._observer && variable._observer.node && variable._observer.node.dispatchEvent( new CustomEvent('update_queue', { bubbles: true }) ), 150 ); return runtimePromise; // * end } function variable_error(variable, error) { if (log.computation) console.log('invalidating (error):', variable, error); // * variable._invalidate(); variable._invalidate = noop; variable._pending(); ++variable._version; variable._indegree = NaN; (variable._promise = Promise.reject(error)).catch(noop); variable._value = undefined; variable._rejected(error); variable._errored = error || true; // * } function variable_return(generator) { return function() { generator.return(); }; } function variable_reachable(variable) { if (variable._observer !== no_observer) return true; // Directly reachable. var outputs = new Set(variable._outputs); for (const output of outputs) { if (output._observer !== no_observer) return true; output._outputs.forEach(outputs.add, outputs); } return false; } /* no-compute end */ return Runtime; }40:T1d10,Module = { // * new arguments from, caller, defineStack function Module(runtime, builtins = [], from, caller, defineStack) { Object.defineProperties(this, { _slug: { value: null, writable: true, enumerable: true }, // * _scope: { value: new Map(), enumerable: true }, _source: { value: null, writable: true, enumerable: true }, _copySource: { value: null, writable: true, enumerable: true }, // * _runtime: { value: runtime, enumerable: true }, _builtins: { value: new Map([ ["invalidation", variable_invalidation], ["visibility", variable_visibility], ...builtins ]), enumerable: true // * }, // * begin _copyMaps: { // One entry for each (derived) copy of this module; // entries are maps recording the modules imported (copied, in earlier versions) into the derived copy value: [], writable: true, enumerable: true }, _importedBy: { // One entry for each import of this module (only called in variable_import) // {from: this._module, remote, name, variable: this} value: [], enumerable: true }, _createdBy: { from, caller, defineStack: defineStack || runtime._defineStack.slice() } // * end }); if (log.module) console.log('Module created:', this, from, caller); // * } Object.defineProperties(Module.prototype, { _copy: { value: module_copy, writable: true, configurable: true }, _resolve: { value: module_resolve, writable: true, configurable: true }, redefine: { value: module_redefine, writable: true, configurable: true }, define: { value: module_define, writable: true, configurable: true }, derive: { value: module_derive, writable: true, configurable: true }, import: { value: module_import, writable: true, configurable: true }, /* no-compute start */ value: { value: module_value, writable: true, configurable: true }, /* no-compute end */ variable: { value: module_variable, writable: true, configurable: true }, builtin: { value: module_builtin, writable: true, configurable: true } }); function module_redefine(name) { var v = this._scope.get(name); if (!v) throw new RuntimeError(name + " is not defined"); if (v._type === TYPE_DUPLICATE) throw new RuntimeError(name + " is defined more than once"); return v.define.apply(v, arguments); } function module_define() { var v = new Variable(TYPE_NORMAL, this, null, { caller: 'module_define' }); return v.define.apply(v, arguments); } function module_import() { var v = new Variable(TYPE_NORMAL, this, null, { caller: 'module_import' }); return v.import.apply(v, arguments); } function module_variable(observer) { return new Variable(TYPE_NORMAL, this, observer, { caller: 'module_variable', observer }); } /* no-compute start */ async function module_value(name) { var v = this._scope.get(name); if (!v) throw new RuntimeError(name + " is not defined"); if (v._observer === no_observer) { v._observer = true; this._runtime._dirty.add(v); } await this._runtime._compute(); return v._promise; } /* no-compute end */ function module_derive(injects, injectModule) { var copy = new Module(this._runtime, this._builtins, this, { caller: 'module_derive', injects, injectModule }); // * copy._source = this; Array.prototype.forEach.call(injects, function(inject) { if (typeof inject !== "object") inject = { name: inject + "" }; if (inject.alias == null) inject.alias = inject.name; copy.import(inject.name, inject.alias, injectModule); }); const frozenDefineStack = this._runtime._defineStack.slice(); // * Promise.resolve().then(() => { if (log.module) console.log('resolving derive in', this._slug); // * const modules = new Set([this]); for (const module of modules) { for (const variable of module._scope.values()) { if (variable._definition === identity) { // import const module = variable._inputs[0]._module; const source = module._source || module; if (source === this) { // circular import-with! console.warn("circular module definition; ignoring"); // eslint-disable-line no-console return; } modules.add(source); } } } this._copy(copy, new Map(), frozenDefineStack); // * if (log.module) console.log('finished derive in', this._slug); // * }); return copy; } function module_copy(copy, map, frozenDefineStack) { copy._source = this; // * begin copy._slug = this._slug; if (log.module) console.log('copy labeled', copy._slug); copy._copySource = this; this._copyMaps.push({ copy, map }); // * end map.set(this, copy); for (const [name, source] of this._scope) { var target = copy._scope.get(name); if (target && target._type === TYPE_NORMAL) continue; // injection if (source._definition === identity) { // import var sourceInput = source._inputs[0], sourceModule = sourceInput._module; copy.import( sourceInput._name, name, map.get(sourceModule) || (sourceModule._source ? sourceModule._copy( new Module( copy._runtime, copy._builtins, this, { caller: 'module_copy', copy, map, sourceModule }, frozenDefineStack ), map, frozenDefineStack ) // import-with : sourceModule) ); } else { copy.define( name, source._inputs.map(variable_name), source._definition ); } } return copy; } function module_resolve(name) { var variable = this._scope.get(name), value; if (!variable) { variable = new Variable(TYPE_IMPLICIT, this, null, { caller: 'module_resolve', name }); // if (this._runtime._builtin._scope.has(name)) { if (this._builtins.has(name)) { variable.define(name, constant(this._builtins.get(name))); } else if (this._runtime._builtin._scope.has(name)) { variable.import(name, this._runtime._builtin); // } else if (name === "invalidation") { // variable.define(name, variable_invalidation); // } else if (name === "visibility") { // variable.define(name, variable_visibility); } else { try { value = this._runtime._global(name); } catch (error) { return variable.define(name, rethrow(error)); } if (value === undefined) { this._scope.set((variable._name = name), variable); } else { variable.define(name, constant(value)); } } } return variable; } function module_builtin(name, value) { this._builtins.set(name, value); } function variable_name(variable) { return variable._name; } return Module; }41:T2751,Variable = { function Variable(type, module, observer, caller) { if (!observer) observer = no_observer; else observer.variable = this; // * module._runtime._allVariables.push(this); Object.defineProperties(this, { _observer: { value: observer, writable: true }, _definition: { value: variable_undefined, writable: true }, /* no-compute start */ _duplicate: { value: undefined, writable: true }, _duplicates: { value: undefined, writable: true }, _indegree: { value: NaN, writable: true }, // The number of computing inputs. _invalidate: { value: noop, writable: true }, _outputs: { value: new Set(), writable: true }, _promise: { value: Promise.resolve(undefined), writable: true }, _reachable: { value: observer !== no_observer, writable: true }, // Is this variable transitively visible? _rejector: { value: variable_rejector(this) }, _value: { value: undefined, writable: true }, _version: { value: 0, writable: true }, /* no-compute end */ _name: { value: null, writable: true, enumerable: true }, _inputs: { value: [], writable: true, enumerable: true }, _module: { value: module, enumerable: true }, _type: { value: type, enumerable: true }, // * begin _createdBy: { value: { caller, defineStack: module._runtime._defineStack.slice() }, enumerable: true }, _errored: { value: null, writable: true, enumerable: true } //* end }); if (log.variable) console.log('Variable created:', this, module, observer, caller); // * } Object.defineProperties(Variable.prototype, { /* no-compute start */ _pending: { value: variable_pending, writable: true, configurable: true }, _fulfilled: { value: variable_fulfilled, writable: true, configurable: true }, _rejected: { value: variable_rejected, writable: true, configurable: true }, /* no-compute end */ define: { value: variable_define, writable: true, configurable: true }, delete: { value: variable_delete, writable: true, configurable: true }, import: { value: variable_import, writable: true, configurable: true } }); /* no-compute start */ function variable_attach(variable) { variable._module._runtime._dirty.add(variable); variable._outputs.add(this); } function variable_detach(variable) { variable._module._runtime._dirty.add(variable); variable._outputs.delete(this); } /* no-compute end */ function variable_undefined() { throw variable_undefined; } /* no-compute start */ function variable_rejector(variable) { return function(error) { if (error === variable_undefined) throw new RuntimeError( variable._name + " is not defined", variable._name ); if (error instanceof Error && error.message) throw new RuntimeError(error.message, variable._name); throw new RuntimeError( variable._name + " could not be resolved", variable._name ); }; } /* no-compute end */ function variable_duplicate(name) { return function() { throw new RuntimeError(name + " is defined more than once"); }; } function variable_define(name, inputs, definition) { switch (arguments.length) { case 1: { (definition = name), (name = inputs = null); break; } case 2: { definition = inputs; if (typeof name === "string") inputs = null; else (inputs = name), (name = null); break; } } if (log.variable) console.log('(re)defining:', this, name, inputs, definition); // * return variable_defineImpl.call( this, name == null ? null : name + "", inputs == null ? [] : Array.prototype.map.call(inputs, this._module._resolve, this._module), typeof definition === "function" ? definition : constant(definition) ); } function variable_defineImpl(name, inputs, definition) { var scope = this._module._scope, runtime = this._module._runtime; /* no-compute start */ this._inputs.forEach(variable_detach, this); inputs.forEach(variable_attach, this); /* no-compute end */ this._inputs = inputs; this._definition = definition; /* no-compute start */ this._value = undefined; /* no-compute end */ // Is this an active variable (that may require disposal)? if (definition === noop) runtime._variables.delete(this); else runtime._variables.add(this); // Did the variable’s name change? Time to patch references! if (name !== this._name || scope.get(name) !== this) { var error, found; /* no-compute start */ if (this._name) { // Did this variable previously have a name? if (this._outputs.size) { // And did other variables reference this variable? scope.delete(this._name); found = this._module._resolve(this._name); (found._outputs = this._outputs), (this._outputs = new Set()); found._outputs.forEach(function(output) { output._inputs[output._inputs.indexOf(this)] = found; }, this); found._outputs.forEach(runtime._updates.add, runtime._updates); runtime._dirty.add(found).add(this); scope.set(this._name, found); } else if ((found = scope.get(this._name)) === this) { // Do no other variables reference this variable? scope.delete(this._name); // It’s safe to delete! } else if (found._type === TYPE_DUPLICATE) { // Do other variables assign this name? found._duplicates.delete(this); // This variable no longer assigns this name. this._duplicate = undefined; if (found._duplicates.size === 1) { // Is there now only one variable assigning this name? found = found._duplicates.keys().next().value; // Any references are now fixed! error = scope.get(this._name); (found._outputs = error._outputs), (error._outputs = new Set()); found._outputs.forEach(function(output) { output._inputs[output._inputs.indexOf(error)] = found; }); (found._definition = found._duplicate), (found._duplicate = undefined); runtime._dirty.add(error).add(found); runtime._updates.add(found); scope.set(this._name, found); } } else { throw new Error(); } } if (this._outputs.size) throw new Error(); /* no-compute end */ if (name) { // Does this variable have a new name? if ((found = scope.get(name))) { // Do other variables reference or assign this name? if (found._type === TYPE_DUPLICATE) { // Do multiple other variables already define this name? (this._definition = variable_duplicate(name)), (this._duplicate = definition); found._duplicates.add(this); } else if (found._type === TYPE_IMPLICIT) { // Are the variable references broken? /* no-compute start */ (this._outputs = found._outputs), (found._outputs = new Set()); // Now they’re fixed! this._outputs.forEach(function(output) { output._inputs[output._inputs.indexOf(found)] = this; }, this); runtime._dirty.add(found).add(this); /* no-compute end */ scope.set(name, this); } else { // Does another variable define this name? (found._duplicate = found._definition), (this._duplicate = definition); // Now they’re duplicates. error = new Variable(TYPE_DUPLICATE, this._module, null, { caller: 'variable_defineImpl', name, inputs, definition, found }); error._name = name; error._definition = this._definition = found._definition = variable_duplicate( name ); /* no-compute start */ (error._outputs = found._outputs), (found._outputs = new Set()); error._outputs.forEach(function(output) { output._inputs[output._inputs.indexOf(found)] = error; }); /* no-compute end */ error._duplicates = new Set([this, found]); /* no-compute start */ runtime._dirty.add(found).add(error); runtime._updates.add(found).add(error); /* no-compute end */ scope.set(name, error); } } else { scope.set(name, this); } } this._name = name; } /* no-compute start */ runtime._updates.add(this); runtime._compute(); /* no-compute end */ return this; } function variable_import(remote, name, module) { if (arguments.length < 3) (module = name), (name = remote); // * begin (add to importedBy) module._importedBy.push({ from: this._module, remote, name, variable: this }); if (log.variable) console.log('importing:', this, remote, name, module); // * // * end return variable_defineImpl.call( this, name + "", [module._resolve(remote + "")], identity ); } function variable_delete() { if (log.variable) console.log('deleting:', this); // * return variable_defineImpl.call(this, null, [], noop); } /* no-compute start */ function variable_pending() { if (this._observer.pending) this._observer.pending(); } function variable_fulfilled(value) { if (this._observer.fulfilled) this._observer.fulfilled(value, this._name); } function variable_rejected(error) { if (this._observer.rejected) this._observer.rejected(error, this._name); } /* no-compute end */ return Variable; }42:T6aa,md`## Version history See the [Notebook import inspector](https://observablehq.com/@bryangingechen/notebook-import-inspector) for older history. - [2019/09/15](https://observablehq.com/@bryangingechen/notebook-stepper@3749): first publish - [2019/09/28](https://observablehq.com/@bryangingechen/notebook-stepper@3776): prevent unnecessary scroll when interacting with queue form with [a crude hack](#needToScroll) - [2019/10/11](https://observablehq.com/@bryangingechen/notebook-stepper@3823): allow inspected notebooks to import from absolute URLs (see [this forum post](https://talk.observablehq.com/t/in-defense-of-static-imports/2440/4)), allow (crudely) inspecting notebooks hosted at arbitrary URLs (try e.g. <small>https://gistcdn.githack.com/bryangingechen/03dfcef05981f7aec41745e8eccf4057/raw/ce1df31e7f2bbb9c3ee25779c858ded45c05e1f3/3x-1-paths-in-binary.js</small>) - [2019/10/15](https://observablehq.com/@bryangingechen/notebook-stepper@3828): updated to Runtime v4.4.7 - [2019/11/01](https://observablehq.com/@bryangingechen/notebook-stepper@3848): updated to Runtime v4.6.3 - [2019/11/06](https://observablehq.com/@bryangingechen/notebook-stepper@3850): updated to Runtime v4.6.4 - [2019/12/06](https://observablehq.com/@bryangingechen/notebook-stepper@3861): FileAttachments fix. - [2020/08/15](https://observablehq.com/@bryangingechen/notebook-stepper@3937): updated to Runtime v4.7.3, reorganized cells - [2020/09/03](https://observablehq.com/@bryangingechen/notebook-stepper@3937): fixed module parsing, (code lifted from the Mike Bostock's latest ["Notebook Import Visualizer"](https://observablehq.com/@observablehq/notebook-import-visualizer)) - 2021/01/17: updated to Runtime v4.8.1 `43:[] 2f:{"title":"Notebook stepper","cells":[{"id":0,"value":"md`# Notebook stepper\n\n*Suggestions and comments very welcome! See also [this forum post](https://talk.observablehq.com/t/notebook-import-visualizer/2361).*\n\nThe following module and variable graphs owe much (both in terms of ideas and code) to Mike Bostock's [Notebook Visualizer](https://observablehq.com/@mbostock/notebook-visualizer) and [Notebook Import Visualizer](https://observablehq.com/@observablehq/notebook-import-visualizer).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3232,"value":"diagram = md`Enter the URL for a notebook you want to inspect.\n${viewof id} \n[[permalink]](?id=${id}) [[notebook]](${\n id.startsWith('http') ? id : `https://observablehq.com/${id}`\n})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1395,"value":"viewof showUnreachable = checkbox({\n options: [\n 'show <span style=\"background-color: pink; border-radius: 1em; padding: .25em; border: solid black 1px;\">unreachable variables</span> and <span style=\"background-color: pink; border-radius: 1em; padding: .25em; border: solid black 1px;\">unreachable modules</span>'\n ],\n value:\n 'show <span style=\"background-color: pink; border-radius: 1em; padding: .25em; border: solid black 1px;\">unreachable variables</span> and <span style=\"background-color: pink; border-radius: 1em; padding: .25em; border: solid black 1px;\">unreachable modules</span>',\n description: `Note that reachability is computed <b>after</b> the first time <code>runtime_compute</code> is run.<br/> Click the '✅ resolve' button next to <span class=\"node-inline\" style=\"border-color: yellow; background-color: ${nodeColors.queued}; color: var(--syntax_string);\"><code>\"runtime_compute\"</code></span> in the <a href=\"#nbMain\">Execution Control Form</a> below!`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"html`<div class=\"graphForm\" style=\"display: flex;\">${viewof showBuiltinNode}${viewof moduleGraphPercentage}<div>${viewof orientModule}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"html`<div class=\"graphForm\" style=\"display: flex;\">${viewof anon}${viewof variableGraphPercentage}<div>${viewof orientVariable}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2550,"value":"nbContainer = {\n const h = 400;\n const container = html`<div style=\"${\n h !== null ? `height:${h}px; overflow:scroll; ` : ''\n }border: thin solid #555; padding:25px; resize:vertical;\">`;\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3622,"value":"nbRuntime._evalQueue.history","pinned":true,"hidden":false,"mode":"ojs"},{"id":3427,"value":"mutable lastClicked = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1910,"value":"md`Some slightly different notes were written for a [previous version](https://observablehq.com/@bryangingechen/notebook-import-inspector) of this notebook. A description of the modified runtime used to power the above diagram can be found [at the end](#modified).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2329,"value":"md`### Support cells\n\nThe cells here are mostly related to the input elements for the forms above. The runtime data cells are in [this section](#modifiedTest).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"viewof id = {\n const getId = v => {\n let m;\n if ((m = /^https:\\/\\/(api\\.|beta\\.|)observablehq\\.com\\//i.exec(v)))\n v = v.slice(m[0].length);\n if (!(v && v.startsWith('http')) && (m = /(\\/$|\\.js(\\?|$)|#|\\?)/i.exec(v)))\n v = v.slice(0, m.index);\n return v;\n };\n\n const { text } = submit({\n value:\n getId(new URLSearchParams(html`<a href>`.search).get(\"id\")) ||\n \"@bryangingechen/imports-tips-and-tricks\"\n });\n\n text.addEventListener(\"input\", () => {\n const v = getId(text.value);\n if (v !== text.value) text.value = v;\n });\n\n text.addEventListener(\"paste\", () => {\n Promises.delay(50).then(() => {\n text.form.dispatchEvent(new CustomEvent(\"submit\", { cancelable: true }));\n });\n });\n text.form.text.style = 'width:calc(100% - 100px)';\n\n return text.form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"apiUrl = id.startsWith('http')\n ? id\n : `https://api.observablehq.com/${id}.js?v=3` // 'https://api.observablehq.com/d/430afd13ab489695.js?v=3' // 'https://api.observablehq.com/@bryangingechen/imports-tips-and-tricks@556.js?v=3' // 'https://api.observablehq.com/d/43b57dd558b3d1ee.js?v=3'\n// 'https://api.observablehq.com/@kappelmann/lean-utility-functions.js?v=3'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"html`<style>\n.graphForm > *{\n margin-right: 2em;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1144,"value":"viewof showBuiltinNode = checkbox({\n options: [\"Show <code>_builtin</code> module\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3533,"value":"mutable moduleGraphHeight = 500\n// slider({\n// min: 200,\n// max: 1000,\n// step: 1,\n// value: 500,\n// format: v => `${v}px`,\n// title: \"module graph max-height\"\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"viewof moduleGraphPercentage = {\n const ratio = width / viewof moduleGraph.width.baseVal.value;\n const height =\n 2 *\n ratio *\n viewof moduleGraph.querySelector('.node').children[1].ry.baseVal.value;\n const percentage = (100 * mutable moduleGraphHeight) / (height * 15);\n return slider({\n min: 0,\n max: 800,\n step: 1,\n value: Math.min(95, percentage),\n format: v => `${v}%`,\n title: \"module graph zoom\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"viewof orientModule = html`<select>\n<option value=LR selected>left-to-right\n<option value=RL>right-to-left\n<option value=TB>top-to-bottom\n<option value=BT>bottom-to-top\n</select>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"viewof anon = checkbox({\n options: [\n \"Include anonymous cells in variable graph (labeled with # + index)\"\n ],\n value: \"Include anonymous cells in variable graph (labeled with # + index)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3541,"value":"mutable variableGraphHeight = 500\n// slider({\n// min: 200,\n// max: 1000,\n// step: 1,\n// value: 500,\n// format: v => `${v}px`,\n// title: \"variable graph max-height\"\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"viewof variableGraphPercentage = {\n const ratio = width / variableGraph.width.baseVal.value;\n const height =\n 2 *\n ratio *\n ((variableGraph.querySelector('.node') &&\n variableGraph.querySelector('.node').children[1].ry.baseVal.value) ||\n 250);\n const percentage = (100 * mutable variableGraphHeight) / (height * 15);\n return slider({\n min: 0,\n max: 800,\n step: 1,\n value: Math.min(95, percentage),\n format: v => `${v}%`,\n title: \"variable graph zoom\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"viewof orientVariable = html`<select>\n<option value=LR selected>left-to-right\n<option value=RL>right-to-left\n<option value=TB>top-to-bottom\n<option value=BT>bottom-to-top\n</select>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3377,"value":"nodeColors = ({\n unreachable: \"pink\",\n errored: \"#ff9955\",\n scheduled: \"#accaee\",\n queued: \"#caffec\",\n highlighted: \"moccasin\",\n importBorder: \"#20b2aa\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3384,"value":"function nodeFill(v) {\n return v._reachable\n ? nbRuntime._scheduled.has(v)\n ? nbRuntime._evalQueue.has(v)\n ? `, style=\"filled\", fillcolor = \"${nodeColors.queued}\"`\n : `, style=\"filled\", fillcolor = \"${nodeColors.scheduled}\"`\n : v._errored\n ? `, style=\"filled\", fillcolor = \"${nodeColors.errored}\"`\n : \"\"\n : `, style=\"filled\", fillcolor = \"${nodeColors.unreachable}\"`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3354,"value":"html`<style>\n/* Sadly, graphviz can't output CSS classes */\n/* g.node ellipse.unreachable {\n background-color: ${nodeColors.unreachable};\n} */\n/* g.node ellipse.errored, */\n.inspectorLabel.errored,\n.inspectorLabel.errored.scheduled\n/*.inspectorLabel.errored.scheduled.queued,*/ {\n background-color: ${nodeColors.errored};\n}\n/* g.node ellipse.scheduled, */\n.inspectorLabel.scheduled {\n background-color: ${nodeColors.scheduled};\n}\n/* g.node ellipse.queued, */\n.inspectorLabel.scheduled.queued,\n.miniInspectorHolder.queued {\n background-color: ${nodeColors.queued};\n}\n/* g.node ellipse.highlighted, */\n.inspectorLabel.highlighted,\n.inspectorLabel.highlighted.scheduled,\n.inspectorLabel.highlighted.scheduled.queued,\n.inspectorLabel.highlighted.errored,\n.inspectorLabel.highlighted.errored.scheduled,\n/*.inspectorLabel.highlighted.errored.scheduled.queued,*/\n.miniInspectorHolder.queued.highlighted {\n background-color: ${nodeColors.highlighted};\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2622,"value":"html`<style>\n.node-inline {\n white-space: pre;\n border: solid 2px;\n border-radius: 2em;\n padding: 0 0.25em;\n}\n.miniButton {\n white-space: pre;\n}\n.miniButtons {\n margin-right:1em;\n display: flex;\n flex-direction: column;\n}\n.miniContainer {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin: 0.5em 0;\n}\n.miniInspectorHolder {\n display: flex;\n align-items: center;\n flex-direction: row;\n}\n.miniInspector.observablehq {\n flex: auto;\n overflow: auto;\n margin: 0;\n padding: 0 0.5em;\n}\n.miniInspector.observablehq::before {\n left: 0;\n}\n.inspectorLabel {\n padding: 0.5em;\n background-color: white;\n border: solid black 1px;\n border-radius: 2em;\n margin-right: 0.25em;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3442,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3761,"value":"mutable needToScroll = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":2732,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":2738,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"modifiedTest = md`## Modified Runtime\n\nIn this subsection we demonstrate the modified Observable runtime library which attaches extra information to the various module and variable objects for ease of inspection. See [implementation notes](#modified) for more details. Some of the cells here are used as data sources for the module and variable graphs above.\n\nThis cell gives a map from the string representations of the \"define\" functions of notebook JS modules to their \"slugs\". This is used to label module objects with their slugs as they are created.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"nbImportMap = await importMap(apiUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"md`Now we load the main module of the notebook we're looking at. Some properties have been made enumerable so that we can see them in this notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"nbDefine = (await import(apiUrl)).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"nbRuntime = nbMain._runtime","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"nbAllModulesSet = new Set(\n [...nbRuntime._variables].map(({ _module }) => _module)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"nbAllModules = Array.from(nbAllModulesSet, (m, i) => {\n m._id = i;\n return m;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"nbAllVariables = nbRuntime._allVariables.map((v, i) => {\n v.def = v._definition.toString();\n v._id = i;\n if (v._observer && v._observer.label && !v._name) {\n v._observer.label.setAttribute('data-tooltip', '#' + v._id);\n }\n return v;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"md`For many purposes, it's enough to know about the \\`_reachable\\` variables and modules containing them:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"nbReachableVariables = [...nbRuntime._allVariables].filter(({ _reachable }) => _reachable)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1392,"value":"nbReachableModulesSet = new Set(nbReachableVariables.map(({ _module }) => _module))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1444,"value":"nbReachableModules = Array.from(nbReachableModulesSet)","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"md`### Runtime ${version}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"version = '4.8.1'","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"observable = require(`@observablehq/runtime@${version}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"// This is currently unused\n// oRuntime = observable.Runtime","pinned":false,"hidden":false,"mode":"ojs"},{"id":2548,"value":"Inspector = observable.Inspector","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"// used below\nLibrary = observable.Library","pinned":false,"hidden":false,"mode":"ojs"},{"id":3929,"value":"md`The following 3 cells are copied from the Observablehq [\\`stdlib\\`](https://github.com/observablehq/stdlib) and are used for implementing FileAttachments in the target notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3854,"value":"// https://github.com/observablehq/stdlib/blob/3c2c5dd60d7723ba61337ece7a4df4f94c78b796/src/fileAttachment.js#L1\nasync function remote_fetch(file) {\n const response = await fetch(await file.url());\n if (!response.ok) throw new Error(`Unable to load file: ${file.name}`);\n return response;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3852,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":3833,"value":"// https://github.com/observablehq/stdlib/blob/3c2c5dd60d7723ba61337ece7a4df4f94c78b796/src/fileAttachment.js#L50\nfunction FileAttachments(resolve) {\n return name => {\n const url = resolve((name += \"\")); // Returns a Promise, string, or null.\n if (url == null) throw new Error(`File not found: ${name}`);\n return new FileAttachmentObject(url, name);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"md`### Parsing JS module files\n\nCode for parsing modules adapted from [Mike Bostock's \"Notebook Import Visualizer\"](https://observablehq.com/@observablehq/notebook-import-visualizer) v157.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"async function fetchDefine(apiUrl) {\n const [{ default: define }, src] = await Promise.all([\n import(apiUrl),\n fetch(apiUrl).then(res => res.text())\n ]);\n return { define, src };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3950,"value":"acorn = require(\"acorn@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"function parseImports(src, url) {\n const program = acorn.parse(src, {\n ecmaVersion: 11,\n sourceType: \"module\"\n });\n return program.body\n .filter(node => node.type === \"ImportDeclaration\")\n .map(node => ({\n apiUrl: new URL(node.source.value, url) + \"\",\n slug:\n node.source.value[0] === '/'\n ? node.source.value.slice(1, -7)\n : node.source.value\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"async function importMap(apiUrl) {\n const map = new Map();\n const seen = new Set([apiUrl]);\n\n const { src, define } = await fetchDefine(apiUrl);\n const mainSlug = apiUrl.startsWith('https://api.observablehq.com')\n ? apiUrl.match(/\\.com\\/([^\\.]+)/)[1]\n : apiUrl;\n map.set(define.toString(), mainSlug);\n const queue = parseImports(src, apiUrl);\n\n for (const { apiUrl, slug } of queue) {\n if (!seen.has(apiUrl)) {\n seen.add(apiUrl);\n const { src, define } = await fetchDefine(apiUrl);\n map.set(define.toString(), slug);\n queue.push(...parseImports(src, apiUrl));\n }\n }\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof logForm = checkbox({\n title: \"Logging\",\n description: \"Select events to log\",\n options: [\n { value: \"runtime\", label: \"Runtime\" },\n { value: \"module\", label: \"Module\" },\n { value: \"variable\", label: \"Variable\" },\n { value: \"computation\", label: \"Computation\" }\n ],\n value: [],\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2423,"value":"log = {\n const o = {\n runtime: false,\n module: false,\n variable: false,\n computation: false\n };\n for (const e of logForm) {\n o[e] = true;\n }\n return o;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3087,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":2639,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":3095,"value":"md`The CoalescedTimer class and the Event classes from the [\\`lean-web-editor\\`](https://github.com/leanprover/lean-web-editor) and [\\`lean-client-js\\`](https://github.com/leanprover/lean-client-js) repos are used to provide the delayed promise resolution in ComputeMap.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2941,"value":"// https://github.com/leanprover/lean-client-js/blob/2493651b01bd9e7d903fb441c5be704f1f84a745/lean-client-js-core/src/event.ts\nclass Event {\n constructor() {\n this.handlers = [];\n }\n on(handler) {\n this.handlers.push(handler);\n return {\n dispose: () => {\n this.handlers = this.handlers.filter(h => h !== handler);\n }\n };\n }\n\n fire(event) {\n for (const h of this.handlers) {\n h(event);\n }\n }\n\n dispose() {\n this.handlers = [];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2946,"value":"// https://github.com/leanprover/lean-web-editor/blob/8922763b22177adccf9d59e39eda504ee7680fe1/src/langservice.ts\nclass CoalescedTimer {\n do(ms, f) {\n if (this.timer) {\n clearTimeout(this.timer);\n }\n this.timer = setTimeout(() => {\n this.timer = undefined;\n f();\n }, ms);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2963,"value":"// used for debugging\n// {\n// const button = html`<button>resolve evalQueue`;\n// button.onclick = nbRuntime._evalQueue._resolveEmptyPromise;\n// return button;\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":3102,"value":"md`### Modified Runtime implementation:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3863,"value":"md`Stuff from [\\`src/errors.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/errors.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"RuntimeError = Error","pinned":false,"hidden":false,"mode":"ojs"},{"id":3867,"value":"md`Stuff from [\\`src/generatorish.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/generatorish.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"function generatorish(value) {\n return (\n value &&\n typeof value.next === \"function\" &&\n typeof value.return === \"function\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3905,"value":"md`Stuff from [\\`src/rethrow.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/rethrow.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"function rethrow(e) {\n return function() {\n throw e;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3874,"value":"md`Stuff from [\\`src/runtime.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/runtime.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"frame = requestAnimationFrame","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"variable_invalidation = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"variable_visibility = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"function window_global(name) {\n return window[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3890,"value":"md`Stuff from [\\`src/module.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/module.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":3887,"value":"md`Stuff from [\\`src/variable.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/variable.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"TYPE_NORMAL = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"TYPE_IMPLICIT = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"TYPE_DUPLICATE = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"no_observer = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":3914,"value":"md`Stuff from [\\`src/identity.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/identity.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"function identity(x) {\n return x;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3917,"value":"md`Stuff from [\\`src/noop.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/noop.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"noop = () => {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3920,"value":"md`Stuff from [\\`src/constant.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/constant.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"function constant(x) {\n return function() {\n return x;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"md`## Imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"import {submit} from \"@mbostock/more-deliberate-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"import { slider, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"// graphviz\nimport { dot } from \"@mbostock/graphviz\"\n// import { dot } from \"e6014ad3fa5393cc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"import { getAllPropertyNamesAsObj, funSource } from '048035bf9a9c263e'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3741,"value":"md`## TODO\n\n- functions / UI for re-evaluating (re-defining?) arbitrary cells?\n- interactive \"\\`evalQueue\\` filtering\" features (select by clicking on cells?)\n- better layout for the graphs + live embedding + execution control form\n- put live embedding in an iframe / worker\n- do something with history?\n- let [lastClicked](#lastClicked) support clicking on arbitrary variable nodes\n- switch to elkjs for graph drawing per [Tom MacWright's notebooks](https://observablehq.com/@tmcw/notebook-visualizer-elk-edition)?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2405,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"md`## LICENSE\n\nThis notebook contains code from [\\`observablehq/runtime\\`](https://github.com/observablehq/runtime), which is Copyright Observable, Inc. and licensed under [the ISC License](https://github.com/observablehq/runtime/blob/master/LICENSE). Any modifications / original code made here is also made available under the terms of the ISC License.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"LICENSE = `Copyright 2019\n\nPermission to use, copy, modify, and/or distribute this software for any purpose\nwith or without fee is hereby granted, provided that the above copyright notice\nand this permission notice appear in all copies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND\nFITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS\nOF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER\nTORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF\nTHIS SOFTWARE.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W43","stdlib":"1","titling":"auto"} </article></body></html>

31:Ta48,viewof moduleGraph = { const svg = await dot`${dotSourceModule}`; mutable moduleGraphHeight = 500; // reset height... (check this) const nodes = svg.querySelectorAll('.node'); function nodeNumber(node) { return +node.firstElementChild.textContent; } function colorNodes(colors) { for (const node of nodes) { const j = nodeNumber(node); node.children[1].setAttribute( "fill", colors[j] || (nbReachableModulesSet.has(nbAllModules[j]) ? "none" : nodeColors.unreachable) ); } } function update(j) { svg.value = j; mutable variableGraphHeight = 500; // reset height... (check this) svg.dispatchEvent(new CustomEvent('input')); const colors = {}; colors[j] = 'yellow'; colorNodes(colors); } for (const node of nodes) { node.style.cursor = "pointer"; node.addEventListener('click', () => { mutable needToScroll = true; update(+node.firstElementChild.textContent); // }); node.addEventListener('mouseover', () => { const colors = {}; colors[svg.value] = 'yellow'; colors[+node.firstElementChild.textContent] = nodeColors.highlighted; colorNodes(colors); svg.dispatchEvent( new CustomEvent('module_mouseover', { detail: +node.firstElementChild.textContent }) ); }); node.addEventListener('mouseout', () => { mouseout(); svg.dispatchEvent(new CustomEvent('module_mouseout')); }); } function mouseout() { const colors = {}; colors[svg.value] = 'yellow'; colorNodes(colors); } svg.addEventListener('var_mouseover', ({ detail }) => { const colors = {}; colors[svg.value] = 'yellow'; colors[detail] = nodeColors.highlighted; colorNodes(colors); }); svg.addEventListener('var_mouseout', mouseout); svg.addEventListener('var_click', ({ detail }) => { update(detail); }); svg.addEventListener('change_module', ({ detail }) => { update(detail._module._id); }); function variableMouseover({ detail }) { const colors = {}; colors[svg.value] = 'yellow'; colors[nbAllVariables[detail]._module._id] = nodeColors.highlighted; colorNodes(colors); } viewof nbMain.addEventListener('variable_mouseover', variableMouseover); viewof nbMain.addEventListener('variable_mouseout', mouseout); update((this && this.value) || 1); invalidation.then(() => { viewof nbMain.removeEventListener('variable_mouseover', variableMouseover); viewof nbMain.removeEventListener('variable_mouseout', mouseout); }); return svg; }32:T925,viewof dotSourceModule = { const source = `digraph "${id}" { rankdir = ${orientModule}; ${(!showUnreachable ? nbReachableModules : nbAllModules) .map(m => // nodes are modules, labeled by their slugs // border colored blue if the module was created by module_copy showBuiltinNode || m !== nbMain._runtime._builtin ? `${m._id} [label = "${m === nbMain ? '👑 ' : ''}${m._slug}"${ m._copySource ? ', color = "blue"' : '' }${ // slug text colored grey if it is "_builtin" m._slug === '_builtin' ? ', fontcolor="#777777"' : '' }${ nbReachableModulesSet.has(m) ? "" : `, style="filled", fillcolor = "${nodeColors.unreachable}"` }]; ${Array.from( // remove duplicate edges? new Set( m._importedBy // edges correspond to imports .filter(d => showUnreachable || d.variable._reachable) .map( d => `${ d.from // arrow from the notebook to any notebook that imports / derives / causes it to be copied ? `${m._id} -> ${d.from._id}` : m !== nbMain // d.from = null means imported by main notebook ? `${m._id} -> ${nbMain._id}` : "" // don't draw self-loop on main notebook }` ) ) ).join(" ")}` : `` ) .join("\n ")} }`; const pre = md`\`\`\` ${source} \`\`\``; const container = html``; const checkSource = html`<input type="checkbox">`; const showSource = html`<label style="font-size: 80%">${checkSource} Show module graph source`; const download = html` ${DOM.download( new Blob([source], { type: "text/vnd.graphviz" }), id + '.gv', "Download module graph as GV" )} `; const div = html`${download} ${showSource}${container}`; checkSource.onclick = e => { if (checkSource.checked) { container.appendChild(pre); } else { container.removeChild(pre); } }; checkSource.oninput = e => { e.stopPropagation(); }; div.value = source; pre.style = "overflow:auto; height:300px; resize:vertical;"; div.dispatchEvent(new CustomEvent("update")); return div; }33:T13f4,variableGraph = { const svg = await dot`${dotSourceVariable}`; const nodes = svg.querySelectorAll('.node'); function getVarOf(node) { return nbAllVariables[+node.children[0].textContent]; } function nodeColor(v) { return v._reachable ? v._errored ? nodeColors.errored : nbRuntime._scheduled.has(v) ? nbRuntime._evalQueue.has(v) ? nodeColors.queued : nodeColors.scheduled : "none" : nodeColors.unreachable; } function colorNodes(colors) { for (const node of nodes) { const v = getVarOf(node); node.children[1].setAttribute("fill", colors[v._id] || nodeColor(v)); } } for (const node of nodes) { const variable = getVarOf(node); const currModule = variable._module; if (currModule._id !== moduleGraph) { node.setAttribute('cursor', 'pointer'); node.addEventListener('mouseover', () => { const colors = {}; for (const v of nbAllVariables) { if (v._module === currModule) colors[v._id] = nodeColors.highlighted; } colorNodes(colors); viewof moduleGraph.dispatchEvent( new CustomEvent('var_mouseover', { detail: currModule._id }) ); }); node.addEventListener('mouseout', () => { viewof moduleGraph.dispatchEvent(new CustomEvent('var_mouseout')); colorNodes({}); }); node.addEventListener('click', () => { viewof moduleGraph.dispatchEvent( new CustomEvent('var_click', { detail: currModule._id }) ); }); } else if ( nbRuntime._evalQueue.has(variable) || (currModule === nbMain && variable._observer && variable._observer.label) ) { const target = (variable._observer && variable._observer.label) || nbContainer; node.setAttribute('cursor', 'pointer'); node.addEventListener('mouseover', () => { target.dispatchEvent( new CustomEvent('inspector_mouseover', { detail: variable, bubbles: true }) ); }); node.addEventListener('mouseout', () => { target.dispatchEvent( new CustomEvent('inspector_mouseout', { detail: variable, bubbles: true }) ); }); node.addEventListener('click', () => { mutable lastClicked = variable; target.dispatchEvent( new CustomEvent('inspector_click', { detail: variable, bubbles: true }) ); }); } } function variableMouseover({ detail }) { const colors = {}; for (const v of nbAllVariables) { if (v._id === detail) colors[v._id] = nodeColors.highlighted; } colorNodes(colors); } function moduleMouseover({ detail }) { const colors = {}; for (const v of nbAllVariables) { if (v._module === nbAllModules[detail]) colors[v._id] = nodeColors.highlighted; } colorNodes(colors); } function moduleMouseout() { colorNodes({}); } colorNodes({}); function inspectorClick({ detail }) { const node = Array.from(nodes).find(node => getVarOf(node) === detail); // need to target ellipse; firefox won't scroll properly to the g if (node) // scrollParentToChild(svg, node.children[1]); node.children[1].scrollIntoView({ behavior: "smooth", block: "nearest" }); else viewof moduleGraph.dispatchEvent( new CustomEvent('change_module', { detail, bubbles: true }) ); } if (mutable lastClicked && mutable needToScroll) { const node = Array.from(nodes).find( node => getVarOf(node) === mutable lastClicked ); if (node) { // scrollParentToChild(svg, node.children[1]); setTimeout(() => { node.children[1].scrollIntoView({ behavior: "smooth", block: "nearest" }); mutable needToScroll = false; }, 100); } } viewof moduleGraph.addEventListener('module_mouseover', moduleMouseover); viewof moduleGraph.addEventListener('module_mouseout', moduleMouseout); viewof nbMain.addEventListener('variable_mouseover', variableMouseover); viewof nbMain.addEventListener('variable_mouseout', moduleMouseout); viewof nbMain.addEventListener('update_queue', moduleMouseout); viewof nbMain.addEventListener('scroll_to_queued', inspectorClick); nbContainer.addEventListener('inspector_click', inspectorClick); invalidation.then(() => { viewof moduleGraph.removeEventListener('module_mouseover', moduleMouseover); viewof moduleGraph.removeEventListener('module_mouseout', moduleMouseout); viewof nbMain.removeEventListener('variable_mouseover', variableMouseover); viewof nbMain.removeEventListener('variable_mouseout', moduleMouseout); viewof nbMain.removeEventListener('update_queue', moduleMouseout); viewof nbMain.removeEventListener('scroll_to_queued', inspectorClick); nbContainer.removeEventListener('inspector_click', inspectorClick); }); return svg; }34:Tae3,viewof dotSourceVariable = { const main = nbAllModules[moduleGraph]; const variables = (!showUnreachable ? nbReachableVariables : nbAllVariables) .filter(({ _module }) => _module === main) .filter(({ _name }) => anon || _name !== null); const varSet = new Set(variables); const extraVars = []; // Should I try to do something with duplicate cells? const source = `digraph "${main._slug}" { rankdir = ${orientVariable}; ${Array.from( variables, v => `${v._id} [${v._name ? `label = "${v._name}"` : `label = "#${v._id}"`}${ v._module === main._runtime._builtin ? `, color = "gray", fontcolor = "#555555"` : v._inputs.length === 1 && v._inputs[0]._module !== v._module ? `, color = "${nodeColors.importBorder}"` : "" }${nodeFill(v)}]; ${v._inputs .map(i => { if (!varSet.has(i)) { varSet.add(i); extraVars.push(i); } return i._id !== undefined ? `${i._id} -> ${v._id} ${ v._module !== i._module ? `[color = "#20b2aa"]` : "" };` : (console.log('untagged variable:', i, 'in _inputs of;', v), ``); }) .join(" ")}` ).join("\n ")} ${Array.from( extraVars, v => `${v._id} [${ v._name ? `label = "${ v._module !== main ? // need a check here: many same-module cells are marked as unreachable before evaluation starts // so they end up in this array `${v._module === nbMain ? '👑 ' : ''}${ v._module !== main._runtime._builtin ? `${v._module._slug}#` : `` }` : '' }${v._name}"` : `` }${ v._module === main._runtime._builtin ? `, color = "gray", fontcolor = "#555555"` : `, style = "dashed", fontcolor = "#555555"` }${nodeFill(v)}];` ).join("\n ")} }`; const pre = md`\`\`\` ${source} \`\`\``; const container = html``; const check = html`<input type="checkbox">`; const show = html`<label style="font-size: 80%">${check} Show variable graph source`; const download = html` ${DOM.download( new Blob([source], { type: "text/vnd.graphviz" }), id + '.gv', "Download variable graph as GV" )} `; const div = html`${download} ${show}${container}`; check.onclick = () => { if (check.checked) { container.appendChild(pre); } else { container.removeChild(pre); } }; check.oninput = e => { e.stopPropagation(); }; div.value = source; pre.style = "overflow:auto; height:300px; resize:vertical;"; div.dispatchEvent(new CustomEvent("update")); return div; }35:T292b,viewof nbMain = { let evalQueue; let runtime; let mainVariables; async function init() { evalQueue = new ComputeMap([]); filterSelect.oninput(); historyCheck.onclick(); runtime = new Runtime(nbImportMap, evalQueue); const main = nbDefine(runtime, InspectorInto(nbContainer)); main._slug = [...nbImportMap.values()][0]; mainVariables = Array.from(runtime._allVariables).filter( ({ _module }) => _module === main ); div.value = main; div.queue = evalQueue; div.dispatchEvent(new CustomEvent('input')); } const mainView = html`<span class="miniInspector">`; const mainContainer = html`<div class="miniContainer"><span style="margin-right:1em;">main module:</span> ${mainView}`; const mainInspector = new Inspector(mainView); const runtimeView = html`<span class="miniInspector">`; const runtimeInspector = new Inspector(runtimeView); const runtimeDispose = html`<button class="miniButton">🗑 dispose!`; const runtimeRestart = html`<button class="miniButton">♻️ restart!`; const runtimeButtons = html`<span class="miniButtons">${runtimeRestart} ${runtimeDispose}`; const runtimeContainer = html`<div class="miniContainer">${runtimeButtons} ${runtimeView}`; const justComputed = html`<span class="miniInspector">`; const justComputedContainer = html`<div class="miniContainer"><span style="margin-right:1em;">last manual resolve / reject:</span> ${justComputed}`; const justComputedInspector = new Inspector(justComputed); let queueItems = new Map(); const queueView = html`<div style="height: 4.5em; overflow: auto; padding-left: 0.5em; padding-right: 0.5em; resize: vertical; border: solid black 1px;">`; const updateQueueButton = html`<button class="miniButton">refresh`; const queueSize = html`<output>`; const queueCheck = html`<input type="checkbox" checked>`; queueCheck.onclick = () => (queueView.style.display = queueCheck.checked ? "block" : "none"); const resolveNext = html`<button class="miniButton">✅ resolve next`; resolveNext.onclick = () => { const o = evalQueue.values().next().value; if (o) { const { variable } = o; justComputedInspector.fulfilled(variable); if (log.computation) console.log('manual resolve:', o); o.res(); queueView.removeChild(queueItems.get(o).nextContainer); queueItems.delete(o); setTimeout(updateQueue, 250); } }; const filterSelect = html`<select> <option value="nothing">nothing (choose another option to pause)</option> <option value="runtime_compute" selected>each runtime_compute cycle</option> <option value="main">variables in the 👑 main module</option> <option value="everything">every variable</option> `; const filterControl = html`<label>manually execute: ${filterSelect}`; filterSelect.oninput = () => { const { value } = filterSelect; evalQueue.filter = value === 'everything' ? () => false : value === 'nothing' ? () => true : value === "runtime_compute" ? v => v !== "runtime_compute" : v => v._module !== div.value && v !== "runtime_compute"; }; const historyCheck = html`<input type="checkbox">`; historyCheck.onclick = () => { evalQueue._trackHistory = historyCheck.checked; }; const historyView = html`<label>[track history ${historyCheck}]`; const div = html`<h3>Execution Control</h3><div>${mainContainer}</div> ${runtimeContainer} ${updateQueueButton} evaluation queue (size: ${queueSize}): <label>[show ${queueCheck}]</label> ${resolveNext} [${filterControl}] ${queueView} ${justComputedContainer} ${historyView}`; function queueItem(o) { const { variable } = o; const nextViewInner = html`<span class="miniInspector">`; const nextInspector = new Inspector(nextViewInner); const nextViewIcon = html`<span style="cursor:pointer;" title="${variable !== 'runtime_compute' && variable._module._slug}#${variable !== "runtime_compute" && (variable._name || '#' + variable._id)}">${ variable._observer && variable._observer.label ? '👀' : '👁' }`; const nextView = html`<span class="miniInspectorHolder queued" style="border-radius: 20px; border: solid ${ variable === "runtime_compute" ? "yellow" : variable._inputs.length === 1 && variable._inputs[0]._module !== variable._module ? nodeColors.importBorder : "black" } 1px;">${ variable === "runtime_compute" ? '' : nextViewIcon }${nextViewInner}`; const resolveNext = html`<button class="miniButton">✅ resolve`; const rejectNext = variable !== "runtime_compute" ? html`<button class="miniButton">❌ reject` : ''; const buttons = html`<span class="miniButtons">${resolveNext} ${rejectNext}`; const nextContainer = html`<div class="miniContainer">${buttons} ${nextView}`; resolveNext.onclick = () => { justComputedInspector.fulfilled(variable); if (log.computation) console.log('manual resolve:', o); o.res(); queueView.removeChild(nextContainer); queueItems.delete(o); setTimeout(updateQueue, 250); }; if (o.variable !== "runtime_compute") { rejectNext.onclick = () => { justComputedInspector.fulfilled(variable); if (log.computation) console.log('manual reject:', o); o.rej(); queueView.removeChild(nextContainer); queueItems.delete(o); setTimeout(updateQueue, 250); }; nextContainer.onmouseover = () => { div.dispatchEvent( new CustomEvent('variable_mouseover', { detail: variable._id }) ); nextView.classList.add('highlighted'); if (variable._observer && variable._observer.label) variable._observer.label.classList.add('highlighted'); }; nextContainer.onmouseout = () => { div.dispatchEvent(new CustomEvent('variable_mouseout')); nextView.classList.remove('highlighted'); if (variable._observer && variable._observer.label) variable._observer.label.classList.remove('highlighted'); }; nextViewIcon.onclick = () => { mutable lastClicked = variable; variable._observer && variable._observer.label && scrollParentToChild(nbContainer, variable._observer.label); nextContainer.dispatchEvent( new CustomEvent('scroll_to_queued', { detail: variable, bubbles: true }) ); setTimeout( () => div.dispatchEvent( new CustomEvent('variable_mouseover', { detail: variable._id }) ), 200 ); }; } nextInspector.fulfilled(variable); queueView.appendChild(nextContainer); return { resolveNext, rejectNext, nextView, nextContainer, nextInspector }; } function updateQueue() { runtimeInspector.fulfilled(runtime); for (const variable of mainVariables) { if (variable._observer && variable._observer.label) { const { label } = variable._observer; if (variable._errored) label.classList.add('errored'); else label.classList.remove('errored'); if (evalQueue.has(variable)) label.classList.add('queued'); else label.classList.remove('queued'); if (runtime._scheduled.has(variable)) label.classList.add('scheduled'); else label.classList.remove('scheduled'); } } for (const o of evalQueue.values()) { if (!queueItems.has(o)) { queueItems.set(o, queueItem(o)); } const { variable } = o; } const { size } = evalQueue; queueSize.value = size; queueView.style.height = Math.min(4.5 * size, 25) + 'em'; div.dispatchEvent(new CustomEvent('update_queue')); div.dispatchEvent(new CustomEvent('input')); } nbContainer.addEventListener('update_queue', updateQueue); updateQueueButton.onclick = updateQueue; runtimeDispose.onclick = () => { runtime.dispose(); evalQueue.clear(); for (const { nextContainer } of queueItems.values()) { queueView.removeChild(nextContainer); } queueItems.clear(); updateQueue(); }; runtimeRestart.onclick = async () => { clear(); nbContainer.addEventListener('inspector_mouseover', inspectorMouseover); nbContainer.addEventListener('inspector_mouseout', inspectorMouseout); nbContainer.addEventListener('inspector_click', inspectorClick); runtime.dispose(); for (const { nextContainer } of queueItems.values()) { queueView.removeChild(nextContainer); } queueItems.clear(); await init(); mainInspector.fulfilled(div.value); justComputedInspector.fulfilled(null); updateQueue(); }; function clear() { while (nbContainer.firstChild) { nbContainer.removeChild(nbContainer.firstChild); } nbContainer.removeEventListener('update_queue', updateQueue); nbContainer.removeEventListener('inspector_mouseover', inspectorMouseover); nbContainer.removeEventListener('inspector_mouseout', inspectorMouseout); nbContainer.removeEventListener('inspector_click', inspectorClick); } function inspectorMouseover({ target, detail }) { target.classList.add('highlighted'); div.dispatchEvent( new CustomEvent('variable_mouseover', { detail: detail._id }) ); if (evalQueue.has(detail)) { const { nextView } = queueItems.get(evalQueue.get(detail)); nextView.classList.add('highlighted'); } } function inspectorMouseout({ target, detail }) { target.classList.remove('highlighted'); div.dispatchEvent( new CustomEvent('variable_mouseout', { detail: detail._id }) ); if (evalQueue.has(detail)) { const { nextView } = queueItems.get(evalQueue.get(detail)); nextView.classList.remove('highlighted'); } } function inspectorClick({ detail, target }) { mutable lastClicked = detail; scrollParentToChild(nbContainer, target); if (evalQueue.has(detail)) { const { nextView } = queueItems.get(evalQueue.get(detail)); scrollParentToChild(queueView, nextView); } } nbContainer.addEventListener('inspector_mouseover', inspectorMouseover); nbContainer.addEventListener('inspector_mouseout', inspectorMouseout); nbContainer.addEventListener('inspector_click', inspectorClick); invalidation.then(clear); await init(); mainInspector.fulfilled(div.value); justComputedInspector.fulfilled(null); updateQueue(); return div; }36:T151b,instructions = md`## Instructions The first diagram (the **module graph**) shows the imports (arrows from <span class="node-inline">black nodes</span>) and import-withs (arrows from / to <span style="border-color:blue;" class="node-inline">blue nodes</span>) between the dependencies of the notebook. Notebooks that have not (yet) been marked "reachable" are <span style="background-color:${nodeColors.unreachable};" class="node-inline">filled with ${nodeColors.unreachable}</span> (if you choose to display them), and the "main" notebook is marked with a crown "👑". To be more precise, these are the ["module objects"](https://github.com/observablehq/runtime#modules) that are created by the [Observable runtime](https://github.com/observablehq/runtime) when the notebook you entered above is loaded. Beneath the module graph is the **variable graph**, an adaptation of Mike Bostock's [Notebook Visualizer](https://observablehq.com/@mbostock/notebook-visualizer) to show the [variables](https://github.com/observablehq/runtime#variables) (roughly speaking, notebook cells) in a <span style="background-color: yellow;" class="node-inline">selected module</span>. Variables in the variable graph are color-coded: - <span style="border-color: ${nodeColors.importBorder}" class="node-inline">imported variables</span>, - <span style="background-color: ${nodeColors.errored}" class="node-inline">errored variables</span>, - <span style="background-color: ${nodeColors.scheduled}" class="node-inline">"scheduled" variables</span>, - <span style="background-color: ${nodeColors.queued}" class="node-inline">queued variables</span>, Underneath that is a **live embedding** of the main notebook itself. Each cell is labeled with either <span style="padding:.1em;" class="inspectorLabel tooltip-right" data-tooltip="#anonCell">✧</span> (for an anonymous cell) or <span style="padding:.1em;" class="inspectorLabel tooltip-right" data-tooltip="namedCell">✦</span> (for a named cell). These elements are color-coded like the variables in the variable graph. *Note that import variables do not (currently?) appear and the values of view / mutable cells show up unnecessarily.* Finally, there is an **execution control** form that allows you to step through the evaluation of the variables in the notebook. See the tutorial ["How Observable runs"](https://observablehq.com/@observablehq/how-observable-runs) for a high-level description of Observable's execution model. - The "evaluation queue" contains the variables that are ready to execute. As variables are resolved, more variables may become ready to execute and get added to the queue. - Sometimes the queue will not be up to date. This may occur for cells that rely on the \`visibility\` promise, and possibly for other generators as well. Click the "Refresh" button to update the UI if you suspect this is happening. - When the queue is cleared (or when the runtime is (re)started), it shows a special <span class="node-inline" style="border-color: yellow; background-color: ${nodeColors.queued}; color: var(--syntax_string);">\`"runtime_compute"\`</span> element that marks the start of the next round of execution. - Each item in the queue can be manually resolved (executed normally) or rejected (an error is thrown). - The dropdown menu allows you to select which variables end up in the manual queue and which are executed automatically (you can customize this further by assigning to \`nbRuntime._evalQueue.filter\`, see [the description of the \`ComputeMap\`](#evalQueueDoc)). - You can also track the history of executed cells in \`nbRuntime._evalQueue.history\` by checking the "track history" box. The graphics are interactive: - In the module graph: - Hovering over a node <span style="background-color: ${nodeColors.highlighted};" class="node-inline">highlights</span> the module's variables in the variable graph (if any), - Clicking on a node opens that module in the variable graph. - In the variable graph: - Hovering over the source variable of an import (with dashed outline) highlights its "sibling" variables and the corresponding module in the module graph. - Clicking on the source variable of an import opens that module in the variable graph. - Clicking on a variable which is also displayed the live embedding and / or execution control will scroll those elements to make that variable visible. - In the live embedding: - You can interact with most notebook cells as usual. However, note that generators, view cells and mutable cells will not update until the next \`runtime_compute\` cycle is triggered. Also be aware that the cells are not embedded in an iframe so there's a chance that they can interact with cells in this notebook. - Hovering over a label will display a tooltip with the name of the cell or an index assigned to anonymous cells by this notebook. - Variables which are displayed in more than one of the variable graph, live embedding and evaluation queue can be hovered over and clicked on to highlight and be scrolled to in the other graphics. - Items in the evaluation queue which are only visible in the variable graph are marked by a single eye 👁 emoji. Items which are visible in both the variable graph and the live embedding are marked by two eyes 👀. - The variable that was last clicked in any of the graphics above is stored in the mutable cell \`lastClicked\`.`37:T591,sliderEffects = { function zoom(svg, percentage, height) { svg.style.maxWidth = 'none'; svg.style.width = Math.round((percentage * width) / 100) + 'px'; const ratio = (percentage * (width / 100)) / svg.width.baseVal.value; const newHeight = Math.round(ratio * svg.height.baseVal.value); svg.parentElement.style.height = Math.min(height, newHeight + 25 /* scrollbar height */) + 'px'; svg.parentElement.style.overflow = 'scroll'; // percentage > 100 || newHeight > height ? 'scroll' : 'visible'; svg.parentElement.style.resize = 'vertical'; } zoom(viewof moduleGraph, moduleGraphPercentage, mutable moduleGraphHeight); zoom(variableGraph, variableGraphPercentage, mutable variableGraphHeight); function resizeModuleGraph() { mutable moduleGraphHeight = viewof moduleGraph.parentElement.getBoundingClientRect().height; } function resizeVariableGraph() { mutable variableGraphHeight = variableGraph.parentElement.getBoundingClientRect().height; } viewof moduleGraph.parentElement.addEventListener( 'mouseup', resizeModuleGraph ); variableGraph.parentElement.addEventListener('mouseup', resizeVariableGraph); invalidation.then(() => { viewof moduleGraph.parentElement.removeEventListener( 'mouseup', resizeModuleGraph ); variableGraph.parentElement.removeEventListener( 'mouseup', resizeVariableGraph ); }); }38:T556,scrollParentToChild = { const animMap = new Map(); const scrollAmount = 50; // https://stackoverflow.com/a/45411081 return function scrollParentToChild(parent, child) { // Where is the parent on page var parentRect = parent.getBoundingClientRect(); // What can you see? var parentViewableArea = { height: parent.clientHeight, width: parent.clientWidth }; // Where is the child var childRect = child.getBoundingClientRect(); // Is the child viewable? var isViewable = childRect.top >= parentRect.top && childRect.top <= parentRect.top + parentViewableArea.height; // cancel if different if (animMap.get(parent)) //&& animMap.get(parent).child !== child) cancelAnimationFrame(animMap.get(parent).id); // if you can't see the child try to scroll parent if (!isViewable) { // scroll by offset relative to parent // parent.scrollTop = childRect.top + parent.scrollTop - parentRect.top; const diff = childRect.top - parentRect.top; if (Math.abs(diff) < scrollAmount) parent.scrollTop = childRect.top + parent.scrollTop - parentRect.top; else parent.scrollTop += Math.sign(diff) * scrollAmount; animMap.set(parent, { child, id: requestAnimationFrame(() => scrollParentToChild(parent, child)) }); } }; }39:T4e6,function InspectorInto(container, inspectors) { if (typeof container === "string") { container = document.querySelector(container); if (container == null) throw new Error("container not found"); } return function(name) { const div = html`<span class="miniInspector">`; const inspector = new Inspector(div); inspector.node = div; const label = html`<div class="inspectorLabel tooltip-right" ${ name ? `data-tooltip="${name}"` : '' }>${name ? `✦` : '✧'}`; inspector.label = label; const divContainer = html`<div class="miniContainer">${label} ${div}`; label.onclick = () => { label.dispatchEvent( new CustomEvent('inspector_click', { detail: inspector.variable, bubbles: true }) ); }; label.onmouseover = () => { label.dispatchEvent( new CustomEvent('inspector_mouseover', { detail: inspector.variable, bubbles: true }) ); }; label.onmouseout = () => { label.dispatchEvent( new CustomEvent('inspector_mouseout', { detail: inspector.variable, bubbles: true }) ); }; container.appendChild(divContainer); return inspector; }; }3a:Tf70,// https://chrisbracco.com/a-simple-css-tooltip/ html`<style> /** * Tooltip Styles */ /* Base styles for the element that has a tooltip */ [data-tooltip], .tooltip { position: relative; cursor: pointer; } /* Base styles for the entire tooltip */ [data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after { position: absolute; visibility: hidden; opacity: 0; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); transform: translate3d(0, 0, 0); pointer-events: none; } /* Show the entire tooltip on hover and focus */ [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { visibility: visible; opacity: 1; } /* Base styles for the tooltip's directional arrow */ .tooltip:before, [data-tooltip]:before { z-index: 1001; border: 6px solid transparent; background: transparent; content: ""; } /* Base styles for the tooltip's content area */ .tooltip:after, [data-tooltip]:after { z-index: 1000; padding: 8px; width: auto; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); font-size: 14px; font-family: monospace; line-height: 1.2; white-space: pre; } /* Directions */ /* Top (default) */ [data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after, .tooltip-top:before, .tooltip-top:after { bottom: 100%; left: 50%; } [data-tooltip]:before, .tooltip:before, .tooltip-top:before { margin-left: -6px; margin-bottom: -12px; border-top-color: #000; border-top-color: hsla(0, 0%, 20%, 0.9); } /* Horizontally align top/bottom tooltips */ [data-tooltip]:after, .tooltip:after, .tooltip-top:after { margin-left: -80px; } [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after, .tooltip-top:hover:before, .tooltip-top:hover:after, .tooltip-top:focus:before, .tooltip-top:focus:after { transform: translateY(-12px); } /* Left */ .tooltip-left:before, .tooltip-left:after { right: 100%; bottom: 50%; left: auto; } .tooltip-left:before { margin-left: 0; margin-right: -12px; margin-bottom: 0; border-top-color: transparent; border-left-color: #000; border-left-color: hsla(0, 0%, 20%, 0.9); } .tooltip-left:hover:before, .tooltip-left:hover:after, .tooltip-left:focus:before, .tooltip-left:focus:after { -webkit-transform: translateX(-12px); -moz-transform: translateX(-12px); transform: translateX(-12px); } /* Bottom */ .tooltip-bottom:before, .tooltip-bottom:after { top: 100%; bottom: auto; left: 50%; } .tooltip-bottom:before { margin-top: -12px; margin-bottom: 0; border-top-color: transparent; border-bottom-color: #000; border-bottom-color: hsla(0, 0%, 20%, 0.9); } .tooltip-bottom:hover:before, .tooltip-bottom:hover:after, .tooltip-bottom:focus:before, .tooltip-bottom:focus:after { transform: translateY(12px); } /* Right */ .tooltip-right:after { bottom: 50%; left: 100%; } .tooltip-right:before { bottom: 10%; left: 100%; margin-bottom: 0; margin-left: -12px; border-top-color: transparent; border-right-color: #000; border-right-color: hsla(0, 0%, 20%, 0.9); } .tooltip-right:hover:before, .tooltip-right:hover:after, .tooltip-right:focus:before, .tooltip-right:focus:after { transform: translateX(12px); } /* Move directional arrows down a bit for left/right tooltips */ .tooltip-left:before, .tooltip-right:before { top: 3px; } /* Vertically center tooltip content for left/right tooltips */ .tooltip-left:after, .tooltip-right:after { margin-left: 0; margin-bottom: -16px; } `3b:T446,// https://github.com/observablehq/stdlib/blob/3c2c5dd60d7723ba61337ece7a4df4f94c78b796/src/fileAttachment.js#L7 class FileAttachmentObject { constructor(url, name) { Object.defineProperties(this, { _url: { value: url }, name: { value: name, enumerable: true } }); } async url() { return (await this._url) + ""; } async blob() { return (await remote_fetch(this)).blob(); } async arrayBuffer() { return (await remote_fetch(this)).arrayBuffer(); } async text() { return (await remote_fetch(this)).text(); } async json() { return (await remote_fetch(this)).json(); } async stream() { return (await remote_fetch(this)).body; } async image() { const url = await this.url(); return new Promise((resolve, reject) => { const i = new Image(); if (new URL(url, document.baseURI).origin !== new URL(location).origin) { i.crossOrigin = "anonymous"; } i.onload = () => resolve(i); i.onerror = () => reject(new Error(`Unable to load file: ${this.name}`)); i.src = url; }); } }3c:Tb71,modified = md`### Modified Runtime I made two types of modifications to the Observable runtime library. I tried to mark changes to the original code with comment tags formatted like this: \`\`\`js ... // * a modified line // * begin // a block of added or modified lines // * end \`\`\` The following modifications make the Runtime, Module, and Variable classes a little easier to inspect and understand: - Made several properties \`enumerable\` so that they appear in the inspector - Runtime objects keep track of the stack of "define" functions that are executing in \`_defineStack\` - Runtime objects require two new arguments to their constructor: - \`importMap\`, the output of the function [\`fetchImportMap\`](#fetchImportMap) (used to fill in the \`_slug\` fields of Module objects) - \`evalQueue\`, an empty Map. As computation is scheduled by the runtime, the keys of this map will be the variables ready for computation, and the values will be objects with fields \`res\` (a function that resolves the associated variable), \`rej\` (a function that rejects the variable), \`variable\` (a reference to the variable itself). - Runtime objects also contain a new field \`_allVariables\` which stores references to all variables as they are created. - The Module constructor accepts two additional (optional) arguments: - \`from\`, the module responsible for calling the constructor, - \`caller\`, an object with information about the function that called the constructor - Module objects have several new fields: - \`_slug\`, contains the notebook slug - \`_copySource\`, if this notebook is created by \`module_copy\`, this contains a reference to the notebook this is copied from - \`_copyMaps\`, an array of the Maps used when this module is copied (see \`module_copy\`) - \`_createdBy\`, an object that stores the \`from\` and \`caller\` information from the constructor as well as a copy of the runtime's \`_defineStack\` when the module was created. - \`_importedBy\`, an array of objects representing variables imported from this notebook. It is added to only in the \`variable_import\` function in the Variable class. The keys of the object are: - \`from\`, a reference to the module that imported this one - \`remote\`, \`name\`, arguments to \`variable_import\` - \`variable\`, a reference to the import variable in \`from\` - Similarly, the Variable constructor accepts an additional \`caller\` argument for tracing purposes; this is also an object with information about the function that called this constructor. - That information is stored in the \`_createdBy\` field of the Variable object, along with the \`_defineStack\` at the time of creation. - Togglable console logging for several events: - \`runtime_module\` pre- & post-\`define\`-evaluation - \`module_derive\` pre- & post-Promise resolution - \`module_copy\` when labeling copies with their \`_slug\` `3d:T80c,evalQueueDoc = md`I also modified the Runtime class to wrap each variable computation in a promise that can be triggered manually. The resolve and reject functions for these promises are placed into objects with keys: - \`res\`: resolve function - \`rej\`: reject function - \`variable\`: reference to the variable whose execution is "paused" These objects are stored in an instance \`evalQueue\` of the following custom "ComputeMap" class (which extends JS's built-in [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) class). The keys are Variable objects and the values are the objects described above, thus \`evalQueue\` contains the set of variables whose execution is waiting for manual execution. The main new features of this class the following: - The ComputeMap constructor accepts a filter function as its second argument (A no-op function \`() => {}\` by default, can also be modified by setting the \`.filter\` property). - When one calls \`evalQueue.set()\` with a key where \`evalQueue.filter(key) == true\`, the key-value pair is not added, instead, \`value.res()\` is called. In other words, the filter function picks out variables whose execution will continue **without** being placed in the manual queue. - When one calls \`evalQueue.delete()\` and the queue becomes empty, then if no new elements are added to the queue within a short delay (100 ms), a promise in the \`.emptyPromise\` field resolves. This is used in the Runtime class (see \`runtime_computeSoon()\`) to trigger the next runtime compute cycle (which grabs new values from generators, etc.). - The ComputeMap constructor accepts a boolean \`trackHistory\` as its third argument (\`false\` by default, this can also be modified by setting the \`._trackHistory\` property). - If \`trackHistory\` is \`true\`, \`evalQueue.history\` will contain an array of past variable computations. This is rather crude; the class simply appends the key of each object that has been deleted or automatically computed in \`.set()\` to this array. `3e:T656,class ComputeMap extends Map { constructor(obj, filter = function do_nothing() {}, trackHistory = false) { super(obj); this.filter = filter; this._res = null; this._timer = new CoalescedTimer(); this.emptyPromise = this.size ? new Promise(res => (this._res = res)) : Promise.resolve(); this._trackHistory = trackHistory; this.history = []; this._resolveEmptyPromise = this._resolveEmptyPromise.bind(this); } _resolveEmptyPromise() { this._res(); this._res = null; } set(key, value) { // reset promise if (!this._res) this.emptyPromise = new Promise(res => (this._res = res)); if (this.filter && this.filter(key)) { // compute if matched by the filter function value.res(); if (this._trackHistory) this.history.push({ type: 'auto', key }); if (this.size === 0) this._timer.do(100, this._resolveEmptyPromise); return this; } super.set(key, value); this._timer.do(0, () => {}); return this; } delete(key) { // assume manual resolve / reject actually occurred if (this._trackHistory && this.has(key)) this.history.push({ type: 'manual', key }); const exist = super.delete(key); if (exist && this.size === 0) { // need to delay this._timer.do(100, this._resolveEmptyPromise); } return exist; } clear() { if (this._trackHistory) { const events = Array.from(this.keys(), key => ({ type: 'clear', key })); this.history.push(...events); // this is unsupported... } super.clear(); this._timer.do(100, this._resolveEmptyPromise); } }3f:T3ecf,Runtime = { function Runtime( moduleMap, // * new argument evalQueue, // * new argument builtins = new Library(), global = window_global ) { this._defineStack = [null]; // * var builtin = this.module(); builtin._slug = '_builtin'; // * Object.defineProperties(this, { /* no-compute start */ _dirty: { value: new Set() }, _updates: { value: new Set() }, _computing: { value: null, writable: true }, /* no-compute end */ _init: { value: null, writable: true }, _modules: { value: new Map(), enumerable: true }, _variables: { value: new Set(), enumerable: true }, _builtin: { value: builtin }, _global: { value: global }, // * begin new properties _allVariables: { value: [], enumerable: true }, _moduleMap: { value: moduleMap }, _defineStack: { enumerable: false }, _evalQueue: { value: evalQueue, enumerable: true }, _scheduled: { value: new Set(), enumerable: true } // * end new properties }); if (log.runtime || log.module || log.variable || log.computation) console.log('------- Runtime called -------'); // * if (builtins) for (var name in builtins) { new Variable(TYPE_IMPLICIT, builtin, null, { caller: 'runtime_builtins' }).define(name, [], builtins[name]); } } Object.defineProperties(Runtime.prototype, { /* no-compute start */ _compute: { value: runtime_compute, writable: true, configurable: true }, _computeSoon: { value: runtime_computeSoon, writable: true, configurable: true }, _computeNow: { value: runtime_computeNow, writable: true, configurable: true }, dispose: { value: runtime_dispose, writable: true, configurable: true }, /* no-compute end */ module: { value: runtime_module, writable: true, configurable: true }, fileAttachments: { value: FileAttachments, writable: true, configurable: true } }); /* no-compute start */ function runtime_dispose() { if (log.computation) console.log('******* Runtime disposed *******'); // * this._computing = Promise.resolve(); this._disposed = true; this._variables.forEach(v => { v._invalidate(); v._version = NaN; }); } /* no-compute end */ function runtime_module(define, observer = noop) { let module; const { _defineStack } = this; if (define === undefined) { if ((module = this._init)) { this._init = null; return module; } return new Module(this, [], _defineStack[_defineStack.length - 1], { // * caller: 'runtime_module' }); } module = this._modules.get(define); if (module) { return module; } this._init = module = new Module( this, [], _defineStack[_defineStack.length - 1], { caller: 'runtime_module', define } ); this._modules.set(define, module); try { // * begin module._slug = this._moduleMap.get(define.toString()); _defineStack.push(module); if (log.runtime) console.log( `${Array(_defineStack.length - 2) .fill(' ') .join('')}defining`, module._slug ); // * end define(this, observer); } finally { this._init = null; } // * begin if (log.runtime) console.log( `${Array(_defineStack.length - 2) .fill(' ') .join('')}finished`, module._slug ); _defineStack.pop(); // * end return module; } /* no-compute start */ function runtime_compute() { return ( this._computing || (this._computing = this._evalQueue.emptyPromise .then(() => { // * begin if (log.computation) console.log('runtime_compute ready'); const evalQueue = this._evalQueue; const variable = 'runtime_compute'; const o = { res: null, rej: null, variable }; return new Promise((res, rej) => { o.res = () => { evalQueue.delete(variable); res(); }; evalQueue.set(variable, o); }); }) .then(() => this._computeSoon())) ); } function runtime_computeSoon() { var runtime = this; return new Promise(function(resolve) { frame(function() { resolve(); runtime._disposed || runtime._computeNow(); }); }); } function runtime_computeNow() { if (log.computation) console.log('runtime_computeNow: started'); // * var queue = [], variables, variable; // Compute the reachability of the transitive closure of dirty variables. // Any newly-reachable variable must also be recomputed. // Any no-longer-reachable variable must be terminated. variables = new Set(this._dirty); variables.forEach(function(variable) { variable._inputs.forEach(variables.add, variables); const reachable = variable_reachable(variable); if (reachable > variable._reachable) { this._updates.add(variable); } else if (reachable < variable._reachable) { if (log.computation) console.log('invalidating (unreachable):', variable); // * variable._invalidate(); } variable._reachable = reachable; }, this); // Compute the transitive closure of updating, reachable variables. variables = new Set(this._updates); variables.forEach(function(variable) { if (variable._reachable) { variable._indegree = 0; variable._outputs.forEach(variables.add, variables); } else { variable._indegree = NaN; variables.delete(variable); } }); this._computing = null; this._updates.clear(); this._dirty.clear(); // Compute the indegree of updating variables. variables.forEach(function(variable) { variable._outputs.forEach(variable_increment); }); do { // Identify the root variables (those with no updating inputs). variables.forEach(function(variable) { if (variable._indegree === 0) { queue.push(variable); } }); // Compute the variables in topological order. while ((variable = queue.pop())) { variable_compute(variable); variable._outputs.forEach(postqueue); variables.delete(variable); } // Any remaining variables are circular, or depend on them. variables.forEach(function(variable) { if (variable_circular(variable)) { variable_error(variable, new RuntimeError("circular definition")); variable._outputs.forEach(variable_decrement); variables.delete(variable); } }); } while (variables.size); function postqueue(variable) { if (--variable._indegree === 0) { queue.push(variable); } } if (log.computation) console.log('runtime_computeNow: ended'); // * } function variable_circular(variable) { const inputs = new Set(variable._inputs); for (const i of inputs) { if (i === variable) return true; i._inputs.forEach(inputs.add, inputs); } return false; } function variable_increment(variable) { ++variable._indegree; } function variable_decrement(variable) { --variable._indegree; } function variable_value(variable) { return variable._promise.catch(variable._rejector); } function variable_invalidator(variable) { return new Promise(function(resolve) { variable._invalidate = resolve; }); } function variable_intersector(invalidation, variable) { let node = typeof IntersectionObserver === "function" && variable._observer && variable._observer._node; let visible = !node, resolve = noop, reject = noop, promise, observer; if (node) { observer = new IntersectionObserver( ([entry]) => (visible = entry.isIntersecting) && ((promise = null), resolve()) ); observer.observe(node); invalidation.then( () => (observer.disconnect(), (observer = null), reject()) ); } return function(value) { if (visible) return Promise.resolve(value); if (!observer) return Promise.reject(); if (!promise) promise = new Promise((y, n) => ((resolve = y), (reject = n))); return promise.then(() => value); }; } function variable_compute(variable) { if (log.computation) console.log('invalidating (variable_compute):', variable); // * variable._module._runtime._scheduled.add(variable); // * variable._errored = null; // * variable._invalidate(); variable._invalidate = noop; variable._pending(); const queuedPromise = Promise.all( variable._inputs.map(variable_value) ).then(inputs => { // * begin if (log.computation) console.log('inputs ready for', variable); const evalQueue = variable._module._runtime._evalQueue; const o = { res: null, rej: null, variable }; return new Promise((res, rej) => { o.res = () => { evalQueue.delete(variable); variable._module._runtime._scheduled.delete(variable); res(inputs); }; o.rej = () => { evalQueue.delete(variable); variable._module._runtime._scheduled.delete(variable); rej(`manual rejection`); // should be caught later on, so we don't need to do other cleanup }; evalQueue.set(variable, o); }); }); // * end var value0 = variable._value, version = ++variable._version, invalidation = null, promise = (variable._promise = queuedPromise .then(function(inputs) { if (variable._version !== version) return; // Replace any reference to invalidation with the promise, lazily. for (var i = 0, n = inputs.length; i < n; ++i) { switch (inputs[i]) { case variable_invalidation: { inputs[i] = invalidation = variable_invalidator(variable); break; } case variable_visibility: { if (!invalidation) invalidation = variable_invalidator(variable); inputs[i] = variable_intersector(invalidation, variable); break; } } } // Compute the initial value of the variable. if (log.computation) console.log('computing:', variable, value0, inputs); // * return variable._definition.apply(value0, inputs); }) .then(function(value) { // If the value is a generator, then retrieve its first value, // and dispose of the generator if the variable is invalidated. // Note that the cell may already have been invalidated here, // in which case we need to terminate the generator immediately! if (generatorish(value)) { if (variable._version !== version) return void value.return(); (invalidation || variable_invalidator(variable)).then( variable_return(value) ); return variable_precompute(variable, version, promise, value); } return value; })); promise.then( function(value) { if (variable._version !== version) return; variable._value = value; variable._fulfilled(value); }, function(error) { if (variable._version !== version) return; variable._value = undefined; variable._rejected(error); variable._errored = error || true; // * } ); } function variable_precompute(variable, version, promise, generator) { function recompute() { var promise = new Promise(function(resolve) { variable._module._runtime._scheduled.add(variable); // * resolve(generator.next()); }).then(function(next) { return next.done ? (variable._module._runtime._scheduled.delete(variable), undefined) : Promise.resolve(next.value).then(function(value) { if (variable._version !== version) return; // * loop is here: // * variable_postrecompute returns the runtime._computing promise, // * which is resolved in the next "frame" const queuedPromise = variable_postrecompute( variable, value, promise ).then(() => { // * begin if (log.computation) console.log('generator yielded:', variable); const evalQueue = variable._module._runtime._evalQueue; const o = { res: null, rej: null, variable }; return new Promise((res, rej) => { o.res = () => { evalQueue.delete(variable); variable._module._runtime._scheduled.delete(variable); recompute(res()); }; o.rej = () => { evalQueue.delete(variable); variable._module._runtime._scheduled.delete(variable); rej(`manual rejection`); // should be caught later on, so we don't need to do other cleanup }; evalQueue.set(variable, o); }); }); variable._observer && variable._observer.node && variable._observer.node.dispatchEvent( new CustomEvent('update_queue', { bubbles: true }) ); // This part was moved into o.res: // queuedPromise.then(() => { // recompute(); // }); // * end variable._fulfilled(value); return value; }); }); promise.catch(function(error) { if (variable._version !== version) return; variable_postrecompute(variable, undefined, promise); variable._rejected(error); variable._errored = error || true; // * }); } // * This returns the first value and then sets up a loop in recompute return new Promise(function(resolve) { resolve(generator.next()); }).then(function(next) { if (next.done) return; promise.then(recompute); return next.value; }); } function variable_postrecompute(variable, value, promise) { var runtime = variable._module._runtime; variable._value = value; variable._promise = promise; variable._outputs.forEach(runtime._updates.add, runtime._updates); // TODO Cleaner? // * begin const runtimePromise = runtime._compute(); setTimeout( () => variable._observer && variable._observer.node && variable._observer.node.dispatchEvent( new CustomEvent('update_queue', { bubbles: true }) ), 150 ); return runtimePromise; // * end } function variable_error(variable, error) { if (log.computation) console.log('invalidating (error):', variable, error); // * variable._invalidate(); variable._invalidate = noop; variable._pending(); ++variable._version; variable._indegree = NaN; (variable._promise = Promise.reject(error)).catch(noop); variable._value = undefined; variable._rejected(error); variable._errored = error || true; // * } function variable_return(generator) { return function() { generator.return(); }; } function variable_reachable(variable) { if (variable._observer !== no_observer) return true; // Directly reachable. var outputs = new Set(variable._outputs); for (const output of outputs) { if (output._observer !== no_observer) return true; output._outputs.forEach(outputs.add, outputs); } return false; } /* no-compute end */ return Runtime; }40:T1d10,Module = { // * new arguments from, caller, defineStack function Module(runtime, builtins = [], from, caller, defineStack) { Object.defineProperties(this, { _slug: { value: null, writable: true, enumerable: true }, // * _scope: { value: new Map(), enumerable: true }, _source: { value: null, writable: true, enumerable: true }, _copySource: { value: null, writable: true, enumerable: true }, // * _runtime: { value: runtime, enumerable: true }, _builtins: { value: new Map([ ["invalidation", variable_invalidation], ["visibility", variable_visibility], ...builtins ]), enumerable: true // * }, // * begin _copyMaps: { // One entry for each (derived) copy of this module; // entries are maps recording the modules imported (copied, in earlier versions) into the derived copy value: [], writable: true, enumerable: true }, _importedBy: { // One entry for each import of this module (only called in variable_import) // {from: this._module, remote, name, variable: this} value: [], enumerable: true }, _createdBy: { from, caller, defineStack: defineStack || runtime._defineStack.slice() } // * end }); if (log.module) console.log('Module created:', this, from, caller); // * } Object.defineProperties(Module.prototype, { _copy: { value: module_copy, writable: true, configurable: true }, _resolve: { value: module_resolve, writable: true, configurable: true }, redefine: { value: module_redefine, writable: true, configurable: true }, define: { value: module_define, writable: true, configurable: true }, derive: { value: module_derive, writable: true, configurable: true }, import: { value: module_import, writable: true, configurable: true }, /* no-compute start */ value: { value: module_value, writable: true, configurable: true }, /* no-compute end */ variable: { value: module_variable, writable: true, configurable: true }, builtin: { value: module_builtin, writable: true, configurable: true } }); function module_redefine(name) { var v = this._scope.get(name); if (!v) throw new RuntimeError(name + " is not defined"); if (v._type === TYPE_DUPLICATE) throw new RuntimeError(name + " is defined more than once"); return v.define.apply(v, arguments); } function module_define() { var v = new Variable(TYPE_NORMAL, this, null, { caller: 'module_define' }); return v.define.apply(v, arguments); } function module_import() { var v = new Variable(TYPE_NORMAL, this, null, { caller: 'module_import' }); return v.import.apply(v, arguments); } function module_variable(observer) { return new Variable(TYPE_NORMAL, this, observer, { caller: 'module_variable', observer }); } /* no-compute start */ async function module_value(name) { var v = this._scope.get(name); if (!v) throw new RuntimeError(name + " is not defined"); if (v._observer === no_observer) { v._observer = true; this._runtime._dirty.add(v); } await this._runtime._compute(); return v._promise; } /* no-compute end */ function module_derive(injects, injectModule) { var copy = new Module(this._runtime, this._builtins, this, { caller: 'module_derive', injects, injectModule }); // * copy._source = this; Array.prototype.forEach.call(injects, function(inject) { if (typeof inject !== "object") inject = { name: inject + "" }; if (inject.alias == null) inject.alias = inject.name; copy.import(inject.name, inject.alias, injectModule); }); const frozenDefineStack = this._runtime._defineStack.slice(); // * Promise.resolve().then(() => { if (log.module) console.log('resolving derive in', this._slug); // * const modules = new Set([this]); for (const module of modules) { for (const variable of module._scope.values()) { if (variable._definition === identity) { // import const module = variable._inputs[0]._module; const source = module._source || module; if (source === this) { // circular import-with! console.warn("circular module definition; ignoring"); // eslint-disable-line no-console return; } modules.add(source); } } } this._copy(copy, new Map(), frozenDefineStack); // * if (log.module) console.log('finished derive in', this._slug); // * }); return copy; } function module_copy(copy, map, frozenDefineStack) { copy._source = this; // * begin copy._slug = this._slug; if (log.module) console.log('copy labeled', copy._slug); copy._copySource = this; this._copyMaps.push({ copy, map }); // * end map.set(this, copy); for (const [name, source] of this._scope) { var target = copy._scope.get(name); if (target && target._type === TYPE_NORMAL) continue; // injection if (source._definition === identity) { // import var sourceInput = source._inputs[0], sourceModule = sourceInput._module; copy.import( sourceInput._name, name, map.get(sourceModule) || (sourceModule._source ? sourceModule._copy( new Module( copy._runtime, copy._builtins, this, { caller: 'module_copy', copy, map, sourceModule }, frozenDefineStack ), map, frozenDefineStack ) // import-with : sourceModule) ); } else { copy.define( name, source._inputs.map(variable_name), source._definition ); } } return copy; } function module_resolve(name) { var variable = this._scope.get(name), value; if (!variable) { variable = new Variable(TYPE_IMPLICIT, this, null, { caller: 'module_resolve', name }); // if (this._runtime._builtin._scope.has(name)) { if (this._builtins.has(name)) { variable.define(name, constant(this._builtins.get(name))); } else if (this._runtime._builtin._scope.has(name)) { variable.import(name, this._runtime._builtin); // } else if (name === "invalidation") { // variable.define(name, variable_invalidation); // } else if (name === "visibility") { // variable.define(name, variable_visibility); } else { try { value = this._runtime._global(name); } catch (error) { return variable.define(name, rethrow(error)); } if (value === undefined) { this._scope.set((variable._name = name), variable); } else { variable.define(name, constant(value)); } } } return variable; } function module_builtin(name, value) { this._builtins.set(name, value); } function variable_name(variable) { return variable._name; } return Module; }41:T2751,Variable = { function Variable(type, module, observer, caller) { if (!observer) observer = no_observer; else observer.variable = this; // * module._runtime._allVariables.push(this); Object.defineProperties(this, { _observer: { value: observer, writable: true }, _definition: { value: variable_undefined, writable: true }, /* no-compute start */ _duplicate: { value: undefined, writable: true }, _duplicates: { value: undefined, writable: true }, _indegree: { value: NaN, writable: true }, // The number of computing inputs. _invalidate: { value: noop, writable: true }, _outputs: { value: new Set(), writable: true }, _promise: { value: Promise.resolve(undefined), writable: true }, _reachable: { value: observer !== no_observer, writable: true }, // Is this variable transitively visible? _rejector: { value: variable_rejector(this) }, _value: { value: undefined, writable: true }, _version: { value: 0, writable: true }, /* no-compute end */ _name: { value: null, writable: true, enumerable: true }, _inputs: { value: [], writable: true, enumerable: true }, _module: { value: module, enumerable: true }, _type: { value: type, enumerable: true }, // * begin _createdBy: { value: { caller, defineStack: module._runtime._defineStack.slice() }, enumerable: true }, _errored: { value: null, writable: true, enumerable: true } //* end }); if (log.variable) console.log('Variable created:', this, module, observer, caller); // * } Object.defineProperties(Variable.prototype, { /* no-compute start */ _pending: { value: variable_pending, writable: true, configurable: true }, _fulfilled: { value: variable_fulfilled, writable: true, configurable: true }, _rejected: { value: variable_rejected, writable: true, configurable: true }, /* no-compute end */ define: { value: variable_define, writable: true, configurable: true }, delete: { value: variable_delete, writable: true, configurable: true }, import: { value: variable_import, writable: true, configurable: true } }); /* no-compute start */ function variable_attach(variable) { variable._module._runtime._dirty.add(variable); variable._outputs.add(this); } function variable_detach(variable) { variable._module._runtime._dirty.add(variable); variable._outputs.delete(this); } /* no-compute end */ function variable_undefined() { throw variable_undefined; } /* no-compute start */ function variable_rejector(variable) { return function(error) { if (error === variable_undefined) throw new RuntimeError( variable._name + " is not defined", variable._name ); if (error instanceof Error && error.message) throw new RuntimeError(error.message, variable._name); throw new RuntimeError( variable._name + " could not be resolved", variable._name ); }; } /* no-compute end */ function variable_duplicate(name) { return function() { throw new RuntimeError(name + " is defined more than once"); }; } function variable_define(name, inputs, definition) { switch (arguments.length) { case 1: { (definition = name), (name = inputs = null); break; } case 2: { definition = inputs; if (typeof name === "string") inputs = null; else (inputs = name), (name = null); break; } } if (log.variable) console.log('(re)defining:', this, name, inputs, definition); // * return variable_defineImpl.call( this, name == null ? null : name + "", inputs == null ? [] : Array.prototype.map.call(inputs, this._module._resolve, this._module), typeof definition === "function" ? definition : constant(definition) ); } function variable_defineImpl(name, inputs, definition) { var scope = this._module._scope, runtime = this._module._runtime; /* no-compute start */ this._inputs.forEach(variable_detach, this); inputs.forEach(variable_attach, this); /* no-compute end */ this._inputs = inputs; this._definition = definition; /* no-compute start */ this._value = undefined; /* no-compute end */ // Is this an active variable (that may require disposal)? if (definition === noop) runtime._variables.delete(this); else runtime._variables.add(this); // Did the variable’s name change? Time to patch references! if (name !== this._name || scope.get(name) !== this) { var error, found; /* no-compute start */ if (this._name) { // Did this variable previously have a name? if (this._outputs.size) { // And did other variables reference this variable? scope.delete(this._name); found = this._module._resolve(this._name); (found._outputs = this._outputs), (this._outputs = new Set()); found._outputs.forEach(function(output) { output._inputs[output._inputs.indexOf(this)] = found; }, this); found._outputs.forEach(runtime._updates.add, runtime._updates); runtime._dirty.add(found).add(this); scope.set(this._name, found); } else if ((found = scope.get(this._name)) === this) { // Do no other variables reference this variable? scope.delete(this._name); // It’s safe to delete! } else if (found._type === TYPE_DUPLICATE) { // Do other variables assign this name? found._duplicates.delete(this); // This variable no longer assigns this name. this._duplicate = undefined; if (found._duplicates.size === 1) { // Is there now only one variable assigning this name? found = found._duplicates.keys().next().value; // Any references are now fixed! error = scope.get(this._name); (found._outputs = error._outputs), (error._outputs = new Set()); found._outputs.forEach(function(output) { output._inputs[output._inputs.indexOf(error)] = found; }); (found._definition = found._duplicate), (found._duplicate = undefined); runtime._dirty.add(error).add(found); runtime._updates.add(found); scope.set(this._name, found); } } else { throw new Error(); } } if (this._outputs.size) throw new Error(); /* no-compute end */ if (name) { // Does this variable have a new name? if ((found = scope.get(name))) { // Do other variables reference or assign this name? if (found._type === TYPE_DUPLICATE) { // Do multiple other variables already define this name? (this._definition = variable_duplicate(name)), (this._duplicate = definition); found._duplicates.add(this); } else if (found._type === TYPE_IMPLICIT) { // Are the variable references broken? /* no-compute start */ (this._outputs = found._outputs), (found._outputs = new Set()); // Now they’re fixed! this._outputs.forEach(function(output) { output._inputs[output._inputs.indexOf(found)] = this; }, this); runtime._dirty.add(found).add(this); /* no-compute end */ scope.set(name, this); } else { // Does another variable define this name? (found._duplicate = found._definition), (this._duplicate = definition); // Now they’re duplicates. error = new Variable(TYPE_DUPLICATE, this._module, null, { caller: 'variable_defineImpl', name, inputs, definition, found }); error._name = name; error._definition = this._definition = found._definition = variable_duplicate( name ); /* no-compute start */ (error._outputs = found._outputs), (found._outputs = new Set()); error._outputs.forEach(function(output) { output._inputs[output._inputs.indexOf(found)] = error; }); /* no-compute end */ error._duplicates = new Set([this, found]); /* no-compute start */ runtime._dirty.add(found).add(error); runtime._updates.add(found).add(error); /* no-compute end */ scope.set(name, error); } } else { scope.set(name, this); } } this._name = name; } /* no-compute start */ runtime._updates.add(this); runtime._compute(); /* no-compute end */ return this; } function variable_import(remote, name, module) { if (arguments.length < 3) (module = name), (name = remote); // * begin (add to importedBy) module._importedBy.push({ from: this._module, remote, name, variable: this }); if (log.variable) console.log('importing:', this, remote, name, module); // * // * end return variable_defineImpl.call( this, name + "", [module._resolve(remote + "")], identity ); } function variable_delete() { if (log.variable) console.log('deleting:', this); // * return variable_defineImpl.call(this, null, [], noop); } /* no-compute start */ function variable_pending() { if (this._observer.pending) this._observer.pending(); } function variable_fulfilled(value) { if (this._observer.fulfilled) this._observer.fulfilled(value, this._name); } function variable_rejected(error) { if (this._observer.rejected) this._observer.rejected(error, this._name); } /* no-compute end */ return Variable; }42:T6aa,md`## Version history See the [Notebook import inspector](https://observablehq.com/@bryangingechen/notebook-import-inspector) for older history. - [2019/09/15](https://observablehq.com/@bryangingechen/notebook-stepper@3749): first publish - [2019/09/28](https://observablehq.com/@bryangingechen/notebook-stepper@3776): prevent unnecessary scroll when interacting with queue form with [a crude hack](#needToScroll) - [2019/10/11](https://observablehq.com/@bryangingechen/notebook-stepper@3823): allow inspected notebooks to import from absolute URLs (see [this forum post](https://talk.observablehq.com/t/in-defense-of-static-imports/2440/4)), allow (crudely) inspecting notebooks hosted at arbitrary URLs (try e.g. <small>https://gistcdn.githack.com/bryangingechen/03dfcef05981f7aec41745e8eccf4057/raw/ce1df31e7f2bbb9c3ee25779c858ded45c05e1f3/3x-1-paths-in-binary.js</small>) - [2019/10/15](https://observablehq.com/@bryangingechen/notebook-stepper@3828): updated to Runtime v4.4.7 - [2019/11/01](https://observablehq.com/@bryangingechen/notebook-stepper@3848): updated to Runtime v4.6.3 - [2019/11/06](https://observablehq.com/@bryangingechen/notebook-stepper@3850): updated to Runtime v4.6.4 - [2019/12/06](https://observablehq.com/@bryangingechen/notebook-stepper@3861): FileAttachments fix. - [2020/08/15](https://observablehq.com/@bryangingechen/notebook-stepper@3937): updated to Runtime v4.7.3, reorganized cells - [2020/09/03](https://observablehq.com/@bryangingechen/notebook-stepper@3937): fixed module parsing, (code lifted from the Mike Bostock's latest ["Notebook Import Visualizer"](https://observablehq.com/@observablehq/notebook-import-visualizer)) - 2021/01/17: updated to Runtime v4.8.1 `43:[] 2f:{"title":"Notebook stepper","cells":[{"id":0,"value":"md`# Notebook stepper\n\n*Suggestions and comments very welcome! See also [this forum post](https://talk.observablehq.com/t/notebook-import-visualizer/2361).*\n\nThe following module and variable graphs owe much (both in terms of ideas and code) to Mike Bostock's [Notebook Visualizer](https://observablehq.com/@mbostock/notebook-visualizer) and [Notebook Import Visualizer](https://observablehq.com/@observablehq/notebook-import-visualizer).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3232,"value":"diagram = md`Enter the URL for a notebook you want to inspect.\n${viewof id} \n[[permalink]](?id=${id}) [[notebook]](${\n id.startsWith('http') ? id : `https://observablehq.com/${id}`\n})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1395,"value":"viewof showUnreachable = checkbox({\n options: [\n 'show <span style=\"background-color: pink; border-radius: 1em; padding: .25em; border: solid black 1px;\">unreachable variables</span> and <span style=\"background-color: pink; border-radius: 1em; padding: .25em; border: solid black 1px;\">unreachable modules</span>'\n ],\n value:\n 'show <span style=\"background-color: pink; border-radius: 1em; padding: .25em; border: solid black 1px;\">unreachable variables</span> and <span style=\"background-color: pink; border-radius: 1em; padding: .25em; border: solid black 1px;\">unreachable modules</span>',\n description: `Note that reachability is computed <b>after</b> the first time <code>runtime_compute</code> is run.<br/> Click the '✅ resolve' button next to <span class=\"node-inline\" style=\"border-color: yellow; background-color: ${nodeColors.queued}; color: var(--syntax_string);\"><code>\"runtime_compute\"</code></span> in the <a href=\"#nbMain\">Execution Control Form</a> below!`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"html`<div class=\"graphForm\" style=\"display: flex;\">${viewof showBuiltinNode}${viewof moduleGraphPercentage}<div>${viewof orientModule}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"html`<div class=\"graphForm\" style=\"display: flex;\">${viewof anon}${viewof variableGraphPercentage}<div>${viewof orientVariable}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2550,"value":"nbContainer = {\n const h = 400;\n const container = html`<div style=\"${\n h !== null ? `height:${h}px; overflow:scroll; ` : ''\n }border: thin solid #555; padding:25px; resize:vertical;\">`;\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3622,"value":"nbRuntime._evalQueue.history","pinned":true,"hidden":false,"mode":"ojs"},{"id":3427,"value":"mutable lastClicked = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1910,"value":"md`Some slightly different notes were written for a [previous version](https://observablehq.com/@bryangingechen/notebook-import-inspector) of this notebook. A description of the modified runtime used to power the above diagram can be found [at the end](#modified).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2329,"value":"md`### Support cells\n\nThe cells here are mostly related to the input elements for the forms above. The runtime data cells are in [this section](#modifiedTest).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"viewof id = {\n const getId = v => {\n let m;\n if ((m = /^https:\\/\\/(api\\.|beta\\.|)observablehq\\.com\\//i.exec(v)))\n v = v.slice(m[0].length);\n if (!(v && v.startsWith('http')) && (m = /(\\/$|\\.js(\\?|$)|#|\\?)/i.exec(v)))\n v = v.slice(0, m.index);\n return v;\n };\n\n const { text } = submit({\n value:\n getId(new URLSearchParams(html`<a href>`.search).get(\"id\")) ||\n \"@bryangingechen/imports-tips-and-tricks\"\n });\n\n text.addEventListener(\"input\", () => {\n const v = getId(text.value);\n if (v !== text.value) text.value = v;\n });\n\n text.addEventListener(\"paste\", () => {\n Promises.delay(50).then(() => {\n text.form.dispatchEvent(new CustomEvent(\"submit\", { cancelable: true }));\n });\n });\n text.form.text.style = 'width:calc(100% - 100px)';\n\n return text.form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"apiUrl = id.startsWith('http')\n ? id\n : `https://api.observablehq.com/${id}.js?v=3` // 'https://api.observablehq.com/d/430afd13ab489695.js?v=3' // 'https://api.observablehq.com/@bryangingechen/imports-tips-and-tricks@556.js?v=3' // 'https://api.observablehq.com/d/43b57dd558b3d1ee.js?v=3'\n// 'https://api.observablehq.com/@kappelmann/lean-utility-functions.js?v=3'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"html`<style>\n.graphForm > *{\n margin-right: 2em;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1144,"value":"viewof showBuiltinNode = checkbox({\n options: [\"Show <code>_builtin</code> module\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3533,"value":"mutable moduleGraphHeight = 500\n// slider({\n// min: 200,\n// max: 1000,\n// step: 1,\n// value: 500,\n// format: v => `${v}px`,\n// title: \"module graph max-height\"\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"viewof moduleGraphPercentage = {\n const ratio = width / viewof moduleGraph.width.baseVal.value;\n const height =\n 2 *\n ratio *\n viewof moduleGraph.querySelector('.node').children[1].ry.baseVal.value;\n const percentage = (100 * mutable moduleGraphHeight) / (height * 15);\n return slider({\n min: 0,\n max: 800,\n step: 1,\n value: Math.min(95, percentage),\n format: v => `${v}%`,\n title: \"module graph zoom\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"viewof orientModule = html`<select>\n<option value=LR selected>left-to-right\n<option value=RL>right-to-left\n<option value=TB>top-to-bottom\n<option value=BT>bottom-to-top\n</select>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"viewof anon = checkbox({\n options: [\n \"Include anonymous cells in variable graph (labeled with # + index)\"\n ],\n value: \"Include anonymous cells in variable graph (labeled with # + index)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3541,"value":"mutable variableGraphHeight = 500\n// slider({\n// min: 200,\n// max: 1000,\n// step: 1,\n// value: 500,\n// format: v => `${v}px`,\n// title: \"variable graph max-height\"\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"viewof variableGraphPercentage = {\n const ratio = width / variableGraph.width.baseVal.value;\n const height =\n 2 *\n ratio *\n ((variableGraph.querySelector('.node') &&\n variableGraph.querySelector('.node').children[1].ry.baseVal.value) ||\n 250);\n const percentage = (100 * mutable variableGraphHeight) / (height * 15);\n return slider({\n min: 0,\n max: 800,\n step: 1,\n value: Math.min(95, percentage),\n format: v => `${v}%`,\n title: \"variable graph zoom\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"viewof orientVariable = html`<select>\n<option value=LR selected>left-to-right\n<option value=RL>right-to-left\n<option value=TB>top-to-bottom\n<option value=BT>bottom-to-top\n</select>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3377,"value":"nodeColors = ({\n unreachable: \"pink\",\n errored: \"#ff9955\",\n scheduled: \"#accaee\",\n queued: \"#caffec\",\n highlighted: \"moccasin\",\n importBorder: \"#20b2aa\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3384,"value":"function nodeFill(v) {\n return v._reachable\n ? nbRuntime._scheduled.has(v)\n ? nbRuntime._evalQueue.has(v)\n ? `, style=\"filled\", fillcolor = \"${nodeColors.queued}\"`\n : `, style=\"filled\", fillcolor = \"${nodeColors.scheduled}\"`\n : v._errored\n ? `, style=\"filled\", fillcolor = \"${nodeColors.errored}\"`\n : \"\"\n : `, style=\"filled\", fillcolor = \"${nodeColors.unreachable}\"`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3354,"value":"html`<style>\n/* Sadly, graphviz can't output CSS classes */\n/* g.node ellipse.unreachable {\n background-color: ${nodeColors.unreachable};\n} */\n/* g.node ellipse.errored, */\n.inspectorLabel.errored,\n.inspectorLabel.errored.scheduled\n/*.inspectorLabel.errored.scheduled.queued,*/ {\n background-color: ${nodeColors.errored};\n}\n/* g.node ellipse.scheduled, */\n.inspectorLabel.scheduled {\n background-color: ${nodeColors.scheduled};\n}\n/* g.node ellipse.queued, */\n.inspectorLabel.scheduled.queued,\n.miniInspectorHolder.queued {\n background-color: ${nodeColors.queued};\n}\n/* g.node ellipse.highlighted, */\n.inspectorLabel.highlighted,\n.inspectorLabel.highlighted.scheduled,\n.inspectorLabel.highlighted.scheduled.queued,\n.inspectorLabel.highlighted.errored,\n.inspectorLabel.highlighted.errored.scheduled,\n/*.inspectorLabel.highlighted.errored.scheduled.queued,*/\n.miniInspectorHolder.queued.highlighted {\n background-color: ${nodeColors.highlighted};\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2622,"value":"html`<style>\n.node-inline {\n white-space: pre;\n border: solid 2px;\n border-radius: 2em;\n padding: 0 0.25em;\n}\n.miniButton {\n white-space: pre;\n}\n.miniButtons {\n margin-right:1em;\n display: flex;\n flex-direction: column;\n}\n.miniContainer {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin: 0.5em 0;\n}\n.miniInspectorHolder {\n display: flex;\n align-items: center;\n flex-direction: row;\n}\n.miniInspector.observablehq {\n flex: auto;\n overflow: auto;\n margin: 0;\n padding: 0 0.5em;\n}\n.miniInspector.observablehq::before {\n left: 0;\n}\n.inspectorLabel {\n padding: 0.5em;\n background-color: white;\n border: solid black 1px;\n border-radius: 2em;\n margin-right: 0.25em;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3442,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3761,"value":"mutable needToScroll = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":2732,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":2738,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"modifiedTest = md`## Modified Runtime\n\nIn this subsection we demonstrate the modified Observable runtime library which attaches extra information to the various module and variable objects for ease of inspection. See [implementation notes](#modified) for more details. Some of the cells here are used as data sources for the module and variable graphs above.\n\nThis cell gives a map from the string representations of the \"define\" functions of notebook JS modules to their \"slugs\". This is used to label module objects with their slugs as they are created.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"nbImportMap = await importMap(apiUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"md`Now we load the main module of the notebook we're looking at. Some properties have been made enumerable so that we can see them in this notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"nbDefine = (await import(apiUrl)).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"nbRuntime = nbMain._runtime","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"nbAllModulesSet = new Set(\n [...nbRuntime._variables].map(({ _module }) => _module)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"nbAllModules = Array.from(nbAllModulesSet, (m, i) => {\n m._id = i;\n return m;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"nbAllVariables = nbRuntime._allVariables.map((v, i) => {\n v.def = v._definition.toString();\n v._id = i;\n if (v._observer && v._observer.label && !v._name) {\n v._observer.label.setAttribute('data-tooltip', '#' + v._id);\n }\n return v;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"md`For many purposes, it's enough to know about the \\`_reachable\\` variables and modules containing them:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"nbReachableVariables = [...nbRuntime._allVariables].filter(({ _reachable }) => _reachable)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1392,"value":"nbReachableModulesSet = new Set(nbReachableVariables.map(({ _module }) => _module))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1444,"value":"nbReachableModules = Array.from(nbReachableModulesSet)","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"md`### Runtime ${version}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"version = '4.8.1'","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"observable = require(`@observablehq/runtime@${version}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"// This is currently unused\n// oRuntime = observable.Runtime","pinned":false,"hidden":false,"mode":"ojs"},{"id":2548,"value":"Inspector = observable.Inspector","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"// used below\nLibrary = observable.Library","pinned":false,"hidden":false,"mode":"ojs"},{"id":3929,"value":"md`The following 3 cells are copied from the Observablehq [\\`stdlib\\`](https://github.com/observablehq/stdlib) and are used for implementing FileAttachments in the target notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3854,"value":"// https://github.com/observablehq/stdlib/blob/3c2c5dd60d7723ba61337ece7a4df4f94c78b796/src/fileAttachment.js#L1\nasync function remote_fetch(file) {\n const response = await fetch(await file.url());\n if (!response.ok) throw new Error(`Unable to load file: ${file.name}`);\n return response;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3852,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":3833,"value":"// https://github.com/observablehq/stdlib/blob/3c2c5dd60d7723ba61337ece7a4df4f94c78b796/src/fileAttachment.js#L50\nfunction FileAttachments(resolve) {\n return name => {\n const url = resolve((name += \"\")); // Returns a Promise, string, or null.\n if (url == null) throw new Error(`File not found: ${name}`);\n return new FileAttachmentObject(url, name);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"md`### Parsing JS module files\n\nCode for parsing modules adapted from [Mike Bostock's \"Notebook Import Visualizer\"](https://observablehq.com/@observablehq/notebook-import-visualizer) v157.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"async function fetchDefine(apiUrl) {\n const [{ default: define }, src] = await Promise.all([\n import(apiUrl),\n fetch(apiUrl).then(res => res.text())\n ]);\n return { define, src };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3950,"value":"acorn = require(\"acorn@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"function parseImports(src, url) {\n const program = acorn.parse(src, {\n ecmaVersion: 11,\n sourceType: \"module\"\n });\n return program.body\n .filter(node => node.type === \"ImportDeclaration\")\n .map(node => ({\n apiUrl: new URL(node.source.value, url) + \"\",\n slug:\n node.source.value[0] === '/'\n ? node.source.value.slice(1, -7)\n : node.source.value\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"async function importMap(apiUrl) {\n const map = new Map();\n const seen = new Set([apiUrl]);\n\n const { src, define } = await fetchDefine(apiUrl);\n const mainSlug = apiUrl.startsWith('https://api.observablehq.com')\n ? apiUrl.match(/\\.com\\/([^\\.]+)/)[1]\n : apiUrl;\n map.set(define.toString(), mainSlug);\n const queue = parseImports(src, apiUrl);\n\n for (const { apiUrl, slug } of queue) {\n if (!seen.has(apiUrl)) {\n seen.add(apiUrl);\n const { src, define } = await fetchDefine(apiUrl);\n map.set(define.toString(), slug);\n queue.push(...parseImports(src, apiUrl));\n }\n }\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof logForm = checkbox({\n title: \"Logging\",\n description: \"Select events to log\",\n options: [\n { value: \"runtime\", label: \"Runtime\" },\n { value: \"module\", label: \"Module\" },\n { value: \"variable\", label: \"Variable\" },\n { value: \"computation\", label: \"Computation\" }\n ],\n value: [],\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2423,"value":"log = {\n const o = {\n runtime: false,\n module: false,\n variable: false,\n computation: false\n };\n for (const e of logForm) {\n o[e] = true;\n }\n return o;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3087,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":2639,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":3095,"value":"md`The CoalescedTimer class and the Event classes from the [\\`lean-web-editor\\`](https://github.com/leanprover/lean-web-editor) and [\\`lean-client-js\\`](https://github.com/leanprover/lean-client-js) repos are used to provide the delayed promise resolution in ComputeMap.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2941,"value":"// https://github.com/leanprover/lean-client-js/blob/2493651b01bd9e7d903fb441c5be704f1f84a745/lean-client-js-core/src/event.ts\nclass Event {\n constructor() {\n this.handlers = [];\n }\n on(handler) {\n this.handlers.push(handler);\n return {\n dispose: () => {\n this.handlers = this.handlers.filter(h => h !== handler);\n }\n };\n }\n\n fire(event) {\n for (const h of this.handlers) {\n h(event);\n }\n }\n\n dispose() {\n this.handlers = [];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2946,"value":"// https://github.com/leanprover/lean-web-editor/blob/8922763b22177adccf9d59e39eda504ee7680fe1/src/langservice.ts\nclass CoalescedTimer {\n do(ms, f) {\n if (this.timer) {\n clearTimeout(this.timer);\n }\n this.timer = setTimeout(() => {\n this.timer = undefined;\n f();\n }, ms);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2963,"value":"// used for debugging\n// {\n// const button = html`<button>resolve evalQueue`;\n// button.onclick = nbRuntime._evalQueue._resolveEmptyPromise;\n// return button;\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":3102,"value":"md`### Modified Runtime implementation:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3863,"value":"md`Stuff from [\\`src/errors.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/errors.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"RuntimeError = Error","pinned":false,"hidden":false,"mode":"ojs"},{"id":3867,"value":"md`Stuff from [\\`src/generatorish.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/generatorish.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"function generatorish(value) {\n return (\n value &&\n typeof value.next === \"function\" &&\n typeof value.return === \"function\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3905,"value":"md`Stuff from [\\`src/rethrow.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/rethrow.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"function rethrow(e) {\n return function() {\n throw e;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3874,"value":"md`Stuff from [\\`src/runtime.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/runtime.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"frame = requestAnimationFrame","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"variable_invalidation = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"variable_visibility = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"function window_global(name) {\n return window[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3890,"value":"md`Stuff from [\\`src/module.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/module.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":3887,"value":"md`Stuff from [\\`src/variable.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/variable.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"TYPE_NORMAL = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"TYPE_IMPLICIT = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"TYPE_DUPLICATE = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"no_observer = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":3914,"value":"md`Stuff from [\\`src/identity.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/identity.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"function identity(x) {\n return x;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3917,"value":"md`Stuff from [\\`src/noop.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/noop.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"noop = () => {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3920,"value":"md`Stuff from [\\`src/constant.js\\`](https://github.com/observablehq/runtime/blob/v${version}/src/constant.js):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"function constant(x) {\n return function() {\n return x;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"md`## Imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"import {submit} from \"@mbostock/more-deliberate-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"import { slider, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"// graphviz\nimport { dot } from \"@mbostock/graphviz\"\n// import { dot } from \"e6014ad3fa5393cc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"import { getAllPropertyNamesAsObj, funSource } from '048035bf9a9c263e'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3741,"value":"md`## TODO\n\n- functions / UI for re-evaluating (re-defining?) arbitrary cells?\n- interactive \"\\`evalQueue\\` filtering\" features (select by clicking on cells?)\n- better layout for the graphs + live embedding + execution control form\n- put live embedding in an iframe / worker\n- do something with history?\n- let [lastClicked](#lastClicked) support clicking on arbitrary variable nodes\n- switch to elkjs for graph drawing per [Tom MacWright's notebooks](https://observablehq.com/@tmcw/notebook-visualizer-elk-edition)?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2405,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"md`## LICENSE\n\nThis notebook contains code from [\\`observablehq/runtime\\`](https://github.com/observablehq/runtime), which is Copyright Observable, Inc. and licensed under [the ISC License](https://github.com/observablehq/runtime/blob/master/LICENSE). Any modifications / original code made here is also made available under the terms of the ISC License.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"LICENSE = `Copyright 2019\n\nPermission to use, copy, modify, and/or distribute this software for any purpose\nwith or without fee is hereby granted, provided that the above copyright notice\nand this permission notice appear in all copies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND\nFITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS\nOF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER\nTORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF\nTHIS SOFTWARE.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W43","stdlib":"1","titling":"auto"} </article></body></html>