backpack-viewer 0.2.14 → 0.2.16

package/dist/main.js

@@ -120,9 +120,60 @@ 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)
@@ -134,6 +185,20 @@ async function main() {
             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, {
@@ -155,6 +220,15 @@ async function main() {
             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;
@@ -235,6 +309,10 @@ async function main() {
         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);
@@ -262,29 +340,47 @@ async function main() {
     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) +
-            (nodeIds?.length ? "?node=" + nodeIds.map(encodeURIComponent).join(",") : "");
+            (parts.length ? "?" + parts.join("&") : "");
         history.replaceState(null, "", hash);
     }
     function parseUrl() {
         const hash = window.location.hash.slice(1);
         if (!hash)
-            return { graph: null, nodes: [] };
+            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 };
+        return { graph, nodes, focus, hops };
     }
-    async function selectGraph(name, focusNodeIds) {
+    async function selectGraph(name, panToNodeIds, focusSeedIds, focusHops) {
         activeOntology = name;
         sidebar.setActive(name);
         infoPanel.hide();
+        removeFocusIndicator();
         search.clear();
         undoHistory.clear();
         currentData = await loadOntology(name);
@@ -293,9 +389,19 @@ async function main() {
         toolsPane.setData(currentData);
         emptyState.hide();
         updateUrl(name);
-        // Focus on specific nodes if requested
-        if (focusNodeIds?.length && currentData) {
-            const validIds = focusNodeIds.filter((id) => currentData.nodes.some((n) => n.id === id));
+        // 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);
@@ -317,7 +423,7 @@ async function main() {
             ? summaries[0].name
             : null;
     if (initialName) {
-        await selectGraph(initialName, initialUrl.nodes.length ? initialUrl.nodes : undefined);
+        await selectGraph(initialName, initialUrl.nodes.length ? initialUrl.nodes : undefined, initialUrl.focus.length ? initialUrl.focus : undefined, initialUrl.hops);
     }
     else {
         emptyState.show();
@@ -346,20 +452,39 @@ async function main() {
                     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") {
-            shortcuts.hide();
+            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);
+            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);

package/dist/shortcuts.js

@@ -3,7 +3,8 @@ const SHORTCUTS = [
     { key: "Ctrl+Z", description: "Undo" },
     { key: "Ctrl+Shift+Z", description: "Redo" },
     { key: "?", description: "Show this help" },
-    { key: "Esc", description: "Close panel / clear search" },
+    { key: "F", description: "Focus on selected / exit focus" },
+    { key: "Esc", description: "Exit focus / close panel" },
     { key: "Click", description: "Select node" },
     { key: "Ctrl+Click", description: "Multi-select nodes" },
     { key: "Drag", description: "Pan canvas" },

package/dist/style.css

@@ -274,6 +274,71 @@ body {
   justify-content: center;
 }
 
+/* --- Focus Indicator --- */
+
+.focus-indicator {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--bg-surface);
+  border: 1px solid rgba(212, 162, 127, 0.4);
+  border-radius: 8px;
+  padding: 4px 6px 4px 10px;
+  box-shadow: 0 2px 8px var(--shadow);
+}
+
+.focus-indicator-label {
+  font-size: 11px;
+  color: var(--accent);
+  font-weight: 500;
+  white-space: nowrap;
+  margin-right: 4px;
+}
+
+.focus-indicator-hops {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: monospace;
+  min-width: 12px;
+  text-align: center;
+}
+
+.focus-indicator-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 2px 4px;
+  line-height: 1;
+  border-radius: 4px;
+  transition: color 0.15s, background 0.15s;
+}
+
+.focus-indicator-btn:hover:not(:disabled) {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+
+.focus-indicator-btn:disabled {
+  color: var(--text-dim);
+  cursor: default;
+  opacity: 0.3;
+}
+
+.focus-indicator-exit {
+  font-size: 16px;
+  margin-left: 2px;
+}
+
+.focus-indicator-exit:hover {
+  color: #ef4444 !important;
+}
+
+.info-focus-btn {
+  font-size: 14px;
+}
+
 /* --- Theme Toggle --- */
 
 .theme-toggle {
@@ -852,9 +917,14 @@ body {
   border-radius: 4px;
   padding: 3px 6px;
   font-size: 12px;
+  font-family: inherit;
   color: var(--text);
   flex: 1;
   min-width: 0;
+  resize: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+  max-height: 300px;
 }
 
 .info-edit-input:focus {
@@ -997,9 +1067,9 @@ body {
   position: absolute;
   top: 56px;
   left: 16px;
+  bottom: 16px;
   z-index: 20;
   width: 200px;
-  max-height: calc(100vh - 72px);
   overflow-y: auto;
   background: var(--bg-surface);
   border: 1px solid var(--border);
@@ -1127,6 +1197,22 @@ body {
   color: var(--accent);
 }
 
+.tools-pane-focus-toggle {
+  opacity: 0.4;
+  font-size: 11px;
+}
+
+.tools-pane-focus-active {
+  opacity: 1 !important;
+  color: var(--accent) !important;
+}
+
+.tools-pane-focus-clear {
+  margin-top: 4px;
+  border-top: 1px solid var(--border);
+  padding-top: 6px;
+}
+
 .tools-pane-editing {
   background: none !important;
 }
@@ -1417,8 +1503,8 @@ body {
   .tools-pane-content {
     top: 48px;
     left: 8px;
+    bottom: 80px;
     width: 160px;
-    max-height: calc(100% - 200px);
     max-width: calc(100vw - 24px);
   }
 

package/dist/tools-pane.d.ts

@@ -2,6 +2,7 @@ import type { LearningGraphData } from "backpack-ontology";
 interface ToolsPaneCallbacks {
     onFilterByType: (type: string | null) => void;
     onNavigateToNode: (nodeId: string) => void;
+    onFocusChange: (seedNodeIds: string[] | null) => void;
     onRenameNodeType: (oldType: string, newType: string) => void;
     onRenameEdgeType: (oldType: string, newType: string) => void;
     onToggleEdgeLabels: (visible: boolean) => void;
@@ -13,6 +14,8 @@ interface ToolsPaneCallbacks {
 }
 export declare function initToolsPane(container: HTMLElement, callbacks: ToolsPaneCallbacks): {
     collapse(): void;
+    addToFocusSet(nodeIds: string[]): void;
+    clearFocusSet(): void;
     setData(newData: LearningGraphData | null): void;
 };
 export {};

package/dist/tools-pane.js

@@ -7,6 +7,39 @@ export function initToolsPane(container, callbacks) {
     let edgeLabelsVisible = true;
     let typeHullsVisible = true;
     let minimapVisible = true;
+    // Unified focus set — two layers that compose via union
+    const focusSet = {
+        types: new Set(), // toggled node types (dynamic — resolves to all nodes of type)
+        nodeIds: new Set(), // individually toggled node IDs
+    };
+    /** Resolve the focus set to a flat array of node IDs. */
+    function resolveFocusSet() {
+        if (!data)
+            return [];
+        const ids = new Set();
+        for (const node of data.nodes) {
+            if (focusSet.types.has(node.type))
+                ids.add(node.id);
+        }
+        for (const id of focusSet.nodeIds)
+            ids.add(id);
+        return [...ids];
+    }
+    /** Check if a node is in the focus set (directly or via its type). */
+    function isNodeFocused(nodeId) {
+        if (focusSet.nodeIds.has(nodeId))
+            return true;
+        const node = data?.nodes.find((n) => n.id === nodeId);
+        return node ? focusSet.types.has(node.type) : false;
+    }
+    function isFocusSetEmpty() {
+        return focusSet.types.size === 0 && focusSet.nodeIds.size === 0;
+    }
+    /** Emit the resolved focus set to the callback. */
+    function emitFocusChange() {
+        const resolved = resolveFocusSet();
+        callbacks.onFocusChange(resolved.length > 0 ? resolved : null);
+    }
     // --- DOM ---
     const toggle = document.createElement("button");
     toggle.className = "tools-pane-toggle hidden";
@@ -37,7 +70,7 @@ export function initToolsPane(container, callbacks) {
                 `<span>${stats.edgeCount} edges</span><span class="tools-pane-sep">&middot;</span>` +
                 `<span>${stats.types.length} types</span>`;
         content.appendChild(summary);
-        // Node types — click to filter, double-click to rename
+        // Node types — click to filter, bullseye to toggle focus set, pencil to rename
         if (stats.types.length) {
             content.appendChild(makeSection("Node Types", (section) => {
                 for (const t of stats.types) {
@@ -54,6 +87,14 @@ export function initToolsPane(container, callbacks) {
                     const count = document.createElement("span");
                     count.className = "tools-pane-count";
                     count.textContent = String(t.count);
+                    const focusBtn = document.createElement("button");
+                    focusBtn.className = "tools-pane-edit tools-pane-focus-toggle";
+                    if (focusSet.types.has(t.name))
+                        focusBtn.classList.add("tools-pane-focus-active");
+                    focusBtn.textContent = "\u25CE";
+                    focusBtn.title = focusSet.types.has(t.name)
+                        ? `Remove ${t.name} from focus`
+                        : `Add ${t.name} to focus`;
                     const editBtn = document.createElement("button");
                     editBtn.className = "tools-pane-edit";
                     editBtn.textContent = "\u270E";
@@ -61,6 +102,7 @@ export function initToolsPane(container, callbacks) {
                     row.appendChild(dot);
                     row.appendChild(name);
                     row.appendChild(count);
+                    row.appendChild(focusBtn);
                     row.appendChild(editBtn);
                     row.addEventListener("click", (e) => {
                         if (e.target.closest(".tools-pane-edit"))
@@ -75,6 +117,17 @@ export function initToolsPane(container, callbacks) {
                         }
                         render();
                     });
+                    focusBtn.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        if (focusSet.types.has(t.name)) {
+                            focusSet.types.delete(t.name);
+                        }
+                        else {
+                            focusSet.types.add(t.name);
+                        }
+                        emitFocusChange();
+                        render();
+                    });
                     editBtn.addEventListener("click", (e) => {
                         e.stopPropagation();
                         startInlineEdit(row, t.name, (newName) => {
@@ -85,6 +138,26 @@ export function initToolsPane(container, callbacks) {
                     });
                     section.appendChild(row);
                 }
+                // Show clear button when types are focused
+                if (focusSet.types.size > 0) {
+                    const clearRow = document.createElement("div");
+                    clearRow.className = "tools-pane-row tools-pane-clickable tools-pane-focus-clear";
+                    const label = document.createElement("span");
+                    label.className = "tools-pane-name";
+                    label.style.color = "var(--accent)";
+                    label.textContent = `${focusSet.types.size} type${focusSet.types.size > 1 ? "s" : ""} focused`;
+                    const clearBtn = document.createElement("span");
+                    clearBtn.className = "tools-pane-badge";
+                    clearBtn.textContent = "clear types";
+                    clearRow.appendChild(label);
+                    clearRow.appendChild(clearBtn);
+                    clearRow.addEventListener("click", () => {
+                        focusSet.types.clear();
+                        emitFocusChange();
+                        render();
+                    });
+                    section.appendChild(clearRow);
+                }
             }));
         }
         // Edge types — with rename
@@ -118,7 +191,7 @@ export function initToolsPane(container, callbacks) {
                 }
             }));
         }
-        // Most connected nodes — click to navigate
+        // Most connected nodes — click to navigate, focus button
         if (stats.mostConnected.length) {
             content.appendChild(makeSection("Most Connected", (section) => {
                 for (const n of stats.mostConnected) {
@@ -133,12 +206,34 @@ export function initToolsPane(container, callbacks) {
                     const count = document.createElement("span");
                     count.className = "tools-pane-count";
                     count.textContent = `${n.connections}`;
+                    const focusBtn = document.createElement("button");
+                    focusBtn.className = "tools-pane-edit tools-pane-focus-toggle";
+                    if (isNodeFocused(n.id))
+                        focusBtn.classList.add("tools-pane-focus-active");
+                    focusBtn.textContent = "\u25CE";
+                    focusBtn.title = isNodeFocused(n.id)
+                        ? `Remove ${n.label} from focus`
+                        : `Add ${n.label} to focus`;
                     row.appendChild(dot);
                     row.appendChild(name);
                     row.appendChild(count);
-                    row.addEventListener("click", () => {
+                    row.appendChild(focusBtn);
+                    row.addEventListener("click", (e) => {
+                        if (e.target.closest(".tools-pane-edit"))
+                            return;
                         callbacks.onNavigateToNode(n.id);
                     });
+                    focusBtn.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        if (focusSet.nodeIds.has(n.id)) {
+                            focusSet.nodeIds.delete(n.id);
+                        }
+                        else {
+                            focusSet.nodeIds.add(n.id);
+                        }
+                        emitFocusChange();
+                        render();
+                    });
                     section.appendChild(row);
                 }
             }));
@@ -153,7 +248,7 @@ export function initToolsPane(container, callbacks) {
             issues.push(`${stats.emptyNodes.length} empty node${stats.emptyNodes.length > 1 ? "s" : ""}`);
         if (issues.length) {
             content.appendChild(makeSection("Quality", (section) => {
-                // Orphans — click to navigate
+                // Orphans — click to navigate, focus button
                 for (const o of stats.orphans.slice(0, 5)) {
                     const row = document.createElement("div");
                     row.className = "tools-pane-row tools-pane-clickable tools-pane-issue";
@@ -166,12 +261,34 @@ export function initToolsPane(container, callbacks) {
                     const badge = document.createElement("span");
                     badge.className = "tools-pane-badge";
                     badge.textContent = "orphan";
+                    const focusBtn = document.createElement("button");
+                    focusBtn.className = "tools-pane-edit tools-pane-focus-toggle";
+                    if (isNodeFocused(o.id))
+                        focusBtn.classList.add("tools-pane-focus-active");
+                    focusBtn.textContent = "\u25CE";
+                    focusBtn.title = isNodeFocused(o.id)
+                        ? `Remove ${o.label} from focus`
+                        : `Add ${o.label} to focus`;
                     row.appendChild(dot);
                     row.appendChild(name);
                     row.appendChild(badge);
-                    row.addEventListener("click", () => {
+                    row.appendChild(focusBtn);
+                    row.addEventListener("click", (e) => {
+                        if (e.target.closest(".tools-pane-edit"))
+                            return;
                         callbacks.onNavigateToNode(o.id);
                     });
+                    focusBtn.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        if (focusSet.nodeIds.has(o.id)) {
+                            focusSet.nodeIds.delete(o.id);
+                        }
+                        else {
+                            focusSet.nodeIds.add(o.id);
+                        }
+                        emitFocusChange();
+                        render();
+                    });
                     section.appendChild(row);
                 }
                 if (stats.orphans.length > 5) {
@@ -200,6 +317,37 @@ export function initToolsPane(container, callbacks) {
                 }
             }));
         }
+        // Unified focus summary (if anything from any section is focused)
+        if (!isFocusSetEmpty()) {
+            const resolved = resolveFocusSet();
+            const summaryParts = [];
+            if (focusSet.types.size > 0)
+                summaryParts.push(`${focusSet.types.size} type${focusSet.types.size > 1 ? "s" : ""}`);
+            if (focusSet.nodeIds.size > 0)
+                summaryParts.push(`${focusSet.nodeIds.size} node${focusSet.nodeIds.size > 1 ? "s" : ""}`);
+            content.appendChild(makeSection("Focus", (section) => {
+                const row = document.createElement("div");
+                row.className = "tools-pane-row";
+                const label = document.createElement("span");
+                label.className = "tools-pane-name";
+                label.style.color = "var(--accent)";
+                label.textContent = `${summaryParts.join(" + ")} (${resolved.length} total)`;
+                const clearBtn = document.createElement("button");
+                clearBtn.className = "tools-pane-edit tools-pane-focus-active";
+                clearBtn.style.opacity = "1";
+                clearBtn.textContent = "\u00d7";
+                clearBtn.title = "Clear all focus";
+                clearBtn.addEventListener("click", () => {
+                    focusSet.types.clear();
+                    focusSet.nodeIds.clear();
+                    emitFocusChange();
+                    render();
+                });
+                row.appendChild(label);
+                row.appendChild(clearBtn);
+                section.appendChild(row);
+            }));
+        }
         // Controls section
         content.appendChild(makeSection("Controls", (section) => {
             // Edge labels toggle
@@ -411,9 +559,23 @@ export function initToolsPane(container, callbacks) {
             content.classList.add("hidden");
             toggle.classList.remove("active");
         },
+        addToFocusSet(nodeIds) {
+            for (const id of nodeIds)
+                focusSet.nodeIds.add(id);
+            emitFocusChange();
+            render();
+        },
+        clearFocusSet() {
+            focusSet.types.clear();
+            focusSet.nodeIds.clear();
+            emitFocusChange();
+            render();
+        },
         setData(newData) {
             data = newData;
             activeTypeFilter = null;
+            focusSet.types.clear();
+            focusSet.nodeIds.clear();
             if (data && data.nodes.length > 0) {
                 stats = deriveStats(data);
                 toggle.classList.remove("hidden");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backpack-viewer",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "Web-based graph visualizer for backpack-ontology — Canvas 2D, force-directed layout, live reload",
   "license": "Apache-2.0",
   "author": "Noah Irzinger",