backpack-viewer 0.2.20 → 0.2.21

package/dist/canvas.js

@@ -18,6 +18,7 @@ function isInViewport(x, y, camera, canvasW, canvasH, pad = 100) {
 export function initCanvas(container, onNodeClick, onFocusChange, config) {
     const lod = { ...LOD_DEFAULTS, ...(config?.lod ?? {}) };
     const nav = { ...NAV_DEFAULTS, ...(config?.navigation ?? {}) };
+    const walkCfg = { pulseSpeed: 0.02, ...(config?.walk ?? {}) };
     const canvas = container.querySelector("canvas");
     const ctx = canvas.getContext("2d");
     const dpr = window.devicePixelRatio || 1;
@@ -37,6 +38,12 @@ export function initCanvas(container, onNodeClick, onFocusChange, config) {
     let focusHops = 1;
     let savedFullState = null;
     let savedFullCamera = null;
+    // Highlighted path state (for path finding visualization)
+    let highlightedPath = null;
+    // Walk mode state
+    let walkMode = false;
+    let walkTrail = []; // node IDs visited during walk, most recent last
+    let pulsePhase = 0; // animation counter for pulse effect
     // Pan animation state
     let panTarget = null;
     let panStart = null;
@@ -79,6 +86,11 @@ export function initCanvas(container, onNodeClick, onFocusChange, config) {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             return;
         }
+        // Advance pulse animation for walk mode
+        if (walkMode && walkTrail.length > 0) {
+            pulsePhase += walkCfg.pulseSpeed;
+        }
+        const walkTrailSet = walkMode ? new Set(walkTrail) : null;
         // Read theme colors from CSS variables each frame
         const edgeColor = cssVar("--canvas-edge");
         const edgeHighlight = cssVar("--canvas-edge-highlight");
@@ -166,6 +178,11 @@ export function initCanvas(container, onNodeClick, onFocusChange, config) {
                     (selectedNodeIds.has(edge.sourceId) || selectedNodeIds.has(edge.targetId));
                 const highlighted = isConnected || (filteredNodeIds !== null && bothMatch);
                 const edgeDimmed = filteredNodeIds !== null && !bothMatch;
+                const isWalkEdge = walkTrailSet !== null && walkTrailSet.has(edge.sourceId) && walkTrailSet.has(edge.targetId);
+                // Check if this edge is part of the highlighted path
+                const fullEdge = highlightedPath ? lastLoadedData?.edges.find(e => (e.sourceId === edge.sourceId && e.targetId === edge.targetId) ||
+                    (e.targetId === edge.sourceId && e.sourceId === edge.targetId)) : null;
+                const isPathEdge = highlightedPath && fullEdge && highlightedPath.edgeIds.has(fullEdge.id);
                 // Self-loop
                 if (edge.sourceId === edge.targetId) {
                     drawSelfLoop(source, edge.type, highlighted, edgeColor, edgeHighlight, edgeLabel, edgeLabelHighlight);
@@ -175,13 +192,25 @@ export function initCanvas(container, onNodeClick, onFocusChange, config) {
                 ctx.beginPath();
                 ctx.moveTo(source.x, source.y);
                 ctx.lineTo(target.x, target.y);
-                ctx.strokeStyle = highlighted
-                    ? edgeHighlight
-                    : edgeDimmed
-                        ? edgeDimColor
-                        : edgeColor;
-                ctx.lineWidth = camera.scale < lod.hideArrows ? 1 : highlighted ? 2.5 : 1.5;
+                const accent = cssVar("--accent") || "#d4a27f";
+                const walkEdgeColor = cssVar("--canvas-walk-edge") || "#1a1a1a";
+                ctx.strokeStyle = isPathEdge
+                    ? accent
+                    : isWalkEdge
+                        ? walkEdgeColor
+                        : highlighted
+                            ? edgeHighlight
+                            : edgeDimmed
+                                ? edgeDimColor
+                                : edgeColor;
+                ctx.lineWidth = isPathEdge || isWalkEdge
+                    ? 3
+                    : camera.scale < lod.hideArrows ? 1 : highlighted ? 2.5 : 1.5;
+                if (isWalkEdge) {
+                    ctx.globalAlpha = 0.5 + 0.5 * Math.sin(pulsePhase);
+                }
                 ctx.stroke();
+                ctx.globalAlpha = 1;
                 // Arrowhead
                 if (camera.scale >= lod.hideArrows) {
                     drawArrowhead(source.x, source.y, target.x, target.y, highlighted, arrowColor, arrowHighlight);
@@ -215,6 +244,20 @@ export function initCanvas(container, onNodeClick, onFocusChange, config) {
             const dimmed = filteredOut ||
                 (selectedNodeIds.size > 0 && !isSelected && !isNeighbor);
             const r = camera.scale < lod.smallNodes ? NODE_RADIUS * 0.5 : NODE_RADIUS;
+            // Walk trail effect — all visited nodes pulse together
+            if (walkTrailSet?.has(node.id)) {
+                const isCurrent = walkTrail[walkTrail.length - 1] === node.id;
+                const pulse = 0.5 + 0.5 * Math.sin(pulsePhase);
+                const accent = cssVar("--accent") || "#d4a27f";
+                ctx.save();
+                ctx.strokeStyle = accent;
+                ctx.lineWidth = isCurrent ? 3 : 2;
+                ctx.globalAlpha = isCurrent ? 0.5 + 0.5 * pulse : 0.3 + 0.4 * pulse;
+                ctx.beginPath();
+                ctx.arc(node.x, node.y, r + (isCurrent ? 6 : 4), 0, Math.PI * 2);
+                ctx.stroke();
+                ctx.restore();
+            }
             // Glow for selected node
             if (isSelected) {
                 ctx.save();
@@ -236,6 +279,29 @@ export function initCanvas(container, onNodeClick, onFocusChange, config) {
             ctx.strokeStyle = isSelected ? selectionBorder : nodeBorder;
             ctx.lineWidth = isSelected ? 3 : 1.5;
             ctx.stroke();
+            // Highlighted path glow
+            if (highlightedPath && highlightedPath.nodeIds.has(node.id) && !isSelected) {
+                ctx.save();
+                ctx.shadowColor = cssVar("--accent") || "#d4a27f";
+                ctx.shadowBlur = 15;
+                ctx.beginPath();
+                ctx.arc(node.x, node.y, r + 2, 0, Math.PI * 2);
+                ctx.strokeStyle = cssVar("--accent") || "#d4a27f";
+                ctx.globalAlpha = 0.5;
+                ctx.lineWidth = 2;
+                ctx.stroke();
+                ctx.restore();
+            }
+            // Star indicator for starred nodes
+            const originalNode = lastLoadedData?.nodes.find(n => n.id === node.id);
+            const isStarred = originalNode?.properties?._starred === true;
+            if (isStarred) {
+                ctx.fillStyle = "#ffd700";
+                ctx.font = "10px system-ui, sans-serif";
+                ctx.textAlign = "left";
+                ctx.textBaseline = "bottom";
+                ctx.fillText("\u2605", node.x + r - 2, node.y - r + 2);
+            }
             // Label below
             if (camera.scale >= lod.hideLabels) {
                 const label = node.label.length > 24 ? node.label.slice(0, 22) + "..." : node.label;
@@ -385,9 +451,47 @@ export function initCanvas(container, onNodeClick, onFocusChange, config) {
             panStart = null;
         }
     }
+    let walkAnimFrame = 0;
+    function walkAnimate() {
+        if (!walkMode || walkTrail.length === 0) {
+            walkAnimFrame = 0;
+            return;
+        }
+        render();
+        walkAnimFrame = requestAnimationFrame(walkAnimate);
+    }
+    function fitToNodes() {
+        if (!state || state.nodes.length === 0)
+            return;
+        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 pad = NODE_RADIUS * 4;
+        const graphW = (maxX - minX) + pad * 2;
+        const graphH = (maxY - minY) + pad * 2;
+        const scaleX = canvas.clientWidth / Math.max(graphW, 1);
+        const scaleY = canvas.clientHeight / Math.max(graphH, 1);
+        camera.scale = Math.min(scaleX, scaleY, 2);
+        camera.x = (minX + maxX) / 2 - canvas.clientWidth / (2 * camera.scale);
+        camera.y = (minY + maxY) / 2 - canvas.clientHeight / (2 * camera.scale);
+        render();
+    }
     function simulate() {
-        if (!state || alpha < ALPHA_MIN)
+        if (!state || alpha < ALPHA_MIN) {
+            // Start walk animation loop if simulation stopped but walk mode is active
+            if (walkMode && walkTrail.length > 0 && !walkAnimFrame) {
+                walkAnimFrame = requestAnimationFrame(walkAnimate);
+            }
             return;
+        }
         alpha = tick(state, alpha);
         render();
         animFrame = requestAnimationFrame(simulate);
@@ -408,7 +512,7 @@ export function initCanvas(container, onNodeClick, onFocusChange, config) {
             return;
         const dx = e.clientX - lastX;
         const dy = e.clientY - lastY;
-        if (Math.abs(dx) > 2 || Math.abs(dy) > 2)
+        if (Math.abs(dx) > 5 || Math.abs(dy) > 5)
             didDrag = true;
         camera.x -= dx / camera.scale;
         camera.y -= dy / camera.scale;
@@ -426,6 +530,60 @@ export function initCanvas(container, onNodeClick, onFocusChange, config) {
         const my = e.clientY - rect.top;
         const hit = nodeAtScreen(mx, my);
         const multiSelect = e.ctrlKey || e.metaKey;
+        if (walkMode && focusSeedIds && hit && state) {
+            // Walk mode: find path from current position to clicked node
+            const currentId = walkTrail.length > 0 ? walkTrail[walkTrail.length - 1] : focusSeedIds[0];
+            // BFS in the current subgraph to find path
+            const visited = new Set([currentId]);
+            const queue = [{ id: currentId, path: [currentId] }];
+            let pathToTarget = null;
+            while (queue.length > 0) {
+                const { id, path } = queue.shift();
+                if (id === hit.id) {
+                    pathToTarget = path;
+                    break;
+                }
+                for (const edge of state.edges) {
+                    let neighbor = null;
+                    if (edge.sourceId === id)
+                        neighbor = edge.targetId;
+                    else if (edge.targetId === id)
+                        neighbor = edge.sourceId;
+                    if (neighbor && !visited.has(neighbor)) {
+                        visited.add(neighbor);
+                        queue.push({ id: neighbor, path: [...path, neighbor] });
+                    }
+                }
+            }
+            // No path found — node is unreachable, ignore click
+            if (!pathToTarget)
+                return;
+            // Add all intermediate nodes to the trail (skip first since it's already the current position)
+            for (const id of pathToTarget.slice(1)) {
+                if (!walkTrail.includes(id))
+                    walkTrail.push(id);
+            }
+            focusSeedIds = [hit.id];
+            const walkHops = Math.max(1, focusHops);
+            focusHops = walkHops;
+            const subgraph = extractSubgraph(lastLoadedData, [hit.id], walkHops);
+            cancelAnimationFrame(animFrame);
+            state = createLayout(subgraph);
+            alpha = 1;
+            selectedNodeIds = new Set([hit.id]);
+            filteredNodeIds = null;
+            camera = { x: 0, y: 0, scale: 1 };
+            simulate();
+            // Center after physics settle
+            setTimeout(() => {
+                if (!state)
+                    return;
+                fitToNodes();
+            }, 300);
+            onFocusChange?.({ seedNodeIds: [hit.id], hops: walkHops, totalNodes: subgraph.nodes.length });
+            onNodeClick?.([hit.id]);
+            return; // skip normal selection
+        }
         if (hit) {
             if (multiSelect) {
                 // Toggle node in/out of multi-selection
@@ -720,25 +878,7 @@ export function initCanvas(container, onNodeClick, onFocusChange, config) {
             render();
         },
         centerView() {
-            if (!state)
-                return;
-            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;
-                }
-                camera.x = (minX + maxX) / 2 - canvas.clientWidth / 2;
-                camera.y = (minY + maxY) / 2 - canvas.clientHeight / 2;
-            }
-            render();
+            fitToNodes();
         },
         panBy(dx, dy) {
             camera.x += dx / camera.scale;
@@ -804,26 +944,15 @@ export function initCanvas(container, onNodeClick, onFocusChange, config) {
             alpha = 1;
             selectedNodeIds = new Set(seedNodeIds);
             filteredNodeIds = null;
-            // Center camera
+            // Start simulation, then center after layout settles
             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();
+            // Center + fit after physics settle
+            setTimeout(() => {
+                if (!state || !focusSeedIds)
+                    return;
+                fitToNodes();
+            }, 300);
             onFocusChange?.({
                 seedNodeIds,
                 hops,
@@ -856,6 +985,83 @@ export function initCanvas(container, onNodeClick, onFocusChange, config) {
                 totalNodes: state.nodes.length,
             };
         },
+        findPath(sourceId, targetId) {
+            if (!state)
+                return null;
+            const visited = new Set([sourceId]);
+            const queue = [
+                { nodeId: sourceId, path: [sourceId], edges: [] }
+            ];
+            while (queue.length > 0) {
+                const { nodeId, path, edges } = queue.shift();
+                if (nodeId === targetId)
+                    return { nodeIds: path, edgeIds: edges };
+                for (const edge of state.edges) {
+                    let neighbor = null;
+                    if (edge.sourceId === nodeId)
+                        neighbor = edge.targetId;
+                    else if (edge.targetId === nodeId)
+                        neighbor = edge.sourceId;
+                    if (neighbor && !visited.has(neighbor)) {
+                        visited.add(neighbor);
+                        const fullEdge = lastLoadedData?.edges.find(e => (e.sourceId === edge.sourceId && e.targetId === edge.targetId) ||
+                            (e.targetId === edge.sourceId && e.sourceId === edge.targetId));
+                        queue.push({
+                            nodeId: neighbor,
+                            path: [...path, neighbor],
+                            edges: [...edges, fullEdge?.id ?? ""]
+                        });
+                    }
+                }
+            }
+            return null;
+        },
+        setHighlightedPath(nodeIds, edgeIds) {
+            if (nodeIds && edgeIds) {
+                highlightedPath = { nodeIds: new Set(nodeIds), edgeIds: new Set(edgeIds) };
+            }
+            else {
+                highlightedPath = null;
+            }
+            render();
+        },
+        clearHighlightedPath() {
+            highlightedPath = null;
+            render();
+        },
+        setWalkMode(enabled) {
+            walkMode = enabled;
+            if (enabled) {
+                walkTrail = focusSeedIds ? [...focusSeedIds] : [...selectedNodeIds];
+                if (!walkAnimFrame)
+                    walkAnimFrame = requestAnimationFrame(walkAnimate);
+            }
+            else {
+                walkTrail = [];
+                if (walkAnimFrame) {
+                    cancelAnimationFrame(walkAnimFrame);
+                    walkAnimFrame = 0;
+                }
+            }
+            render();
+        },
+        getWalkMode() {
+            return walkMode;
+        },
+        getWalkTrail() {
+            return [...walkTrail];
+        },
+        getFilteredNodeIds() {
+            return filteredNodeIds;
+        },
+        removeFromWalkTrail(nodeId) {
+            walkTrail = walkTrail.filter((id) => id !== nodeId);
+            render();
+        },
+        /** Hit-test a screen coordinate against nodes. Returns the node or null. */
+        nodeAtScreen(sx, sy) {
+            return nodeAtScreen(sx, sy);
+        },
         /** Get all node IDs in the current layout (subgraph if focused, full graph otherwise). Seed nodes first. */
         getNodeIds() {
             if (!state)

package/dist/config.js

@@ -23,6 +23,7 @@ export function loadViewerConfig() {
             layout: { ...defaultConfig.layout, ...(user.layout ?? {}) },
             navigation: { ...defaultConfig.navigation, ...(user.navigation ?? {}) },
             lod: { ...defaultConfig.lod, ...(user.lod ?? {}) },
+            walk: { ...defaultConfig.walk, ...(user.walk ?? {}) },
             limits: { ...defaultConfig.limits, ...(user.limits ?? {}) },
         };
     }

package/dist/context-menu.d.ts

@@ -0,0 +1,13 @@
+export interface ContextMenuCallbacks {
+    onStar: (nodeId: string) => void;
+    onFocusNode: (nodeId: string) => void;
+    onExploreInBranch: (nodeId: string) => void;
+    onCopyId: (nodeId: string) => void;
+    onExpand?: (nodeId: string) => void;
+    onExplainPath?: (nodeId: string) => void;
+    onEnrich?: (nodeId: string) => void;
+}
+export declare function initContextMenu(container: HTMLElement, callbacks: ContextMenuCallbacks): {
+    show: (nodeId: string, nodeLabel: string, isStarred: boolean, screenX: number, screenY: number) => void;
+    hide: () => void;
+};

package/dist/context-menu.js

@@ -0,0 +1,64 @@
+export function initContextMenu(container, callbacks) {
+    let menuEl = null;
+    function show(nodeId, nodeLabel, isStarred, screenX, screenY) {
+        hide();
+        menuEl = document.createElement("div");
+        menuEl.className = "context-menu";
+        menuEl.style.left = `${screenX}px`;
+        menuEl.style.top = `${screenY}px`;
+        const items = [
+            { label: isStarred ? "\u2605 Unstar" : "\u2606 Star", action: () => callbacks.onStar(nodeId), premium: false },
+            { label: "\u25CE Focus on node", action: () => callbacks.onFocusNode(nodeId), premium: false },
+            { label: "\u2442 Explore in branch", action: () => callbacks.onExploreInBranch(nodeId), premium: false },
+            { label: "\u2398 Copy ID", action: () => callbacks.onCopyId(nodeId), premium: false },
+        ];
+        if (callbacks.onExpand)
+            items.push({ label: "\u2295 Expand node", action: () => callbacks.onExpand(nodeId), premium: true });
+        if (callbacks.onExplainPath)
+            items.push({ label: "\u2194 Explain path to\u2026", action: () => callbacks.onExplainPath(nodeId), premium: true });
+        if (callbacks.onEnrich)
+            items.push({ label: "\u2261 Enrich from web", action: () => callbacks.onEnrich(nodeId), premium: true });
+        let addedSep = false;
+        for (const item of items) {
+            if (!addedSep && item.premium) {
+                const sep = document.createElement("div");
+                sep.className = "context-menu-separator";
+                menuEl.appendChild(sep);
+                addedSep = true;
+            }
+            const row = document.createElement("div");
+            row.className = "context-menu-item";
+            row.textContent = item.label;
+            row.addEventListener("click", () => {
+                item.action();
+                hide();
+            });
+            menuEl.appendChild(row);
+        }
+        container.appendChild(menuEl);
+        // Clamp to viewport
+        const rect = menuEl.getBoundingClientRect();
+        if (rect.right > window.innerWidth) {
+            menuEl.style.left = `${screenX - rect.width}px`;
+        }
+        if (rect.bottom > window.innerHeight) {
+            menuEl.style.top = `${screenY - rect.height}px`;
+        }
+        // Close on outside click (delayed to not catch the opening right-click)
+        setTimeout(() => document.addEventListener("click", hide), 0);
+        document.addEventListener("keydown", handleEscape);
+    }
+    function hide() {
+        if (menuEl) {
+            menuEl.remove();
+            menuEl = null;
+        }
+        document.removeEventListener("click", hide);
+        document.removeEventListener("keydown", handleEscape);
+    }
+    function handleEscape(e) {
+        if (e.key === "Escape")
+            hide();
+    }
+    return { show, hide };
+}

package/dist/default-config.json

@@ -29,7 +29,9 @@
         "spacingIncrease": "]",
         "clusteringDecrease": "{",
         "clusteringIncrease": "}",
-        "toggleSidebar": "Tab"
+        "toggleSidebar": "Tab",
+        "walkMode": "w",
+        "walkIsolate": "i"
     },
     "display": {
         "edges": true,
@@ -57,6 +59,9 @@
         "smallNodes": 0.2,
         "hideArrows": 0.15
     },
+    "walk": {
+        "pulseSpeed": 0.02
+    },
     "limits": {
         "maxSearchResults": 8,
         "maxQualityItems": 5,

package/dist/keybindings.d.ts

@@ -1,4 +1,4 @@
-export type KeybindingAction = "search" | "searchAlt" | "undo" | "redo" | "help" | "escape" | "focus" | "toggleEdges" | "center" | "nextNode" | "prevNode" | "nextConnection" | "prevConnection" | "historyBack" | "historyForward" | "hopsIncrease" | "hopsDecrease" | "panLeft" | "panDown" | "panUp" | "panRight" | "panFastLeft" | "zoomOut" | "zoomIn" | "panFastRight" | "spacingDecrease" | "spacingIncrease" | "clusteringDecrease" | "clusteringIncrease" | "toggleSidebar";
+export type KeybindingAction = "search" | "searchAlt" | "undo" | "redo" | "help" | "escape" | "focus" | "toggleEdges" | "center" | "nextNode" | "prevNode" | "nextConnection" | "prevConnection" | "historyBack" | "historyForward" | "hopsIncrease" | "hopsDecrease" | "panLeft" | "panDown" | "panUp" | "panRight" | "panFastLeft" | "zoomOut" | "zoomIn" | "panFastRight" | "spacingDecrease" | "spacingIncrease" | "clusteringDecrease" | "clusteringIncrease" | "toggleSidebar" | "walkMode" | "walkIsolate";
 export type KeybindingMap = Record<KeybindingAction, string>;
 /** Parse a binding string like "ctrl+shift+z" and check if it matches a KeyboardEvent. */
 export declare function matchKey(e: KeyboardEvent, binding: string): boolean;

package/dist/keybindings.js

@@ -63,5 +63,7 @@ export function actionDescriptions() {
         clusteringDecrease: "Decrease clustering",
         clusteringIncrease: "Increase clustering",
         toggleSidebar: "Toggle sidebar",
+        walkMode: "Toggle walk mode (in focus)",
+        walkIsolate: "Isolate walk trail nodes",
     };
 }