We show the paragraphs from a "SOURCE paragraph" frame, for example from the Parse Page Paragraphs page. lineup 
# Application Frame
//wiki.ralfbarkow.ch/assets/pages/snippet-template/esm.html HEIGHT 111 LINEUP paragraph LINEUP graph
We import a function that can handle the graph stream.
import { handleGraphStream } from 'https://wiki.ralfbarkow.ch/assets/pages/speed-bot/src/graph/handleGraphStream.js';
# graphPromise
let graphPromise = {}; graphPromise.promise = new Promise((resolve, reject) => { graphPromise.resolve = resolve; graphPromise.reject = reject; });
# handleParaStream
We need a function that can handle the paragraph stream.
// Import the paragraphList object import paragraphList from 'https://wiki.ralfbarkow.ch/assets/pages/parse-page-paragraphs/src/paragraphList.js'; // Function to handle paragraph stream messages async function handleParaStream(message) { const paragraph = message.paragraph; // Render the paragraph renderPara(paragraph); // Add the paragraph ID to the paragraphList paragraphList.addIds([paragraph.id]); // Trigger a search in the graph based on the updated paragraphList searchGraph(paragraphList); }
# searchGraph
import { Graph } from 'https://wiki.ralfbarkow.ch/assets/pages/speed-bot/src/graph/graph.js'; // Function to perform a search in the graph based on paragraph IDs async function searchGraph(paragraphList) { const paragraphIds = paragraphList.getIds(); // Get the list of paragraph IDs console.log("(searchGraph) paragraphList: ", paragraphIds); if (paragraphIds.length === 0) { console.log("No paragraph IDs to search."); return; // Exit if there are no paragraph IDs } // Wait for the graph instance to become available graphPromise.promise.then((value) => { // Use the resolved value here console.log("(searchGraph) promise value: ", value); // Create the graph instance using the graph data const graphInstance = new Graph(value.nodes, value.rels); // Perform the graph search for each paragraph ID for (const paragraphId of paragraphIds) {
Construct the match query with the paragraphId variable
const query = 'match (n:' + paragraphId + ')'; console.log(`(searchGraph) query:`, query);
Note: We use a slightly modified version of Ward's subset of Cypher implementation and consider paragraph IDs as node labels, i.e. node types according to the Graph class – knowing full well that Cypher does not recognize node types, only node labels. See Property Graphs as Javascript Module, r.type and addNode.
Perform the graph search using the constructed query
try { const result = graphInstance.search(query); // Process the result console.log(`(searchGraph) result for paragraph ID ${paragraphId}:`, result); } catch (error) { console.error(`(searchGraph) Error occurred during graph search for paragraph ID ${paragraphId}:`, error); } } }).catch((error) => { // Handle errors if the promise is rejected console.error(error); }); }
We need a function that displays the paragraph.
// Function to emit HTML content for the para container export async function emit(el) { el.innerHTML = ` <div id="para-container"></div> <style>#para-container {border: 1px solid black;}</style>`; }
// Function to render the paragraph in the paragraph container async function renderPara(paragraph) { // Select the paragraph container element const paraContainer = document.getElementById('para-container'); // Highlight the paragraph if recommended const color = paragraph.recommended ? 'darkorange' : 'black'; // Render the paragraph in the paragraph container paraContainer.innerHTML += `<div><strong style="color:${color};">${paragraph.id}</strong> <span style="color:gray;">${paragraph.text}</span></div>`; }
# Event listener
// Event listener to handle messages sent from "SOURCE para" and "SOURCE graph" frames window.addEventListener('message', function(event) { const message = event.data; // Check if the message is intended for this frame and contains paragraph data if (message.action === 'paragraphStream') { // Handle the paragraph data handleParaStream(message); } else if (message.action === 'graphStream') { // Handle the graph data handleGraphStream(message, graphPromise); // Pass the searchGraph function as the callback } });