backpack-viewer 0.2.16 → 0.2.17

package/dist/main.js

@@ -4,15 +4,27 @@ import { initCanvas } from "./canvas";
 import { initInfoPanel } from "./info-panel";
 import { initSearch } from "./search";
 import { initToolsPane } from "./tools-pane";
-import { setLayoutParams } from "./layout";
+import { setLayoutParams, getLayoutParams, autoLayoutParams } from "./layout";
 import { initShortcuts } from "./shortcuts";
 import { initEmptyState } from "./empty-state";
 import { createHistory } from "./history";
+import { matchKey } from "./keybindings";
+import defaultConfig from "./default-config.json";
 import "./style.css";
 let activeOntology = "";
 let currentData = null;
 async function main() {
     const canvasContainer = document.getElementById("canvas-container");
+    // --- Load config (keybindings) ---
+    let bindings = defaultConfig.keybindings;
+    try {
+        const res = await fetch("/api/config");
+        if (res.ok) {
+            const config = await res.json();
+            bindings = { ...bindings, ...(config.keybindings ?? {}) };
+        }
+    }
+    catch { /* use defaults */ }
     // --- Theme toggle (top-right of canvas) ---
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
     const stored = localStorage.getItem("backpack-theme");
@@ -126,6 +138,9 @@ async function main() {
     const mobileQuery = window.matchMedia("(max-width: 768px)");
     // Track current selection for keyboard shortcuts
     let currentSelection = [];
+    let edgesVisible = true;
+    let panSpeed = 60;
+    let viewCycleIndex = -1;
     // --- Focus indicator (top bar pill) ---
     let focusIndicator = null;
     function buildFocusIndicator(info) {
@@ -188,14 +203,15 @@ async function main() {
     }, (focus) => {
         if (focus) {
             buildFocusIndicator(focus);
-            // Insert into top-left, after tools toggle
             const topLeft = canvasContainer.querySelector(".canvas-top-left");
             if (topLeft && focusIndicator)
                 topLeft.appendChild(focusIndicator);
             updateUrl(activeOntology, focus.seedNodeIds);
+            infoPanel.setFocusDisabled(focus.hops === 0);
         }
         else {
             removeFocusIndicator();
+            infoPanel.setFocusDisabled(false);
             if (activeOntology)
                 updateUrl(activeOntology);
         }
@@ -222,7 +238,7 @@ async function main() {
         },
         onFocusChange(seedNodeIds) {
             if (seedNodeIds && seedNodeIds.length > 0) {
-                canvas.enterFocus(seedNodeIds, 1);
+                canvas.enterFocus(seedNodeIds, 0);
             }
             else {
                 if (canvas.isFocused())
@@ -265,6 +281,9 @@ async function main() {
             setLayoutParams({ [param]: value });
             canvas.reheat();
         },
+        onPanSpeedChange(speed) {
+            panSpeed = speed;
+        },
         onExport(format) {
             const dataUrl = canvas.exportImage(format);
             if (!dataUrl)
@@ -336,7 +355,7 @@ async function main() {
             }
         },
     });
-    const shortcuts = initShortcuts(canvasContainer);
+    const shortcuts = initShortcuts(canvasContainer, bindings);
     const emptyState = initEmptyState(canvasContainer);
     // --- URL deep linking ---
     function updateUrl(name, nodeIds) {
@@ -384,6 +403,7 @@ async function main() {
         search.clear();
         undoHistory.clear();
         currentData = await loadOntology(name);
+        setLayoutParams(autoLayoutParams(currentData.nodes.length));
         canvas.loadGraph(currentData);
         search.setLearningGraphData(currentData);
         toolsPane.setData(currentData);
@@ -428,48 +448,88 @@ async function main() {
     else {
         emptyState.show();
     }
-    // Keyboard shortcuts
-    document.addEventListener("keydown", (e) => {
-        if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
-            return;
-        if (e.key === "/" || (e.key === "k" && (e.metaKey || e.ctrlKey))) {
-            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 === "f" || e.key === "F") {
-            // Toggle focus mode on current selection
+    // Keyboard shortcuts — dispatched via configurable bindings
+    const actions = {
+        search() { search.focus(); },
+        searchAlt() { search.focus(); },
+        undo() { if (currentData) {
+            const r = undoHistory.undo(currentData);
+            if (r)
+                applyState(r);
+        } },
+        redo() { if (currentData) {
+            const r = undoHistory.redo(currentData);
+            if (r)
+                applyState(r);
+        } },
+        focus() {
             if (canvas.isFocused()) {
                 toolsPane.clearFocusSet();
             }
             else if (currentSelection.length > 0) {
                 toolsPane.addToFocusSet(currentSelection);
             }
-        }
-        else if (e.key === "?") {
-            shortcuts.show();
-        }
-        else if (e.key === "Escape") {
-            if (canvas.isFocused()) {
-                toolsPane.clearFocusSet();
+        },
+        hopsDecrease() { const i = canvas.getFocusInfo(); if (i && i.hops > 0)
+            canvas.enterFocus(i.seedNodeIds, i.hops - 1); },
+        hopsIncrease() { const i = canvas.getFocusInfo(); if (i)
+            canvas.enterFocus(i.seedNodeIds, i.hops + 1); },
+        nextNode() {
+            const ids = canvas.getNodeIds();
+            if (ids.length > 0) {
+                viewCycleIndex = (viewCycleIndex + 1) % ids.length;
+                canvas.panToNode(ids[viewCycleIndex]);
+                if (currentData)
+                    infoPanel.show([ids[viewCycleIndex]], currentData);
             }
-            else {
-                shortcuts.hide();
+        },
+        prevNode() {
+            const ids = canvas.getNodeIds();
+            if (ids.length > 0) {
+                viewCycleIndex = viewCycleIndex <= 0 ? ids.length - 1 : viewCycleIndex - 1;
+                canvas.panToNode(ids[viewCycleIndex]);
+                if (currentData)
+                    infoPanel.show([ids[viewCycleIndex]], currentData);
+            }
+        },
+        nextConnection() { const id = infoPanel.cycleConnection(1); if (id)
+            canvas.panToNode(id); },
+        prevConnection() { const id = infoPanel.cycleConnection(-1); if (id)
+            canvas.panToNode(id); },
+        historyBack() { infoPanel.goBack(); },
+        historyForward() { infoPanel.goForward(); },
+        center() { canvas.centerView(); },
+        toggleEdges() { edgesVisible = !edgesVisible; canvas.setEdges(edgesVisible); },
+        panLeft() { canvas.panBy(-panSpeed, 0); },
+        panDown() { canvas.panBy(0, panSpeed); },
+        panUp() { canvas.panBy(0, -panSpeed); },
+        panRight() { canvas.panBy(panSpeed, 0); },
+        panFastLeft() { canvas.panBy(-panSpeed * 3, 0); },
+        zoomOut() { canvas.zoomBy(0.8); },
+        zoomIn() { canvas.zoomBy(1.25); },
+        panFastRight() { canvas.panBy(panSpeed * 3, 0); },
+        spacingDecrease() { const p = getLayoutParams(); setLayoutParams({ spacing: Math.max(0.5, p.spacing - 0.5) }); canvas.reheat(); },
+        spacingIncrease() { const p = getLayoutParams(); setLayoutParams({ spacing: Math.min(20, p.spacing + 0.5) }); canvas.reheat(); },
+        clusteringDecrease() { const p = getLayoutParams(); setLayoutParams({ clusterStrength: Math.max(0, p.clusterStrength - 0.03) }); canvas.reheat(); },
+        clusteringIncrease() { const p = getLayoutParams(); setLayoutParams({ clusterStrength: Math.min(1, p.clusterStrength + 0.03) }); canvas.reheat(); },
+        help() { shortcuts.toggle(); },
+        escape() { if (canvas.isFocused()) {
+            toolsPane.clearFocusSet();
+        }
+        else {
+            shortcuts.hide();
+        } },
+    };
+    document.addEventListener("keydown", (e) => {
+        if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
+            return;
+        for (const [action, binding] of Object.entries(bindings)) {
+            if (matchKey(e, binding)) {
+                const needsPrevent = action === "search" || action === "searchAlt" || action === "undo" || action === "redo";
+                if (needsPrevent)
+                    e.preventDefault();
+                actions[action]?.();
+                return;
             }
         }
     });

package/dist/search.js

@@ -10,13 +10,10 @@ function nodeLabel(node) {
 /** Check if a node matches a search query (case-insensitive across label + all string properties). */
 function matchesQuery(node, query) {
     const q = query.toLowerCase();
-    // Check label
     if (nodeLabel(node).toLowerCase().includes(q))
         return true;
-    // Check type
     if (node.type.toLowerCase().includes(q))
         return true;
-    // Check all string property values
     for (const value of Object.values(node.properties)) {
         if (typeof value === "string" && value.toLowerCase().includes(q))
             return true;
@@ -27,7 +24,6 @@ export function initSearch(container) {
     let data = null;
     let filterCallback = null;
     let selectCallback = null;
-    let activeTypes = new Set();
     let debounceTimer = null;
     // --- DOM ---
     const overlay = document.createElement("div");
@@ -43,83 +39,24 @@ export function initSearch(container) {
     const kbd = document.createElement("kbd");
     kbd.className = "search-kbd";
     kbd.textContent = "/";
-    const chipToggle = document.createElement("button");
-    chipToggle.className = "chip-toggle";
-    chipToggle.setAttribute("aria-label", "Toggle filter chips");
-    chipToggle.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>';
-    let chipsVisible = false;
-    chipToggle.addEventListener("click", () => {
-        chipsVisible = !chipsVisible;
-        chips.classList.toggle("hidden", !chipsVisible);
-        chipToggle.classList.toggle("active", chipsVisible);
-    });
     inputWrap.appendChild(input);
     inputWrap.appendChild(kbd);
-    inputWrap.appendChild(chipToggle);
     const results = document.createElement("ul");
     results.className = "search-results hidden";
-    const chips = document.createElement("div");
-    chips.className = "type-chips hidden";
     overlay.appendChild(inputWrap);
     overlay.appendChild(results);
-    overlay.appendChild(chips);
     container.appendChild(overlay);
-    // --- Type chips ---
-    function buildChips() {
-        chips.innerHTML = "";
-        if (!data)
-            return;
-        // Count nodes per type
-        const typeCounts = new Map();
-        for (const node of data.nodes) {
-            typeCounts.set(node.type, (typeCounts.get(node.type) ?? 0) + 1);
-        }
-        // Sort alphabetically
-        const types = [...typeCounts.keys()].sort();
-        activeTypes = new Set(); // None selected = show all
-        for (const type of types) {
-            const chip = document.createElement("button");
-            chip.className = "type-chip";
-            chip.dataset.type = type;
-            const dot = document.createElement("span");
-            dot.className = "type-chip-dot";
-            dot.style.backgroundColor = getColor(type);
-            const label = document.createElement("span");
-            label.textContent = `${type} (${typeCounts.get(type)})`;
-            chip.appendChild(dot);
-            chip.appendChild(label);
-            chip.addEventListener("click", () => {
-                if (activeTypes.has(type)) {
-                    activeTypes.delete(type);
-                    chip.classList.remove("active");
-                }
-                else {
-                    activeTypes.add(type);
-                    chip.classList.add("active");
-                }
-                applyFilter();
-            });
-            chips.appendChild(chip);
-        }
-    }
-    // --- Search + filter logic ---
+    // --- Search logic ---
     function getMatchingIds() {
         if (!data)
             return null;
         const query = input.value.trim();
-        const noChipsSelected = activeTypes.size === 0;
-        const noQuery = query.length === 0;
-        // No filter active — return null (show all)
-        if (noQuery && noChipsSelected)
+        if (query.length === 0)
             return null;
         const ids = new Set();
         for (const node of data.nodes) {
-            // If chips are selected, only include those types
-            if (!noChipsSelected && !activeTypes.has(node.type))
-                continue;
-            if (noQuery || matchesQuery(node, query)) {
+            if (matchesQuery(node, query))
                 ids.add(node.id);
-            }
         }
         return ids;
     }
@@ -130,16 +67,14 @@ export function initSearch(container) {
     }
     function updateResults() {
         results.innerHTML = "";
+        activeIndex = -1;
         const query = input.value.trim();
         if (!data || query.length === 0) {
             results.classList.add("hidden");
             return;
         }
-        const noChipsSelected = activeTypes.size === 0;
         const matches = [];
         for (const node of data.nodes) {
-            if (!noChipsSelected && !activeTypes.has(node.type))
-                continue;
             if (matchesQuery(node, query)) {
                 matches.push(node);
                 if (matches.length >= 8)
@@ -182,26 +117,55 @@ export function initSearch(container) {
             clearTimeout(debounceTimer);
         debounceTimer = setTimeout(applyFilter, 150);
     });
+    let activeIndex = -1;
+    function updateActiveResult() {
+        const items = results.querySelectorAll(".search-result-item");
+        items.forEach((el, i) => {
+            el.classList.toggle("search-result-active", i === activeIndex);
+        });
+        if (activeIndex >= 0 && items[activeIndex]) {
+            items[activeIndex].scrollIntoView({ block: "nearest" });
+        }
+    }
     input.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") {
+        const items = results.querySelectorAll(".search-result-item");
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            if (items.length > 0) {
+                activeIndex = Math.min(activeIndex + 1, items.length - 1);
+                updateActiveResult();
+            }
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            if (items.length > 0) {
+                activeIndex = Math.max(activeIndex - 1, 0);
+                updateActiveResult();
+            }
+        }
+        else if (e.key === "Enter") {
+            e.preventDefault();
+            if (activeIndex >= 0 && items[activeIndex]) {
+                items[activeIndex].click();
+            }
+            else if (items.length > 0) {
+                items[0].click();
+            }
+            input.blur();
+        }
+        else if (e.key === "Escape") {
             input.value = "";
             input.blur();
             results.classList.add("hidden");
+            activeIndex = -1;
             applyFilter();
         }
-        else if (e.key === "Enter") {
-            // Select first result
-            const first = results.querySelector(".search-result-item");
-            first?.click();
-        }
     });
-    // Close results when clicking outside
     document.addEventListener("click", (e) => {
         if (!overlay.contains(e.target)) {
             results.classList.add("hidden");
         }
     });
-    // Hide kbd hint when focused
     input.addEventListener("focus", () => kbd.classList.add("hidden"));
     input.addEventListener("blur", () => {
         if (input.value.length === 0)
@@ -215,7 +179,6 @@ export function initSearch(container) {
             results.classList.add("hidden");
             if (data && data.nodes.length > 0) {
                 overlay.classList.remove("hidden");
-                buildChips();
             }
             else {
                 overlay.classList.add("hidden");
@@ -230,10 +193,6 @@ export function initSearch(container) {
         clear() {
             input.value = "";
             results.classList.add("hidden");
-            activeTypes.clear();
-            chipsVisible = false;
-            chips.classList.add("hidden");
-            chipToggle.classList.remove("active");
             filterCallback?.(null);
         },
         focus() {

package/dist/shortcuts.d.ts

@@ -1,4 +1,6 @@
-export declare function initShortcuts(container: HTMLElement): {
+import { type KeybindingMap } from "./keybindings";
+export declare function initShortcuts(container: HTMLElement, bindings: KeybindingMap): {
     show: () => void;
     hide: () => void;
+    toggle: () => void;
 };

package/dist/shortcuts.js

@@ -1,16 +1,33 @@
-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: "F", description: "Focus on selected / exit focus" },
-    { key: "Esc", description: "Exit focus / close panel" },
+import { actionDescriptions } from "./keybindings";
+// Non-keyboard actions shown at the bottom of help
+const MOUSE_ACTIONS = [
     { 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) {
+// Group and order for display
+const ACTION_ORDER = [
+    "search", "searchAlt", "undo", "redo", "help",
+    "focus", "toggleEdges", "center",
+    "nextNode", "prevNode", "nextConnection", "prevConnection",
+    "historyBack", "historyForward",
+    "hopsIncrease", "hopsDecrease",
+    "panLeft", "panDown", "panUp", "panRight",
+    "panFastLeft", "panFastRight", "zoomIn", "zoomOut",
+    "spacingDecrease", "spacingIncrease",
+    "clusteringDecrease", "clusteringIncrease",
+    "escape",
+];
+/** Format a binding string for display (e.g. "ctrl+z" → "Ctrl+Z"). */
+function formatBinding(binding) {
+    return binding
+        .split("+")
+        .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
+        .join("+");
+}
+export function initShortcuts(container, bindings) {
+    const descriptions = actionDescriptions();
     const overlay = document.createElement("div");
     overlay.className = "shortcuts-overlay hidden";
     const modal = document.createElement("div");
@@ -20,7 +37,27 @@ export function initShortcuts(container) {
     title.textContent = "Keyboard Shortcuts";
     const list = document.createElement("div");
     list.className = "shortcuts-list";
-    for (const s of SHORTCUTS) {
+    // Keybinding actions
+    for (const action of ACTION_ORDER) {
+        const binding = bindings[action];
+        if (!binding)
+            continue;
+        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 = formatBinding(binding);
+        keys.appendChild(kbd);
+        const desc = document.createElement("span");
+        desc.className = "shortcuts-desc";
+        desc.textContent = descriptions[action];
+        row.appendChild(keys);
+        row.appendChild(desc);
+        list.appendChild(row);
+    }
+    // Mouse actions
+    for (const s of MOUSE_ACTIONS) {
         const row = document.createElement("div");
         row.className = "shortcuts-row";
         const keys = document.createElement("div");
@@ -28,15 +65,6 @@ export function initShortcuts(container) {
         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;
@@ -58,10 +86,13 @@ export function initShortcuts(container) {
     function hide() {
         overlay.classList.add("hidden");
     }
+    function toggle() {
+        overlay.classList.toggle("hidden");
+    }
     closeBtn.addEventListener("click", hide);
     overlay.addEventListener("click", (e) => {
         if (e.target === overlay)
             hide();
     });
-    return { show, hide };
+    return { show, hide, toggle };
 }

package/dist/style.css

@@ -269,6 +269,10 @@ body {
   gap: 4px;
 }
 
+.canvas-top-left {
+  flex-shrink: 0;
+}
+
 .canvas-top-center {
   flex: 1;
   justify-content: center;
@@ -510,7 +514,8 @@ body {
   transition: background 0.1s;
 }
 
-.search-result-item:hover {
+.search-result-item:hover,
+.search-result-active {
   background: var(--bg-hover);
 }
 
@@ -837,6 +842,11 @@ body {
   flex-wrap: wrap;
 }
 
+.info-connection-active {
+  outline: 1.5px solid var(--accent);
+  background: var(--bg-hover);
+}
+
 .info-target-dot {
   width: 8px;
   height: 8px;
@@ -1071,6 +1081,7 @@ body {
   z-index: 20;
   width: 200px;
   overflow-y: auto;
+  overflow-x: hidden;
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: 10px;
@@ -1296,6 +1307,68 @@ body {
   padding: 8px 0;
 }
 
+.tools-pane-tabs {
+  display: flex;
+  gap: 2px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+.tools-pane-tab {
+  flex: 1;
+  padding: 4px 0;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+
+.tools-pane-tab:hover {
+  color: var(--text-muted);
+  background: var(--bg-hover);
+}
+
+.tools-pane-tab-active {
+  color: var(--text);
+  background: var(--bg-hover);
+  border-color: var(--border);
+}
+
+.tools-pane-search {
+  width: 100%;
+  padding: 4px 8px;
+  font-size: 11px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  outline: none;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+}
+
+.tools-pane-search:focus {
+  border-color: var(--accent);
+}
+
+.tools-pane-search::placeholder {
+  color: var(--text-dim);
+}
+
+.tools-pane-empty-msg {
+  font-size: 11px;
+  color: var(--text-dim);
+  text-align: center;
+  padding: 16px 0;
+}
+
 /* --- Empty State --- */
 
 .empty-state {

package/dist/tools-pane.d.ts

@@ -9,6 +9,7 @@ interface ToolsPaneCallbacks {
     onToggleTypeHulls: (visible: boolean) => void;
     onToggleMinimap: (visible: boolean) => void;
     onLayoutChange: (param: string, value: number) => void;
+    onPanSpeedChange: (speed: number) => void;
     onExport: (format: "png" | "svg") => void;
     onOpen?: () => void;
 }