2d:null 2e:["$","title",null,{"children":"Notebook Visualizer Elk Edition | Michiel Dral | Observable"}] 33:T550,graph = { let children = []; let edges = []; let eId = 0; let variables_filtered_again = util_like_filter(variables); for (let v of variables_filtered_again) { children.push({ label: v._name || `#${v._id}`, id: node_id(v), fill: v.color, className: (v.classes || []).join(' ') }); for (let i of v._inputs) { if (variables_filtered_again.find(x => x._id === i._id) == null) { continue; } edges.push({ id: `e${eId++}`, className: [ is_selected(v) && 'output-selected-edge', is_selected(i) && 'input-selected-edge' ] .filter(Boolean) .join(''), targets: [node_id(v)], sources: [node_id(i)] }); } } let graph = { id: 'root', layoutOptions: { 'elk.algorithm': 'layered' }, children, edges }; let g = USE_PREACT ? await elky_preact(this, graph) : await scrollcontainer(this, await elky(graph)); g.onclick = event => { let id_holder = event.target.closest('[data-id]'); if (id_holder) { g.value = id_holder.dataset.id; } else { g.value = null; } g.dispatchEvent(new CustomEvent('input')); let variable = variables.find(x => node_id(x) === g.value); mutable SELECTED = { id: g.value, name: variable._name }; }; return g; }34:Tb42,variables = { let id_counter = -1; let id = () => { id_counter = id_counter - 1; return id_counter; }; let get_variable = ({ _id }) => all_variables.find(x => x._id === _id) || required(`No variable found with id "${_id}"`); let roots = ROOT_NAME ? [all_variables.find(x => x._name === ROOT_NAME)] : all_variables // .filter(x => x._outputs.filter(x => x._name != null).length === 0) .filter(x => x._inputs.length !== 0) .filter(x => x._inputs.length !== 0) .filter(x => !x._inputs.some(x => x._name.startsWith('viewof '))); let resolved_variables = []; for (let root of roots) { let resolve_variable = output_variable => { let found = resolved_variables.find(x => x._id === output_variable._id); if (found != null) return found; let classes = [ ...(output_variable.classes || []), is_selected(output_variable) && 'is-selected', output_variable._outputs.some(is_selected) && 'is-output-selected' ].filter(Boolean); // Make nodes derived from viewof nodes green, // and get rid of the Generators and parent "viewof x" node if (is_viewof(output_variable)) { let node = { ...output_variable, _inputs: [], classes: [...classes, 'is-viewof'] }; resolved_variables.push(node); return node; } if (is_mutable(output_variable)) { let node = { ...output_variable, _inputs: [], classes: [...classes, 'is-mutable'] }; resolved_variables.push(node); return node; } let node_for_now = { ...output_variable, classes: classes }; resolved_variables.push(node_for_now); let _inputs = output_variable._inputs .map(get_variable) .map(input_variable => { // Show required modules red, and don't show the "require" node // (as it is implicit when a node is red) let make_shallow_classes = should_be_shallow(input_variable); if (make_shallow_classes.length !== 0) { return resolve_variable({ ...input_variable, _id: `${output_variable._id}:${input_variable._id}`, _inputs: [], _outputs: [output_variable], classes: make_shallow_classes }); } return resolve_variable(input_variable); }) .filter(Boolean); if (_inputs.some(is_selected)) { classes.push('is-input-selected'); } // This actually mutates the node in the array. // Feels ugly, but that way I prevent an infinite loop just in case observable ever allows that node_for_now._inputs = _inputs; return node_for_now; }; resolve_variable(root); } return resolved_variables; }35:[] 31:{"id":"76dfd636cb6470a4","slug":"notebook-visualizer-elk-edition","title":"Notebook Visualizer Elk Edition","thumbnail":"b95189c348fcd07b3e1282c0dc984da419dad452ad2d437526d60cfc58c88120","access_level":"public","create_time":"$D2020-02-28T10:16:49.927Z","update_time":"$D2020-02-29T03:02:09.598Z","view_time":null,"first_public_time":"$D2020-02-28T16:23:44.382Z","has_unpublished_edits":null,"fork":{"id":"d6bb2070518b9928","slug":"notebook-visualizer-elk-edition","title":"Notebook visualizer Elk edition","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c462e7a59e5fe5be","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":"starter_2024"},"version":979,"publish_version":979,"role":null,"authored":false,"authors":[{"type":"individual","id":"876346e974f528a9","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":null}],"members":[{"type":"individual","id":"876346e974f528a9","login":"dralletje","name":"Michiel Dral","avatar_url":"https://avatars-next.observableusercontent.com/878dccd1c40ab7352e79b478f7fbf8e78e63f142d8944766f1cc77938fb3386a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Notebook Visualizer Elk Edition","cells":[{"id":0,"value":"md`# Notebook Visualizer _Elk Edition_\n\n_🌶 Like the [notebook visualizer](https://observablehq.com/@observablehq/notebook-visualizer), but using [elkjs](https://github.com/OpenKieler/elkjs) and [my tiny rendering notebook](https://observablehq.com/@tmcw/elk) for a beautiful orthogonal layout._\n\nTo use, paste the URL of a public or shared notebook below, or type and click submit. For more on what this graph means, see [How Observable Runs](/@observablehq/how-observable-runs). Use the cell menu below to save your graph as PNG or SVG if desired.\n\nTo share a link to your dependency graph, [click here](?id=${id}).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof id = {\n const {text} = submit({\n value: new URLSearchParams(html``.search).get(\"id\") || \"@mbostock/liquidfun\"\n });\n text.addEventListener(\"input\", () => {\n let v = text.value, m;\n if (m = /\\.js(\\?|$)/i.exec(v)) v = v.slice(0, m.index);\n if (m = /^[0-9a-f]{16}$/i.test(v)) v = `d/${v}`;\n if (m = /^https:\\/\\/(api\\.|beta\\.|)observablehq\\.com\\//i.exec(v)) v = v.slice(m[0].length);\n if (v !== text.value) text.value = v;\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"viewof show = {\n const form = html``;\n form.value = {anon: false, builtin: true};\n form.anon.onclick = form.builtin.onclick = event => {\n form.value = {...form.value, [event.currentTarget.name]: event.currentTarget.checked};\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"viewof ROOT_NAME = autoSelect({\n options: all_variables\n .filter(x => !is_viewof(x))\n .filter(x => !is_builtin(x))\n .map(x => x._name),\n placeholder: \"Select a node\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"md`After changing \\`USE_PREACT\\` you need to refresh the notebook (or just re-save the graph cell)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"USE_PREACT = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"mutable SELECTED = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"viewof VIEW_UTIL_LIKE_NODES = {\n let options = _.uniqBy(\n all_variables\n .filter(input => should_be_shallow(input).length !== 0)\n .filter(x => !is_viewof(x) && !is_mutable(x))\n .filter(x => {\n if (!is_builtin(x)) return true;\n if (x._name === 'Generators') return false;\n if (x._name === 'Mutable') return false;\n if (x._name === 'require') return false;\n return true;\n }),\n x => x._name\n );\n\n return checkbox({\n title: \"Util nodes\",\n description: \"Select the nodes you'd like to see in the graph\",\n options: options.map(input => {\n return {\n label: `${input._name}`,\n value: input._name\n };\n }),\n value: options\n .filter(input => should_be_shallow(input).length === 1)\n .map(x => x._name)\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"util_like_filter = variables => {\n let get_variable = ({ _id }) => variables.find(x => x._id === _id);\n\n return variables.filter(variable => {\n if (variable._inputs.length !== 0) {\n return true;\n }\n if (\n variable.classes.includes('is-viewof') ||\n variable.classes.includes('is-mutable')\n ) {\n return true;\n }\n\n if (!VIEW_UTIL_LIKE_NODES.includes(variable._name)) {\n return false;\n } else {\n return true;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"all_variables = Array.from(main._runtime._variables, (v, i) => ((v._id = i), v))\n .filter(v => !is_import(v) && v._reachable)\n .filter(v => show.anon || v._name !== null)\n .filter(v => show.builtin || v._module !== main._runtime._builtin)\n .map(v => ({\n _all: console.log(v),\n _module: v._module,\n _name: v._name,\n _id: v._id,\n _type: v._type,\n _definition: v._definition.toString(),\n _outputs: Array.from(v._outputs),\n _inputs: v._inputs\n .map(i => (is_import(i) ? i._inputs[0] : i))\n .filter(i => show.builtin || i._module !== main._runtime._builtin)\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"node_id = node => `${node._name || 'Anon'}#${node._id}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"should_be_shallow = input_variable =>\n [\n is_require_statement(input_variable) && 'is-require',\n is_builtin(input_variable) && 'is-builtin',\n is_module(input_variable) && 'is-module',\n looks_like_util(input_variable) && 'looks-like-util'\n ].filter(Boolean)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"parse_variable = variable => {\n let cell_begin = /^function\$[^)]*\${return/;\n let cell_end = /\\}$/;\n\n let beginning = variable._definition.match(cell_begin);\n\n let cell = parseCell(\n `${variable._name} = ` + variable._definition.slice(beginning[0].length, -1)\n );\n return cell;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"is_builtin = variable => variable._module === main._runtime._builtin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"looks_like_util = input_variable => input_variable._inputs.length === 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"is_require_statement = output_variable =>\n output_variable._inputs.some(x => is_builtin(x) && x._name === 'require')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"is_selected = output_variable =>\n SELECTED && node_id(output_variable) === SELECTED.id","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"is_slightly_selected = output_variable =>\n SELECTED && output_variable._name === SELECTED.name","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"is_mutable = variable =>\n variable._inputs.some(x => is_builtin(x) && x._name === 'Mutable')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"is_module = input_variable => input_variable._module !== main","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"is_viewof = output_variable =>\n output_variable._inputs.some(x => x._name.startsWith('viewof '))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"is_import = v => v._inputs.length === 1 && v._module !== v._inputs[0]._module","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"required = message => {\n throw new Error(message);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"main = import(`https://api.observablehq.com/${id}.js?v=3`)\n .then(async ({default: define}) => {\n const runtime = new Runtime();\n const main = runtime.module(define, name => show.anon || name);\n await runtime._compute();\n runtime.dispose();\n return main;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"Runtime = (await require(\"@observablehq/runtime@4\")).Runtime","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"parseCell = (await require(\"@observablehq/parser\")).parseCell","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {submit} from \"@mbostock/more-deliberate-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"import { elky as elky_preact } from \"@dralletje/elk-preact\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"import { elky } from \"@dralletje/elk\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"import { autoSelect, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"scrollcontainer = (old_container, new_content) => {\n if (old_container == null) {\n return html`

${new_content}

`;\n }\n old_container.replaceChild(new_content, old_container.childNodes[0]);\n return old_container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"