backpack-viewer 0.2.13 → 0.2.15

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,57 @@ function nodeLabel(properties, id) {
     }
     return id;
 }
-/** Create a layout state from ontology data. Nodes start in a circle. */
+/** Extract the N-hop neighborhood of seed nodes as a new subgraph. */
+export function extractSubgraph(data, seedIds, hops) {
+    const visited = new Set(seedIds);
+    let frontier = new Set(seedIds);
+    for (let h = 0; h < hops; h++) {
+        const next = new Set();
+        for (const edge of data.edges) {
+            if (frontier.has(edge.sourceId) && !visited.has(edge.targetId)) {
+                next.add(edge.targetId);
+            }
+            if (frontier.has(edge.targetId) && !visited.has(edge.sourceId)) {
+                next.add(edge.sourceId);
+            }
+        }
+        for (const id of next)
+            visited.add(id);
+        frontier = next;
+        if (next.size === 0)
+            break;
+    }
+    return {
+        nodes: data.nodes.filter((n) => visited.has(n.id)),
+        edges: data.edges.filter((e) => visited.has(e.sourceId) && visited.has(e.targetId)),
+        metadata: data.metadata,
+    };
+}
+/** 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 +99,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 +109,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 +119,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 +130,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 +146,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;
@@ -92,35 +120,206 @@ async function main() {
         },
     }, (nodeId) => {
         canvas.panToNode(nodeId);
+    }, (nodeIds) => {
+        toolsPane.addToFocusSet(nodeIds);
     });
+    const mobileQuery = window.matchMedia("(max-width: 768px)");
+    // Track current selection for keyboard shortcuts
+    let currentSelection = [];
+    // --- Focus indicator (top bar pill) ---
+    let focusIndicator = null;
+    function buildFocusIndicator(info) {
+        if (focusIndicator)
+            focusIndicator.remove();
+        focusIndicator = document.createElement("div");
+        focusIndicator.className = "focus-indicator";
+        const label = document.createElement("span");
+        label.className = "focus-indicator-label";
+        label.textContent = `Focused: ${info.totalNodes} nodes`;
+        const hopsLabel = document.createElement("span");
+        hopsLabel.className = "focus-indicator-hops";
+        hopsLabel.textContent = `${info.hops}`;
+        const minus = document.createElement("button");
+        minus.className = "focus-indicator-btn";
+        minus.textContent = "\u2212";
+        minus.title = "Fewer hops";
+        minus.disabled = info.hops === 0;
+        minus.addEventListener("click", () => {
+            canvas.enterFocus(info.seedNodeIds, Math.max(0, info.hops - 1));
+        });
+        const plus = document.createElement("button");
+        plus.className = "focus-indicator-btn";
+        plus.textContent = "+";
+        plus.title = "More hops";
+        plus.disabled = false;
+        plus.addEventListener("click", () => {
+            canvas.enterFocus(info.seedNodeIds, info.hops + 1);
+        });
+        const exit = document.createElement("button");
+        exit.className = "focus-indicator-btn focus-indicator-exit";
+        exit.textContent = "\u00d7";
+        exit.title = "Exit focus (Esc)";
+        exit.addEventListener("click", () => toolsPane.clearFocusSet());
+        focusIndicator.appendChild(label);
+        focusIndicator.appendChild(minus);
+        focusIndicator.appendChild(hopsLabel);
+        focusIndicator.appendChild(plus);
+        focusIndicator.appendChild(exit);
+    }
+    function removeFocusIndicator() {
+        if (focusIndicator) {
+            focusIndicator.remove();
+            focusIndicator = null;
+        }
+    }
     canvas = initCanvas(canvasContainer, (nodeIds) => {
+        currentSelection = 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);
+        }
+    }, (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);
+        }
+        else {
+            removeFocusIndicator();
+            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);
+        },
+        onFocusChange(seedNodeIds) {
+            if (seedNodeIds && seedNodeIds.length > 0) {
+                canvas.enterFocus(seedNodeIds, 1);
+            }
+            else {
+                if (canvas.isFocused())
+                    canvas.exitFocus();
+            }
+        },
+        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);
     });
     search.onNodeSelect((nodeId) => {
+        // If focused and the node isn't in the subgraph, exit focus first
+        if (canvas.isFocused()) {
+            toolsPane.clearFocusSet();
+        }
         canvas.panToNode(nodeId);
         if (currentData) {
             infoPanel.show([nodeId], currentData);
         }
     });
     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 +332,103 @@ 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 parts = [];
+        if (nodeIds?.length) {
+            parts.push("node=" + nodeIds.map(encodeURIComponent).join(","));
+        }
+        const focusInfo = canvas.getFocusInfo();
+        if (focusInfo) {
+            parts.push("focus=" + focusInfo.seedNodeIds.map(encodeURIComponent).join(","));
+            parts.push("hops=" + focusInfo.hops);
+        }
+        const hash = "#" + encodeURIComponent(name) +
+            (parts.length ? "?" + parts.join("&") : "");
+        history.replaceState(null, "", hash);
+    }
+    function parseUrl() {
+        const hash = window.location.hash.slice(1);
+        if (!hash)
+            return { graph: null, nodes: [], focus: [], hops: 1 };
+        const [graphPart, queryPart] = hash.split("?");
+        const graph = graphPart ? decodeURIComponent(graphPart) : null;
+        let nodes = [];
+        let focus = [];
+        let hops = 1;
+        if (queryPart) {
+            const params = new URLSearchParams(queryPart);
+            const nodeParam = params.get("node");
+            if (nodeParam)
+                nodes = nodeParam.split(",").map(decodeURIComponent);
+            const focusParam = params.get("focus");
+            if (focusParam)
+                focus = focusParam.split(",").map(decodeURIComponent);
+            const hopsParam = params.get("hops");
+            if (hopsParam)
+                hops = Math.max(0, parseInt(hopsParam, 10) || 1);
+        }
+        return { graph, nodes, focus, hops };
+    }
+    async function selectGraph(name, panToNodeIds, focusSeedIds, focusHops) {
+        activeOntology = name;
+        sidebar.setActive(name);
+        infoPanel.hide();
+        removeFocusIndicator();
+        search.clear();
+        undoHistory.clear();
+        currentData = await loadOntology(name);
+        canvas.loadGraph(currentData);
+        search.setLearningGraphData(currentData);
+        toolsPane.setData(currentData);
+        emptyState.hide();
+        updateUrl(name);
+        // Restore focus mode if requested
+        if (focusSeedIds?.length && currentData) {
+            const validFocus = focusSeedIds.filter((id) => currentData.nodes.some((n) => n.id === id));
+            if (validFocus.length) {
+                setTimeout(() => {
+                    canvas.enterFocus(validFocus, focusHops ?? 1);
+                }, 500);
+                return; // enterFocus handles the URL update
+            }
+        }
+        // Pan to specific nodes if requested
+        if (panToNodeIds?.length && currentData) {
+            const validIds = panToNodeIds.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, initialUrl.focus.length ? initialUrl.focus : undefined, initialUrl.hops);
     }
-    // Keyboard shortcut: / or Ctrl+K to focus search
+    else {
+        emptyState.show();
+    }
+    // Keyboard shortcuts
     document.addEventListener("keydown", (e) => {
         if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
             return;
@@ -155,22 +436,88 @@ 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 === "f" || e.key === "F") {
+            // Toggle focus mode on current selection
+            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();
+            }
+            else {
+                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, url.focus.length ? url.focus : undefined, url.hops);
+        }
+        else if (url.graph && url.focus.length && currentData) {
+            canvas.enterFocus(url.focus, url.hops);
+        }
+        else if (url.graph && url.nodes.length && currentData) {
+            if (canvas.isFocused())
+                canvas.exitFocus();
+            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;
+};