@oml/markdown 0.11.0 → 0.13.0

package/out/renderers/graph-renderer.js

@@ -12,7 +12,9 @@ const CSS_EDGE_TEXT = CSS_EDGE_STROKE;
 const CSS_EDGE_BG = 'var(--vscode-editor-background, var(--oml-static-background, #ffffff))';
 const CSS_FONT_FAMILY = 'var(--vscode-editor-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)';
 /** Extra height beneath the circle/rect shape to accommodate the below-node label. */
-const NODE_LABEL_HEIGHT = 22;
+const NODE_LABEL_HEIGHT = 18;
+const NODE_FONT_SIZE = 10;
+const EDGE_FONT_SIZE = 10;
 // --- Module-level library caches ---
 let x6GraphCtor;
 let dagreLib;
@@ -80,18 +82,19 @@ export class GraphMarkdownBlockRenderer extends CanvasMarkdownBlockRenderer {
         const maxDegree = Math.max(...degrees);
         const layout = resolveLayoutOptions(result.options);
         const stylesheet = compileGraphStylesheet(result.options);
+        const expandOnClick = resolveExpandOnClickOption(result.options);
         const nodeDataList = [...nodeMap.values()];
         const csvDataset = {
             columns: payload.columns.slice(),
             rows: payload.rows.map((row) => row.slice()),
             downloadCsv: (content) => this.requestTextFileDownload(content, 'graph', 'csv'),
         };
-        initializeGraphWhenReady(graphRoot, nodeDataList, edgeList, minDegree, maxDegree, container, layout, stylesheet, csvDataset);
+        initializeGraphWhenReady(graphRoot, nodeDataList, edgeList, minDegree, maxDegree, container, layout, stylesheet, result.blockSource, result.blockId, expandOnClick, csvDataset);
         return container;
     }
 }
 // --- Graph initialization ---
