This experiment might support Exploratory Parsing in Frames. See also DOT Subscriber.
//wiki.dbbs.co/assets/pages/js-snippet-template/esm.html SOURCE dot LINEUP dotLabelClick
Import one Observable function.
import {observe} from "https://cdn.jsdelivr.net/npm/@observablehq/stdlib@5.8.6/src/generators/index.js";
Publish dot as sourceData.
function publish(dot) { window.parent.postMessage({ action: 'publishSourceData', name: 'dot', sourceData: {dot} }, '*'); }
Listen for dotLabelClicks.
const dotLabelClickStream = observe(change => { function filterForDotLabelClickStream(message) { if (message ?.data ?.action == "dotLabelClickStream") { const {label, title} = message.data; change({label, title}); } } window.addEventListener( 'message', filterForDotLabelClickStream); return () => window.removeEventListener( 'message', filterForDotLabelClickStream); });
Add everything to the DOM.
export async function emit(el) { for (const [label, digraph] of [ ['AB', 'A -> B'], ['ABC', 'A -> { B C }'], ['ABCD', 'A -> { B C } -> D'] ]) { const button = document.createElement('button'); const dot = `digraph {rankdir=LR ${digraph}}`; button.innerText = label; button.onclick = () => publish(dot); el.append(button); } const clickLog = document.createElement('pre'); clickLog.setAttribute('id', 'clickLog'); el.append(clickLog); for await (const {label, title} of dotLabelClickStream) { window.clickLog.innerText += `\n${label}: ${title}`; } }