backpack-viewer 0.2.7 → 0.2.8

package/dist/layout.js

@@ -0,0 +1,100 @@
+const REPULSION = 5000;
+const ATTRACTION = 0.005;
+const REST_LENGTH = 150;
+const DAMPING = 0.9;
+const CENTER_GRAVITY = 0.01;
+const MIN_DISTANCE = 30;
+const MAX_VELOCITY = 50;
+/** 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)) {
+        if (typeof value === "string")
+            return value;
+    }
+    return id;
+}
+/** Create a layout state from ontology data. Nodes start in a circle. */
+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;
+        const node = {
+            id: n.id,
+            x: Math.cos(angle) * radius,
+            y: Math.sin(angle) * radius,
+            vx: 0,
+            vy: 0,
+            label: nodeLabel(n.properties, n.id),
+            type: n.type,
+        };
+        nodeMap.set(n.id, node);
+        return node;
+    });
+    const edges = data.edges.map((e) => ({
+        sourceId: e.sourceId,
+        targetId: e.targetId,
+        type: e.type,
+    }));
+    return { nodes, edges, nodeMap };
+}
+/** Run one tick of the force simulation. Returns new alpha. */
+export function tick(state, alpha) {
+    const { nodes, edges, nodeMap } = state;
+    // Repulsion — all pairs
+    for (let i = 0; i < nodes.length; i++) {
+        for (let j = i + 1; j < nodes.length; j++) {
+            const a = nodes[i];
+            const b = nodes[j];
+            let dx = b.x - a.x;
+            let dy = b.y - a.y;
+            let dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist < MIN_DISTANCE)
+                dist = MIN_DISTANCE;
+            const force = (REPULSION * alpha) / (dist * dist);
+            const fx = (dx / dist) * force;
+            const fy = (dy / dist) * force;
+            a.vx -= fx;
+            a.vy -= fy;
+            b.vx += fx;
+            b.vy += fy;
+        }
+    }
+    // Attraction — along edges
+    for (const edge of edges) {
+        const source = nodeMap.get(edge.sourceId);
+        const target = nodeMap.get(edge.targetId);
+        if (!source || !target)
+            continue;
+        const dx = target.x - source.x;
+        const dy = target.y - source.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist === 0)
+            continue;
+        const force = ATTRACTION * (dist - REST_LENGTH) * alpha;
+        const fx = (dx / dist) * force;
+        const fy = (dy / dist) * force;
+        source.vx += fx;
+        source.vy += fy;
+        target.vx -= fx;
+        target.vy -= fy;
+    }
+    // Centering gravity
+    for (const node of nodes) {
+        node.vx -= node.x * CENTER_GRAVITY * alpha;
+        node.vy -= node.y * CENTER_GRAVITY * alpha;
+    }
+    // Integrate — update positions, apply damping, clamp velocity
+    for (const node of nodes) {
+        node.vx *= DAMPING;
+        node.vy *= DAMPING;
+        const speed = Math.sqrt(node.vx * node.vx + node.vy * node.vy);
+        if (speed > MAX_VELOCITY) {
+            node.vx = (node.vx / speed) * MAX_VELOCITY;
+            node.vy = (node.vy / speed) * MAX_VELOCITY;
+        }
+        node.x += node.vx;
+        node.y += node.vy;
+    }
+    return alpha * 0.995;
+}

package/dist/main.d.ts

@@ -0,0 +1 @@
+import "./style.css";

package/dist/main.js