-function initializeGraphWhenReady(graphRoot, nodeDataList, edgeDataList, minDegree, maxDegree, messageContainer, layoutOptions, stylesheet, csvDataset) {
+function initializeGraphWhenReady(graphRoot, nodeDataList, edgeDataList, minDegree, maxDegree, messageContainer, layoutOptions, stylesheet, blockSource, blockId, expandOnClick, csvDataset) {
     const maxAttempts = 20;
     let attempts = 0;
     const tryInit = () => {
@@ -102,7 +105,7 @@ function initializeGraphWhenReady(graphRoot, nodeDataList, edgeDataList, minDegr
             }
             return;
         }
-        void doGraphInit(graphRoot, nodeDataList, edgeDataList, minDegree, maxDegree, layoutOptions, stylesheet, csvDataset).catch((error) => {
+        void doGraphInit(graphRoot, nodeDataList, edgeDataList, minDegree, maxDegree, layoutOptions, stylesheet, blockSource, blockId, expandOnClick, csvDataset).catch((error) => {
             const detail = error instanceof Error ? error.message : String(error);
             const message = document.createElement('div');
             message.className = 'oml-md-result-message';
@@ -112,7 +115,7 @@ function initializeGraphWhenReady(graphRoot, nodeDataList, edgeDataList, minDegr
     };
     requestAnimationFrame(tryInit);
 }
-async function doGraphInit(graphRoot, nodeDataList, edgeDataList, minDegree, maxDegree, layoutOptions, stylesheet, csvDataset) {
+async function doGraphInit(graphRoot, nodeDataList, edgeDataList, minDegree, maxDegree, layoutOptions, stylesheet, blockSource, blockId, expandOnClick, csvDataset) {
     const GraphCtor = await loadX6GraphCtor();
     const graphView = new GraphCtor({
         container: graphRoot,
@@ -124,6 +127,7 @@ async function doGraphInit(graphRoot, nodeDataList, edgeDataList, minDegree, max
             minScale: 0.3,
             maxScale: 3,
             factor: 1.1,
+            modifiers: ['meta', 'ctrl'],
         },
         connecting: {
             allowBlank: false,
@@ -161,12 +165,23 @@ async function doGraphInit(graphRoot, nodeDataList, edgeDataList, minDegree, max
     for (const data of edgeDataList) {
         graphView.addEdge(buildEdgeDef(data));
     }
+    const mutableState = {
+        nodesById: new Map(nodeDataList.map((node) => [node.id, node])),
+        edgeKeys: new Set(edgeDataList.map((edge) => `${edge.source}|${toNodeId(edge.value)}|${edge.target}`)),
+        edgeSequence: edgeDataList.length,
+        minDegree,
+        maxDegree,
+    };
     // Resize the X6 canvas whenever the host element resizes.
+    const recenterAfterResizeOrMove = () => {
+        centerGraphContent(graphView, layoutOptions.padding);
+    };
     const resizeObserver = new ResizeObserver(() => {
         if (!graphRoot.isConnected) {
             return;
         }
         graphView.resize(graphRoot.clientWidth, graphRoot.clientHeight);
+        recenterAfterResizeOrMove();
     });
     resizeObserver.observe(graphRoot);
     // Also watch the result container so that when the page grows wider the
@@ -178,6 +193,7 @@ async function doGraphInit(graphRoot, nodeDataList, edgeDataList, minDegree, max
             const nextWidth = Math.max(0, Math.floor(resultContainer.clientWidth));
             graphRoot.style.width = `${nextWidth}px`;
             graphView.resize(graphRoot.clientWidth, graphRoot.clientHeight);
+            recenterAfterResizeOrMove();
         });
         resultResizeObserver.observe(resultContainer);
     }
@@ -196,15 +212,19 @@ async function doGraphInit(graphRoot, nodeDataList, edgeDataList, minDegree, max
         // Reset to CSS-variable base attrs so stale user-rule colors are cleared.
         for (const node of graphView.getNodes()) {
             const nodeData = node.getData();
+            node.setData({ hidden: false }, { merge: true });
             node.setAttrs(buildNodeBaseAttrs(nodeData.literal));
         }
         for (const edge of graphView.getEdges()) {
+            edge.setData({ hidden: false }, { merge: true });
             edge.setAttrs(buildEdgeBaseAttrs());
             resetEdgeLabelColors(edge);
         }
         applyGraphStylesheet(graphView, stylesheet, theme);
+        applyGraphVisibilityState(graphView);
     };
     applyCurrentTheme();
+    installGraphNodeInteractions(graphView, graphRoot, applyCurrentTheme, blockSource, blockId, expandOnClick);
     const themeObserver = new MutationObserver(() => {
         applyCurrentTheme();
     });
@@ -230,6 +250,26 @@ async function doGraphInit(graphRoot, nodeDataList, edgeDataList, minDegree, max
     if (layoutOptions.mode === 'force' && layoutOptions.running) {
         startContinuousForceEngine(graphView, graphRoot, layoutOptions.force, grabbedNodes);
     }
+    const onExpandResult = (event) => {
+        if (!(event instanceof CustomEvent)) {
+            return;
+        }
+        const detail = event.detail;
+        const targetBlockId = typeof detail?.blockId === 'string' ? detail.blockId.trim() : '';
+        if (targetBlockId !== blockId) {
+            return;
+        }
+        const payload = normalizeGraphExpandPayload(detail?.payload);
+        if (!payload) {
+            return;
+        }
+        mergeExpandedGraphData(graphView, mutableState, payload);
+        applyCurrentTheme();
+        void runLayout(graphView, layoutOptions).then(() => {
+            centerGraphContent(graphView, layoutOptions.padding);
+        });
+    };
+    graphRoot.addEventListener('md-graph-expand-result', onExpandResult);
     installGraphToolbar(graphRoot, graphView, csvDataset);
     // Manual canvas resize handle.
     const parsedMinHeight = parseInt(graphRoot.style.minHeight, 10);
@@ -257,11 +297,214 @@ async function doGraphInit(graphRoot, nodeDataList, edgeDataList, minDegree, max
         if (!canvasResize || event.pointerId !== canvasResize.pointerId)
             return;
         canvasResize = undefined;
+        recenterAfterResizeOrMove();
     };
     resizeHandle.addEventListener('pointerdown', onResizePointerDown);
     resizeHandle.addEventListener('pointermove', onResizePointerMove);
     resizeHandle.addEventListener('pointerup', onResizePointerEnd);
     resizeHandle.addEventListener('pointercancel', onResizePointerEnd);
+    graphView.on('node:mouseup', recenterAfterResizeOrMove);
+    graphRoot.addEventListener('DOMNodeRemovedFromDocument', () => {
+        graphRoot.removeEventListener('md-graph-expand-result', onExpandResult);
+    }, { once: true });
+}
+function installGraphNodeInteractions(graphView, graphRoot, reapplyBaseTheme, blockSource, blockId, expandOnClick) {
+    const ensureSvgNativeTitle = (element, iri) => {
+        let titleNode = null;
+        for (const child of Array.from(element.children)) {
+            if (child instanceof SVGTitleElement) {
+                titleNode = child;
+                break;
+            }
+        }
+        if (!titleNode) {
+            titleNode = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+            element.insertBefore(titleNode, element.firstChild);
+        }
+        titleNode.textContent = iri;
+    };
+    const applyNativeTooltipTitle = (container, iri, eventTarget) => {
+        if (!iri) {
+            return;
+        }
+        if (container instanceof HTMLElement || container instanceof SVGElement) {
+            container.setAttribute('title', iri);
+        }
+        if (container instanceof Element) {
+            for (const element of Array.from(container.querySelectorAll('*'))) {
+                element.setAttribute('title', iri);
+                if (element instanceof SVGElement) {
+                    ensureSvgNativeTitle(element, iri);
+                }
+            }
+            if (container instanceof SVGElement) {
+                ensureSvgNativeTitle(container, iri);
+            }
+        }
+        if (eventTarget instanceof HTMLElement || eventTarget instanceof SVGElement) {
+            eventTarget.setAttribute('title', iri);
+            if (eventTarget instanceof SVGElement) {
+                ensureSvgNativeTitle(eventTarget, iri);
+            }
+        }
+    };
+    let hoveredNodeId;
+    const isExpandModifierPressed = (event) => Boolean(event?.shiftKey);
+    const applyHoverState = (node) => {
+        const hoveredId = String(node?.id ?? '');
+        if (!hoveredId) {
+            return;
+        }
+        reapplyBaseTheme();
+        hoveredNodeId = hoveredId;
+        const theme = resolveThemePalette();
+        const activeNodeIds = new Set([hoveredId]);
+        const activeEdgeIds = new Set();
+        const connectedEdges = graphView.getConnectedEdges(node) ?? [];
+        for (const edge of connectedEdges) {
+            activeEdgeIds.add(String(edge.id));
+            const sourceId = String(edge.getSourceCellId?.() ?? '');
+            const targetId = String(edge.getTargetCellId?.() ?? '');
+            if (sourceId) {
+                activeNodeIds.add(sourceId);
+            }
+            if (targetId) {
+                activeNodeIds.add(targetId);
+            }
+        }
+        for (const candidate of graphView.getNodes()) {
+            const candidateId = String(candidate.id);
+            const active = activeNodeIds.has(candidateId);
+            if (!active) {
+                candidate.setAttrs({
+                    body: { opacity: 0.2 },
+                    label: { opacity: 0.28 },
+                });
+                continue;
+            }
+            if (candidateId === hoveredId) {
+                candidate.setAttrs({
+                    body: {
+                        fill: theme.accent,
+                        stroke: theme.selectedStroke,
+                        strokeWidth: 2,
+                        opacity: 1,
+                    },
+                    label: {
+                        fill: theme.accentForeground,
+                        opacity: 1,
+                    },
+                });
+            }
+        }
+        for (const edge of graphView.getEdges()) {
+            const active = activeEdgeIds.has(String(edge.id));
+            if (!active) {
+                edge.setAttrs({
+                    line: { opacity: 0.16 },
+                });
+                try {
+                    edge.prop('labels/0/attrs/label/opacity', 0.2);
+                    edge.prop('labels/0/attrs/body/opacity', 0.12);
+                }
+                catch {
+                    // ignore
+                }
+                continue;
+            }
+            edge.setAttrs({
+                line: {
+                    opacity: 1,
+                    stroke: theme.accent,
+                    strokeWidth: Math.max(1.6, Number(edge.attr?.('line/strokeWidth')) || 1.6),
+                    targetMarker: {
+                        name: 'classic',
+                        size: 6,
+                        fill: theme.accent,
+                        stroke: theme.accent,
+                    },
+                },
+            });
+            try {
+                edge.prop('labels/0/attrs/label/fill', theme.accent);
+                edge.prop('labels/0/attrs/body/opacity', 1);
+            }
+            catch {
+                // ignore
+            }
+        }
+    };
+    const clearHoverState = () => {
+        if (!hoveredNodeId) {
+            graphRoot.dispatchEvent(new CustomEvent('md-hide-iri-hover', { bubbles: true }));
+            return;
+        }
+        hoveredNodeId = undefined;
+        reapplyBaseTheme();
+        graphRoot.dispatchEvent(new CustomEvent('md-hide-iri-hover', { bubbles: true }));
+    };
+    graphView.on('node:mouseenter', ({ node, e }) => {
+        const data = node?.getData?.();
+        const iri = String(data?.value ?? '');
+        applyHoverState(node);
+        if (iri) {
+            const view = graphView.findViewByCell?.(node);
+            const bbox = view?.container?.getBoundingClientRect?.();
+            applyNativeTooltipTitle(view?.container, iri, e?.target ?? null);
+            if (bbox) {
+                graphRoot.dispatchEvent(new CustomEvent('md-show-iri-hover', {
+                    bubbles: true,
+                    detail: {
+                        iri,
+                        previewEnabled: !!e && (/^Mac/i.test(navigator.platform) ? e.metaKey : e.ctrlKey),
+                        anchorRect: {
+                            left: bbox.left,
+                            right: bbox.right,
+                            top: bbox.top,
+                            bottom: bbox.bottom,
+                            width: bbox.width,
+                            height: bbox.height,
+                        },
+                    },
+                }));
+            }
+        }
+    });
+    graphView.on('node:mouseleave', () => {
+        clearHoverState();
+    });
+    graphView.on('blank:mousemove', () => {
+        clearHoverState();
+    });
+    graphView.on('node:click', ({ node, e }) => {
+        if (e && e.button !== 0) {
+            return;
+        }
+        const data = node?.getData?.();
+        const iri = String(data?.value ?? '');
+        if (!isIriValue(iri)) {
+            return;
+        }
+        if (expandOnClick && isExpandModifierPressed(e)) {
+            const source = (blockSource ?? '').trim();
+            if (!source) {
+                return;
+            }
+            graphRoot.dispatchEvent(new CustomEvent('md-graph-expand-request', {
+                bubbles: true,
+                detail: {
+                    blockId,
+                    blockSource: source,
+                    contextIri: iri.trim(),
+                },
+            }));
+            return;
+        }
+        graphRoot.dispatchEvent(new CustomEvent('md-navigate-iri', {
+            bubbles: true,
+            detail: { iri },
+        }));
+    });
 }
 // --- X6 / dagre library loaders ---
 async function loadX6GraphCtor() {
@@ -287,11 +530,11 @@ async function loadDagreLib() {
 // --- Node / edge definition builders ---
 function computeNodeSize(degree, minDegree, maxDegree) {
     if (minDegree === maxDegree) {
-        return 36;
+        return 28;
     }
-    // Mirrors Cytoscape mapData(degree, 0, 10, 18, 52).
+    // Keep default nodes compact while still preserving degree-based variation.
     const t = Math.max(0, Math.min(1, degree / 10));
-    return Math.round(18 + t * (52 - 18));
+    return Math.round(16 + t * (40 - 16));
 }
 /** Base attrs for a node using CSS variables so color auto-updates with VS Code theme. */
 function buildNodeBaseAttrs(literal) {
@@ -300,11 +543,13 @@ function buildNodeBaseAttrs(literal) {
             fill: literal ? CSS_LIT_FILL : CSS_NODE_FILL,
             stroke: literal ? CSS_LIT_STROKE : CSS_NODE_STROKE,
             strokeWidth: 1,
+            opacity: 1,
         },
         label: {
             fill: CSS_NODE_TEXT,
-            fontSize: 11,
+            fontSize: NODE_FONT_SIZE,
             fontFamily: CSS_FONT_FAMILY,
+            opacity: 1,
         },
     };
 }
@@ -314,6 +559,7 @@ function buildEdgeBaseAttrs() {
         line: {
             stroke: CSS_EDGE_STROKE,
             strokeWidth: 1.4,
+            opacity: 1,
             targetMarker: {
                 name: 'classic',
                 size: 6,
@@ -327,7 +573,9 @@ function buildEdgeBaseAttrs() {
 function resetEdgeLabelColors(edge) {
     try {
         edge.prop('labels/0/attrs/label/fill', CSS_EDGE_TEXT);
+        edge.prop('labels/0/attrs/label/opacity', 1);
         edge.prop('labels/0/attrs/body/fill', CSS_EDGE_BG);
+        edge.prop('labels/0/attrs/body/opacity', 1);
     }
     catch {
         // ignore - edge may have no labels
@@ -356,12 +604,12 @@ function buildNodeDef(data, size) {
             label: {
                 text: data.label,
                 fill: CSS_NODE_TEXT,
-                fontSize: 11,
+                fontSize: NODE_FONT_SIZE,
                 fontFamily: CSS_FONT_FAMILY,
                 textAnchor: 'middle',
                 textVerticalAnchor: 'top',
                 refX: '50%',
-                refY: size + 4, // below the visible shape
+                refY: size + 3, // below the visible shape
             },
         },
         data: {
@@ -370,6 +618,7 @@ function buildNodeDef(data, size) {
             degree: data.degree,
             literal: data.literal,
             group: '',
+            hidden: Boolean(data.hidden),
         },
         zIndex: 1,
     };
@@ -417,7 +666,7 @@ function buildEdgeDef(data) {
                     label: {
                         text: data.label,
                         fill: CSS_EDGE_TEXT,
-                        fontSize: 11,
+                        fontSize: EDGE_FONT_SIZE,
                         fontFamily: CSS_FONT_FAMILY,
                         textAnchor: 'middle',
                         textVerticalAnchor: 'middle',
@@ -428,6 +677,7 @@ function buildEdgeDef(data) {
         data: {
             label: data.label,
             value: data.value,
+            hidden: Boolean(data.hidden),
         },
         zIndex: 0,
     };
@@ -553,6 +803,18 @@ function fitGraphContent(graphView, padding) {
         }
     });
 }
+function centerGraphContent(graphView, padding) {
+    requestAnimationFrame(() => {
+        try {
+            if (typeof graphView.centerContent === 'function') {
+                graphView.centerContent({ padding });
+            }
+        }
+        catch {
+            // ignore
+        }
+    });
+}
 // --- Continuous force engine ---
 function startContinuousForceEngine(graphView, graphRoot, options, grabbedNodes) {
     const velocity = new Map();
@@ -712,6 +974,28 @@ function applyGraphStylesheet(graphView, rules, theme) {
         }
     }
 }
+function applyGraphVisibilityState(graphView) {
+    const visibleNodeIds = new Set();
+    for (const node of graphView.getNodes()) {
+        const hidden = Boolean(node.getData?.()?.hidden);
+        if (hidden) {
+            node.hide();
+            continue;
+        }
+        node.show();
+        visibleNodeIds.add(String(node.id));
+    }
+    for (const edge of graphView.getEdges()) {
+        const hidden = Boolean(edge.getData?.()?.hidden);
+        const sourceId = String(edge.getSourceCellId?.() ?? '');
+        const targetId = String(edge.getTargetCellId?.() ?? '');
+        if (hidden || !visibleNodeIds.has(sourceId) || !visibleNodeIds.has(targetId)) {
+            edge.hide();
+            continue;
+        }
+        edge.show();
+    }
+}
 function buildNodeContext(node, graphView) {
     const nodeId = String(node.id);
     const nodeContext = buildSelectorNodeContext(node, graphView);
@@ -796,6 +1080,12 @@ function applyElementStyle(element, style, kind, theme) {
             if (!property) {
                 continue;
             }
+            if ((property === 'display' && value.trim().toLowerCase() === 'none')
+                || (property === 'visibility' && value.trim().toLowerCase() === 'hidden')
+                || (property === 'hidden' && value.trim().toLowerCase() === 'true')) {
+                element.setData({ hidden: true }, { merge: true });
+                continue;
+            }
             const resolved = resolveColorToken(value, theme);
             if (property === 'fill') {
                 bodyAttrs.fill = resolved;
@@ -813,6 +1103,10 @@ function applyElementStyle(element, style, kind, theme) {
                 labelAttrs.fill = resolved;
                 continue;
             }
+            if (property === 'font-size') {
+                labelAttrs.fontSize = value;
+                continue;
+            }
             const camel = property.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
             bodyAttrs[camel] = resolved;
         }
@@ -835,6 +1129,12 @@ function applyElementStyle(element, style, kind, theme) {
         if (!property) {
             continue;
         }
+        if ((property === 'display' && value.trim().toLowerCase() === 'none')
+            || (property === 'visibility' && value.trim().toLowerCase() === 'hidden')
+            || (property === 'hidden' && value.trim().toLowerCase() === 'true')) {
+            element.setData({ hidden: true }, { merge: true });
+            continue;
+        }
         const resolved = resolveColorToken(value, theme);
         if (property === 'stroke') {
             lineAttrs.stroke = resolved;
@@ -849,6 +1149,15 @@ function applyElementStyle(element, style, kind, theme) {
             edgeLabelFill = resolved;
             continue;
         }
+        if (property === 'font-size') {
+            try {
+                element.prop('labels/0/attrs/label/fontSize', value);
+            }
+            catch {
+                // ignore
+            }
+            continue;
+        }
         const camel = property.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
         lineAttrs[camel] = resolved;
     }
@@ -922,15 +1231,36 @@ function applyNeighborhoodFilter(graphView, rawQuery) {
     const query = rawQuery.trim().toLowerCase();
     const allNodes = graphView.getNodes();
     const allEdges = graphView.getEdges();
+    const baselineHiddenNodeIds = new Set(allNodes
+        .filter((node) => Boolean(node.getData?.()?.hidden))
+        .map((node) => String(node.id)));
+    const baselineHiddenEdgeIds = new Set(allEdges
+        .filter((edge) => Boolean(edge.getData?.()?.hidden))
+        .map((edge) => String(edge.id)));
     if (!query) {
-        for (const node of allNodes)
-            node.show();
-        for (const edge of allEdges)
-            edge.show();
+        for (const node of allNodes) {
+            if (baselineHiddenNodeIds.has(String(node.id))) {
+                node.hide();
+            }
+            else {
+                node.show();
+            }
+        }
+        for (const edge of allEdges) {
+            if (baselineHiddenEdgeIds.has(String(edge.id))) {
+                edge.hide();
+            }
+            else {
+                edge.show();
+            }
+        }
         return;
     }
     const matchedIds = new Set();
     for (const node of allNodes) {
+        if (baselineHiddenNodeIds.has(String(node.id))) {
+            continue;
+        }
         const nodeData = node.getData();
         const label = String(nodeData?.label ?? '').toLowerCase();
         const value = String(nodeData?.value ?? '').toLowerCase();
@@ -952,7 +1282,7 @@ function applyNeighborhoodFilter(graphView, rawQuery) {
         }
     }
     for (const node of allNodes) {
-        if (keepNodeIds.has(String(node.id))) {
+        if (keepNodeIds.has(String(node.id)) && !baselineHiddenNodeIds.has(String(node.id))) {
             node.show();
         }
         else {
@@ -963,7 +1293,11 @@ function applyNeighborhoodFilter(graphView, rawQuery) {
     for (const edge of allEdges) {
         const srcId = edge.getSourceCellId();
         const tgtId = edge.getTargetCellId();
-        if (keepNodeIds.has(srcId) && keepNodeIds.has(tgtId)) {
+        if (!baselineHiddenEdgeIds.has(String(edge.id))
+            && keepNodeIds.has(srcId)
+            && keepNodeIds.has(tgtId)
+            && !baselineHiddenNodeIds.has(String(srcId))
+            && !baselineHiddenNodeIds.has(String(tgtId))) {
             edge.show();
         }
         else {
@@ -1180,6 +1514,9 @@ function resolveCanvasHeight(options) {
 function resolveCanvasMinHeight(options) {
     return `${numericCanvasMinHeight(options)}px`;
 }
+function resolveExpandOnClickOption(options) {
+    return asBoolean(options?.expandOnClick, false);
+}
 function numericCanvasMinHeight(options) {
     const canvas = isRecord(options?.canvas) ? options.canvas : undefined;
     const raw = canvas?.minHeight ?? options?.minHeight;
@@ -1331,6 +1668,103 @@ function resolveColorToken(value, theme) {
         return theme.border;
     return trimmed;
 }
+function normalizeGraphExpandPayload(value) {
+    if (!isRecord(value)) {
+        return undefined;
+    }
+    const columns = Array.isArray(value.columns)
+        ? value.columns.filter((entry) => typeof entry === 'string')
+        : [];
+    const rows = Array.isArray(value.rows)
+        ? value.rows.map((row) => Array.isArray(row)
+            ? row.map((cell) => (typeof cell === 'string' ? cell : String(cell ?? '')))
+            : [])
+        : [];
+    if (columns.length === 0 || rows.length === 0) {
+        return undefined;
+    }
+    return { columns, rows };
+}
+function mergeExpandedGraphData(graphView, state, payload) {
+    const subjectIndex = payload.columns.indexOf('subject');
+    const predicateIndex = payload.columns.indexOf('predicate');
+    const objectIndex = payload.columns.indexOf('object');
+    if (subjectIndex < 0 || predicateIndex < 0 || objectIndex < 0) {
+        return;
+    }
+    const ensureNodeInState = (rawValue) => {
+        const nodeId = toNodeId(rawValue);
+        const existing = state.nodesById.get(nodeId);
+        if (existing) {
+            return existing;
+        }
+        const node = {
+            id: nodeId,
+            label: shortLabel(rawValue),
+            value: rawValue,
+            degree: 0,
+            literal: isLiteralValue(rawValue),
+            group: '',
+        };
+        state.nodesById.set(nodeId, node);
+        graphView.addNode(buildNodeDef(node, computeNodeSize(node.degree, state.minDegree, state.maxDegree)));
+        return node;
+    };
+    let hasChanges = false;
+    for (const row of payload.rows) {
+        const subject = row[subjectIndex] ?? '';
+        const predicate = row[predicateIndex] ?? '';
+        const object = row[objectIndex] ?? '';
+        if (!subject || !predicate || !object) {
+            continue;
+        }
+        const sourceNode = ensureNodeInState(subject);
+        const targetNode = ensureNodeInState(object);
+        const edgeKey = `${sourceNode.id}|${toNodeId(predicate)}|${targetNode.id}`;
+        if (state.edgeKeys.has(edgeKey)) {
+            continue;
+        }
+        state.edgeKeys.add(edgeKey);
+        sourceNode.degree += 1;
+        targetNode.degree += 1;
+        state.minDegree = Math.min(state.minDegree, sourceNode.degree, targetNode.degree);
+        state.maxDegree = Math.max(state.maxDegree, sourceNode.degree, targetNode.degree);
+        graphView.addEdge(buildEdgeDef({
+            id: `${edgeKey}|${state.edgeSequence}`,
+            source: sourceNode.id,
+            target: targetNode.id,
+            value: predicate,
+            label: shortLabel(predicate),
+        }));
+        state.edgeSequence += 1;
+        hasChanges = true;
+    }
+    if (!hasChanges) {
+        return;
+    }
+    for (const node of graphView.getNodes()) {
+        const data = node.getData?.();
+        const degree = Number(data?.degree ?? 0);
+        const size = computeNodeSize(degree, state.minDegree, state.maxDegree);
+        node.resize(size, size + NODE_LABEL_HEIGHT);
+        if (node.shape === 'graph-node-literal') {
+            node.attr({
+                body: {
+                    width: size,
+                    height: size,
+                },
+            });
+            continue;
+        }
+        node.attr({
+            body: {
+                r: size / 2,
+                cx: size / 2,
+                cy: size / 2,
+            },
+        });
+    }
+}
 function ensureNode(nodes, rawValue) {
     const id = toNodeId(rawValue);
     if (nodes.has(id)) {