backpack-viewer 0.2.16 → 0.2.19

package/dist/dialog.js

@@ -0,0 +1,119 @@
+/** Lightweight inline dialog system — replaces native alert/confirm/prompt. */
+const DIALOG_CSS_CLASS = "bp-dialog-overlay";
+function createOverlay() {
+    // Remove any existing dialog
+    document.querySelector(`.${DIALOG_CSS_CLASS}`)?.remove();
+    const overlay = document.createElement("div");
+    overlay.className = DIALOG_CSS_CLASS;
+    document.body.appendChild(overlay);
+    return overlay;
+}
+function createModal(overlay, title) {
+    const modal = document.createElement("div");
+    modal.className = "bp-dialog";
+    const heading = document.createElement("h4");
+    heading.className = "bp-dialog-title";
+    heading.textContent = title;
+    modal.appendChild(heading);
+    overlay.appendChild(modal);
+    overlay.addEventListener("click", (e) => {
+        if (e.target === overlay)
+            overlay.remove();
+    });
+    return modal;
+}
+function addButtons(modal, buttons) {
+    const row = document.createElement("div");
+    row.className = "bp-dialog-buttons";
+    for (const btn of buttons) {
+        const el = document.createElement("button");
+        el.className = "bp-dialog-btn";
+        if (btn.accent)
+            el.classList.add("bp-dialog-btn-accent");
+        if (btn.danger)
+            el.classList.add("bp-dialog-btn-danger");
+        el.textContent = btn.label;
+        el.addEventListener("click", btn.onClick);
+        row.appendChild(el);
+    }
+    modal.appendChild(row);
+}
+/** Show a confirmation dialog. Returns a promise that resolves to true/false. */
+export function showConfirm(title, message) {
+    return new Promise((resolve) => {
+        const overlay = createOverlay();
+        const modal = createModal(overlay, title);
+        const msg = document.createElement("p");
+        msg.className = "bp-dialog-message";
+        msg.textContent = message;
+        modal.appendChild(msg);
+        addButtons(modal, [
+            { label: "Cancel", onClick: () => { overlay.remove(); resolve(false); } },
+            { label: "Confirm", accent: true, onClick: () => { overlay.remove(); resolve(true); } },
+        ]);
+        // Focus the confirm button
+        modal.querySelector(".bp-dialog-btn-accent")?.focus();
+    });
+}
+/** Show a prompt dialog with an input field. Returns null if cancelled. */
+export function showPrompt(title, placeholder, defaultValue) {
+    return new Promise((resolve) => {
+        const overlay = createOverlay();
+        const modal = createModal(overlay, title);
+        const input = document.createElement("input");
+        input.type = "text";
+        input.className = "bp-dialog-input";
+        input.placeholder = placeholder ?? "";
+        input.value = defaultValue ?? "";
+        modal.appendChild(input);
+        const submit = () => {
+            const val = input.value.trim();
+            overlay.remove();
+            resolve(val || null);
+        };
+        input.addEventListener("keydown", (e) => {
+            if (e.key === "Enter")
+                submit();
+            if (e.key === "Escape") {
+                overlay.remove();
+                resolve(null);
+            }
+        });
+        addButtons(modal, [
+            { label: "Cancel", onClick: () => { overlay.remove(); resolve(null); } },
+            { label: "OK", accent: true, onClick: submit },
+        ]);
+        input.focus();
+        input.select();
+    });
+}
+/** Show a danger confirmation (for destructive actions). */
+export function showDangerConfirm(title, message) {
+    return new Promise((resolve) => {
+        const overlay = createOverlay();
+        const modal = createModal(overlay, title);
+        const msg = document.createElement("p");
+        msg.className = "bp-dialog-message";
+        msg.textContent = message;
+        modal.appendChild(msg);
+        addButtons(modal, [
+            { label: "Cancel", onClick: () => { overlay.remove(); resolve(false); } },
+            { label: "Delete", danger: true, onClick: () => { overlay.remove(); resolve(true); } },
+        ]);
+    });
+}
+/** Show a brief toast notification. */
+export function showToast(message, durationMs = 3000) {
+    const existing = document.querySelector(".bp-toast");
+    if (existing)
+        existing.remove();
+    const toast = document.createElement("div");
+    toast.className = "bp-toast";
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    setTimeout(() => toast.classList.add("bp-toast-visible"), 10);
+    setTimeout(() => {
+        toast.classList.remove("bp-toast-visible");
+        setTimeout(() => toast.remove(), 300);
+    }, durationMs);
+}

