backpack-viewer 0.2.20 → 0.2.21

package/dist/main.js

@@ -1,4 +1,4 @@
-import { listOntologies, loadOntology, saveOntology, renameOntology, listBranches, createBranch, switchBranch, deleteBranch, listSnapshots, createSnapshot, rollbackSnapshot, } from "./api";
+import { listOntologies, loadOntology, saveOntology, renameOntology, listBranches, createBranch, switchBranch, deleteBranch, listSnapshots, createSnapshot, rollbackSnapshot, listSnippets, saveSnippet, loadSnippet, deleteSnippet, } from "./api";
 import { initSidebar } from "./sidebar";
 import { initCanvas } from "./canvas";
 import { initInfoPanel } from "./info-panel";
@@ -9,6 +9,7 @@ import { initShortcuts } from "./shortcuts";
 import { initEmptyState } from "./empty-state";
 import { createHistory } from "./history";
 import { matchKey } from "./keybindings";
+import { initContextMenu } from "./context-menu";
 import defaultConfig from "./default-config.json";
 import "./style.css";
 let activeOntology = "";
@@ -184,10 +185,21 @@ async function main() {
         exit.textContent = "\u00d7";
         exit.title = "Exit focus (Esc)";
         exit.addEventListener("click", () => toolsPane.clearFocusSet());
+        const walkBtn = document.createElement("button");
+        walkBtn.className = "walk-indicator";
+        if (canvas.getWalkMode())
+            walkBtn.classList.add("active");
+        walkBtn.textContent = "Walk";
+        walkBtn.title = "Toggle walk mode (W) — click nodes to traverse";
+        walkBtn.addEventListener("click", () => {
+            canvas.setWalkMode(!canvas.getWalkMode());
+            walkBtn.classList.toggle("active", canvas.getWalkMode());
+        });
         focusIndicator.appendChild(label);
         focusIndicator.appendChild(minus);
         focusIndicator.appendChild(hopsLabel);
         focusIndicator.appendChild(plus);
+        focusIndicator.appendChild(walkBtn);
         focusIndicator.appendChild(exit);
     }
     function removeFocusIndicator() {
@@ -196,8 +208,65 @@ async function main() {
             focusIndicator = null;
         }
     }
