backpack-viewer 0.2.16 → 0.2.19

package/dist/main.js

@@ -1,22 +1,43 @@
-import { listOntologies, loadOntology, saveOntology, renameOntology } from "./api";
+import { listOntologies, loadOntology, saveOntology, renameOntology, listBranches, createBranch, switchBranch, deleteBranch, listSnapshots, createSnapshot, rollbackSnapshot, } from "./api";
 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 { 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 ---
+    const cfg = { ...defaultConfig };
+    try {
+        const res = await fetch("/api/config");
+        if (res.ok) {
+            const user = await res.json();
+            Object.assign(cfg.keybindings, user.keybindings ?? {});
+            Object.assign(cfg.display, user.display ?? {});
+            Object.assign(cfg.layout, user.layout ?? {});
+            Object.assign(cfg.navigation, user.navigation ?? {});
+            Object.assign(cfg.lod, user.lod ?? {});
+            Object.assign(cfg.limits, user.limits ?? {});
+        }
+    }
+    catch { /* use defaults */ }
+    const bindings = cfg.keybindings;
     // --- Theme toggle (top-right of canvas) ---
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+    const themeDefault = cfg.display.theme === "system"
+        ? (prefersDark.matches ? "dark" : "light")
+        : cfg.display.theme;
     const stored = localStorage.getItem("backpack-theme");
-    const initial = stored ?? (prefersDark.matches ? "dark" : "light");
+    const initial = stored ?? themeDefault;
     document.documentElement.setAttribute("data-theme", initial);
     const themeBtn = document.createElement("button");
     themeBtn.className = "theme-toggle";
@@ -126,6 +147,9 @@ async function main() {
     const mobileQuery = window.matchMedia("(max-width: 768px)");
     // Track current selection for keyboard shortcuts
     let currentSelection = [];
+    let edgesVisible = cfg.display.edges;
+    let panSpeed = cfg.navigation.panSpeed;
+    let viewCycleIndex = -1;
     // --- Focus indicator (top bar pill) ---
     let focusIndicator = null;
     function buildFocusIndicator(info) {
@@ -188,19 +212,23 @@ 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);
         }
+    }, { lod: cfg.lod, navigation: cfg.navigation });
+    const search = initSearch(canvasContainer, {
+        maxResults: cfg.limits.maxSearchResults,
+        debounceMs: cfg.limits.searchDebounceMs,
     });
