backpack-viewer 0.2.13 → 0.2.14

package/dist/layout.js

@@ -1,10 +1,27 @@
+export const DEFAULT_LAYOUT_PARAMS = {
+    clusterStrength: 0.05,
+    spacing: 1,
+};
 const REPULSION = 5000;
+const CROSS_TYPE_REPULSION_BASE = 8000;
 const ATTRACTION = 0.005;
-const REST_LENGTH = 150;
+const REST_LENGTH_SAME_BASE = 100;
+const REST_LENGTH_CROSS_BASE = 250;
 const DAMPING = 0.9;
 const CENTER_GRAVITY = 0.01;
 const MIN_DISTANCE = 30;
 const MAX_VELOCITY = 50;
+// Active params — mutated by setLayoutParams()
+let params = { ...DEFAULT_LAYOUT_PARAMS };
+export function setLayoutParams(p) {
+    if (p.clusterStrength !== undefined)
+        params.clusterStrength = p.clusterStrength;
+    if (p.spacing !== undefined)
+        params.spacing = p.spacing;
+}
+export function getLayoutParams() {
+    return { ...params };
+}
 /** Extract a display label from a node — first string property value, fallback to id. */
 function nodeLabel(properties, id) {
     for (const value of Object.values(properties)) {
@@ -13,16 +30,31 @@ function nodeLabel(properties, id) {
     }
     return id;
 }
-/** Create a layout state from ontology data. Nodes start in a circle. */
+/** Create a layout state from ontology data. Nodes start grouped by type. */
 export function createLayout(data) {
-    const radius = Math.sqrt(data.nodes.length) * REST_LENGTH * 0.5;
     const nodeMap = new Map();
-    const nodes = data.nodes.map((n, i) => {
-        const angle = (2 * Math.PI * i) / data.nodes.length;
+    // Group nodes by type for initial placement
+    const types = [...new Set(data.nodes.map((n) => n.type))];
+    const typeRadius = Math.sqrt(types.length) * REST_LENGTH_CROSS_BASE * 0.6;
+    const typeCounters = new Map();
+    const typeSizes = new Map();
+    for (const n of data.nodes) {
+        typeSizes.set(n.type, (typeSizes.get(n.type) ?? 0) + 1);
+    }
+    const nodes = data.nodes.map((n) => {
+        const ti = types.indexOf(n.type);
+        const typeAngle = (2 * Math.PI * ti) / Math.max(types.length, 1);
+        const cx = Math.cos(typeAngle) * typeRadius;
+        const cy = Math.sin(typeAngle) * typeRadius;
+        const ni = typeCounters.get(n.type) ?? 0;
+        typeCounters.set(n.type, ni + 1);
+        const groupSize = typeSizes.get(n.type) ?? 1;
+        const nodeAngle = (2 * Math.PI * ni) / groupSize;
+        const nodeRadius = REST_LENGTH_SAME_BASE * 0.6;
         const node = {
             id: n.id,
-            x: Math.cos(angle) * radius,
-            y: Math.sin(angle) * radius,
+            x: cx + Math.cos(nodeAngle) * nodeRadius,
+            y: cy + Math.sin(nodeAngle) * nodeRadius,
             vx: 0,
             vy: 0,
             label: nodeLabel(n.properties, n.id),
@@ -41,7 +73,7 @@ export function createLayout(data) {
 /** Run one tick of the force simulation. Returns new alpha. */
 export function tick(state, alpha) {
     const { nodes, edges, nodeMap } = state;
-    // Repulsion — all pairs
+    // Repulsion — all pairs (stronger between different types)
     for (let i = 0; i < nodes.length; i++) {
         for (let j = i + 1; j < nodes.length; j++) {
             const a = nodes[i];
@@ -51,7 +83,8 @@ export function tick(state, alpha) {
             let dist = Math.sqrt(dx * dx + dy * dy);
             if (dist < MIN_DISTANCE)
                 dist = MIN_DISTANCE;
-            const force = (REPULSION * alpha) / (dist * dist);
+            const rep = a.type === b.type ? REPULSION : CROSS_TYPE_REPULSION_BASE * params.spacing;
+            const force = (rep * alpha) / (dist * dist);
             const fx = (dx / dist) * force;
             const fy = (dy / dist) * force;
             a.vx -= fx;
@@ -60,7 +93,7 @@ export function tick(state, alpha) {
             b.vy += fy;
         }
     }
-    // Attraction — along edges
+    // Attraction — along edges (shorter rest length within same type)
     for (const edge of edges) {
         const source = nodeMap.get(edge.sourceId);
         const target = nodeMap.get(edge.targetId);
@@ -71,7 +104,10 @@ export function tick(state, alpha) {
         const dist = Math.sqrt(dx * dx + dy * dy);
         if (dist === 0)
             continue;
-        const force = ATTRACTION * (dist - REST_LENGTH) * alpha;
+        const restLen = source.type === target.type
+            ? REST_LENGTH_SAME_BASE * params.spacing
+            : REST_LENGTH_CROSS_BASE * params.spacing;
+        const force = ATTRACTION * (dist - restLen) * alpha;
         const fx = (dx / dist) * force;
         const fy = (dy / dist) * force;
         source.vx += fx;
@@ -84,6 +120,24 @@ export function tick(state, alpha) {
         node.vx -= node.x * CENTER_GRAVITY * alpha;
         node.vy -= node.y * CENTER_GRAVITY * alpha;
     }
+    // Cluster force — pull nodes toward their type centroid
+    const centroids = new Map();
+    for (const node of nodes) {
+        const c = centroids.get(node.type) ?? { x: 0, y: 0, count: 0 };
+        c.x += node.x;
+        c.y += node.y;
+        c.count++;
+        centroids.set(node.type, c);
+    }
+    for (const c of centroids.values()) {
+        c.x /= c.count;
+        c.y /= c.count;
+    }
+    for (const node of nodes) {
+        const c = centroids.get(node.type);
+        node.vx += (c.x - node.x) * params.clusterStrength * alpha;
+        node.vy += (c.y - node.y) * params.clusterStrength * alpha;
+    }
     // Integrate — update positions, apply damping, clamp velocity
     for (const node of nodes) {
         node.vx *= DAMPING;

package/dist/main.js

@@ -3,6 +3,11 @@ import { initSidebar } from "./sidebar";
 import { initCanvas } from "./canvas";
 import { initInfoPanel } from "./info-panel";
 import { initSearch } from "./search";
+import { initToolsPane } from "./tools-pane";
+import { setLayoutParams } from "./layout";
+import { initShortcuts } from "./shortcuts";
+import { initEmptyState } from "./empty-state";
+import { createHistory } from "./history";
 import "./style.css";
 let activeOntology = "";
 let currentData = null;
@@ -25,6 +30,8 @@ async function main() {
         themeBtn.textContent = next === "light" ? "\u263E" : "\u263C";
     });
     canvasContainer.appendChild(themeBtn);
+    // --- Undo/redo ---
+    const undoHistory = createHistory();
     // --- Save and re-render helper ---
     async function save() {
         if (!activeOntology || !currentData)
@@ -33,10 +40,26 @@ async function main() {
         await saveOntology(activeOntology, currentData);
         canvas.loadGraph(currentData);
         search.setLearningGraphData(currentData);
+        toolsPane.setData(currentData);
         // Refresh sidebar counts
         const updated = await listOntologies();
         sidebar.setSummaries(updated);
     }
+    /** Snapshot current state, then save. Call this instead of save() for undoable actions. */
+    async function undoableSave() {
+        if (currentData)
+            undoHistory.push(currentData);
+        await save();
+    }
+    async function applyState(data) {
+        currentData = data;
+        await saveOntology(activeOntology, currentData);
+        canvas.loadGraph(currentData);
+        search.setLearningGraphData(currentData);
+        toolsPane.setData(currentData);
+        const updated = await listOntologies();
+        sidebar.setSummaries(updated);
+    }
     // --- Info panel with edit callbacks ---
     // canvas is used inside the navigate callback but declared below —
     // that's fine because the callback is only invoked after setup completes.
@@ -45,6 +68,7 @@ async function main() {
         onUpdateNode(nodeId, properties) {
             if (!currentData)
                 return;
+            undoHistory.push(currentData);
             const node = currentData.nodes.find((n) => n.id === nodeId);
             if (!node)
                 return;
@@ -55,6 +79,7 @@ async function main() {
         onChangeNodeType(nodeId, newType) {
             if (!currentData)
                 return;
+            undoHistory.push(currentData);
             const node = currentData.nodes.find((n) => n.id === nodeId);
             if (!node)
                 return;
@@ -65,6 +90,7 @@ async function main() {
         onDeleteNode(nodeId) {
             if (!currentData)
                 return;
+            undoHistory.push(currentData);
             currentData.nodes = currentData.nodes.filter((n) => n.id !== nodeId);
             currentData.edges = currentData.edges.filter((e) => e.sourceId !== nodeId && e.targetId !== nodeId);
             save();
@@ -72,6 +98,7 @@ async function main() {
         onDeleteEdge(edgeId) {
             if (!currentData)
                 return;
+            undoHistory.push(currentData);
             const selectedNodeId = currentData.edges.find((e) => e.id === edgeId)?.sourceId;
             currentData.edges = currentData.edges.filter((e) => e.id !== edgeId);
             save().then(() => {
@@ -83,6 +110,7 @@ async function main() {
         onAddProperty(nodeId, key, value) {
             if (!currentData)
                 return;
+            undoHistory.push(currentData);
             const node = currentData.nodes.find((n) => n.id === nodeId);
             if (!node)
                 return;
@@ -93,15 +121,116 @@ async function main() {
     }, (nodeId) => {
         canvas.panToNode(nodeId);
     });
+    const mobileQuery = window.matchMedia("(max-width: 768px)");
     canvas = initCanvas(canvasContainer, (nodeIds) => {
         if (nodeIds && nodeIds.length > 0 && currentData) {
             infoPanel.show(nodeIds, currentData);
+            if (mobileQuery.matches)
+                toolsPane.collapse();
+            updateUrl(activeOntology, nodeIds);
         }
         else {
             infoPanel.hide();
+            if (activeOntology)
+                updateUrl(activeOntology);
         }
     });
     const search = initSearch(canvasContainer);
+    const toolsPane = initToolsPane(canvasContainer, {
+        onFilterByType(type) {
+            if (!currentData)
+                return;
+            if (type === null) {
+                canvas.setFilteredNodeIds(null);
+            }
+            else {
+                const ids = new Set((currentData?.nodes ?? [])
+                    .filter((n) => n.type === type)
+                    .map((n) => n.id));
+                canvas.setFilteredNodeIds(ids);
+            }
+        },
+        onNavigateToNode(nodeId) {
+            canvas.panToNode(nodeId);
+            if (currentData)
+                infoPanel.show([nodeId], currentData);
+        },
+        onRenameNodeType(oldType, newType) {
+            if (!currentData)
+                return;
+            undoHistory.push(currentData);
+            for (const node of currentData.nodes) {
+                if (node.type === oldType) {
+                    node.type = newType;
+                    node.updatedAt = new Date().toISOString();
+                }
+            }
+            save();
+        },
+        onRenameEdgeType(oldType, newType) {
+            if (!currentData)
+                return;
+            undoHistory.push(currentData);
+            for (const edge of currentData.edges) {
+                if (edge.type === oldType) {
+                    edge.type = newType;
+                }
+            }
+            save();
+        },
+        onToggleEdgeLabels(visible) {
+            canvas.setEdgeLabels(visible);
+        },
+        onToggleTypeHulls(visible) {
+            canvas.setTypeHulls(visible);
+        },
+        onToggleMinimap(visible) {
+            canvas.setMinimap(visible);
+        },
+        onLayoutChange(param, value) {
+            setLayoutParams({ [param]: value });
+            canvas.reheat();
+        },
+        onExport(format) {
+            const dataUrl = canvas.exportImage(format);
+            if (!dataUrl)
+                return;
+            const link = document.createElement("a");
+            link.download = `${activeOntology || "graph"}.${format}`;
+            link.href = dataUrl;
+            link.click();
+        },
+        onOpen() {
+            if (mobileQuery.matches)
+                infoPanel.hide();
+        },
+    });
+    // --- Top bar: flex container for all top controls ---
+    const topBar = document.createElement("div");
+    topBar.className = "canvas-top-bar";
+    const topLeft = document.createElement("div");
+    topLeft.className = "canvas-top-left";
+    const topCenter = document.createElement("div");
+    topCenter.className = "canvas-top-center";
+    const topRight = document.createElement("div");
+    topRight.className = "canvas-top-right";
+    // Move tools toggle into left slot
+    const toolsToggle = canvasContainer.querySelector(".tools-pane-toggle");
+    if (toolsToggle)
+        topLeft.appendChild(toolsToggle);
+    // Move search overlay into center slot
+    const searchOverlay = canvasContainer.querySelector(".search-overlay");
+    if (searchOverlay)
+        topCenter.appendChild(searchOverlay);
+    // Move zoom controls and theme toggle into right slot
+    const zoomControls = canvasContainer.querySelector(".zoom-controls");
+    if (zoomControls)
+        topRight.appendChild(zoomControls);
+    topRight.appendChild(themeBtn);
+    topBar.appendChild(topLeft);
+    topBar.appendChild(topCenter);
+    topBar.appendChild(topRight);
+    canvasContainer.appendChild(topBar);
     search.onFilterChange((ids) => {
         canvas.setFilteredNodeIds(ids);
     });
@@ -112,15 +241,7 @@ async function main() {
         }
     });
     const sidebar = initSidebar(document.getElementById("sidebar"), {
-        onSelect: async (name) => {
-            activeOntology = name;
-            sidebar.setActive(name);
-            infoPanel.hide();
-            search.clear();
-            currentData = await loadOntology(name);
-            canvas.loadGraph(currentData);
-            search.setLearningGraphData(currentData);
-        },
+        onSelect: (name) => selectGraph(name),
         onRename: async (oldName, newName) => {
             await renameOntology(oldName, newName);
             if (activeOntology === oldName) {
@@ -133,21 +254,75 @@ async function main() {
                 currentData = await loadOntology(newName);
                 canvas.loadGraph(currentData);
                 search.setLearningGraphData(currentData);
+                toolsPane.setData(currentData);
             }
         },
     });
+    const shortcuts = initShortcuts(canvasContainer);
+    const emptyState = initEmptyState(canvasContainer);
+    // --- URL deep linking ---
+    function updateUrl(name, nodeIds) {
+        const hash = "#" + encodeURIComponent(name) +
+            (nodeIds?.length ? "?node=" + nodeIds.map(encodeURIComponent).join(",") : "");
+        history.replaceState(null, "", hash);
+    }
+    function parseUrl() {
+        const hash = window.location.hash.slice(1);
+        if (!hash)
+            return { graph: null, nodes: [] };
+        const [graphPart, queryPart] = hash.split("?");
+        const graph = graphPart ? decodeURIComponent(graphPart) : null;
+        let nodes = [];
+        if (queryPart) {
+            const params = new URLSearchParams(queryPart);
+            const nodeParam = params.get("node");
+            if (nodeParam)
+                nodes = nodeParam.split(",").map(decodeURIComponent);
+        }
+        return { graph, nodes };
+    }
+    async function selectGraph(name, focusNodeIds) {
+        activeOntology = name;
+        sidebar.setActive(name);
+        infoPanel.hide();
+        search.clear();
+        undoHistory.clear();
+        currentData = await loadOntology(name);
+        canvas.loadGraph(currentData);
+        search.setLearningGraphData(currentData);
+        toolsPane.setData(currentData);
+        emptyState.hide();
+        updateUrl(name);
+        // Focus on specific nodes if requested
+        if (focusNodeIds?.length && currentData) {
+            const validIds = focusNodeIds.filter((id) => currentData.nodes.some((n) => n.id === id));
+            if (validIds.length) {
+                setTimeout(() => {
+                    canvas.panToNodes(validIds);
+                    if (currentData)
+                        infoPanel.show(validIds, currentData);
+                    updateUrl(name, validIds);
+                }, 500);
+            }
+        }
+    }
     // Load ontology list
     const summaries = await listOntologies();
     sidebar.setSummaries(summaries);
-    // Auto-load first ontology
-    if (summaries.length > 0) {
-        activeOntology = summaries[0].name;
-        sidebar.setActive(activeOntology);
-        currentData = await loadOntology(activeOntology);
-        canvas.loadGraph(currentData);
-        search.setLearningGraphData(currentData);
+    // Auto-load from URL hash, or first graph
+    const initialUrl = parseUrl();
+    const initialName = initialUrl.graph && summaries.some((s) => s.name === initialUrl.graph)
+        ? initialUrl.graph
+        : summaries.length > 0
+            ? summaries[0].name
+            : null;
+    if (initialName) {
+        await selectGraph(initialName, initialUrl.nodes.length ? initialUrl.nodes : undefined);
+    }
+    else {
+        emptyState.show();
     }
-    // Keyboard shortcut: / or Ctrl+K to focus search
+    // Keyboard shortcuts
     document.addEventListener("keydown", (e) => {
         if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
             return;
@@ -155,22 +330,69 @@ async function main() {
             e.preventDefault();
             search.focus();
         }
+        else if (e.key === "z" && (e.metaKey || e.ctrlKey) && e.shiftKey) {
+            e.preventDefault();
+            if (currentData) {
+                const restored = undoHistory.redo(currentData);
+                if (restored)
+                    applyState(restored);
+            }
+        }
+        else if (e.key === "z" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            if (currentData) {
+                const restored = undoHistory.undo(currentData);
+                if (restored)
+                    applyState(restored);
+            }
+        }
+        else if (e.key === "?") {
+            shortcuts.show();
+        }
+        else if (e.key === "Escape") {
+            shortcuts.hide();
+        }
+    });
+    // Handle browser back/forward
+    window.addEventListener("hashchange", () => {
+        const url = parseUrl();
+        if (url.graph && url.graph !== activeOntology) {
+            selectGraph(url.graph, url.nodes.length ? url.nodes : undefined);
+        }
+        else if (url.graph && url.nodes.length && currentData) {
+            const validIds = url.nodes.filter((id) => currentData.nodes.some((n) => n.id === id));
+            if (validIds.length) {
+                canvas.panToNodes(validIds);
+                infoPanel.show(validIds, currentData);
+            }
+        }
     });
     // Live reload — when Claude adds nodes via MCP, re-fetch and re-render
     if (import.meta.hot) {
         import.meta.hot.on("ontology-change", async () => {
             const updated = await listOntologies();
             sidebar.setSummaries(updated);
+            if (updated.length > 0)
+                emptyState.hide();
             if (activeOntology) {
                 try {
                     currentData = await loadOntology(activeOntology);
                     canvas.loadGraph(currentData);
                     search.setLearningGraphData(currentData);
+                    toolsPane.setData(currentData);
                 }
                 catch {
                     // Ontology may have been deleted
                 }
             }
+            else if (updated.length > 0) {
+                activeOntology = updated[0].name;
+                sidebar.setActive(activeOntology);
+                currentData = await loadOntology(activeOntology);
+                canvas.loadGraph(currentData);
+                search.setLearningGraphData(currentData);
+                toolsPane.setData(currentData);
+            }
         });
     }
 }

package/dist/shortcuts.d.ts

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

package/dist/shortcuts.js

@@ -0,0 +1,66 @@
+const SHORTCUTS = [
+    { key: "/", alt: "Ctrl+K", description: "Focus search" },
+    { key: "Ctrl+Z", description: "Undo" },
+    { key: "Ctrl+Shift+Z", description: "Redo" },
+    { key: "?", description: "Show this help" },
+    { key: "Esc", description: "Close panel / clear search" },
+    { key: "Click", description: "Select node" },
+    { key: "Ctrl+Click", description: "Multi-select nodes" },
+    { key: "Drag", description: "Pan canvas" },
+    { key: "Scroll", description: "Zoom in/out" },
+];
+export function initShortcuts(container) {
+    const overlay = document.createElement("div");
+    overlay.className = "shortcuts-overlay hidden";
+    const modal = document.createElement("div");
+    modal.className = "shortcuts-modal";
+    const title = document.createElement("h3");
+    title.className = "shortcuts-title";
+    title.textContent = "Keyboard Shortcuts";
+    const list = document.createElement("div");
+    list.className = "shortcuts-list";
+    for (const s of SHORTCUTS) {
+        const row = document.createElement("div");
+        row.className = "shortcuts-row";
+        const keys = document.createElement("div");
+        keys.className = "shortcuts-keys";
+        const kbd = document.createElement("kbd");
+        kbd.textContent = s.key;
+        keys.appendChild(kbd);
+        if (s.alt) {
+            const or = document.createElement("span");
+            or.className = "shortcuts-or";
+            or.textContent = "or";
+            keys.appendChild(or);
+            const kbd2 = document.createElement("kbd");
+            kbd2.textContent = s.alt;
+            keys.appendChild(kbd2);
+        }
+        const desc = document.createElement("span");
+        desc.className = "shortcuts-desc";
+        desc.textContent = s.description;
+        row.appendChild(keys);
+        row.appendChild(desc);
+        list.appendChild(row);
+    }
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "shortcuts-close";
+    closeBtn.textContent = "\u00d7";
+    modal.appendChild(closeBtn);
+    modal.appendChild(title);
+    modal.appendChild(list);
+    overlay.appendChild(modal);
+    container.appendChild(overlay);
+    function show() {
+        overlay.classList.remove("hidden");
+    }
+    function hide() {
+        overlay.classList.add("hidden");
+    }
+    closeBtn.addEventListener("click", hide);
+    overlay.addEventListener("click", (e) => {
+        if (e.target === overlay)
+            hide();
+    });
+    return { show, hide };
+}