30:[] 2e:{"title":"Elk","cells":[{"id":0,"value":"md`# Elk\n\nA small render on top of [Elkjs](https://github.com/OpenKieler/elkjs), a port of Eclipse’s graph rendering engine, that renders directly to SVG and bakes in a few opinions. It’s easy to change these opinions if you’d like - this is a work in progress and an editable notebook.\n\nUsed for the [Elk Edition of the Notebook Visualizer](https://observablehq.com/@tmcw/notebook-visualizer-elk-edition).\n\n### Features\n\n- Automatically finds a suitable width & height for children if you omit it.\n- Includes [IBM Plex](https://fonts.google.com/specimen/IBM+Plex+Mono?selection.family=IBM+Plex+Mono) for font niceness.\n- Graphs are scrollable if they get too wide.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"elky({\n id: \"root\",\n layoutOptions: { algorithm: 'layered' },\n children: [\n { id: \"n1\", label: 'Oh', fill: 'blue' },\n { id: \"n2\", label: 'Yeah' },\n { id: \"n3\", label: 'Haha' }\n ],\n edges: [\n { id: \"e1\", sources: [\"n1\"], targets: [\"n2\"] },\n { id: \"e2\", sources: [\"n1\"], targets: [\"n3\"] },\n { id: \"e3\", sources: [\"n2\"], targets: [\"n3\"] }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"charMetrics = ({\n width: 8.4,\n height: 21\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"arrowHead = ({ x, y }) =>\n svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"child = ({ label, width, height, x, y, fill = '#000' }) => {\n return svg`\n \n \n ${label}\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"elky = async graph => {\n const elk = new ELK();\n\n for (let child of graph.children) {\n if (!child.width) {\n // Add half-line height addition to accept more input nodes\n let inletCompensation =\n Math.max(\n 0,\n graph.edges.filter(edge => edge.targets[0] === child.id).length - 1\n ) *\n charMetrics.height *\n 0.5;\n child.height = charMetrics.height * 1.1 + inletCompensation;\n child.width = charMetrics.width * child.label.length + 10;\n }\n }\n\n return await showLayout(await elk.layout(graph));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"showLayout = async layout => html`\n

\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"edge = ({ id, sections }) => {\n let section = sections[0];\n return svg`\n \n ${arrowHead(section.endPoint)}\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"ELK = require('elkjs/lib/elk.bundled.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"import { toDataURL } from \"@mootari/embedding-fonts-into-an-svg\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}