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":330,"value":"styles = () => html.fragment`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"elky({\n id: \"root\",\n layoutOptions: { algorithm: 'layered' },\n children: [\n { id: \"n1\", label: 'Oh', className: ['hey'] },\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, color }) => svg.fragment`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"child = ({\n id,\n label,\n width,\n height,\n className,\n textStyle,\n rectStyle,\n fill,\n x,\n y,\n onClick\n}) => {\n return svg.fragment`\n \n \n \n ${label}\n \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 showLayout(await elk.layout(graph));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"showLayout = layout => {\n return html`\n ${styles()}\n \n ${layout.children.map(child)}\n ${layout.edges.map(edge)}\n \n `;\n\n // let container_div = DOM.element('div');\n // var shadow = container_div.attachShadow({ mode: 'open' });\n // shadow.appendChild(element);\n // return container_div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"edge = ({ id, sections, className, style }) => {\n let section = sections[0];\n return svg.fragment`\n \n ${arrowHead(section.endPoint)}\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"ELK = require('elkjs/lib/elk.bundled.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"import { html, svg } from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}