This experiment might support Exploratory Parsing in Frames. See also DOT Publisher.
//wiki.dbbs.co/assets/pages/js-snippet-template/esm.html LINEUP dot SOURCE dotLabelClick
Import GraphvizViewer, and one Observable function.
import * as GraphvizViewer from "https://wiki.dbbs.co/plugins/graphviz/graphviz-viewer.js"; import {observe} from "https://cdn.jsdelivr.net/npm/@observablehq/stdlib@5.8.6/src/generators/index.js"; import {html} from 'https://cdn.jsdelivr.net/npm/htl@0.3.1/src/index.js';
Subscribe to dotStream events.
const dotStream = observe(function(change) { function filterForDotStream(message) { if (message.data?.action == "dotStream") { change(message.data); } } window.addEventListener('message', filterForDotStream); return function() { window.removeEventListener('message', filterForDotStream); }; });
Define a click handler that understands Graphviz SVG and publishes details about the clicks back to the lineup.
function click(event) { const {dotData} = event.target.parentElement; console.log({ target: event.target, parentElement: event.target.parentElement, dotData, event }); const node = event.originalTarget.closest('.node'); const edge = event.originalTarget.closest('.edge'); const parent = node||edge; if (parent) { // ignore other clicks const title = parent.querySelector('title') ?.textContent; const label = parent.querySelector('text') ?.textContent; window.parent.postMessage({ action: 'publishSourceData', name: 'dotLabelClick', sourceData: {label, title, ids:{ pageKey: dotData.pageKey, itemId: dotData.itemId }} }, '*'); } }
Trigger a redraw for each event.
export async function bind(el) { el.addEventListener('click', click); for await (const data of dotStream) { const {dot} = data; while(el.hasChildNodes()) el.lastChild.remove(); el.append(html`<graphviz-viewer>${dot}`); el.dotData = structuredClone(data); window.parent.postMessage({ action: 'resize', height: document.body.offsetHeight }, '*'); } }