package/dist/info-panel.d.ts

@@ -9,5 +9,9 @@ export interface EditCallbacks {
 export declare function initInfoPanel(container: HTMLElement, callbacks?: EditCallbacks, onNavigateToNode?: (nodeId: string) => void, onFocus?: (nodeIds: string[]) => void): {
     show(nodeIds: string[], data: LearningGraphData): void;
     hide: () => void;
+    goBack: () => void;
+    goForward: () => void;
+    cycleConnection(direction: 1 | -1): string | null;
+    setFocusDisabled(disabled: boolean): void;
     readonly visible: boolean;
 };

package/dist/info-panel.js

@@ -20,6 +20,9 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
     let navigatingHistory = false;
     let lastData = null;
     let currentNodeIds = [];
+    let focusDisabled = false;
+    let connectionNodeIds = []; // other-end node IDs for each connection
+    let activeConnectionIndex = -1;
     function hide() {
         panel.classList.add("hidden");
         panel.classList.remove("info-panel-maximized");
@@ -43,19 +46,23 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
         navigatingHistory = false;
     }
     function goBack() {
-        if (historyIndex <= 0 || !lastData || !onNavigateToNode)
+        if (historyIndex <= 0 || !lastData)
             return;
         historyIndex--;
         navigatingHistory = true;
-        onNavigateToNode(history[historyIndex]);
+        const nodeId = history[historyIndex];
+        onNavigateToNode?.(nodeId);
+        showSingle(nodeId, lastData);
         navigatingHistory = false;
     }
     function goForward() {
-        if (historyIndex >= history.length - 1 || !lastData || !onNavigateToNode)
+        if (historyIndex >= history.length - 1 || !lastData)
             return;
         historyIndex++;
         navigatingHistory = true;
-        onNavigateToNode(history[historyIndex]);
+        const nodeId = history[historyIndex];
+        onNavigateToNode?.(nodeId);
+        showSingle(nodeId, lastData);
         navigatingHistory = false;
     }
     function createToolbar() {
@@ -83,8 +90,12 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
             focusBtn.className = "info-toolbar-btn info-focus-btn";
             focusBtn.textContent = "\u25CE"; // bullseye
             focusBtn.title = "Focus on neighborhood (F)";
+            focusBtn.disabled = focusDisabled;
+            if (focusDisabled)
+                focusBtn.style.opacity = "0.3";
             focusBtn.addEventListener("click", () => {
-                onFocus(currentNodeIds);
+                if (!focusDisabled)
+                    onFocus(currentNodeIds);
             });
             toolbar.appendChild(focusBtn);
         }
@@ -114,12 +125,18 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
         if (!node)
             return;
         const connectedEdges = data.edges.filter((e) => e.sourceId === nodeId || e.targetId === nodeId);
+        // Store connection targets for keyboard cycling
+        connectionNodeIds = connectedEdges.map((e) => e.sourceId === nodeId ? e.targetId : e.sourceId);
+        activeConnectionIndex = -1;
         panel.innerHTML = "";
         panel.classList.remove("hidden");
         if (maximized)
             panel.classList.add("info-panel-maximized");
+        // Pinned header area (toolbar + node identity)
+        const pinnedHeader = document.createElement("div");
+        pinnedHeader.className = "info-panel-header";
         // Toolbar (back, forward, maximize, close)
-        panel.appendChild(createToolbar());
+        pinnedHeader.appendChild(createToolbar());
         // Header: type badge + label
         const header = document.createElement("div");
         header.className = "info-header";
@@ -173,7 +190,11 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
         header.appendChild(typeBadge);
         header.appendChild(label);
         header.appendChild(nodeIdEl);
-        panel.appendChild(header);
+        pinnedHeader.appendChild(header);
+        panel.appendChild(pinnedHeader);
+        // Scrollable body for properties, connections, timestamps
+        const body = document.createElement("div");
+        body.className = "info-panel-body";
         // Properties section (editable)
         const propKeys = Object.keys(node.properties);
         const propSection = createSection("Properties");
@@ -258,7 +279,7 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
             });
             propSection.appendChild(addBtn);
         }
