2f:Tf2d,{ const {nodes, edges} = graph; const portId = (id, port) => `${id}:${port}`; const labelMap = Object.fromEntries([ ...nodes.map(n => [portId(n.id, "_"), n.header.label]), ...nodes.flatMap(n => n.exports.map(e => [portId(n.id, e.port), `${n.header.label} → ${e.label}`])) ]); const links = edges.map(d => ({ export: portId(d.srcId, d.srcPort), import: portId(d.dstId, d.dstPort) })); const exported = [...new Set(links.map(d => d.export))]; const imported = [...new Set(links.map(d => d.import))]; const tickFormat = d => labelMap[d].slice(7); const axisOptions = {tickFormat, fontFamily: "monospace", fontSize: 9}; const ml = 2, mb = 2, mt = 200, mr = 400, s = 11; const container = htl.html`

`; const render = () => { container.replaceChildren( Plot.plot({ width: ml + mr + imported.length * s, height: mt + mb + exported.length * s, marginLeft: ml, marginBottom: mb, marginRight: mr, marginTop: mt, //grid: true, marks: [ Plot.gridX({dx: s/2}), Plot.gridY({dy: s/2}), Plot.axisX({...axisOptions, anchor: "top", tickRotate: -60, label: null}), Plot.axisY({ ...axisOptions, anchor: "right", render(index, scales, values, dimensions, context, next) { const {data} = context.getMarkState(this); const g = next(index, scales, values, dimensions, context); Array.from(g.children, (n, i) => n.dataset.value = data[i]); return g; } }), Plot.frame(), // Crosshair Plot.dot(links, Plot.pointer({ y: "export", x: "import", render(index, scales, values, dimensions, context, next) { const ty = 12; // x axis tick height const a = -60; // x axis tick rotate const x0 = dimensions.marginLeft; const x1 = dimensions.width - dimensions.marginRight; // frame/axis boundary const x2 = dimensions.width - 2; const y0 = 2; const y1 = dimensions.marginTop; // frame/axis boundary const y2 = dimensions.height - dimensions.marginBottom; const dx = (y1 - ty - y0) * Math.tan(Math.PI / 180 * (90 + a)); const ox = scales.x.bandwidth() / 2; const oy = scales.y.bandwidth() / 2; const g = htl.svg``; //g.append(htl.svg``); for(const i of index) { const x = values.x[index] + ox; const y = values.y[index] + oy; const pl = x - ox; const pr = x + ox; const pt = y - oy; const pb = y + oy; const d = "M" + [ pl, y2, pl, pb, x0, pb, // bottom left segment x0, pt, pl, pt, pl, y1 - ty, pl + dx, y0, // top left segment pr + dx, y0, pr, y1 - ty, pr, pt, x2, pt, // top right segment x2, pb, pr, pb, pr, y2 // bottom right segment ] + "Z"; g.append(htl.svg``); } return g; } })), Plot.cell(links, { inset: 1, y: "export", x: "import", rx: s, tip: { format: {y: tickFormat, x: tickFormat}, fontFamily: axisOptions.fontFamily, fontSize: axisOptions.fontSize, lineWidth: "export: ".length + mr / axisOptions.fontSize }, }), ], }) ); }; render(); return container; }30:T414,viewof roots = htl.html`