backpack-viewer 0.1.3

package/src/info-panel.ts

@@ -0,0 +1,230 @@
+import type { Node, Edge, OntologyData } from "backpack-ontology";
+import { getColor } from "./colors";
+
+/** Extract a display label from a node — first string property, fallback to id. */
+function nodeLabel(node: Node): string {
+  for (const value of Object.values(node.properties)) {
+    if (typeof value === "string") return value;
+  }
+  return node.id;
+}
+
+export function initInfoPanel(container: HTMLElement) {
+  const panel = document.createElement("div");
+  panel.id = "info-panel";
+  panel.className = "info-panel hidden";
+  container.appendChild(panel);
+
+  return {
+    show(nodeId: string, data: OntologyData) {
+      const node = data.nodes.find((n) => n.id === nodeId);
+      if (!node) return;
+
+      const connectedEdges = data.edges.filter(
+        (e) => e.sourceId === nodeId || e.targetId === nodeId
+      );
+
+      panel.innerHTML = "";
+      panel.classList.remove("hidden");
+
+      // Close button
+      const closeBtn = document.createElement("button");
+      closeBtn.className = "info-close";
+      closeBtn.textContent = "\u00d7";
+      closeBtn.addEventListener("click", () => this.hide());
+      panel.appendChild(closeBtn);
+
+      // Header: type badge + label
+      const header = document.createElement("div");
+      header.className = "info-header";
+
+      const typeBadge = document.createElement("span");
+      typeBadge.className = "info-type-badge";
+      typeBadge.textContent = node.type;
+      typeBadge.style.backgroundColor = getColor(node.type);
+
+      const label = document.createElement("h3");
+      label.className = "info-label";
+      label.textContent = nodeLabel(node);
+
+      const nodeIdEl = document.createElement("span");
+      nodeIdEl.className = "info-id";
+      nodeIdEl.textContent = node.id;
+
+      header.appendChild(typeBadge);
+      header.appendChild(label);
+      header.appendChild(nodeIdEl);
+      panel.appendChild(header);
+
+      // Properties section
+      const propKeys = Object.keys(node.properties);
+      if (propKeys.length > 0) {
+        const section = createSection("Properties");
+        const table = document.createElement("dl");
+        table.className = "info-props";
+
+        for (const key of propKeys) {
+          const dt = document.createElement("dt");
+          dt.textContent = key;
+
+          const dd = document.createElement("dd");
+          dd.appendChild(renderValue(node.properties[key]));
+
+          table.appendChild(dt);
+          table.appendChild(dd);
+        }
+
+        section.appendChild(table);
+        panel.appendChild(section);
+      }
+
+      // Connections section
+      if (connectedEdges.length > 0) {
+        const section = createSection(
+          `Connections (${connectedEdges.length})`
+        );
+        const list = document.createElement("ul");
+        list.className = "info-connections";
+
+        for (const edge of connectedEdges) {
+          const isOutgoing = edge.sourceId === nodeId;
+          const otherId = isOutgoing ? edge.targetId : edge.sourceId;
+          const otherNode = data.nodes.find((n) => n.id === otherId);
+          const otherLabel = otherNode ? nodeLabel(otherNode) : otherId;
+
+          const li = document.createElement("li");
+          li.className = "info-connection";
+
+          const arrow = document.createElement("span");
+          arrow.className = "info-arrow";
+          arrow.textContent = isOutgoing ? "\u2192" : "\u2190";
+
+          const edgeType = document.createElement("span");
+          edgeType.className = "info-edge-type";
+          edgeType.textContent = edge.type;
+
+          const target = document.createElement("span");
+          target.className = "info-target";
+          target.textContent = otherLabel;
+
+          if (otherNode) {
+            const dot = document.createElement("span");
+            dot.className = "info-target-dot";
+            dot.style.backgroundColor = getColor(otherNode.type);
+            li.appendChild(dot);
+          }
+
+          li.appendChild(arrow);
+          li.appendChild(edgeType);
+          li.appendChild(target);
+
+          // Edge properties (if any)
+          const edgePropKeys = Object.keys(edge.properties);
+          if (edgePropKeys.length > 0) {
+            const edgeProps = document.createElement("div");
+            edgeProps.className = "info-edge-props";
+            for (const key of edgePropKeys) {
+              const prop = document.createElement("span");
+              prop.className = "info-edge-prop";
+              prop.textContent = `${key}: ${formatValue(edge.properties[key])}`;
+              edgeProps.appendChild(prop);
+            }
+            li.appendChild(edgeProps);
+          }
+
+          list.appendChild(li);
+        }
+
+        section.appendChild(list);
+        panel.appendChild(section);
+      }
+
+      // Timestamps
+      const section = createSection("Timestamps");
+      const timestamps = document.createElement("dl");
+      timestamps.className = "info-props";
+
+      const createdDt = document.createElement("dt");
+      createdDt.textContent = "created";
+      const createdDd = document.createElement("dd");
+      createdDd.textContent = formatTimestamp(node.createdAt);
+
+      const updatedDt = document.createElement("dt");
+      updatedDt.textContent = "updated";
+      const updatedDd = document.createElement("dd");
+      updatedDd.textContent = formatTimestamp(node.updatedAt);
+
+      timestamps.appendChild(createdDt);
+      timestamps.appendChild(createdDd);
+      timestamps.appendChild(updatedDt);
+      timestamps.appendChild(updatedDd);
+      section.appendChild(timestamps);
+      panel.appendChild(section);
+    },
+
+    hide() {
+      panel.classList.add("hidden");
+      panel.innerHTML = "";
+    },
+
+    get visible() {
+      return !panel.classList.contains("hidden");
+    },
+  };
+}
+
+function createSection(title: string): HTMLElement {
+  const section = document.createElement("div");
+  section.className = "info-section";
+
+  const heading = document.createElement("h4");
+  heading.className = "info-section-title";
+  heading.textContent = title;
+  section.appendChild(heading);
+
+  return section;
+}
+
+/** Render any property value into a DOM element. Handles strings, arrays, numbers, objects. */
+function renderValue(value: unknown): HTMLElement {
+  if (Array.isArray(value)) {
+    const container = document.createElement("div");
+    container.className = "info-array";
+    for (const item of value) {
+      const tag = document.createElement("span");
+      tag.className = "info-tag";
+      tag.textContent = String(item);
+      container.appendChild(tag);
+    }
+    return container;
+  }
+
+  if (value !== null && typeof value === "object") {
+    const pre = document.createElement("pre");
+    pre.className = "info-json";
+    pre.textContent = JSON.stringify(value, null, 2);
+    return pre;
+  }
+
+  const span = document.createElement("span");
+  span.className = "info-value";
+  span.textContent = String(value ?? "");
+  return span;
+}
+
+/** Format a value for inline display. */
+function formatValue(value: unknown): string {
+  if (Array.isArray(value)) return value.map(String).join(", ");
+  if (value !== null && typeof value === "object")
+    return JSON.stringify(value);
+  return String(value ?? "");
+}
+
+function formatTimestamp(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleString();
+  } catch {
+    return iso;
+  }
+}