-        panel.appendChild(propSection);
+        body.appendChild(propSection);
         // Connections section
         if (connectedEdges.length > 0) {
             const section = createSection(`Connections (${connectedEdges.length})`);
@@ -327,7 +348,7 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
                 list.appendChild(li);
             }
             section.appendChild(list);
-            panel.appendChild(section);
+            body.appendChild(section);
         }
         // Timestamps
         const tsSection = createSection("Timestamps");
@@ -346,7 +367,7 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
         timestamps.appendChild(updatedDt);
         timestamps.appendChild(updatedDd);
         tsSection.appendChild(timestamps);
-        panel.appendChild(tsSection);
+        body.appendChild(tsSection);
         // Delete node button
         if (callbacks) {
             const deleteSection = document.createElement("div");
@@ -359,8 +380,9 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
                 hide();
             });
             deleteSection.appendChild(deleteBtn);
-            panel.appendChild(deleteSection);
+            body.appendChild(deleteSection);
         }
+        panel.appendChild(body);
     }
     function showMulti(nodeIds, data) {
         const selectedSet = new Set(nodeIds);
@@ -521,6 +543,39 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
             }
         },
         hide,
+        goBack,
+        goForward,
+        cycleConnection(direction) {
+            if (connectionNodeIds.length === 0)
+                return null;
+            if (activeConnectionIndex === -1) {
+                activeConnectionIndex = direction === 1 ? 0 : connectionNodeIds.length - 1;
+            }
+            else {
+                activeConnectionIndex += direction;
+                if (activeConnectionIndex >= connectionNodeIds.length)
+                    activeConnectionIndex = 0;
+                if (activeConnectionIndex < 0)
+                    activeConnectionIndex = connectionNodeIds.length - 1;
+            }
+            // Highlight active row in the panel
+            const items = panel.querySelectorAll(".info-connection");
+            items.forEach((el, i) => {
+                el.classList.toggle("info-connection-active", i === activeConnectionIndex);
+            });
+            if (activeConnectionIndex >= 0 && items[activeConnectionIndex]) {
+                items[activeConnectionIndex].scrollIntoView({ block: "nearest" });
+            }
+            return connectionNodeIds[activeConnectionIndex] ?? null;
+        },
+        setFocusDisabled(disabled) {
+            focusDisabled = disabled;
+            const btn = panel.querySelector(".info-focus-btn");
+            if (btn) {
+                btn.disabled = disabled;
+                btn.style.opacity = disabled ? "0.3" : "";
+            }
+        },
         get visible() {
             return !panel.classList.contains("hidden");
         },

package/dist/keybindings.d.ts

@@ -0,0 +1,6 @@
+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 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;
+/** Build a reverse map: for each action, store its binding string. Used by the help modal. */
+export declare function actionDescriptions(): Record<KeybindingAction, string>;

package/dist/keybindings.js