@@ -0,0 +1,177 @@
+import { listOntologies, loadOntology, saveOntology, renameOntology } from "./api";
+import { initSidebar } from "./sidebar";
+import { initCanvas } from "./canvas";
+import { initInfoPanel } from "./info-panel";
+import { initSearch } from "./search";
+import "./style.css";
+let activeOntology = "";
+let currentData = null;
+async function main() {
+    const canvasContainer = document.getElementById("canvas-container");
+    // --- Theme toggle (top-right of canvas) ---
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+    const stored = localStorage.getItem("backpack-theme");
+    const initial = stored ?? (prefersDark.matches ? "dark" : "light");
+    document.documentElement.setAttribute("data-theme", initial);
+    const themeBtn = document.createElement("button");
+    themeBtn.className = "theme-toggle";
+    themeBtn.textContent = initial === "light" ? "\u263E" : "\u263C";
+    themeBtn.title = "Toggle light/dark mode";
+    themeBtn.addEventListener("click", () => {
+        const current = document.documentElement.getAttribute("data-theme");
+        const next = current === "light" ? "dark" : "light";
+        document.documentElement.setAttribute("data-theme", next);
+        localStorage.setItem("backpack-theme", next);
+        themeBtn.textContent = next === "light" ? "\u263E" : "\u263C";
+    });
+    canvasContainer.appendChild(themeBtn);
+    // --- Save and re-render helper ---
+    async function save() {
+        if (!activeOntology || !currentData)
+            return;
+        currentData.metadata.updatedAt = new Date().toISOString();
+        await saveOntology(activeOntology, currentData);
+        canvas.loadGraph(currentData);
+        search.setOntologyData(currentData);
+        // Refresh sidebar counts
+        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.
+    let canvas;
+    const infoPanel = initInfoPanel(canvasContainer, {
+        onUpdateNode(nodeId, properties) {
+            if (!currentData)
+                return;
+            const node = currentData.nodes.find((n) => n.id === nodeId);
+            if (!node)
+                return;
+            node.properties = { ...node.properties, ...properties };
+            node.updatedAt = new Date().toISOString();
+            save().then(() => infoPanel.show([nodeId], currentData));
+        },
+        onChangeNodeType(nodeId, newType) {
+            if (!currentData)
+                return;
+            const node = currentData.nodes.find((n) => n.id === nodeId);
+            if (!node)
+                return;
+            node.type = newType;
+            node.updatedAt = new Date().toISOString();
+            save().then(() => infoPanel.show([nodeId], currentData));
+        },
+        onDeleteNode(nodeId) {
+            if (!currentData)
+                return;
+            currentData.nodes = currentData.nodes.filter((n) => n.id !== nodeId);
+            currentData.edges = currentData.edges.filter((e) => e.sourceId !== nodeId && e.targetId !== nodeId);
+            save();
+        },
+        onDeleteEdge(edgeId) {
+            if (!currentData)
+                return;
+            const selectedNodeId = currentData.edges.find((e) => e.id === edgeId)?.sourceId;
+            currentData.edges = currentData.edges.filter((e) => e.id !== edgeId);
+            save().then(() => {
+                if (selectedNodeId && currentData) {
+                    infoPanel.show([selectedNodeId], currentData);
+                }
+            });
+        },
+        onAddProperty(nodeId, key, value) {
+            if (!currentData)
+                return;
+            const node = currentData.nodes.find((n) => n.id === nodeId);
+            if (!node)
+                return;
+            node.properties[key] = value;
+            node.updatedAt = new Date().toISOString();
+            save().then(() => infoPanel.show([nodeId], currentData));
+        },
+    }, (nodeId) => {
+        canvas.panToNode(nodeId);
+    });
+    canvas = initCanvas(canvasContainer, (nodeIds) => {
+        if (nodeIds && nodeIds.length > 0 && currentData) {
+            infoPanel.show(nodeIds, currentData);
+        }
+        else {
+            infoPanel.hide();
+        }
+    });
+    const search = initSearch(canvasContainer);
+    search.onFilterChange((ids) => {
+        canvas.setFilteredNodeIds(ids);
+    });
+    search.onNodeSelect((nodeId) => {
+        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.setOntologyData(currentData);
+        },
+        onRename: async (oldName, newName) => {
+            await renameOntology(oldName, newName);
+            if (activeOntology === oldName) {
+                activeOntology = newName;
+            }
+            const updated = await listOntologies();
+            sidebar.setSummaries(updated);
+            sidebar.setActive(activeOntology);
+            if (activeOntology === newName) {
+                currentData = await loadOntology(newName);
+                canvas.loadGraph(currentData);
+                search.setOntologyData(currentData);
+            }
+        },
+    });
+    // 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.setOntologyData(currentData);
+    }
+    // Keyboard shortcut: / or Ctrl+K to focus search
+    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();
+        }
+    });
+    // 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 (activeOntology) {
+                try {
+                    currentData = await loadOntology(activeOntology);
+                    canvas.loadGraph(currentData);
+                    search.setOntologyData(currentData);
+                }
+                catch {
+                    // Ontology may have been deleted
+                }
+            }
+        });
+    }
+}
+main();