package/src/layout.ts

@@ -0,0 +1,138 @@
+import type { OntologyData } from "backpack-ontology";
+
+export interface LayoutNode {
+  id: string;
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  label: string;
+  type: string;
+}
+
+export interface LayoutEdge {
+  sourceId: string;
+  targetId: string;
+  type: string;
+}
+
+export interface LayoutState {
+  nodes: LayoutNode[];
+  edges: LayoutEdge[];
+  nodeMap: Map<string, LayoutNode>;
+}
+
+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: Record<string, unknown>, id: string): string {
+  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: OntologyData): LayoutState {
+  const radius = Math.sqrt(data.nodes.length) * REST_LENGTH * 0.5;
+  const nodeMap = new Map<string, LayoutNode>();
+
+  const nodes: LayoutNode[] = data.nodes.map((n, i) => {
+    const angle = (2 * Math.PI * i) / data.nodes.length;
+    const node: LayoutNode = {
+      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: LayoutEdge[] = 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: LayoutState, alpha: number): number {
+  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/src/main.ts

@@ -0,0 +1,68 @@
+import type { OntologyData } from "backpack-ontology";
+import { listOntologies, loadOntology } from "./api";
+import { initSidebar } from "./sidebar";
+import { initCanvas } from "./canvas";
+import { initInfoPanel } from "./info-panel";
+import "./style.css";
+
+let activeOntology = "";
+let currentData: OntologyData | null = null;
+
+async function main() {
+  const infoPanel = initInfoPanel(
+    document.getElementById("canvas-container")!
+  );
+
+  const canvas = initCanvas(
+    document.getElementById("canvas-container")!,
+    (nodeId) => {
+      if (nodeId && currentData) {
+        infoPanel.show(nodeId, currentData);
+      } else {
+        infoPanel.hide();
+      }
+    }
+  );
+
+  const sidebar = initSidebar(
+    document.getElementById("sidebar")!,
+    async (name) => {
+      activeOntology = name;
+      sidebar.setActive(name);
+      infoPanel.hide();
+      currentData = await loadOntology(name);
+      canvas.loadGraph(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);
+  }
+
+  // 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);
+        } catch {
+          // Ontology may have been deleted
+        }
+      }
+    });
+  }
+}
+
+main();

package/src/sidebar.ts

@@ -0,0 +1,80 @@
+import type { OntologySummary } from "backpack-ontology";
+
+export function initSidebar(
+  container: HTMLElement,
+  onSelect: (name: string) => void
+) {
+  // 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 & sponsorship</span>";
+
+  container.appendChild(heading);
+  container.appendChild(input);
+  container.appendChild(list);
+  container.appendChild(footer);
+
+  let items: HTMLLIElement[] = [];
+  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: OntologySummary[]) {
+      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);
+
+        li.addEventListener("click", () => onSelect(s.name));
+
+        list.appendChild(li);
+        return li;
+      });
+
+      // Re-apply active state
+      if (activeName) {
+        this.setActive(activeName);
+      }
+    },
+
+    setActive(name: string) {
+      activeName = name;
+      for (const item of items) {
+        item.classList.toggle("active", item.dataset.name === name);
+      }
+    },
+  };
+}