backpack-viewer 0.2.13 → 0.2.15

package/dist/canvas.js

@@ -1,4 +1,4 @@
-import { createLayout, tick } from "./layout";
+import { createLayout, extractSubgraph, tick } from "./layout";
 import { getColor } from "./colors";
 /** Read a CSS custom property from :root. */
 function cssVar(name) {
@@ -6,7 +6,7 @@ function cssVar(name) {
 }
 const NODE_RADIUS = 20;
 const ALPHA_MIN = 0.001;
-export function initCanvas(container, onNodeClick) {
+export function initCanvas(container, onNodeClick, onFocusChange) {
     const canvas = container.querySelector("canvas");
     const ctx = canvas.getContext("2d");
     const dpr = window.devicePixelRatio || 1;
@@ -16,6 +16,15 @@ export function initCanvas(container, onNodeClick) {
     let animFrame = 0;
     let selectedNodeIds = new Set();
     let filteredNodeIds = null; // null = no filter (show all)
+    let showEdgeLabels = true;
+    let showTypeHulls = true;
+    let showMinimap = true;
+    // Focus mode state
+    let lastLoadedData = null;
+    let focusSeedIds = null;
+    let focusHops = 1;
+    let savedFullState = null;
+    let savedFullCamera = null;
     // Pan animation state
     let panTarget = null;
     let panStart = null;
@@ -79,6 +88,51 @@ export function initCanvas(container, onNodeClick) {
         ctx.save();
         ctx.translate(-camera.x * camera.scale, -camera.y * camera.scale);
         ctx.scale(camera.scale, camera.scale);
+        // Draw type hulls (shaded regions behind same-type nodes)
+        if (showTypeHulls) {
+            const typeGroups = new Map();
+            for (const node of state.nodes) {
+                if (filteredNodeIds !== null && !filteredNodeIds.has(node.id))
+                    continue;
+                const group = typeGroups.get(node.type) ?? [];
+                group.push(node);
+                typeGroups.set(node.type, group);
+            }
+            for (const [type, nodes] of typeGroups) {
+                if (nodes.length < 2)
+                    continue;
+                const color = getColor(type);
+                const padding = NODE_RADIUS * 2.5;
+                // Compute bounding box
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                for (const n of nodes) {
+                    if (n.x < minX)
+                        minX = n.x;
+                    if (n.y < minY)
+                        minY = n.y;
+                    if (n.x > maxX)
+                        maxX = n.x;
+                    if (n.y > maxY)
+                        maxY = n.y;
+                }
+                ctx.beginPath();
+                const rx = (maxX - minX) / 2 + padding;
+                const ry = (maxY - minY) / 2 + padding;
+                const cx = (minX + maxX) / 2;
+                const cy = (minY + maxY) / 2;
+                ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+                ctx.fillStyle = color;
+                ctx.globalAlpha = 0.05;
+                ctx.fill();
+                ctx.strokeStyle = color;
+                ctx.globalAlpha = 0.12;
+                ctx.lineWidth = 1;
+                ctx.setLineDash([4, 4]);
+                ctx.stroke();
+                ctx.setLineDash([]);
+                ctx.globalAlpha = 1;
+            }
+        }
         // Draw edges
         for (const edge of state.edges) {
             const source = state.nodeMap.get(edge.sourceId);
@@ -114,17 +168,19 @@ export function initCanvas(container, onNodeClick) {
             // Arrowhead
             drawArrowhead(source.x, source.y, target.x, target.y, highlighted, arrowColor, arrowHighlight);
             // Edge label at midpoint
-            const mx = (source.x + target.x) / 2;
-            const my = (source.y + target.y) / 2;
-            ctx.fillStyle = highlighted
-                ? edgeLabelHighlight
-                : edgeDimmed
-                    ? edgeLabelDim
-                    : edgeLabel;
-            ctx.font = "9px system-ui, sans-serif";
-            ctx.textAlign = "center";
-            ctx.textBaseline = "bottom";
-            ctx.fillText(edge.type, mx, my - 4);
+            if (showEdgeLabels) {
+                const mx = (source.x + target.x) / 2;
+                const my = (source.y + target.y) / 2;
+                ctx.fillStyle = highlighted
+                    ? edgeLabelHighlight
+                    : edgeDimmed
+                        ? edgeLabelDim
+                        : edgeLabel;
+                ctx.font = "9px system-ui, sans-serif";
+                ctx.textAlign = "center";
+                ctx.textBaseline = "bottom";
+                ctx.fillText(edge.type, mx, my - 4);
+            }
         }
         // Draw nodes
         for (const node of state.nodes) {
@@ -173,6 +229,87 @@ export function initCanvas(container, onNodeClick) {
         }
         ctx.restore();
         ctx.restore();
+        // Minimap
+        if (showMinimap && state.nodes.length > 1) {
+            drawMinimap();
+        }
+    }
+    function drawMinimap() {
+        if (!state)
+            return;
+        const mapW = 140;
+        const mapH = 100;
+        const mapPad = 8;
+        const mapX = canvas.clientWidth - mapW - 16;
+        const mapY = canvas.clientHeight - mapH - 16;
+        // Compute graph bounds
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const n of state.nodes) {
+            if (n.x < minX)
+                minX = n.x;
+            if (n.y < minY)
+                minY = n.y;
+            if (n.x > maxX)
+                maxX = n.x;
+            if (n.y > maxY)
+                maxY = n.y;
+        }
+        const gw = maxX - minX || 1;
+        const gh = maxY - minY || 1;
+        const scale = Math.min((mapW - mapPad * 2) / gw, (mapH - mapPad * 2) / gh);
+        const offsetX = mapX + mapPad + ((mapW - mapPad * 2) - gw * scale) / 2;
+        const offsetY = mapY + mapPad + ((mapH - mapPad * 2) - gh * scale) / 2;
+        ctx.save();
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        // Background
+        ctx.fillStyle = cssVar("--bg-surface") || "#1a1a1a";
+        ctx.globalAlpha = 0.85;
+        ctx.beginPath();
+        ctx.roundRect(mapX, mapY, mapW, mapH, 8);
+        ctx.fill();
+        ctx.strokeStyle = cssVar("--border") || "#2a2a2a";
+        ctx.globalAlpha = 1;
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        // Edges
+        ctx.globalAlpha = 0.15;
+        ctx.strokeStyle = cssVar("--canvas-edge") || "#555";
+        ctx.lineWidth = 0.5;
+        for (const edge of state.edges) {
+            const src = state.nodeMap.get(edge.sourceId);
+            const tgt = state.nodeMap.get(edge.targetId);
+            if (!src || !tgt || edge.sourceId === edge.targetId)
+                continue;
+            ctx.beginPath();
+            ctx.moveTo(offsetX + (src.x - minX) * scale, offsetY + (src.y - minY) * scale);
+            ctx.lineTo(offsetX + (tgt.x - minX) * scale, offsetY + (tgt.y - minY) * scale);
+            ctx.stroke();
+        }
+        // Nodes
+        ctx.globalAlpha = 0.8;
+        for (const node of state.nodes) {
+            const nx = offsetX + (node.x - minX) * scale;
+            const ny = offsetY + (node.y - minY) * scale;
+            ctx.beginPath();
+            ctx.arc(nx, ny, 2, 0, Math.PI * 2);
+            ctx.fillStyle = getColor(node.type);
+            ctx.fill();
+        }
+        // Viewport rectangle
+        const vx1 = camera.x;
+        const vy1 = camera.y;
+        const vx2 = camera.x + canvas.clientWidth / camera.scale;
+        const vy2 = camera.y + canvas.clientHeight / camera.scale;
+        const rx = offsetX + (vx1 - minX) * scale;
+        const ry = offsetY + (vy1 - minY) * scale;
+        const rw = (vx2 - vx1) * scale;
+        const rh = (vy2 - vy1) * scale;
+        ctx.globalAlpha = 0.3;
+        ctx.strokeStyle = cssVar("--accent") || "#d4a27f";
+        ctx.lineWidth = 1.5;
+        ctx.strokeRect(Math.max(mapX, Math.min(rx, mapX + mapW)), Math.max(mapY, Math.min(ry, mapY + mapH)), Math.min(rw, mapW), Math.min(rh, mapH));
+        ctx.globalAlpha = 1;
+        ctx.restore();
     }
     function drawArrowhead(sx, sy, tx, ty, highlighted, arrowColor, arrowHighlight) {
         const angle = Math.atan2(ty - sy, tx - sx);
@@ -195,10 +332,12 @@ export function initCanvas(container, onNodeClick) {
         ctx.strokeStyle = highlighted ? edgeHighlight : edgeColor;
         ctx.lineWidth = highlighted ? 2.5 : 1.5;
         ctx.stroke();
-        ctx.fillStyle = highlighted ? labelHighlight : labelColor;
-        ctx.font = "9px system-ui, sans-serif";
-        ctx.textAlign = "center";
-        ctx.fillText(type, cx, cy - 18);
+        if (showEdgeLabels) {
+            ctx.fillStyle = highlighted ? labelHighlight : labelColor;
+            ctx.font = "9px system-ui, sans-serif";
+            ctx.textAlign = "center";
+            ctx.fillText(type, cx, cy - 18);
+        }
     }
     // --- Simulation loop ---
     function animatePan() {
@@ -453,6 +592,11 @@ export function initCanvas(container, onNodeClick) {
     return {
         loadGraph(data) {
             cancelAnimationFrame(animFrame);
+            lastLoadedData = data;
+            // Exit any active focus when full graph reloads
+            focusSeedIds = null;
+            savedFullState = null;
+            savedFullCamera = null;
             state = createLayout(data);
             alpha = 1;
             selectedNodeIds = new Set();
@@ -485,25 +629,180 @@ export function initCanvas(container, onNodeClick) {
             render();
         },
         panToNode(nodeId) {
-            if (!state)
+            this.panToNodes([nodeId]);
+        },
+        panToNodes(nodeIds) {
+            if (!state || nodeIds.length === 0)
                 return;
-            const node = state.nodeMap.get(nodeId);
-            if (!node)
+            const nodes = nodeIds.map((id) => state.nodeMap.get(id)).filter(Boolean);
+            if (nodes.length === 0)
                 return;
-            selectedNodeIds = new Set([nodeId]);
-            onNodeClick?.([nodeId]);
+            selectedNodeIds = new Set(nodeIds);
+            onNodeClick?.(nodeIds);
             const w = canvas.clientWidth;
             const h = canvas.clientHeight;
-            panStart = { x: camera.x, y: camera.y, time: performance.now() };
-            panTarget = {
-                x: node.x - w / (2 * camera.scale),
-                y: node.y - h / (2 * camera.scale),
-            };
+            if (nodes.length === 1) {
+                panStart = { x: camera.x, y: camera.y, time: performance.now() };
+                panTarget = {
+                    x: nodes[0].x - w / (2 * camera.scale),
+                    y: nodes[0].y - h / (2 * camera.scale),
+                };
+            }
+            else {
+                // Fit all nodes in view with padding
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                for (const n of nodes) {
+                    if (n.x < minX)
+                        minX = n.x;
+                    if (n.y < minY)
+                        minY = n.y;
+                    if (n.x > maxX)
+                        maxX = n.x;
+                    if (n.y > maxY)
+                        maxY = n.y;
+                }
+                const pad = NODE_RADIUS * 4;
+                const bw = maxX - minX + pad * 2;
+                const bh = maxY - minY + pad * 2;
+                const fitScale = Math.min(w / bw, h / bh, camera.scale);
+                camera.scale = fitScale;
+                const cx = (minX + maxX) / 2;
+                const cy = (minY + maxY) / 2;
+                panStart = { x: camera.x, y: camera.y, time: performance.now() };
+                panTarget = {
+                    x: cx - w / (2 * camera.scale),
+                    y: cy - h / (2 * camera.scale),
+                };
+            }
             animatePan();
         },
+        setEdgeLabels(visible) {
+            showEdgeLabels = visible;
+            render();
+        },
+        setTypeHulls(visible) {
+            showTypeHulls = visible;
+            render();
+        },
+        setMinimap(visible) {
+            showMinimap = visible;
+            render();
+        },
+        reheat() {
+            alpha = 0.5;
+            cancelAnimationFrame(animFrame);
+            simulate();
+        },
+        exportImage(format) {
+            if (!state)
+                return "";
+            // Use the actual canvas pixel dimensions (already scaled by dpr)
+            const pw = canvas.width;
+            const ph = canvas.height;
+            if (format === "png") {
+                const exportCanvas = document.createElement("canvas");
+                exportCanvas.width = pw;
+                exportCanvas.height = ph;
+                const ectx = exportCanvas.getContext("2d");
+                // Draw background
+                ectx.fillStyle = cssVar("--bg") || "#141414";
+                ectx.fillRect(0, 0, pw, ph);
+                // Copy current canvas pixels 1:1
+                ectx.drawImage(canvas, 0, 0);
+                // Watermark (scale font to match pixel density)
+                drawWatermark(ectx, pw, ph);
+                return exportCanvas.toDataURL("image/png");
+            }
+            // SVG: embed the canvas as a PNG image with text overlay
+            const dataUrl = canvas.toDataURL("image/png");
+            const fontSize = Math.max(16, Math.round(pw / 80));
+            const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${pw}" height="${ph}">
+  <image href="${dataUrl}" width="${pw}" height="${ph}"/>
+  <text x="${pw - 20}" y="${ph - 16}" text-anchor="end" font-family="system-ui, sans-serif" font-size="${fontSize}" fill="#ffffff" opacity="0.4">backpackontology.com</text>
+</svg>`;
+            return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
+        },
+        enterFocus(seedNodeIds, hops) {
+            if (!lastLoadedData || !state)
+                return;
+            // Save current full-graph state
+            if (!focusSeedIds) {
+                savedFullState = state;
+                savedFullCamera = { ...camera };
+            }
+            focusSeedIds = seedNodeIds;
+            focusHops = hops;
+            const subgraph = extractSubgraph(lastLoadedData, seedNodeIds, hops);
+            cancelAnimationFrame(animFrame);
+            state = createLayout(subgraph);
+            alpha = 1;
+            selectedNodeIds = new Set(seedNodeIds);
+            filteredNodeIds = null;
+            // Center camera
+            camera = { x: 0, y: 0, scale: 1 };
+            if (state.nodes.length > 0) {
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                for (const n of state.nodes) {
+                    if (n.x < minX)
+                        minX = n.x;
+                    if (n.y < minY)
+                        minY = n.y;
+                    if (n.x > maxX)
+                        maxX = n.x;
+                    if (n.y > maxY)
+                        maxY = n.y;
+                }
+                const cx = (minX + maxX) / 2;
+                const cy = (minY + maxY) / 2;
+                camera.x = cx - canvas.clientWidth / 2;
+                camera.y = cy - canvas.clientHeight / 2;
+            }
+            simulate();
+            onFocusChange?.({
+                seedNodeIds,
+                hops,
+                totalNodes: subgraph.nodes.length,
+            });
+        },
+        exitFocus() {
+            if (!focusSeedIds || !savedFullState)
+                return;
+            cancelAnimationFrame(animFrame);
+            state = savedFullState;
+            camera = savedFullCamera ?? { x: 0, y: 0, scale: 1 };
+            focusSeedIds = null;
+            savedFullState = null;
+            savedFullCamera = null;
+            selectedNodeIds = new Set();
+            filteredNodeIds = null;
+            render();
+            onFocusChange?.(null);
+        },
+        isFocused() {
+            return focusSeedIds !== null;
+        },
+        getFocusInfo() {
+            if (!focusSeedIds || !state)
+                return null;
+            return {
+                seedNodeIds: focusSeedIds,
+                hops: focusHops,
+                totalNodes: state.nodes.length,
+            };
+        },
         destroy() {
             cancelAnimationFrame(animFrame);
             observer.disconnect();
         },
     };
+    function drawWatermark(ectx, w, h) {
+        const fontSize = Math.max(16, Math.round(w / 80));
+        ectx.save();
+        ectx.font = `${fontSize}px system-ui, sans-serif`;
+        ectx.fillStyle = "rgba(255, 255, 255, 0.4)";
+        ectx.textAlign = "right";
+        ectx.textBaseline = "bottom";
+        ectx.fillText("backpackontology.com", w - 20, h - 16);
+        ectx.restore();
+    }
 }

package/dist/empty-state.d.ts

@@ -0,0 +1,4 @@
+export declare function initEmptyState(container: HTMLElement): {
+    show(): void;
+    hide(): void;
+};

package/dist/empty-state.js

@@ -0,0 +1,27 @@
+export function initEmptyState(container) {
+    const el = document.createElement("div");
+    el.className = "empty-state";
+    el.innerHTML = `
+    <div class="empty-state-content">
+      <div class="empty-state-icon">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 002 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0022 16z"/>
+          <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
+          <line x1="12" y1="22.08" x2="12" y2="12"/>
+        </svg>
+      </div>
+      <h2 class="empty-state-title">No learning graphs yet</h2>
+      <p class="empty-state-desc">Connect Backpack to Claude, then start a conversation. Claude will build your first learning graph automatically.</p>
+      <div class="empty-state-setup">
+        <div class="empty-state-label">Add Backpack to Claude Code:</div>
+        <code class="empty-state-code">claude mcp add backpack-local -s user -- npx backpack-ontology@latest</code>
+      </div>
+      <p class="empty-state-hint">Press <kbd>?</kbd> for keyboard shortcuts</p>
+    </div>
+  `;
+    container.appendChild(el);
+    return {
+        show() { el.classList.remove("hidden"); },
+        hide() { el.classList.add("hidden"); },
+    };
+}

package/dist/history.d.ts

@@ -0,0 +1,10 @@
+import type { LearningGraphData } from "backpack-ontology";
+export declare function createHistory(): {
+    /** Call before mutating the data to snapshot the current state. */
+    push(data: LearningGraphData): void;
+    undo(currentData: LearningGraphData): LearningGraphData | null;
+    redo(currentData: LearningGraphData): LearningGraphData | null;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    clear(): void;
+};

package/dist/history.js

@@ -0,0 +1,36 @@
+const MAX_HISTORY = 30;
+export function createHistory() {
+    let undoStack = [];
+    let redoStack = [];
+    return {
+        /** Call before mutating the data to snapshot the current state. */
+        push(data) {
+            undoStack.push(JSON.stringify(data));
+            if (undoStack.length > MAX_HISTORY)
+                undoStack.shift();
+            redoStack = [];
+        },
+        undo(currentData) {
+            if (undoStack.length === 0)
+                return null;
+            redoStack.push(JSON.stringify(currentData));
+            return JSON.parse(undoStack.pop());
+        },
+        redo(currentData) {
+            if (redoStack.length === 0)
+                return null;
+            undoStack.push(JSON.stringify(currentData));
+            return JSON.parse(redoStack.pop());
+        },
+        canUndo() {
+            return undoStack.length > 0;
+        },
+        canRedo() {
+            return redoStack.length > 0;
+        },
+        clear() {
+            undoStack = [];
+            redoStack = [];
+        },
+    };
+}

package/dist/info-panel.d.ts

@@ -6,7 +6,7 @@ export interface EditCallbacks {
     onDeleteEdge(edgeId: string): void;
     onAddProperty(nodeId: string, key: string, value: string): void;
 }
-export declare function initInfoPanel(container: HTMLElement, callbacks?: EditCallbacks, onNavigateToNode?: (nodeId: string) => void): {
+export declare function initInfoPanel(container: HTMLElement, callbacks?: EditCallbacks, onNavigateToNode?: (nodeId: string) => void, onFocus?: (nodeIds: string[]) => void): {
     show(nodeIds: string[], data: LearningGraphData): void;
     hide: () => void;
     readonly visible: boolean;

package/dist/info-panel.js

@@ -8,7 +8,7 @@ function nodeLabel(node) {
     return node.id;
 }
 const EDIT_ICON = '\u270E'; // pencil
-export function initInfoPanel(container, callbacks, onNavigateToNode) {
+export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
     const panel = document.createElement("div");
     panel.id = "info-panel";
     panel.className = "info-panel hidden";
@@ -19,6 +19,7 @@ export function initInfoPanel(container, callbacks, onNavigateToNode) {
     let historyIndex = -1;
     let navigatingHistory = false;
     let lastData = null;
+    let currentNodeIds = [];
     function hide() {
         panel.classList.add("hidden");
         panel.classList.remove("info-panel-maximized");
@@ -76,6 +77,17 @@ export function initInfoPanel(container, callbacks, onNavigateToNode) {
         fwdBtn.disabled = historyIndex >= history.length - 1;
         fwdBtn.addEventListener("click", goForward);
         toolbar.appendChild(fwdBtn);
+        // Focus
+        if (onFocus && currentNodeIds.length > 0) {
+            const focusBtn = document.createElement("button");
+            focusBtn.className = "info-toolbar-btn info-focus-btn";
+            focusBtn.textContent = "\u25CE"; // bullseye
+            focusBtn.title = "Focus on neighborhood (F)";
+            focusBtn.addEventListener("click", () => {
+                onFocus(currentNodeIds);
+            });
+            toolbar.appendChild(focusBtn);
+        }
         // Maximize/restore
         const maxBtn = document.createElement("button");
         maxBtn.className = "info-toolbar-btn";
@@ -174,22 +186,26 @@ export function initInfoPanel(container, callbacks, onNavigateToNode) {
                 const dd = document.createElement("dd");
                 if (callbacks) {
                     const valueStr = formatValue(node.properties[key]);
-                    const input = document.createElement("input");
-                    input.type = "text";
-                    input.className = "info-edit-input";
-                    input.value = valueStr;
-                    input.addEventListener("keydown", (e) => {
-                        if (e.key === "Enter") {
-                            input.blur();
+                    const textarea = document.createElement("textarea");
+                    textarea.className = "info-edit-input";
+                    textarea.value = valueStr;
+                    textarea.rows = 1;
+                    textarea.addEventListener("input", () => autoResize(textarea));
+                    textarea.addEventListener("keydown", (e) => {
+                        if (e.key === "Enter" && !e.shiftKey) {
+                            e.preventDefault();
+                            textarea.blur();
                         }
                     });
-                    input.addEventListener("blur", () => {
-                        const newVal = input.value;
+                    textarea.addEventListener("blur", () => {
+                        const newVal = textarea.value;
                         if (newVal !== valueStr) {
                             callbacks.onUpdateNode(nodeId, { [key]: tryParseValue(newVal) });
                         }
                     });
-                    dd.appendChild(input);
+                    dd.appendChild(textarea);
+                    // Auto-size after append
+                    requestAnimationFrame(() => autoResize(textarea));
                     // Delete property button
                     const delProp = document.createElement("button");
                     delProp.className = "info-delete-prop";
@@ -484,6 +500,7 @@ export function initInfoPanel(container, callbacks, onNavigateToNode) {
     return {
         show(nodeIds, data) {
             lastData = data;
+            currentNodeIds = nodeIds;
             // Track history for single-node views
             if (nodeIds.length === 1 && !navigatingHistory) {
                 const nodeId = nodeIds[0];
@@ -568,6 +585,10 @@ function tryParseValue(str) {
     }
     return str;
 }
+function autoResize(textarea) {
+    textarea.style.height = "auto";
+    textarea.style.height = textarea.scrollHeight + "px";
+}
 function formatTimestamp(iso) {
     try {
         const d = new Date(iso);

package/dist/layout.d.ts

@@ -18,7 +18,16 @@ export interface LayoutState {
     edges: LayoutEdge[];
     nodeMap: Map<string, LayoutNode>;
 }
-/** Create a layout state from ontology data. Nodes start in a circle. */
+export interface LayoutParams {
+    clusterStrength: number;
+    spacing: number;
+}
+export declare const DEFAULT_LAYOUT_PARAMS: LayoutParams;
+export declare function setLayoutParams(p: Partial<LayoutParams>): void;
+export declare function getLayoutParams(): LayoutParams;
+/** Extract the N-hop neighborhood of seed nodes as a new subgraph. */
+export declare function extractSubgraph(data: LearningGraphData, seedIds: string[], hops: number): LearningGraphData;
+/** Create a layout state from ontology data. Nodes start grouped by type. */
 export declare function createLayout(data: LearningGraphData): LayoutState;
 /** Run one tick of the force simulation. Returns new alpha. */
 export declare function tick(state: LayoutState, alpha: number): number;