LINEUP graph

We show a graph from for example the Parse Page Paragraphs page.

// HEIGHT 500 LINEUP graph

We need a function that can process a graph that is transmitted as jsonl.

async function handleGraphStream(message) { const graph = message.jsonl; renderGraph(graph); }

We need a function that displays the graph.

// Function to emit HTML content for the graph container export async function emit(el) { el.innerHTML = ` <div id="graph-container"></div> <style>#graph-container {border: 1px solid black;}</style>`; }

// Function to render the graph in the graph container async function renderGraph(graph) { // Parse the JSON string into an object const graphObject = JSON.parse(graph); // Select the graph container element const graphContainer = document.getElementById('graph-container'); // Render the graph in the graph container graphContainer.innerHTML = `<pre>${JSON.stringify(graphObject, null, 2)}</pre>`; // Pretty print the JSON }

// Event listener to handle messages sent from the "SOURCE graph" frame window.addEventListener('message', function(event) { const message =; // Check if the message is intended for this frame and contains graph data if (message.action === 'graphStream') { // Handle the graph data handleGraphStream(message); } });