+    // --- Path bar ---
+    const pathBar = document.createElement("div");
+    pathBar.className = "path-bar hidden";
+    canvasContainer.appendChild(pathBar);
+    function showPathBar(path) {
+        pathBar.innerHTML = "";
+        if (!currentData)
+            return;
+        for (let i = 0; i < path.nodeIds.length; i++) {
+            const nodeId = path.nodeIds[i];
+            const node = currentData.nodes.find((n) => n.id === nodeId);
+            if (!node)
+                continue;
+            const label = Object.values(node.properties).find((v) => typeof v === "string") ?? node.id;
+            // Edge label before this node (except the first)
+            if (i > 0) {
+                const edgeId = path.edgeIds[i - 1];
+                const edge = currentData.edges.find((e) => e.id === edgeId);
+                const arrow = document.createElement("span");
+                arrow.className = "path-bar-edge";
+                arrow.textContent = edge ? `→ ${edge.type} →` : "→";
+                pathBar.appendChild(arrow);
+            }
+            const nodeBtn = document.createElement("span");
+            nodeBtn.className = "path-bar-node";
+            nodeBtn.textContent = label;
+            nodeBtn.addEventListener("click", () => canvas.panToNode(nodeId));
+            pathBar.appendChild(nodeBtn);
+        }
+        const closeBtn = document.createElement("button");
+        closeBtn.className = "path-bar-close";
+        closeBtn.textContent = "\u00d7";
+        closeBtn.addEventListener("click", hidePathBar);
+        pathBar.appendChild(closeBtn);
+        pathBar.classList.remove("hidden");
+    }
+    function hidePathBar() {
+        pathBar.classList.add("hidden");
+        pathBar.innerHTML = "";
+        canvas.clearHighlightedPath();
+    }
     canvas = initCanvas(canvasContainer, (nodeIds) => {
         currentSelection = nodeIds ?? [];
+        // Don't touch the path bar when walk mode is active — syncWalkTrail manages it
+        if (!canvas.getWalkMode()) {
+            if (nodeIds && nodeIds.length === 2) {
+                const path = canvas.findPath(nodeIds[0], nodeIds[1]);
+                if (path && path.nodeIds.length > 0) {
+                    canvas.setHighlightedPath(path.nodeIds, path.edgeIds);
+                    showPathBar(path);
+                }
+                else {
+                    hidePathBar();
+                }
+            }
+            else {
+                hidePathBar();
+            }
+        }
         if (nodeIds && nodeIds.length > 0 && currentData) {
             infoPanel.show(nodeIds, currentData);
             if (mobileQuery.matches)
@@ -217,14 +286,16 @@ async function main() {
                 topLeft.appendChild(focusIndicator);
             updateUrl(activeOntology, focus.seedNodeIds);
             infoPanel.setFocusDisabled(focus.hops === 0);
+            syncWalkTrail();
         }
         else {
             removeFocusIndicator();
             infoPanel.setFocusDisabled(false);
             if (activeOntology)
                 updateUrl(activeOntology);
+            syncWalkTrail();
         }
-    }, { lod: cfg.lod, navigation: cfg.navigation });
+    }, { lod: cfg.lod, navigation: cfg.navigation, walk: cfg.walk });
     const search = initSearch(canvasContainer, {
         maxResults: cfg.limits.maxSearchResults,
         debounceMs: cfg.limits.searchDebounceMs,
@@ -248,6 +319,31 @@ async function main() {
             if (currentData)
                 infoPanel.show([nodeId], currentData);
         },
+        onWalkTrailRemove(nodeId) {
+            canvas.removeFromWalkTrail(nodeId);
+            syncWalkTrail();
+        },
+        onWalkIsolate() {
+            if (!currentData)
+                return;
+            const trail = canvas.getWalkTrail();
+            if (trail.length === 0)
+                return;
+            canvas.enterFocus(trail, 0);
+        },
+        async onWalkSaveSnippet(label) {
+            if (!activeOntology || !currentData)
+                return;
+            const trail = canvas.getWalkTrail();
+            if (trail.length < 2)
+                return;
+            const nodeSet = new Set(trail);
+            const edgeIds = currentData.edges
+                .filter((e) => nodeSet.has(e.sourceId) && nodeSet.has(e.targetId))
+                .map((e) => e.id);
+            await saveSnippet(activeOntology, label, trail, edgeIds);
+            await refreshSnippets(activeOntology);
+        },
         onFocusChange(seedNodeIds) {
             if (seedNodeIds && seedNodeIds.length > 0) {
                 canvas.enterFocus(seedNodeIds, 0);
@@ -399,7 +495,53 @@ async function main() {
             await deleteBranch(graphName, branchName);
             await refreshBranches(graphName);
         },
+        onSnippetLoad: async (graphName, snippetId) => {
+            const snippet = await loadSnippet(graphName, snippetId);
+            if (snippet?.nodeIds?.length > 0) {
+                canvas.enterFocus(snippet.nodeIds, 0);
+            }
+        },
+        onSnippetDelete: async (graphName, snippetId) => {
+            await deleteSnippet(graphName, snippetId);
+            await refreshSnippets(graphName);
+        },
     });
+    function syncWalkTrail() {
+        const trail = canvas.getWalkTrail();
+        if (!currentData || trail.length === 0) {
+            toolsPane.setWalkTrail([]);
+            hidePathBar();
+            return;
+        }
+        const edgeIds = [];
+        const items = trail.map((id, i) => {
+            const node = currentData.nodes.find((n) => n.id === id);
+            let edgeType;
+            if (i > 0) {
+                const prevId = trail[i - 1];
+                const edge = currentData.edges.find((e) => (e.sourceId === prevId && e.targetId === id) ||
+                    (e.targetId === prevId && e.sourceId === id));
+                edgeType = edge?.type;
+                if (edge)
+                    edgeIds.push(edge.id);
+            }
+            return {
+                id,
+                label: node ? (Object.values(node.properties).find((v) => typeof v === "string") ?? node.id) : id,
+                type: node?.type ?? "?",
+                edgeType,
+            };
+        });
+        toolsPane.setWalkTrail(items);
+        // Show path bar for walk trail
+        if (trail.length >= 2) {
+            canvas.setHighlightedPath(trail, edgeIds);
+            showPathBar({ nodeIds: trail, edgeIds });
+        }
+        else {
+            hidePathBar();
+        }
+    }
     async function refreshBranches(graphName) {
         const branches = await listBranches(graphName);
         const active = branches.find((b) => b.active);
@@ -411,8 +553,64 @@ async function main() {
         const snaps = await listSnapshots(graphName);
         toolsPane.setSnapshots(snaps);
     }
+    async function refreshSnippets(graphName) {
+        const snips = await listSnippets(graphName);
+        sidebar.setSnippets(graphName, snips);
+    }
+    // Insert sidebar expand button into top-left bar (before tools toggle)
+    topLeft.insertBefore(sidebar.expandBtn, topLeft.firstChild);
     const shortcuts = initShortcuts(canvasContainer, bindings);
     const emptyState = initEmptyState(canvasContainer);
+    // Context menu (right-click on nodes)
+    const contextMenu = initContextMenu(canvasContainer, {
+        onStar(nodeId) {
+            if (!currentData)
+                return;
+            const node = currentData.nodes.find((n) => n.id === nodeId);
+            if (!node)
+                return;
+            const starred = node.properties._starred === true;
+            node.properties._starred = !starred;
+            saveOntology(activeOntology, currentData);
+            canvas.loadGraph(currentData);
+        },
+        onFocusNode(nodeId) {
+            toolsPane.addToFocusSet([nodeId]);
+        },
+        onExploreInBranch(nodeId) {
+            // Create a branch and enter focus
+            if (activeOntology) {
+                const branchName = `explore-${nodeId.slice(0, 8)}`;
+                createBranch(activeOntology, branchName).then(() => {
+                    switchBranch(activeOntology, branchName).then(() => {
+                        canvas.enterFocus([nodeId], 1);
+                    });
+                });
+            }
+        },
+        onCopyId(nodeId) {
+            navigator.clipboard.writeText(nodeId);
+        },
+    });
+    // Right-click handler for context menu
+    canvasContainer.addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        const canvasEl = canvasContainer.querySelector("canvas");
+        if (!canvasEl || !currentData)
+            return;
+        const rect = canvasEl.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const hit = canvas.nodeAtScreen(x, y);
+        if (!hit)
+            return;
+        const node = currentData.nodes.find((n) => n.id === hit.id);
+        if (!node)
+            return;
+        const label = Object.values(node.properties).find((v) => typeof v === "string") ?? node.id;
+        const isStarred = node.properties._starred === true;
+        contextMenu.show(node.id, label, isStarred, e.clientX - rect.left, e.clientY - rect.top);
+    });
     // Apply display defaults from config
     if (!cfg.display.edges)
         canvas.setEdges(false);
@@ -481,6 +679,7 @@ async function main() {
         // Load branches and snapshots
         await refreshBranches(name);
         await refreshSnapshots(name);
+        await refreshSnippets(name);
         // Restore focus mode if requested
         if (focusSeedIds?.length && currentData) {
             const validFocus = focusSeedIds.filter((id) => currentData.nodes.some((n) => n.id === id));
@@ -586,6 +785,26 @@ async function main() {
         clusteringIncrease() { const p = getLayoutParams(); setLayoutParams({ clusterStrength: Math.min(1, p.clusterStrength + 0.03) }); canvas.reheat(); },
         help() { shortcuts.toggle(); },
         toggleSidebar() { sidebar.toggle(); },
+        walkIsolate() {
+            if (!currentData)
+                return;
+            const trail = canvas.getWalkTrail();
+            if (trail.length === 0)
+                return;
+            // Extract a subgraph of only the trail nodes and edges between them, re-layout as a fresh graph
+            canvas.enterFocus(trail, 0);
+        },
+        walkMode() {
+            // If not in focus mode, enter focus on current selection first
+            if (!canvas.isFocused() && currentSelection.length > 0) {
+                toolsPane.addToFocusSet(currentSelection);
+            }
+            canvas.setWalkMode(!canvas.getWalkMode());
+            const walkBtn = canvasContainer.querySelector(".walk-indicator");
+            if (walkBtn)
+                walkBtn.classList.toggle("active", canvas.getWalkMode());
+            syncWalkTrail();
+        },
         escape() { if (canvas.isFocused()) {
             toolsPane.clearFocusSet();
         }

package/dist/shortcuts.js

@@ -18,6 +18,8 @@ const ACTION_ORDER = [
     "spacingDecrease", "spacingIncrease",
     "clusteringDecrease", "clusteringIncrease",
     "toggleSidebar",
+    "walkMode",
+    "walkIsolate",
     "escape",
 ];
 /** Format a binding string for display (e.g. "ctrl+z" → "Ctrl+Z"). */

package/dist/sidebar.d.ts

@@ -5,6 +5,8 @@ export interface SidebarCallbacks {
     onBranchSwitch?: (graphName: string, branchName: string) => void;
     onBranchCreate?: (graphName: string, branchName: string) => void;
     onBranchDelete?: (graphName: string, branchName: string) => void;
+    onSnippetLoad?: (graphName: string, snippetId: string) => void;
+    onSnippetDelete?: (graphName: string, snippetId: string) => void;
 }
 export declare function initSidebar(container: HTMLElement, onSelectOrCallbacks: ((name: string) => void) | SidebarCallbacks): {
     setSummaries(summaries: LearningGraphSummary[]): void;
@@ -13,5 +15,11 @@ export declare function initSidebar(container: HTMLElement, onSelectOrCallbacks:
         name: string;
         active: boolean;
     }[]): void;
+    setSnippets(graphName: string, snippets: {
+        id: string;
+        label: string;
+        nodeCount: number;
+    }[]): void;
     toggle: () => void;
+    expandBtn: HTMLButtonElement;
 };

package/dist/sidebar.js

@@ -27,9 +27,7 @@ export function initSidebar(container, onSelectOrCallbacks) {
     function toggleSidebar() {
         collapsed = !collapsed;
         container.classList.toggle("sidebar-collapsed", collapsed);
-        collapseBtn.innerHTML = collapsed
-            ? '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="13 7 18 12 13 17"/><polyline points="6 7 11 12 6 17"/></svg>'
-            : '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></svg>';
+        expandBtn.classList.toggle("hidden", !collapsed);
     }
     collapseBtn.addEventListener("click", toggleSidebar);
     const headingRow = document.createElement("div");
@@ -37,6 +35,12 @@ export function initSidebar(container, onSelectOrCallbacks) {
     headingRow.appendChild(heading);
     headingRow.appendChild(collapseBtn);
     container.appendChild(headingRow);
+    // Expand button — inserted into the canvas top-left bar when sidebar is collapsed
+    const expandBtn = document.createElement("button");
+    expandBtn.className = "tools-pane-toggle hidden";
+    expandBtn.title = "Show sidebar (Tab)";
+    expandBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="13 7 18 12 13 17"/><polyline points="6 7 11 12 6 17"/></svg>';
+    expandBtn.addEventListener("click", toggleSidebar);
     container.appendChild(input);
     container.appendChild(list);
     container.appendChild(footer);
@@ -140,7 +144,44 @@ export function initSidebar(container, onSelectOrCallbacks) {
                 });
             }
         },
+        setSnippets(graphName, snippets) {
+            // Find the graph's list item and add/update snippet pills
+            const li = items.find((el) => el.dataset.name === graphName);
+            if (!li)
+                return;
+            // Remove existing snippet list
+            li.querySelector(".sidebar-snippets")?.remove();
+            if (snippets.length === 0)
+                return;
+            const snippetList = document.createElement("div");
+            snippetList.className = "sidebar-snippets";
+            for (const s of snippets) {
+                const row = document.createElement("div");
+                row.className = "sidebar-snippet";
+                const label = document.createElement("span");
+                label.className = "sidebar-snippet-label";
+                label.textContent = `◆ ${s.label}`;
+                label.title = `${s.nodeCount} nodes — click to load`;
+                const del = document.createElement("button");
+                del.className = "sidebar-snippet-delete";
+                del.textContent = "\u00d7";
+                del.title = "Delete snippet";
+                del.addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    cbs.onSnippetDelete?.(graphName, s.id);
+                });
+                row.appendChild(label);
+                row.appendChild(del);
+                row.addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    cbs.onSnippetLoad?.(graphName, s.id);
+                });
+                snippetList.appendChild(row);
+            }
+            li.appendChild(snippetList);
+        },
         toggle: toggleSidebar,
