3e:null 3f:["$","title",null,{"children":"Can GraphViz dot be made more interactive? fork: with click/selection handling? | Dan Brickley | Observable"}] 45:T5a9,md`# Can GraphViz dot be made more interactive? fork: with click/selection handling? * See original fork for details and a load more example graphs. This is just a proof of concept towards adding click-handlers somehow, so node selection could generate updates elsewhere in Observable. @danbri * * AFAIK the built-in Viz.js-powered dot support in Observable can't be adapted in place, but I found this notebook that builds on a wasm version instead. (p.s. if you'd told me 21 years ago that I'd still be playing with [Graphviz's SVG support](https://lists.w3.org/Archives/Public/www-rdf-interest/2000Apr/0010.html) in 2021, I'd have fallen off my chair...). * Note that the original implementation function I forked here *already* had the nodes change color when selected (and supported zoom). The thing I was still missing was a way to have state changes elsewhere in a notebook depend on similar interactions. Excerpts from original "Zoom-Pan-Hover-Click Graphviz Dot" notebook text follows: + Zoom & pan with [gestures captured by d3-zoom](https://github.com/d3/d3-zoom#api-reference). + Hover & click on the Graphviz [nodes and edges](https://graphviz.org/doc/info/attrs.html) to highlight them. Powered by: + [@hpcc-js/wasm](https://github.com/hpcc-systems/hpcc-js-wasm/), a WASM compilation of [Graphviz](http://www.graphviz.org/) for use in JavasScript (node and browsers). + [d3](https://observablehq.com/@d3) ...*what else ?* 😄 `46:Tdb5,displayDot = async (dotStr, params) => { { const { scale = 1, w = "50%", padding = 0.25, interactive = true } = params || {}; const svgStr = await dot2Svg(dotStr); const viz = buildSvg({ svgStr, scale, w, padding }); const t = viz.transform.zoom; const wrap = d3.create("svg"); wrap.attr("id", "wrapper"); wrap.attr("style", "border: 1px solid lightgray"); wrap.attr("width", viz.wrapper.width); wrap.attr("height", viz.wrapper.height); wrap.html(viz.html); const zoomed = (e) => d3.select(`#${viz.id}`).attr("transform", e.transform); const zoom = d3 .zoom() .extent([ [0, 0], [viz.wrapper.width, viz.wrapper.height] ]) .scaleExtent([t.scale * 0.9, 5]) .on("zoom", zoomed); const hover = () => { const nodes = wrap.selectAll(".node"); const edges = wrap.selectAll(".edge"); const shapes = "ellipse,polygon,rect"; const lines = "path"; let color = {}; const clicked = {}; const highlightN = "yellow"; const highlightE = "red"; const select = (that) => { const s = d3.select(that); const id = s.attr("id"); return { s, id }; }; nodes .on("mouseover", function (e) { const { s, id } = select(this); if (!clicked[id]) color[id] = s.selectAll(shapes).attr("fill"); s.selectAll(shapes).attr("fill", highlightN); }) .on("mouseout", function (e) { const { s, id } = select(this); if (!clicked[id]) s.selectAll(shapes).attr("fill", color[id]); }); edges .on("mouseover", function (e) { const { s, id } = select(this); if (!clicked[id]) color[id] = s.selectAll(lines).attr("stroke"); s.selectAll(lines).attr("stroke", highlightE).attr("stroke-width", 2); }) .on("mouseout", function (e) { const { s, id } = select(this); if (!clicked[id]) s.selectAll(lines) .attr("stroke-width", 1) .attr("stroke", color[id]); }); nodes.on("click", function (e) { hacklog.log("CLICK."); // const { s, id } = select(this); let cb = params.cb; cb("TEST"); // should work? doesn't. if (typeof cb == "function") { hacklog.log( `Click! id=${id} s:${s} e:${e} return function is: ${params["cb"]}.` ); cb(`[click cb called]=${id}`); // not happening, dunno why } hacklog.log(`Click! id=${id} s:${s} cb() is ${cb}.`); // *************************** EXPERIMENTING WITH CALLING BACK UPON NODE SELECTION if (clicked[id]) { s.selectAll(shapes).attr("fill", color[id]); clicked[id] = false; } else { s.selectAll(shapes).attr("fill", highlightN); clicked[id] = true; } }); edges.on("click", function (e) { const { s, id } = select(this); if (clicked[id]) { s.selectAll(lines).attr("stroke-width", 1).attr("stroke", color[id]); clicked[id] = false; } else { s.selectAll(lines).attr("stroke-width", 2).attr("stroke", highlightE); clicked[id] = true; } }); }; wrap.call(zoom); wrap.call( zoom.transform, d3.zoomIdentity.scale(t.scale).translate(t.translate.x, t.translate.y) ); interactive && hover(); return wrap.node(); } }47:T415,buildSvg = ({ svgStr, scale, w, padding }) => { const document = new DOMParser().parseFromString(svgStr, "image/svg+xml"); const elt = document.documentElement; const svg = d3.select(elt).remove(); const gw = parseInt(elt.getAttribute('width')) * scale; const gh = parseInt(elt.getAttribute('height')) * scale; const buffer = 1 + padding; const ww = Number.isInteger(w) ? w : (parseInt(w) / 100) * width; const wh = buffer * gh * 1; const g = svg.select('#graph0'); const transformSrc = g.attr('transform'); const pt = parseTransform(transformSrc); const s = pt.scale.x * scale; const t = { x: pt.translate.x * scale + (ww - gw) / 2 / scale, y: pt.translate.y * 1 + (wh - gh) / 2 / scale }; g.attr('transform', `scale(${s}) translate(${t.x},${t.y})`); const id = `graph-${uuid()}`; g.attr('id', id); return { graph: { width: gw, height: gh }, wrapper: { width: ww, height: wh }, transform: { src: transformSrc, zoom: { scale: s, translate: t } }, id, html: svg.html() }; }48:[] 43:{"id":"5837a8919b3adf43","slug":null,"title":"Can GraphViz dot be made more interactive? fork: with click/selection handling?","thumbnail":"7780aa450280d95438816503e51051a919b4bd85a2a574d8dd58bc61a16689c1","access_level":"public","create_time":"$D2023-04-28T20:04:14.139Z","update_time":"$D2023-04-28T20:04:14.139Z","view_time":null,"first_public_time":"$D2023-04-28T20:04:14.139Z","has_unpublished_edits":null,"fork":{"id":"b2de264308d561c6","slug":null,"title":"Can GraphViz dot be made more interactive? fork: with click/selection handling?","owner":{"id":"6aa75e0ed4c47ade","login":"mazeballsold","name":"Dan Brickley"}},"stars":0,"starred":false,"owner":{"type":"team","id":"106555a24076e6ff","login":"danbri","name":"Dan Brickley","avatar_url":"https://avatars-next.observableusercontent.com/694c8b721e963dc1e6a715e4d1aeed1b548a4429eb1632941bdee91817e1c623","tier":"starter_2024","bio":"Account migration mess. Please ignore this mess - fixing...","following":false},"version":1887,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"797044e17d86d37d","login":"danbri","name":"Dan Brickley","avatar_url":"https://avatars-next.observableusercontent.com/694c8b721e963dc1e6a715e4d1aeed1b548a4429eb1632941bdee91817e1c623","tier":null,"bio":"Account migration mess. Please ignore this mess - fixing...","following":false}],"members":[{"type":"individual","id":"797044e17d86d37d","login":"danbri","name":"Dan Brickley","avatar_url":"https://avatars-next.observableusercontent.com/694c8b721e963dc1e6a715e4d1aeed1b548a4429eb1632941bdee91817e1c623","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Can GraphViz dot be made more interactive? fork: with click/selection handling?","cells":[{"id":0,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"md`### Sample 1 - tweaked to see if we can pass in a callback to the viz layers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1721,"value":"viewof hacklog = new Monitor()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"{\n hacklog.log(\"Select nodes, hopefully interactions are logged\");\n yield \"...\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1841,"value":"hacklog.log(\"Hello, log World\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"viewof resetS1 = html`