@@ -0,0 +1,67 @@
+/** Parse a binding string like "ctrl+shift+z" and check if it matches a KeyboardEvent. */
+export function matchKey(e, binding) {
+    const parts = binding.split("+");
+    const key = parts.pop();
+    const modifiers = parts.map((p) => p.toLowerCase());
+    const needCtrl = modifiers.includes("ctrl") || modifiers.includes("cmd") || modifiers.includes("meta");
+    const explicitShift = modifiers.includes("shift");
+    const needAlt = modifiers.includes("alt");
+    // Ctrl/meta check
+    if (needCtrl !== (e.ctrlKey || e.metaKey))
+        return false;
+    if (!needCtrl && (e.ctrlKey || e.metaKey))
+        return false;
+    // Only enforce shift when explicitly in the binding (e.g. "ctrl+shift+z").
+    // Plain chars like "K", ">", "?" implicitly require shift via their character.
+    if (explicitShift && !e.shiftKey)
+        return false;
+    // Alt check
+    if (needAlt !== e.altKey)
+        return false;
+    // Named keys
+    if (key.toLowerCase() === "escape")
+        return e.key === "Escape";
+    if (key.toLowerCase() === "tab")
+        return e.key === "Tab";
+    // For modified bindings (ctrl+z, ctrl+shift+z), compare case-insensitively
+    // because browsers vary on e.key casing when modifiers are held.
+    if (modifiers.length > 0)
+        return e.key.toLowerCase() === key.toLowerCase();
+    // For plain keys, compare exactly — "k" vs "K" distinguishes shift state.
+    return e.key === key;
+}
+/** Build a reverse map: for each action, store its binding string. Used by the help modal. */
+export function actionDescriptions() {
+    return {
+        search: "Focus search",
+        searchAlt: "Focus search (alt)",
+        undo: "Undo",
+        redo: "Redo",
+        help: "Toggle help",
+        escape: "Exit focus / close panel",
+        focus: "Focus on selected / exit focus",
+        toggleEdges: "Toggle edges on/off",
+        center: "Center view on graph",
+        nextNode: "Next node in view",
+        prevNode: "Previous node in view",
+        nextConnection: "Next connection",
+        prevConnection: "Previous connection",
+        historyBack: "Node history back",
+        historyForward: "Node history forward",
+        hopsIncrease: "Increase hops",
+        hopsDecrease: "Decrease hops",
+        panLeft: "Pan left",
+        panDown: "Pan down",
+        panUp: "Pan up",
+        panRight: "Pan right",
+        panFastLeft: "Pan fast left",
+        zoomOut: "Zoom out",
+        zoomIn: "Zoom in",
+        panFastRight: "Pan fast right",
+        spacingDecrease: "Decrease spacing",
+        spacingIncrease: "Increase spacing",
+        clusteringDecrease: "Decrease clustering",
+        clusteringIncrease: "Increase clustering",
+        toggleSidebar: "Toggle sidebar",
+    };
+}

package/dist/layout.d.ts

@@ -25,6 +25,8 @@ export interface LayoutParams {
 export declare const DEFAULT_LAYOUT_PARAMS: LayoutParams;
 export declare function setLayoutParams(p: Partial<LayoutParams>): void;
 export declare function getLayoutParams(): LayoutParams;
+/** Compute sensible default layout params based on graph size. */
+export declare function autoLayoutParams(nodeCount: number): LayoutParams;
 /** Extract the N-hop neighborhood of seed nodes as a new subgraph. */
 export declare function extractSubgraph(data: LearningGraphData, seedIds: string[], hops: number): LearningGraphData;
 /** Create a layout state from ontology data. Nodes start grouped by type. */

package/dist/layout.js

@@ -1,12 +1,12 @@
 export const DEFAULT_LAYOUT_PARAMS = {
-    clusterStrength: 0.05,
-    spacing: 1,
+    clusterStrength: 0.08,
+    spacing: 1.5,
 };
-const REPULSION = 5000;
-const CROSS_TYPE_REPULSION_BASE = 8000;
-const ATTRACTION = 0.005;
-const REST_LENGTH_SAME_BASE = 100;
-const REST_LENGTH_CROSS_BASE = 250;
+const REPULSION = 6000;
+const CROSS_TYPE_REPULSION_BASE = 12000;
+const ATTRACTION = 0.004;
+const REST_LENGTH_SAME_BASE = 140;
+const REST_LENGTH_CROSS_BASE = 350;
 const DAMPING = 0.9;
 const CENTER_GRAVITY = 0.01;
 const MIN_DISTANCE = 30;
@@ -22,6 +22,16 @@ export function setLayoutParams(p) {
 export function getLayoutParams() {
     return { ...params };
 }
+/** Compute sensible default layout params based on graph size. */
+export function autoLayoutParams(nodeCount) {
+    if (nodeCount <= 30)
+        return { ...DEFAULT_LAYOUT_PARAMS };
+    const scale = Math.log2(nodeCount / 30);
+    return {
+        clusterStrength: Math.min(0.5, 0.08 + 0.06 * scale),
+        spacing: Math.min(15, 1.5 + 1.2 * scale),
+    };
+}
 /** 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)) {
@@ -61,7 +71,7 @@ export function createLayout(data) {
     const nodeMap = new Map();
     // 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 typeRadius = Math.sqrt(types.length) * REST_LENGTH_CROSS_BASE * 0.6 * Math.max(1, params.spacing);
     const typeCounters = new Map();
     const typeSizes = new Map();
     for (const n of data.nodes) {