Notebook Visualizer with Links / Edward Misback

includes

chart = {

const out = dot`digraph "${id}" {

node [fontname="var(--sans-serif)" fontsize=12];

edge [fontname="var(--sans-serif)" fontsize=12];

rankdir = ${orient};

${Array.from(variables, v => `${v._id} [label = "${v._name ?? `#${v._id}`}"${isbuiltin(v) ? `, color = "gray", fontcolor = "#555555"` : `, color = "black", fontcolor = "#20a5ba"`}]; ${v._inputs.map(i => `${i._id} -> ${v._id} ${isimport(v) ? `[color = "#20b2aa"]` : ""};`).join(" ")}`).join("\n")}

out.querySelectorAll('.node').forEach(g => {

g.style.cursor = 'pointer'

g.onclick = () => open(`https://observablehq.com/${id}#${g.querySelector('text').textContent}`)

})

return out

}

main = import(`https://api.observablehq.com/${id}.js?v=3`)

.then(async ({default: define}) => {

const runtime = new Runtime();

const main = runtime.module(define, name => includes.includes("anon") || name);

await runtime._compute();

runtime.dispose();

return main;

})

variables = Array.from(main._runtime._variables, (v, i) => (v._id = i, v))

.filter(v => !isimport(v) && !isglobal(v) && v._reachable)

.filter(v => includes.includes("anon") || !isanon(v))

.filter(v => includes.includes("builtin") || !isbuiltin(v))

.map(v => ({

_type: v._type,

_module: v._module,

_name: v._name,

_id: v._id,

_inputs: v._inputs

.map(i => isimport(i) ? i._inputs[0] : i)

.filter(i => !isglobal(i))

.filter(i => includes.includes("builtin") || !isbuiltin(i))

}))

isanon = v => v._name === null

isbuiltin = v =>

v._type === 2 && // implicit

(v._module === main._runtime._builtin || // standard library

v._module._builtins.has(v._name)) // special (e.g., invalidation)

isglobal = v =>

v._type === 2 && // implicit

!isbuiltin(v)

isimport = v =>

(v._type === 1 || v._type === 2) && // normal or implicit

v._inputs.length === 1 &&

v._module !== v._inputs[0]._module

Runtime = (await require("@observablehq/runtime@4")).Runtime

Purpose-built for displays of data