}); node.addEventListener('mouseover', () => { const colors = {}; colors[+node.firstElementChild.textContent] = 'moccasin'; colors[svg.value] = 'yellow'; colorNodes(colors); svg.dispatchEvent( new CustomEvent('module_mouseover', { detail: +node.firstElementChild.textContent }) ); }); node.addEventListener('mouseout', () => { const colors = {}; colors[svg.value] = 'yellow'; colorNodes(colors); svg.dispatchEvent(new CustomEvent('module_mouseout')); }); } svg.addEventListener('var_mouseover', ({ detail }) => { const colors = {}; colors[detail] = 'Moccasin'; colors[svg.value] = 'yellow'; colorNodes(colors); }); svg.addEventListener('var_mouseout', () => { const colors = {}; colors[svg.value] = 'yellow'; colorNodes(colors); }); svg.addEventListener('var_click', ({ detail }) => { update(detail); }); update(1); return svg; }33:T8f8,viewof dotSourceGraph = { const source = `digraph "${id}" { rankdir = ${orientModule}; ${(reachableOnly ? reachableModules2 : allModules2) .map(m => // nodes are modules, labeled by their slugs // border colored blue if the module was created by module_copy showBuiltinNode || m !== m2._runtime._builtin ? `${m._id} [label = "${m === m2 ? '👑 ' : ''}${m._slug}"${ m._copySource ? ', color = "blue"' : '' }${ // slug text colored grey if it is "_builtin" m._slug === '_builtin' ? ', fontcolor="#777777"' : '' }${ reachableModules2Set.has(m) ? "" : ', style="filled", fillcolor = "pink"' }]; ${Array.from( // remove duplicate edges? new Set( m._importedBy // edges correspond to imports .filter(d => !reachableOnly || 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 !== m2 // d.from = null means imported by main notebook ? `${m._id} -> ${m2._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; }34:T830,variableGraph = { const svg = await dot`${dotSourceModule}`; const nodes = svg.querySelectorAll('.node'); function getVarOf(node) { return allVariables2[+node.children[0].textContent]; } function colorNodes(colors) { for (const node of nodes) { const v = getVarOf(node); node.children[1].setAttribute( "fill", colors[v._id] || (v._reachable ? "none" : "pink") ); } } for (const node of nodes) { try { const currModule = getVarOf(node)._module; if (currModule._id !== moduleGraph) { node.setAttribute('cursor', 'pointer'); node.addEventListener('mouseover', () => { const colors = {}; for (const v of allVariables2) { if (v._module === currModule) colors[v._id] = 'Moccasin'; } 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 }) ); }); } } catch (e) { console.log(e, node); } } function moduleMouseover({ detail }) { const colors = {}; for (const v of allVariables2) { if (v._module === Array.from(allModules2)[detail]) colors[v._id] = 'Moccasin'; } colorNodes(colors); } function moduleMouseout() { colorNodes({}); } viewof moduleGraph.addEventListener('module_mouseover', moduleMouseover); viewof moduleGraph.addEventListener('module_mouseout', moduleMouseout); invalidation.then(() => { viewof moduleGraph.removeEventListener('module_mouseover', moduleMouseover); viewof moduleGraph.removeEventListener('module_mouseout', moduleMouseout); }); return svg; }35:T9fa,viewof dotSourceModule = { const main = Array.from(allModules2)[moduleGraph]; const variables = (reachableOnly ? reachableVars2 : allVariables2) .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 "${id}" { 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 = "#20b2aa"` : "" }${ v._reachable ? "" : ', style="filled", fillcolor = "pink"' }]; ${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 === m2 ? '👑 ' : ''}${ v._module !== main._runtime._builtin ? `${v._module._slug}#` : `` }${v._name}"` : `` }${ v._module === main._runtime._builtin ? `, color = "gray", fontcolor = "#555555"` : `, style = "dashed", fontcolor = "#555555"` }${v._reachable ? "" : ', style="filled", fillcolor = "pink"'}];` ).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; }36:T943,modified = md`### Modified Runtime The 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 an \`importMap\` in their constructor (used to fill in the \`_slug\` fields of Module objects) - 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\` I tried to mark changes to the original code with comment tags formatted like this: \`\`\`js // * \`\`\` though I may have missed some. `37:T2c23,Runtime = { function Runtime( moduleMap, // * 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 }, _allVariables: { value: [], enumerable: true }, // * _moduleMap: { value: moduleMap }, // * _defineStack: { enumerable: false } // * }); 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() { 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) console.log( `${Array(_defineStack.length - 2) .fill(' ') .join('')}defining`, module._slug ); // * end define(this, observer); } finally { this._init = null; } // * begin if (log) 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._computeSoon()); } function runtime_computeSoon() { var runtime = this; return new Promise(function(resolve) { frame(function() { resolve(); runtime._disposed || runtime._computeNow(); }); }); } function runtime_computeNow() { 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) { 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); } } } 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) { variable._invalidate(); variable._invalidate = noop; variable._pending(); var value0 = variable._value, version = ++variable._version, invalidation = null, promise = (variable._promise = Promise.all( variable._inputs.map(variable_value) ) .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. 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. if (generatorish(value)) { (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); } ); } function variable_precompute(variable, version, promise, generator) { function recompute() { var promise = new Promise(function(resolve) { resolve(generator.next()); }).then(function(next) { return next.done ? undefined : Promise.resolve(next.value).then(function(value) { if (variable._version !== version) return; variable_postrecompute(variable, value, promise).then(recompute); variable._fulfilled(value); return value; }); }); promise.catch(function(error) { if (variable._version !== version) return; variable_postrecompute(variable, undefined, promise); variable._rejected(error); }); } 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? return runtime._compute(); } function variable_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); } 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; }38:T1d24,Module = { // * new arguments parent, type function Module(runtime, builtins = [], from, caller) { Object.defineProperties(this, { _slug: { value: null, writable: true, enumerable: true }, // * _scope: { value: new Map(), enumerable: true }, _builtins: { value: new Map([ ["invalidation", variable_invalidation], ["visibility", variable_visibility], ...builtins ]), enumerable: true }, _source: { value: null, writable: true, enumerable: true }, _copySource: { value: null, writable: true, enumerable: true }, // * _runtime: { value: runtime, 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: runtime._defineStack.slice() } // * end }); } 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); }); Promise.resolve().then(() => { if (log) 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()); if (log) console.log('finished derive in', this._slug); // * }); return copy; } function module_copy(copy, map) { if (patch) copy._source = this; // * begin copy._slug = this._slug; if (log) 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; if (patch) { // PR #193 https://github.com/observablehq/runtime/pull/193 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 }), map ) // import-with : sourceModule) ); } else { var targetModule = dontCopy && sourceModule === this._runtime._builtin // *** DON'T COPY BUILTINS? *** ? this._runtime._builtin // * : map.get(sourceModule) || sourceModule._copy( new Module(copy._runtime, copy._builtins, this, { caller: 'module_copy', copy, map, sourceModule }), map ); // * copy.import(sourceInput._name, name, targetModule); } } 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._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 { 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; }39:T2550,Variable = { function Variable(type, module, observer, caller) { if (observer == null) observer = no_observer; 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 }, _createdBy: { value: { caller, defineStack: module._runtime._defineStack.slice() }, enumerable: true } //* }); } 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 ); 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; } } 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) { // this._outputs.forEach(runtime._updates.add, runtime._updates); } else { 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 }); // * end return variable_defineImpl.call( this, name + "", [module._resolve(remote + "")], identity ); } function variable_delete() { 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; }3a:[] 2f:{"title":"Notebook import inspector (deprecated)","cells":[{"id":0,"value":"md`# Notebook import inspector (deprecated)\n\n**This notebook has been superceded by the [Notebook Stepper](https://observablehq.com/@bryangingechen/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 import diagrams owe much (both in terms of ideas and code) to Mike Bostock's [Notebook Visualizer](https://observablehq.com/@mbostock/notebook-visualizer).\n\nEnter the URL for a notebook you want to inspect. [Click here](?id=${id}) for a permalink.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"viewof id = {\n const getId = v => {\n let m;\n if ((m = /(\\/$|\\.js(\\?|$))/i.exec(v))) v = v.slice(0, m.index);\n if ((m = /^https:\\/\\/(api\\.|beta\\.|)observablehq\\.com\\//i.exec(v)))\n v = v.slice(m[0].length);\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@1422\"\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 return text.form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1395,"value":"viewof reachableOnly = checkbox({\n options: [\"show <code>_reachable</code> variables only\"],\n value: \"show <code>_reachable</code> variables only\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"html`<div class=\"graphForm\" style=\"display: flex;\">${viewof showBuiltinNode}${viewof modulePercentage}${viewof orientModule}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"html`<div class=\"graphForm\" style=\"display: flex;\">${viewof anon}${viewof variablePercentage}${viewof orientVariable}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1910,"value":"md`Note that import-with can create modules that are disconnected from the main module, since the imported module must be created by the runtime before its derived copy is created. Then it's entirely possible that the main module and its dependencies do not import any variables from the original module. However, you shouldn't see any of these if you choose to only look at reachable modules.\n\nWhile only the reachable variables can possibly have any effect on cells in the main module, it may still be interesting to look at the unreachable variables / modules to see just how many are created by the runtime while processing the notebook.\n\n**The rest of this notebook is a (somewhat cleaned-up) record of experiments and tests I made while putting together the [modified runtime](#modified) that powers the graphs above.**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2329,"value":"md`### Supporting cells for the graphs\n\nThe cells here are mostly input elements for the forms above. The data cells are in [this section](#modifiedTest).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"apiUrl = `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":"sliderEffects = {\n viewof moduleGraph.style.maxWidth = 'none';\n viewof moduleGraph.style.width = modulePercentage + '%';\n viewof moduleGraph.parentElement.style.overflow =\n modulePercentage > 100 ? 'scroll' : 'visible';\n variableGraph.style.maxWidth = 'none';\n variableGraph.style.width = variablePercentage + '%';\n variableGraph.parentElement.style.overflow =\n variablePercentage > 100 ? 'scroll' : 'visible';\n}","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([\"Show builtin node\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"viewof modulePercentage = slider({\n min: 0,\n max: 800,\n step: 1,\n value: 100,\n format: v => `${v}%`,\n title: \"module graph zoom factor\"\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 \"Include anonymous cells in variable graph (labeled with # + index):\"\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"viewof variablePercentage = slider({\n min: 0,\n max: 800,\n step: 1,\n value: 75,\n format: v => `${v}%`,\n title: \"variable graph zoom factor\"\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":546,"value":"md`## Exploring Runtime v${version}\n\nFirst we load it with the latest supported version of the [Observable runtime](https://github.com/observablehq/runtime). See \\`require\\` statement [here](#observable).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"nbDefine = (await import(apiUrl)).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":803,"value":"md`This is the main module. Unfortunately, most of its properties are not enumerable so the inspector is not very convenient.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"m1 = {\n const runtime = new oRuntime();\n const main = nbDefine(runtime, name => true);\n await runtime._compute();\n runtime.dispose();\n return main;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":806,"value":"md`This cell displays the \\`_scope\\` maps (containing name-variable key-value pairs)for the modules that are directly imported by the main module (stored as the values of the Map \\`m1._runtime._modules\\`).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"scope1 = [...m1._runtime._modules.values()].map(({ _scope }) => _scope)","pinned":true,"hidden":false,"mode":"ojs"},{"id":815,"value":"md`This is the Set of variables.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"varset1 = m1._runtime._variables","pinned":true,"hidden":false,"mode":"ojs"},{"id":1079,"value":"missingImport = md`**NOTE**: Apparently this doesn't contain variables for imports of duplicate variables. The following cells assume that the default \\`@bryangingechen/imports-tips-and-tricks\\` notebook is open. [The cell \\`a\\` in that notebook](https://observablehq.com/@bryangingechen/imports-tips-and-tricks#importbad) is an import of a duplicate variable:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"example_a = m1._resolve('a')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1090,"value":"importOfDuplicate = example_a._inputs[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1096,"value":"md`As you can see, its input is a variable which doesn't appear in the above set!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"varset1.has(importOfDuplicate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1104,"value":"md`The following seems to get these too, however, as we will see below, there are still more variables floating around:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"allVars1 = {\n const allVars1 = new Set(varset1);\n for (const v of allVars1) {\n for (const w of v._inputs) {\n allVars1.add(w);\n }\n }\n return allVars1;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":865,"value":"md`We can use a helper function to peek at the properties and methods of the variable objects.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"Array.from(varset1, getAllPropertyNamesAsObj)","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"v1 = Array.from(varset1)\n // .filter(({ _reachable }) => _reachable)\n .map(({ _name }) => _name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":854,"value":"md`In version 4.4.3 and below, there were a lot of copies of the stdlib:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"v1.filter(s => s === 'DOM')","pinned":true,"hidden":false,"mode":"ojs"},{"id":812,"value":"md`This cell displays a Set of all modules associated to the variables in this runtime:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"modules = new Set(Array.from(varset1, ({ _module }) => _module))","pinned":true,"hidden":false,"mode":"ojs"},{"id":834,"value":"Array.from(modules, getAllPropertyNamesAsObj)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1384,"value":"md`Here are the reachable variables and modules containing them:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"varsetReachable = Array.from(varset1).filter(({ _reachable }) => _reachable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":848,"value":"modulesReachable = new Set(\n Array.from(varsetReachable, ({ _module }) => _module)\n)","pinned":true,"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":"testImportMap = await importMap(apiUrl)","pinned":true,"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":11,"value":"m2 = {\n const runtime = new Runtime(testImportMap);\n const main = nbDefine(runtime, name => true);\n main._slug = [...testImportMap.values()][0];\n await runtime._compute();\n runtime.dispose();\n return main;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"r2 = m2._runtime","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"allModules2Set = {\n const all = new Set([...r2._variables].map(({ _module }) => _module));\n Array.from(all, (m, i) => {\n m._id = i;\n });\n return all;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1450,"value":"allModules2 = Array.from(allModules2Set)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1073,"value":"md`As above, the \\`_variables\\` set doesn't contain variables for imports of duplicated variables:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"rVariables2 = [...r2._variables]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1111,"value":"md`This is a copy of the cell above that transitively adds the variables in the inputs:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"moreVariables2Set = {\n const allVars = new Set(rVariables2);\n for (const v of allVars) {\n for (const w of v._inputs) {\n allVars.add(w);\n }\n }\n return allVars;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1429,"value":"md`But we can in fact do better! The \\`_allVariables\\` property of our modified runtime contains all variables that are ever created by the runtime:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"allVariables2 = r2._allVariables.map((v, i) => {\n v.def = v._definition.toString();\n v._id = i;\n return v;\n})","pinned":true,"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":"reachableVars2 = [...r2._allVariables].filter(({ _reachable }) => _reachable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1392,"value":"reachableModules2Set = new Set(reachableVars2.map(({ _module }) => _module))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1444,"value":"reachableModules2 = Array.from(reachableModules2Set)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2337,"value":"md`Uncheck this box to see how version 4.4.3 made extra copies of builtin and other modules.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"viewof patch = checkbox({\n options: [\n 'include <a href=\"https://github.com/observablehq/runtime/pull/193\">PR#193'\n ],\n value:\n 'include <a href=\"https://github.com/observablehq/runtime/pull/193\">PR#193'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"thought = md`(The following was a comment on version 4.4.3 of the runtime.)\n\n**Thought: maybe we can reduce the number of modules / variables necessary by avoiding copying of the builtin module.**\n\nThe following checkbox lets you toggle a change to [\\`module_copy\\` in the \\`Module\\` class](#Module) which addresses this (only has an effect if the PR#193 checkbox is unchecked):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"viewof dontCopy = checkbox([\"don't copy <code>_builtin</code> module\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"md`### Misc functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"// titles\n[...r2._modules.keys()].map(d => d.toString().match(/# ([^\\n]+)/g)[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"// imports\n[...r2._variables].filter(({ _definition }) => _definition === identity)","pinned":true,"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.6.3'","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"observable = require(`@observablehq/runtime@${version}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":446,"value":"oRuntime = observable.Runtime","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"// used below\nLibrary = observable.Library","pinned":true,"hidden":false,"mode":"ojs"},{"id":2426,"value":"// https://github.com/observablehq/stdlib/blob/81a7995764923b73decfe3e50844dae2c15d2a9a/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 FileAttachment(url, name);\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"md`### Parsing JS module files\n\n(relies on certain assumptions on the file format)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"// assumes first line of JS module has a comment with the notebook URL\nasync 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, nbUrl: src.split('\\n')[0].slice(3) };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"// assumes lines after the first until the first double line break contain either:\n// - imports of other notebook JS modules\n// - no imports (returns [])\nfunction parseImports(src) {\n const matches = src\n .split('\\n\\n')[0]\n .split('\\n')\n .slice(1)\n .map(s => s.match(/^import (\\w+) from \"([^\"]+)\"/));\n return matches[0]\n ? matches.map(([, name, relativeUrl]) => ({\n name,\n slug: relativeUrl.slice(0, -7),\n apiUrl: \"https://api.observablehq.com\" + relativeUrl\n }))\n : [];\n}","pinned":true,"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 map.set(define.toString(), apiUrl.match(/\\.com\\/([^\\.]+)/)[1]);\n const queue = parseImports(src);\n\n for (const { name, apiUrl } of queue) {\n if (!seen.has(apiUrl)) {\n seen.add(apiUrl);\n const { src, define } = await fetchDefine(apiUrl);\n map.set(define.toString(), apiUrl.match(/\\.com\\/([^\\.]+)/)[1]);\n queue.push(...parseImports(src));\n }\n }\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"// unused -- only labels direct imports so we needed a more complicated approach\nfunction attachSlugs(runtime, importMap) {\n for (const [define, module] of runtime._modules) {\n module._slug = importMap.get(define.toString());\n }\n return runtime._modules;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof log = checkbox(['log info to console'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"RuntimeError = Error","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"variable_invalidation = ({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"variable_visibility = ({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"frame = requestAnimationFrame","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"function window_global(name) {\n return window[name];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"TYPE_NORMAL = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"TYPE_IMPLICIT = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"TYPE_DUPLICATE = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"function rethrow(e) {\n return function() {\n throw e;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"no_observer = ({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"function identity(x) {\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"noop = () => {}","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"function constant(x) {\n return function() {\n return x;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"$39","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":2405,"value":"md`## Version history\n- 2019/09/09 [@935](https://observablehq.com/@bryangingechen/notebook-import-inspector@935): first [shared](https://talk.observablehq.com/t/notebook-import-visualizer/2361) version (only module graph)\n- 2019/09/09 [@1030](https://observablehq.com/@bryangingechen/notebook-import-inspector@1030): first update (added variable graph)\n- 2019/09/10 [@1206](https://observablehq.com/@bryangingechen/notebook-import-inspector@1206): second post (big fixes, interactivity)\n- 2019/09/10 [@2424](https://observablehq.com/@bryangingechen/notebook-import-inspector@2424): first publish (reorganized)\n- 2019/11/02: fixes for 4.6.3 (but it still doesn't support imports from non-\\`observablehq.com\\` URLs like the Notebook Stepper does)\n`","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":"$W3a","stdlib":"1","titling":"auto"} </article></body></html>

31:T4c4,diagram = md`The first diagram (the **module graph**) shows the imports (arrows from black nodes) and import-withs (arrows from / to blue nodes) to the selected notebook. Notebooks that are not "reachable" are colored pink (if you choose to display them), and the "main" notebook is marked with a crown "👑". To be more precise, these are the "module objects" 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 (roughly speaking, notebook cells) in a selected module. The diagrams are interactive: - In the module graph: - Hovering over a node highlights 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.`32:T6fb,viewof moduleGraph = { const svg = await dot`${dotSourceGraph}`; 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] || (reachableModules2Set.has(allModules2[j]) ? "none" : "pink") ); } } function update(j) { svg.value = j; svg.dispatchEvent(new CustomEvent('input')); const colors = {}; colors[j] = 'yellow'; colorNodes(colors); } for (const node of nodes) { node.style.cursor = "pointer"; node.addEventListener('click', () => { update(+node.firstElementChild.textContent); // }); node.addEventListener('mouseover', () => { const colors = {}; colors[+node.firstElementChild.textContent] = 'moccasin'; colors[svg.value] = 'yellow'; colorNodes(colors); svg.dispatchEvent( new CustomEvent('module_mouseover', { detail: +node.firstElementChild.textContent }) ); }); node.addEventListener('mouseout', () => { const colors = {}; colors[svg.value] = 'yellow'; colorNodes(colors); svg.dispatchEvent(new CustomEvent('module_mouseout')); }); } svg.addEventListener('var_mouseover', ({ detail }) => { const colors = {}; colors[detail] = 'Moccasin'; colors[svg.value] = 'yellow'; colorNodes(colors); }); svg.addEventListener('var_mouseout', () => { const colors = {}; colors[svg.value] = 'yellow'; colorNodes(colors); }); svg.addEventListener('var_click', ({ detail }) => { update(detail); }); update(1); return svg; }33:T8f8,viewof dotSourceGraph = { const source = `digraph "${id}" { rankdir = ${orientModule}; ${(reachableOnly ? reachableModules2 : allModules2) .map(m => // nodes are modules, labeled by their slugs // border colored blue if the module was created by module_copy showBuiltinNode || m !== m2._runtime._builtin ? `${m._id} [label = "${m === m2 ? '👑 ' : ''}${m._slug}"${ m._copySource ? ', color = "blue"' : '' }${ // slug text colored grey if it is "_builtin" m._slug === '_builtin' ? ', fontcolor="#777777"' : '' }${ reachableModules2Set.has(m) ? "" : ', style="filled", fillcolor = "pink"' }]; ${Array.from( // remove duplicate edges? new Set( m._importedBy // edges correspond to imports .filter(d => !reachableOnly || 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 !== m2 // d.from = null means imported by main notebook ? `${m._id} -> ${m2._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; }34:T830,variableGraph = { const svg = await dot`${dotSourceModule}`; const nodes = svg.querySelectorAll('.node'); function getVarOf(node) { return allVariables2[+node.children[0].textContent]; } function colorNodes(colors) { for (const node of nodes) { const v = getVarOf(node); node.children[1].setAttribute( "fill", colors[v._id] || (v._reachable ? "none" : "pink") ); } } for (const node of nodes) { try { const currModule = getVarOf(node)._module; if (currModule._id !== moduleGraph) { node.setAttribute('cursor', 'pointer'); node.addEventListener('mouseover', () => { const colors = {}; for (const v of allVariables2) { if (v._module === currModule) colors[v._id] = 'Moccasin'; } 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 }) ); }); } } catch (e) { console.log(e, node); } } function moduleMouseover({ detail }) { const colors = {}; for (const v of allVariables2) { if (v._module === Array.from(allModules2)[detail]) colors[v._id] = 'Moccasin'; } colorNodes(colors); } function moduleMouseout() { colorNodes({}); } viewof moduleGraph.addEventListener('module_mouseover', moduleMouseover); viewof moduleGraph.addEventListener('module_mouseout', moduleMouseout); invalidation.then(() => { viewof moduleGraph.removeEventListener('module_mouseover', moduleMouseover); viewof moduleGraph.removeEventListener('module_mouseout', moduleMouseout); }); return svg; }35:T9fa,viewof dotSourceModule = { const main = Array.from(allModules2)[moduleGraph]; const variables = (reachableOnly ? reachableVars2 : allVariables2) .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 "${id}" { 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 = "#20b2aa"` : "" }${ v._reachable ? "" : ', style="filled", fillcolor = "pink"' }]; ${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 === m2 ? '👑 ' : ''}${ v._module !== main._runtime._builtin ? `${v._module._slug}#` : `` }${v._name}"` : `` }${ v._module === main._runtime._builtin ? `, color = "gray", fontcolor = "#555555"` : `, style = "dashed", fontcolor = "#555555"` }${v._reachable ? "" : ', style="filled", fillcolor = "pink"'}];` ).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; }36:T943,modified = md`### Modified Runtime The 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 an \`importMap\` in their constructor (used to fill in the \`_slug\` fields of Module objects) - 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\` I tried to mark changes to the original code with comment tags formatted like this: \`\`\`js // * \`\`\` though I may have missed some. `37:T2c23,Runtime = { function Runtime( moduleMap, // * 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 }, _allVariables: { value: [], enumerable: true }, // * _moduleMap: { value: moduleMap }, // * _defineStack: { enumerable: false } // * }); 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() { 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) console.log( `${Array(_defineStack.length - 2) .fill(' ') .join('')}defining`, module._slug ); // * end define(this, observer); } finally { this._init = null; } // * begin if (log) 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._computeSoon()); } function runtime_computeSoon() { var runtime = this; return new Promise(function(resolve) { frame(function() { resolve(); runtime._disposed || runtime._computeNow(); }); }); } function runtime_computeNow() { 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) { 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); } } } 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) { variable._invalidate(); variable._invalidate = noop; variable._pending(); var value0 = variable._value, version = ++variable._version, invalidation = null, promise = (variable._promise = Promise.all( variable._inputs.map(variable_value) ) .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. 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. if (generatorish(value)) { (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); } ); } function variable_precompute(variable, version, promise, generator) { function recompute() { var promise = new Promise(function(resolve) { resolve(generator.next()); }).then(function(next) { return next.done ? undefined : Promise.resolve(next.value).then(function(value) { if (variable._version !== version) return; variable_postrecompute(variable, value, promise).then(recompute); variable._fulfilled(value); return value; }); }); promise.catch(function(error) { if (variable._version !== version) return; variable_postrecompute(variable, undefined, promise); variable._rejected(error); }); } 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? return runtime._compute(); } function variable_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); } 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; }38:T1d24,Module = { // * new arguments parent, type function Module(runtime, builtins = [], from, caller) { Object.defineProperties(this, { _slug: { value: null, writable: true, enumerable: true }, // * _scope: { value: new Map(), enumerable: true }, _builtins: { value: new Map([ ["invalidation", variable_invalidation], ["visibility", variable_visibility], ...builtins ]), enumerable: true }, _source: { value: null, writable: true, enumerable: true }, _copySource: { value: null, writable: true, enumerable: true }, // * _runtime: { value: runtime, 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: runtime._defineStack.slice() } // * end }); } 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); }); Promise.resolve().then(() => { if (log) 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()); if (log) console.log('finished derive in', this._slug); // * }); return copy; } function module_copy(copy, map) { if (patch) copy._source = this; // * begin copy._slug = this._slug; if (log) 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; if (patch) { // PR #193 https://github.com/observablehq/runtime/pull/193 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 }), map ) // import-with : sourceModule) ); } else { var targetModule = dontCopy && sourceModule === this._runtime._builtin // *** DON'T COPY BUILTINS? *** ? this._runtime._builtin // * : map.get(sourceModule) || sourceModule._copy( new Module(copy._runtime, copy._builtins, this, { caller: 'module_copy', copy, map, sourceModule }), map ); // * copy.import(sourceInput._name, name, targetModule); } } 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._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 { 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; }39:T2550,Variable = { function Variable(type, module, observer, caller) { if (observer == null) observer = no_observer; 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 }, _createdBy: { value: { caller, defineStack: module._runtime._defineStack.slice() }, enumerable: true } //* }); } 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 ); 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; } } 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) { // this._outputs.forEach(runtime._updates.add, runtime._updates); } else { 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 }); // * end return variable_defineImpl.call( this, name + "", [module._resolve(remote + "")], identity ); } function variable_delete() { 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; }3a:[] 2f:{"title":"Notebook import inspector (deprecated)","cells":[{"id":0,"value":"md`# Notebook import inspector (deprecated)\n\n**This notebook has been superceded by the [Notebook Stepper](https://observablehq.com/@bryangingechen/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 import diagrams owe much (both in terms of ideas and code) to Mike Bostock's [Notebook Visualizer](https://observablehq.com/@mbostock/notebook-visualizer).\n\nEnter the URL for a notebook you want to inspect. [Click here](?id=${id}) for a permalink.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"viewof id = {\n const getId = v => {\n let m;\n if ((m = /(\\/$|\\.js(\\?|$))/i.exec(v))) v = v.slice(0, m.index);\n if ((m = /^https:\\/\\/(api\\.|beta\\.|)observablehq\\.com\\//i.exec(v)))\n v = v.slice(m[0].length);\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@1422\"\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 return text.form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1395,"value":"viewof reachableOnly = checkbox({\n options: [\"show <code>_reachable</code> variables only\"],\n value: \"show <code>_reachable</code> variables only\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"html`<div class=\"graphForm\" style=\"display: flex;\">${viewof showBuiltinNode}${viewof modulePercentage}${viewof orientModule}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"html`<div class=\"graphForm\" style=\"display: flex;\">${viewof anon}${viewof variablePercentage}${viewof orientVariable}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1910,"value":"md`Note that import-with can create modules that are disconnected from the main module, since the imported module must be created by the runtime before its derived copy is created. Then it's entirely possible that the main module and its dependencies do not import any variables from the original module. However, you shouldn't see any of these if you choose to only look at reachable modules.\n\nWhile only the reachable variables can possibly have any effect on cells in the main module, it may still be interesting to look at the unreachable variables / modules to see just how many are created by the runtime while processing the notebook.\n\n**The rest of this notebook is a (somewhat cleaned-up) record of experiments and tests I made while putting together the [modified runtime](#modified) that powers the graphs above.**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2329,"value":"md`### Supporting cells for the graphs\n\nThe cells here are mostly input elements for the forms above. The data cells are in [this section](#modifiedTest).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"apiUrl = `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":"sliderEffects = {\n viewof moduleGraph.style.maxWidth = 'none';\n viewof moduleGraph.style.width = modulePercentage + '%';\n viewof moduleGraph.parentElement.style.overflow =\n modulePercentage > 100 ? 'scroll' : 'visible';\n variableGraph.style.maxWidth = 'none';\n variableGraph.style.width = variablePercentage + '%';\n variableGraph.parentElement.style.overflow =\n variablePercentage > 100 ? 'scroll' : 'visible';\n}","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([\"Show builtin node\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"viewof modulePercentage = slider({\n min: 0,\n max: 800,\n step: 1,\n value: 100,\n format: v => `${v}%`,\n title: \"module graph zoom factor\"\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 \"Include anonymous cells in variable graph (labeled with # + index):\"\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"viewof variablePercentage = slider({\n min: 0,\n max: 800,\n step: 1,\n value: 75,\n format: v => `${v}%`,\n title: \"variable graph zoom factor\"\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":546,"value":"md`## Exploring Runtime v${version}\n\nFirst we load it with the latest supported version of the [Observable runtime](https://github.com/observablehq/runtime). See \\`require\\` statement [here](#observable).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"nbDefine = (await import(apiUrl)).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":803,"value":"md`This is the main module. Unfortunately, most of its properties are not enumerable so the inspector is not very convenient.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"m1 = {\n const runtime = new oRuntime();\n const main = nbDefine(runtime, name => true);\n await runtime._compute();\n runtime.dispose();\n return main;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":806,"value":"md`This cell displays the \\`_scope\\` maps (containing name-variable key-value pairs)for the modules that are directly imported by the main module (stored as the values of the Map \\`m1._runtime._modules\\`).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"scope1 = [...m1._runtime._modules.values()].map(({ _scope }) => _scope)","pinned":true,"hidden":false,"mode":"ojs"},{"id":815,"value":"md`This is the Set of variables.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"varset1 = m1._runtime._variables","pinned":true,"hidden":false,"mode":"ojs"},{"id":1079,"value":"missingImport = md`**NOTE**: Apparently this doesn't contain variables for imports of duplicate variables. The following cells assume that the default \\`@bryangingechen/imports-tips-and-tricks\\` notebook is open. [The cell \\`a\\` in that notebook](https://observablehq.com/@bryangingechen/imports-tips-and-tricks#importbad) is an import of a duplicate variable:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"example_a = m1._resolve('a')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1090,"value":"importOfDuplicate = example_a._inputs[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1096,"value":"md`As you can see, its input is a variable which doesn't appear in the above set!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"varset1.has(importOfDuplicate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1104,"value":"md`The following seems to get these too, however, as we will see below, there are still more variables floating around:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"allVars1 = {\n const allVars1 = new Set(varset1);\n for (const v of allVars1) {\n for (const w of v._inputs) {\n allVars1.add(w);\n }\n }\n return allVars1;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":865,"value":"md`We can use a helper function to peek at the properties and methods of the variable objects.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"Array.from(varset1, getAllPropertyNamesAsObj)","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"v1 = Array.from(varset1)\n // .filter(({ _reachable }) => _reachable)\n .map(({ _name }) => _name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":854,"value":"md`In version 4.4.3 and below, there were a lot of copies of the stdlib:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"v1.filter(s => s === 'DOM')","pinned":true,"hidden":false,"mode":"ojs"},{"id":812,"value":"md`This cell displays a Set of all modules associated to the variables in this runtime:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"modules = new Set(Array.from(varset1, ({ _module }) => _module))","pinned":true,"hidden":false,"mode":"ojs"},{"id":834,"value":"Array.from(modules, getAllPropertyNamesAsObj)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1384,"value":"md`Here are the reachable variables and modules containing them:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"varsetReachable = Array.from(varset1).filter(({ _reachable }) => _reachable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":848,"value":"modulesReachable = new Set(\n Array.from(varsetReachable, ({ _module }) => _module)\n)","pinned":true,"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":"testImportMap = await importMap(apiUrl)","pinned":true,"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":11,"value":"m2 = {\n const runtime = new Runtime(testImportMap);\n const main = nbDefine(runtime, name => true);\n main._slug = [...testImportMap.values()][0];\n await runtime._compute();\n runtime.dispose();\n return main;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"r2 = m2._runtime","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"allModules2Set = {\n const all = new Set([...r2._variables].map(({ _module }) => _module));\n Array.from(all, (m, i) => {\n m._id = i;\n });\n return all;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1450,"value":"allModules2 = Array.from(allModules2Set)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1073,"value":"md`As above, the \\`_variables\\` set doesn't contain variables for imports of duplicated variables:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"rVariables2 = [...r2._variables]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1111,"value":"md`This is a copy of the cell above that transitively adds the variables in the inputs:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"moreVariables2Set = {\n const allVars = new Set(rVariables2);\n for (const v of allVars) {\n for (const w of v._inputs) {\n allVars.add(w);\n }\n }\n return allVars;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1429,"value":"md`But we can in fact do better! The \\`_allVariables\\` property of our modified runtime contains all variables that are ever created by the runtime:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"allVariables2 = r2._allVariables.map((v, i) => {\n v.def = v._definition.toString();\n v._id = i;\n return v;\n})","pinned":true,"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":"reachableVars2 = [...r2._allVariables].filter(({ _reachable }) => _reachable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1392,"value":"reachableModules2Set = new Set(reachableVars2.map(({ _module }) => _module))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1444,"value":"reachableModules2 = Array.from(reachableModules2Set)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2337,"value":"md`Uncheck this box to see how version 4.4.3 made extra copies of builtin and other modules.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"viewof patch = checkbox({\n options: [\n 'include <a href=\"https://github.com/observablehq/runtime/pull/193\">PR#193'\n ],\n value:\n 'include <a href=\"https://github.com/observablehq/runtime/pull/193\">PR#193'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"thought = md`(The following was a comment on version 4.4.3 of the runtime.)\n\n**Thought: maybe we can reduce the number of modules / variables necessary by avoiding copying of the builtin module.**\n\nThe following checkbox lets you toggle a change to [\\`module_copy\\` in the \\`Module\\` class](#Module) which addresses this (only has an effect if the PR#193 checkbox is unchecked):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"viewof dontCopy = checkbox([\"don't copy <code>_builtin</code> module\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"md`### Misc functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"// titles\n[...r2._modules.keys()].map(d => d.toString().match(/# ([^\\n]+)/g)[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"// imports\n[...r2._variables].filter(({ _definition }) => _definition === identity)","pinned":true,"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.6.3'","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"observable = require(`@observablehq/runtime@${version}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":446,"value":"oRuntime = observable.Runtime","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"// used below\nLibrary = observable.Library","pinned":true,"hidden":false,"mode":"ojs"},{"id":2426,"value":"// https://github.com/observablehq/stdlib/blob/81a7995764923b73decfe3e50844dae2c15d2a9a/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 FileAttachment(url, name);\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"md`### Parsing JS module files\n\n(relies on certain assumptions on the file format)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"// assumes first line of JS module has a comment with the notebook URL\nasync 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, nbUrl: src.split('\\n')[0].slice(3) };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"// assumes lines after the first until the first double line break contain either:\n// - imports of other notebook JS modules\n// - no imports (returns [])\nfunction parseImports(src) {\n const matches = src\n .split('\\n\\n')[0]\n .split('\\n')\n .slice(1)\n .map(s => s.match(/^import (\\w+) from \"([^\"]+)\"/));\n return matches[0]\n ? matches.map(([, name, relativeUrl]) => ({\n name,\n slug: relativeUrl.slice(0, -7),\n apiUrl: \"https://api.observablehq.com\" + relativeUrl\n }))\n : [];\n}","pinned":true,"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 map.set(define.toString(), apiUrl.match(/\\.com\\/([^\\.]+)/)[1]);\n const queue = parseImports(src);\n\n for (const { name, apiUrl } of queue) {\n if (!seen.has(apiUrl)) {\n seen.add(apiUrl);\n const { src, define } = await fetchDefine(apiUrl);\n map.set(define.toString(), apiUrl.match(/\\.com\\/([^\\.]+)/)[1]);\n queue.push(...parseImports(src));\n }\n }\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"// unused -- only labels direct imports so we needed a more complicated approach\nfunction attachSlugs(runtime, importMap) {\n for (const [define, module] of runtime._modules) {\n module._slug = importMap.get(define.toString());\n }\n return runtime._modules;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof log = checkbox(['log info to console'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"RuntimeError = Error","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"variable_invalidation = ({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"variable_visibility = ({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"frame = requestAnimationFrame","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"function window_global(name) {\n return window[name];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"TYPE_NORMAL = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"TYPE_IMPLICIT = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"TYPE_DUPLICATE = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"function rethrow(e) {\n return function() {\n throw e;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"no_observer = ({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"function identity(x) {\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"noop = () => {}","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"function constant(x) {\n return function() {\n return x;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"$39","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":2405,"value":"md`## Version history\n- 2019/09/09 [@935](https://observablehq.com/@bryangingechen/notebook-import-inspector@935): first [shared](https://talk.observablehq.com/t/notebook-import-visualizer/2361) version (only module graph)\n- 2019/09/09 [@1030](https://observablehq.com/@bryangingechen/notebook-import-inspector@1030): first update (added variable graph)\n- 2019/09/10 [@1206](https://observablehq.com/@bryangingechen/notebook-import-inspector@1206): second post (big fixes, interactivity)\n- 2019/09/10 [@2424](https://observablehq.com/@bryangingechen/notebook-import-inspector@2424): first publish (reorganized)\n- 2019/11/02: fixes for 4.6.3 (but it still doesn't support imports from non-\\`observablehq.com\\` URLs like the Notebook Stepper does)\n`","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":"$W3a","stdlib":"1","titling":"auto"} </article></body></html>