+        expandBtn,
     };
     function showBranchPicker(graphName, anchor, branches) {
         // Remove existing picker

package/dist/style.css

@@ -45,6 +45,7 @@
   --canvas-type-badge-dim: rgba(115, 115, 115, 0.15);
   --canvas-selection-border: #d4d4d4;
   --canvas-node-border: rgba(255, 255, 255, 0.15);
+  --canvas-walk-edge: #e8d5c4;
 }
 
 [data-theme="light"] {
@@ -86,6 +87,7 @@
   --canvas-type-badge-dim: rgba(87, 83, 78, 0.15);
   --canvas-selection-border: #292524;
   --canvas-node-border: rgba(0, 0, 0, 0.1);
+  --canvas-walk-edge: #1a1a1a;
 }
 
 body {
@@ -309,6 +311,46 @@ body {
   padding: 0 4px;
 }
 
+.sidebar-snippets {
+  margin-top: 4px;
+  padding-left: 8px;
+}
+
+.sidebar-snippet {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.sidebar-snippet:hover {
+  background: var(--bg-hover);
+}
+
+.sidebar-snippet-label {
+  font-size: 10px;
+  color: var(--text-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-snippet-delete {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 0 2px;
+  opacity: 0;
+}
+
+.sidebar-snippet:hover .sidebar-snippet-delete {
+  opacity: 1;
+}
+
 .branch-picker-delete:hover {
   color: var(--danger, #e55);
 }
@@ -1841,3 +1883,125 @@ body {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
 }
+
+/* --- Context Menu --- */
+
+.context-menu {
+  position: absolute;
+  z-index: 100;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px;
+  min-width: 180px;
+  box-shadow: 0 8px 24px var(--shadow);
+}
+
+.context-menu-item {
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--text);
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.context-menu-item:hover {
+  background: var(--bg-hover);
+}
+
+.context-menu-separator {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 8px;
+}
+
+/* --- Path Bar --- */
+
+.path-bar {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 25;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 6px 12px;
+  box-shadow: 0 4px 16px var(--shadow);
+  max-width: 80%;
+  overflow-x: auto;
+}
+
+.path-bar.hidden {
+  display: none;
+}
+
+.path-bar-node {
+  font-size: 11px;
+  color: var(--text);
+  padding: 2px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.path-bar-node:hover {
+  background: var(--bg-hover);
+}
+
+.path-bar-edge {
+  font-size: 9px;
+  color: var(--text-dim);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.path-bar-close {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0 4px;
+  margin-left: 8px;
+  flex-shrink: 0;
+}
+
+.path-bar-close:hover {
+  color: var(--text);
+}
+
+/* --- Walk Mode Indicator --- */
+
+.walk-trail-edge {
+  font-size: 9px;
+  color: var(--text-dim);
+  padding: 1px 0 1px 24px;
+  opacity: 0.7;
+}
+
+.walk-indicator {
+  font-size: 10px;
+  color: var(--accent);
+  padding: 2px 8px;
+  border: 1px solid rgba(212, 162, 127, 0.4);
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0.4;
+}
+
+.walk-indicator.active {
+  opacity: 1;
+  background: rgba(212, 162, 127, 0.15);
+  animation: walk-strobe 2s ease-in-out infinite;
+}
+
+@keyframes walk-strobe {
+  0%, 100% { opacity: 0.6; border-color: rgba(212, 162, 127, 0.3); }
+  50% { opacity: 1; border-color: rgba(212, 162, 127, 0.8); }
+}

package/dist/tools-pane.d.ts

@@ -3,6 +3,9 @@ interface ToolsPaneCallbacks {
     onFilterByType: (type: string | null) => void;
     onNavigateToNode: (nodeId: string) => void;
     onFocusChange: (seedNodeIds: string[] | null) => void;
+    onWalkTrailRemove?: (nodeId: string) => void;
+    onWalkIsolate?: () => void;
+    onWalkSaveSnippet?: (label: string) => void;
     onRenameNodeType: (oldType: string, newType: string) => void;
     onRenameEdgeType: (oldType: string, newType: string) => void;
     onToggleEdgeLabels: (visible: boolean) => void;
@@ -27,5 +30,11 @@ export declare function initToolsPane(container: HTMLElement, callbacks: ToolsPa
         edgeCount: number;
         label?: string;
     }[]): void;
+    setWalkTrail(trail: {
+        id: string;
+        label: string;
+        type: string;
+        edgeType?: string;
+    }[]): void;
 };
 export {};