package/dist/search.d.ts

@@ -0,0 +1,8 @@
+import type { OntologyData } from "backpack-ontology";
+export declare function initSearch(container: HTMLElement): {
+    setOntologyData(newData: OntologyData | null): void;
+    onFilterChange(cb: (ids: Set<string> | null) => void): void;
+    onNodeSelect(cb: (nodeId: string) => void): void;
+    clear(): void;
+    focus(): void;
+};

package/dist/search.js

@@ -0,0 +1,229 @@
+import { getColor } from "./colors";
+/** Extract a display label from a node — first string property value, fallback to id. */
+function nodeLabel(node) {
+    for (const value of Object.values(node.properties)) {
+        if (typeof value === "string")
+            return value;
+    }
+    return node.id;
+}
+/** 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) {
+    let data = null;
+    let filterCallback = null;
+    let selectCallback = null;
+    let activeTypes = new Set();
+    let debounceTimer = null;
+    // --- DOM ---
+    const overlay = document.createElement("div");
+    overlay.className = "search-overlay hidden";
+    const inputWrap = document.createElement("div");
+    inputWrap.className = "search-input-wrap";
+    const input = document.createElement("input");
+    input.className = "search-input";
+    input.type = "text";
+    input.placeholder = "Search nodes...";
+    input.setAttribute("autocomplete", "off");
+    input.setAttribute("spellcheck", "false");
+    const kbd = document.createElement("kbd");
+    kbd.className = "search-kbd";
+    kbd.textContent = "/";
+    inputWrap.appendChild(input);
+    inputWrap.appendChild(kbd);
+    const results = document.createElement("ul");
+    results.className = "search-results hidden";
+    const chips = document.createElement("div");
+    chips.className = "type-chips";
+    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 ---
+    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)
+            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)) {
+                ids.add(node.id);
+            }
+        }
+        return ids;
+    }
+    function applyFilter() {
+        const ids = getMatchingIds();
+        filterCallback?.(ids);
+        updateResults();
+    }
+    function updateResults() {
+        results.innerHTML = "";
+        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)
+                    break;
+            }
+        }
+        if (matches.length === 0) {
+            results.classList.add("hidden");
+            return;
+        }
+        for (const node of matches) {
+            const li = document.createElement("li");
+            li.className = "search-result-item";
+            const dot = document.createElement("span");
+            dot.className = "search-result-dot";
+            dot.style.backgroundColor = getColor(node.type);
+            const label = document.createElement("span");
+            label.className = "search-result-label";
+            const text = nodeLabel(node);
+            label.textContent = text.length > 36 ? text.slice(0, 34) + "..." : text;
+            const type = document.createElement("span");
+            type.className = "search-result-type";
+            type.textContent = node.type;
+            li.appendChild(dot);
+            li.appendChild(label);
+            li.appendChild(type);
+            li.addEventListener("click", () => {
+                selectCallback?.(node.id);
+                input.value = "";
+                results.classList.add("hidden");
+                applyFilter();
+            });
+            results.appendChild(li);
+        }
+        results.classList.remove("hidden");
+    }
+    // --- Input events ---
+    input.addEventListener("input", () => {
+        if (debounceTimer)
+            clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(applyFilter, 150);
+    });
+    input.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+            input.value = "";
+            input.blur();
+            results.classList.add("hidden");
+            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)
+            kbd.classList.remove("hidden");
+    });
+    // --- Public API ---
+    return {
+        setOntologyData(newData) {
+            data = newData;
+            input.value = "";
+            results.classList.add("hidden");
+            if (data && data.nodes.length > 0) {
+                overlay.classList.remove("hidden");
+                buildChips();
+            }
+            else {
+                overlay.classList.add("hidden");
+            }
+        },
+        onFilterChange(cb) {
+            filterCallback = cb;
+        },
+        onNodeSelect(cb) {
+            selectCallback = cb;
+        },
+        clear() {
+            input.value = "";
+            results.classList.add("hidden");
+            activeTypes.clear();
+            filterCallback?.(null);
+        },
+        focus() {
+            input.focus();
+        },
+    };
+}

package/dist/sidebar.d.ts

@@ -0,0 +1,9 @@
+import type { OntologySummary } from "backpack-ontology";
+export interface SidebarCallbacks {
+    onSelect: (name: string) => void;
+    onRename?: (oldName: string, newName: string) => void;
+}
+export declare function initSidebar(container: HTMLElement, onSelectOrCallbacks: ((name: string) => void) | SidebarCallbacks): {
+    setSummaries(summaries: OntologySummary[]): void;
+    setActive(name: string): void;
+};

package/dist/sidebar.js

@@ -0,0 +1,103 @@
+export function initSidebar(container, onSelectOrCallbacks) {
+    const cbs = typeof onSelectOrCallbacks === "function"
+        ? { onSelect: onSelectOrCallbacks }
+        : onSelectOrCallbacks;
+    // Build DOM
+    const heading = document.createElement("h2");
+    heading.textContent = "Backpack Ontology Viewer";
+    const input = document.createElement("input");
+    input.type = "text";
+    input.placeholder = "Filter...";
+    input.id = "filter";
+    const list = document.createElement("ul");
+    list.id = "ontology-list";
+    const footer = document.createElement("div");
+    footer.className = "sidebar-footer";
+    footer.innerHTML =
+        '<a href="mailto:support@backpackontology.com">support@backpackontology.com</a>' +
+            "<span>Feedback & support</span>";
+    container.appendChild(heading);
+    container.appendChild(input);
+    container.appendChild(list);
+    container.appendChild(footer);
+    let items = [];
+    let activeName = "";
+    // Filter
+    input.addEventListener("input", () => {
+        const query = input.value.toLowerCase();
+        for (const item of items) {
+            const name = item.dataset.name ?? "";
+            item.style.display = name.includes(query) ? "" : "none";
+        }
+    });
+    return {
+        setSummaries(summaries) {
+            list.innerHTML = "";
+            items = summaries.map((s) => {
+                const li = document.createElement("li");
+                li.className = "ontology-item";
+                li.dataset.name = s.name;
+                const nameSpan = document.createElement("span");
+                nameSpan.className = "name";
+                nameSpan.textContent = s.name;
+                const statsSpan = document.createElement("span");
+                statsSpan.className = "stats";
+                statsSpan.textContent = `${s.nodeCount} nodes, ${s.edgeCount} edges`;
+                li.appendChild(nameSpan);
+                li.appendChild(statsSpan);
+                if (cbs.onRename) {
+                    const editBtn = document.createElement("button");
+                    editBtn.className = "sidebar-edit-btn";
+                    editBtn.textContent = "\u270E";
+                    editBtn.title = "Rename";
+                    const renameCb = cbs.onRename;
+                    editBtn.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        const input = document.createElement("input");
+                        input.type = "text";
+                        input.className = "sidebar-rename-input";
+                        input.value = s.name;
+                        nameSpan.textContent = "";
+                        nameSpan.appendChild(input);
+                        editBtn.style.display = "none";
+                        input.focus();
+                        input.select();
+                        const finish = () => {
+                            const val = input.value.trim();
+                            if (val && val !== s.name) {
+                                renameCb(s.name, val);
+                            }
+                            else {
+                                nameSpan.textContent = s.name;
+                                editBtn.style.display = "";
+                            }
+                        };
+                        input.addEventListener("blur", finish);
+                        input.addEventListener("keydown", (ke) => {
+                            if (ke.key === "Enter")
+                                input.blur();
+                            if (ke.key === "Escape") {
+                                input.value = s.name;
+                                input.blur();
+                            }
+                        });
+                    });
+                    li.appendChild(editBtn);
+                }
+                li.addEventListener("click", () => cbs.onSelect(s.name));
+                list.appendChild(li);
+                return li;
+            });
+            // Re-apply active state
+            if (activeName) {
+                this.setActive(activeName);
+            }
+        },
+        setActive(name) {
+            activeName = name;
+            for (const item of items) {
+                item.classList.toggle("active", item.dataset.name === name);
+            }
+        },
+    };
+}