-    const search = initSearch(canvasContainer);
     const toolsPane = initToolsPane(canvasContainer, {
         onFilterByType(type) {
             if (!currentData)
@@ -222,7 +250,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 +293,9 @@ async function main() {
             setLayoutParams({ [param]: value });
             canvas.reheat();
         },
+        onPanSpeedChange(speed) {
+            panSpeed = speed;
+        },
         onExport(format) {
             const dataUrl = canvas.exportImage(format);
             if (!dataUrl)
@@ -274,6 +305,22 @@ async function main() {
             link.href = dataUrl;
             link.click();
         },
+        onSnapshot: async (label) => {
+            if (!activeOntology)
+                return;
+            await createSnapshot(activeOntology, label);
+            await refreshSnapshots(activeOntology);
+        },
+        onRollback: async (version) => {
+            if (!activeOntology)
+                return;
+            await rollbackSnapshot(activeOntology, version);
+            currentData = await loadOntology(activeOntology);
+            canvas.loadGraph(currentData);
+            search.setLearningGraphData(currentData);
+            toolsPane.setData(currentData);
+            await refreshSnapshots(activeOntology);
+        },
         onOpen() {
             if (mobileQuery.matches)
                 infoPanel.hide();
@@ -335,9 +382,46 @@ async function main() {
                 toolsPane.setData(currentData);
             }
         },
+        onBranchSwitch: async (graphName, branchName) => {
+            await switchBranch(graphName, branchName);
+            await refreshBranches(graphName);
+            currentData = await loadOntology(graphName);
+            canvas.loadGraph(currentData);
+            search.setLearningGraphData(currentData);
+            toolsPane.setData(currentData);
+            await refreshSnapshots(graphName);
+        },
+        onBranchCreate: async (graphName, branchName) => {
+            await createBranch(graphName, branchName);
+            await refreshBranches(graphName);
+        },
+        onBranchDelete: async (graphName, branchName) => {
+            await deleteBranch(graphName, branchName);
+            await refreshBranches(graphName);
+        },
     });
-    const shortcuts = initShortcuts(canvasContainer);
+    async function refreshBranches(graphName) {
+        const branches = await listBranches(graphName);
+        const active = branches.find((b) => b.active);
+        if (active) {
+            sidebar.setActiveBranch(graphName, active.name, branches);
+        }
+    }
+    async function refreshSnapshots(graphName) {
+        const snaps = await listSnapshots(graphName);
+        toolsPane.setSnapshots(snaps);
+    }
+    const shortcuts = initShortcuts(canvasContainer, bindings);
     const emptyState = initEmptyState(canvasContainer);
+    // Apply display defaults from config
+    if (!cfg.display.edges)
+        canvas.setEdges(false);
+    if (!cfg.display.edgeLabels)
+        canvas.setEdgeLabels(false);
+    if (!cfg.display.typeHulls)
+        canvas.setTypeHulls(false);
+    if (!cfg.display.minimap)
+        canvas.setMinimap(false);
     // --- URL deep linking ---
     function updateUrl(name, nodeIds) {
         const parts = [];
@@ -384,11 +468,19 @@ async function main() {
         search.clear();
         undoHistory.clear();
         currentData = await loadOntology(name);
+        const autoParams = autoLayoutParams(currentData.nodes.length);
+        setLayoutParams({
+            spacing: Math.max(cfg.layout.spacing, autoParams.spacing),
+            clusterStrength: Math.max(cfg.layout.clustering, autoParams.clusterStrength),
+        });
         canvas.loadGraph(currentData);
         search.setLearningGraphData(currentData);
         toolsPane.setData(currentData);
         emptyState.hide();
         updateUrl(name);
+        // Load branches and snapshots
+        await refreshBranches(name);
+        await refreshSnapshots(name);
         // Restore focus mode if requested
         if (focusSeedIds?.length && currentData) {
             const validFocus = focusSeedIds.filter((id) => currentData.nodes.some((n) => n.id === id));
@@ -428,48 +520,89 @@ 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 * cfg.navigation.panFastMultiplier, 0); },
+        zoomOut() { canvas.zoomBy(1 / cfg.navigation.zoomFactor); },
+        zoomIn() { canvas.zoomBy(cfg.navigation.zoomFactor); },
+        panFastRight() { canvas.panBy(panSpeed * cfg.navigation.panFastMultiplier, 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(); },
+        toggleSidebar() { sidebar.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" || action === "toggleSidebar";
+                if (needsPrevent)
+                    e.preventDefault();
+                actions[action]?.();
+                return;
             }
         }
     });

package/dist/search.d.ts

@@ -1,5 +1,9 @@
 import type { LearningGraphData } from "backpack-ontology";
-export declare function initSearch(container: HTMLElement): {
+export interface SearchConfig {
+    maxResults?: number;
+    debounceMs?: number;
+}
+export declare function initSearch(container: HTMLElement, config?: SearchConfig): {
     setLearningGraphData(newData: LearningGraphData | null): void;
     onFilterChange(cb: (ids: Set<string> | null) => void): void;
     onNodeSelect(cb: (nodeId: string) => void): void;

package/dist/search.js

@@ -10,24 +10,22 @@ 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;
     }
     return false;
 }
-export function initSearch(container) {
+export function initSearch(container, config) {
+    const maxResults = config?.maxResults ?? 8;
+    const debounceMs = config?.debounceMs ?? 150;
     let data = null;
     let filterCallback = null;
     let selectCallback = null;
-    let activeTypes = new Set();
     let debounceTimer = null;
     // --- DOM ---
     const overlay = document.createElement("div");
@@ -43,83 +41,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,19 +69,17 @@ 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)
+                if (matches.length >= maxResults)
                     break;
             }
         }
@@ -180,28 +117,57 @@ export function initSearch(container) {
     input.addEventListener("input", () => {
         if (debounceTimer)
             clearTimeout(debounceTimer);
-        debounceTimer = setTimeout(applyFilter, 150);
+        debounceTimer = setTimeout(applyFilter, debounceMs);
     });
+    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 +181,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 +195,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,34 @@
-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",
+    "toggleSidebar",
+    "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 +38,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 +66,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 +87,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/sidebar.d.ts

@@ -2,8 +2,16 @@ import type { LearningGraphSummary } from "backpack-ontology";
 export interface SidebarCallbacks {
     onSelect: (name: string) => void;
     onRename?: (oldName: string, newName: string) => void;
+    onBranchSwitch?: (graphName: string, branchName: string) => void;
+    onBranchCreate?: (graphName: string, branchName: string) => void;
+    onBranchDelete?: (graphName: string, branchName: string) => void;
 }
 export declare function initSidebar(container: HTMLElement, onSelectOrCallbacks: ((name: string) => void) | SidebarCallbacks): {
     setSummaries(summaries: LearningGraphSummary[]): void;
     setActive(name: string): void;
+    setActiveBranch(graphName: string, branchName: string, allBranches?: {
+        name: string;
+        active: boolean;
+    }[]): void;
+    toggle: () => void;
 };