backpack-viewer 0.1.3 → 0.2.5

package/src/layout.ts

@@ -1,138 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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);
-      }
-    },
-  };
-}

package/src/style.css

@@ -1,337 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: system-ui, -apple-system, sans-serif;
-  background: #141414;
-  color: #d4d4d4;
-  overflow: hidden;
-}
-
-#app {
-  display: flex;
-  height: 100vh;
-  width: 100vw;
-}
-
-/* --- Sidebar --- */
-
-#sidebar {
-  width: 280px;
-  min-width: 280px;
-  background: #1a1a1a;
-  border-right: 1px solid #2a2a2a;
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  overflow-y: auto;
-}
-
-#sidebar h2 {
-  font-size: 13px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: #737373;
-  margin-bottom: 14px;
-}
-
-#sidebar input {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid #2a2a2a;
-  border-radius: 6px;
-  background: #141414;
-  color: #d4d4d4;
-  font-size: 13px;
-  outline: none;
-  margin-bottom: 12px;
-}
-
-#sidebar input:focus {
-  border-color: #d4a27f;
-}
-
-#sidebar input::placeholder {
-  color: #525252;
-}
-
-#ontology-list {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.ontology-item {
-  padding: 10px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.ontology-item:hover {
-  background: #222222;
-}
-
-.ontology-item.active {
-  background: #2a2a2a;
-}
-
-.ontology-item .name {
-  display: block;
-  font-size: 13px;
-  font-weight: 500;
-  color: #d4d4d4;
-}
-
-.ontology-item .stats {
-  display: block;
-  font-size: 11px;
-  color: #525252;
-  margin-top: 2px;
-}
-
-/* --- Sidebar Footer --- */
-
-.sidebar-footer {
-  margin-top: auto;
-  padding-top: 16px;
-  border-top: 1px solid #2a2a2a;
-  text-align: center;
-}
-
-.sidebar-footer a {
-  display: block;
-  font-size: 12px;
-  font-weight: 500;
-  color: #d4a27f;
-  text-decoration: none;
-  margin-bottom: 4px;
-}
-
-.sidebar-footer a:hover {
-  color: #e8b898;
-}
-
-.sidebar-footer span {
-  display: block;
-  font-size: 10px;
-  color: #525252;
-}
-
-/* --- Canvas --- */
-
-#canvas-container {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-#graph-canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  cursor: grab;
-}
-
-#graph-canvas:active {
-  cursor: grabbing;
-}
-
-/* --- Info Panel --- */
-
-.info-panel {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  width: 360px;
-  max-height: calc(100vh - 32px);
-  background: #1a1a1a;
-  border: 1px solid #2a2a2a;
-  border-radius: 10px;
-  overflow-y: auto;
-  padding: 20px;
-  z-index: 10;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
-}
-
-.info-panel.hidden {
-  display: none;
-}
-
-.info-close {
-  position: absolute;
-  top: 12px;
-  right: 14px;
-  background: none;
-  border: none;
-  color: #737373;
-  font-size: 20px;
-  cursor: pointer;
-  line-height: 1;
-  padding: 4px;
-}
-
-.info-close:hover {
-  color: #d4d4d4;
-}
-
-/* Header */
-
-.info-header {
-  margin-bottom: 16px;
-}
-
-.info-type-badge {
-  display: inline-block;
-  padding: 3px 10px;
-  border-radius: 12px;
-  font-size: 11px;
-  font-weight: 600;
-  color: #141414;
-  margin-bottom: 8px;
-}
-
-.info-label {
-  font-size: 18px;
-  font-weight: 600;
-  color: #e5e5e5;
-  margin-bottom: 4px;
-  word-break: break-word;
-}
-
-.info-id {
-  display: block;
-  font-size: 11px;
-  color: #525252;
-  font-family: monospace;
-}
-
-/* Sections */
-
-.info-section {
-  margin-bottom: 16px;
-}
-
-.info-section-title {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: #737373;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid #2a2a2a;
-}
-
-/* Properties */
-
-.info-props {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 4px 12px;
-}
-
-.info-props dt {
-  font-size: 12px;
-  color: #737373;
-  padding-top: 2px;
-}
-
-.info-props dd {
-  font-size: 12px;
-  color: #d4d4d4;
-  word-break: break-word;
-}
-
-.info-value {
-  white-space: pre-wrap;
-}
-
-.info-array {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.info-tag {
-  display: inline-block;
-  padding: 2px 8px;
-  background: #222222;
-  border-radius: 4px;
-  font-size: 11px;
-  color: #a3a3a3;
-}
-
-.info-json {
-  font-size: 11px;
-  font-family: monospace;
-  color: #a3a3a3;
-  background: #111111;
-  padding: 6px 8px;
-  border-radius: 4px;
-  overflow-x: auto;
-  white-space: pre;
-}
-
-/* Connections */
-
-.info-connections {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.info-connection {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
-  background: #1e1e1e;
-  border-radius: 6px;
-  font-size: 12px;
-  flex-wrap: wrap;
-}
-
-.info-target-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.info-arrow {
-  color: #525252;
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.info-edge-type {
-  color: #737373;
-  font-size: 11px;
-  font-weight: 500;
-}
-
-.info-target {
-  color: #d4d4d4;
-  font-weight: 500;
-}
-
-.info-edge-props {
-  width: 100%;
-  padding-top: 4px;
-  padding-left: 20px;
-}
-
-.info-edge-prop {
-  display: block;
-  font-size: 11px;
-  color: #525252;
-}

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "outDir": "./dist",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["vite/client"]
-  },
-  "include": ["src/**/*.ts"]
-}

package/tsconfig.node.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "types": ["node"]
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,75 +0,0 @@
-import { defineConfig, type Plugin } from "vite";
-import fs from "node:fs";
-import path from "node:path";
-import { JsonFileBackend, dataDir } from "backpack-ontology";
-import type { StorageBackend } from "backpack-ontology";
-
-function ontologyApiPlugin(): Plugin {
-  let storage: StorageBackend;
-
-  return {
-    name: "ontology-api",
-
-    configureServer(server) {
-      storage = new JsonFileBackend();
-      storage.initialize();
-
-      // Watch the ontologies directory for live updates from Claude/MCP
-      const ontologiesDir = path.join(dataDir(), "ontologies");
-      try {
-        fs.watch(ontologiesDir, { recursive: true }, () => {
-          server.ws.send({
-            type: "custom",
-            event: "ontology-change",
-            data: {},
-          });
-        });
-      } catch {
-        // Directory may not exist yet
-      }
-
-      server.middlewares.use((req, res, next) => {
-        if (!req.url?.startsWith("/api/ontologies")) return next();
-
-        const urlPath = req.url.replace(/\?.*$/, "");
-
-        // GET /api/ontologies
-        if (urlPath === "/api/ontologies") {
-          storage
-            .listOntologies()
-            .then((summaries) => {
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify(summaries));
-            })
-            .catch(() => {
-              res.setHeader("Content-Type", "application/json");
-              res.end("[]");
-            });
-          return;
-        }
-
-        // GET /api/ontologies/:name
-        const name = decodeURIComponent(
-          urlPath.replace("/api/ontologies/", "")
-        );
-        if (!name) return next();
-
-        storage
-          .loadOntology(name)
-          .then((data) => {
-            res.setHeader("Content-Type", "application/json");
-            res.end(JSON.stringify(data));
-          })
-          .catch(() => {
-            res.statusCode = 404;
-            res.setHeader("Content-Type", "application/json");
-            res.end(JSON.stringify({ error: "Ontology not found" }));
-          });
-      });
-    },
-  };
-}
-
-export default defineConfig({
-  plugins: [ontologyApiPlugin()],
-});