ltcai 3.6.0 → 4.0.1

package/static/v3/js/views/graph-canvas.17c15d65.js

@@ -0,0 +1,509 @@
+/* ============================================================================
+ * Graph canvas — force-directed renderer for the Knowledge Graph explorer.
+ * Ports the legacy static/scripts/graph.js physics (pairwise repulsion +
+ * edge springs + center gravity + velocity damping) onto a dependency-free
+ * <canvas>. Interactions: pointer-event node drag, wheel zoom + drag pan,
+ * two-pointer pinch zoom, hover highlight, click-to-select callback,
+ * double-click to refit.
+ *
+ * Honesty + design rules:
+ *  - Renders ONLY the nodes/edges it is given — never fabricates data.
+ *  - Every color is resolved from design tokens via getComputedStyle at draw
+ *    time (light/dark aware); nothing is hardcoded.
+ *  - The RAF loop self-suspends when the simulation settles, when the
+ *    document is hidden, and when the canvas leaves the DOM; interactions,
+ *    resize, theme flips and re-attachment wake it.
+ * ========================================================================== */
+
+const WORLD_W = 1000;            // seed-layout world units (camera-independent)
+const WORLD_H = 620;
+const MIN_SCALE = 0.15;
+const MAX_SCALE = 4;
+const SETTLE_ENERGY = 0.05;      // total kinetic energy below which RAF pauses
+const REPULSION = 2200;
+const SPRING = 0.0042;
+const DAMPING = 0.85;
+const REST_LENGTH = 120;
+const CLICK_SLOP_PX = 5;         // pointer travel under this counts as a click
+
+/**
+ * createGraphCanvas({ colorFor, onSelect })
+ *  - colorFor(type) → a token reference like "var(--lt3-pillar-graph)".
+ *  - onSelect(id|null) — fired on canvas click (toggle) and empty-space click.
+ * Returns { el, setData({nodes, edges}), setSelected(id|null), destroy() }.
+ */
+export function createGraphCanvas({ colorFor, onSelect } = {}) {
+  const canvas = document.createElement("canvas");
+  canvas.setAttribute("role", "img");
+  canvas.setAttribute("aria-label", "Knowledge graph");
+  const ctx = canvas.getContext("2d");
+
+  let nodes = [];
+  let edges = [];
+  let byId = new Map();
+  let cam = { scale: 1, tx: 0, ty: 0 };
+  let width = 0;
+  let height = 0;
+  let hovered = null;
+  let selectedId = null;
+  let dragging = null;
+  let panning = null;
+  let pinch = null;
+  let pressTravel = Infinity;
+  const pointers = new Map();
+  let raf = 0;
+  let needsFit = false;
+  let tokens = null;
+  const typeColors = new Map();
+  let destroyed = false;
+
+  /* ── design tokens (resolved, never hardcoded) ─────────────────────────── */
+  function readVar(style, name, fallback) {
+    const v = (style.getPropertyValue(name) || "").trim();
+    return v || fallback;
+  }
+
+  function refreshTokens() {
+    const style = getComputedStyle(canvas.isConnected ? canvas : document.documentElement);
+    const text = readVar(style, "--text", style.color);
+    tokens = {
+      text,
+      surface: readVar(style, "--surface", readVar(style, "--bg", text)),
+      edge: readVar(style, "--border-strong", readVar(style, "--border", text)),
+      accent: readVar(style, "--accent", text),
+      muted: readVar(style, "--muted", text),
+      font: style.fontFamily || "system-ui",
+    };
+    typeColors.clear();
+  }
+
+  function nodeColor(type) {
+    if (!typeColors.has(type)) {
+      const ref = colorFor ? String(colorFor(type) || "") : "";
+      const m = /^var\((--[\w-]+)/.exec(ref.trim());
+      const style = getComputedStyle(document.documentElement);
+      typeColors.set(type, m ? readVar(style, m[1], tokens.accent) : tokens.accent);
+    }
+    return typeColors.get(type);
+  }
+
+  /* ── data ──────────────────────────────────────────────────────────────── */
+  function setData(data) {
+    const src = data || {};
+    byId = new Map();
+    nodes = (src.nodes || []).map((n) => {
+      const node = {
+        id: n.id,
+        label: String(n.label || n.id || ""),
+        type: n.type || "Entity",
+        weight: clamp(Number(n.weight) || 0, 0, 1),
+        seedX: Number.isFinite(n.x) ? n.x : null,
+        seedY: Number.isFinite(n.y) ? n.y : null,
+        x: 0, y: 0, vx: 0, vy: 0, r: 10, degree: 0,
+      };
+      byId.set(node.id, node);
+      return node;
+    });
+    edges = (src.edges || [])
+      .filter((e) => byId.has(e.from) && byId.has(e.to))
+      .map((e) => ({
+        from: e.from,
+        to: e.to,
+        weight: Number(e.weight) || 1,
+        source: byId.get(e.from),
+        target: byId.get(e.to),
+      }));
+    edges.forEach((e) => { e.source.degree++; e.target.degree++; });
+    nodes.forEach((n) => {
+      n.r = clamp(8 + n.weight * 10 + Math.sqrt(n.degree) * 1.6, 8, 28);
+    });
+    if (selectedId && !byId.has(selectedId)) selectedId = null;
+    hovered = null;
+    dragging = null;
+    seedLayout();
+    needsFit = true;
+    canvas.dataset.nodeCount = String(nodes.length);
+    canvas.setAttribute("aria-label",
+      `Knowledge graph: ${nodes.length} entities, ${edges.length} relations. Use the inspector list for keyboard access.`);
+    wake();
+  }
+
+  function seedLayout() {
+    if (!nodes.length) return;
+    const hasCoords = nodes.every((n) => n.seedX !== null && n.seedY !== null);
+    if (hasCoords) {
+      // Backend-provided normalized [0..1] coordinates seed the simulation.
+      nodes.forEach((n) => {
+        n.x = 60 + n.seedX * (WORLD_W - 120);
+        n.y = 50 + n.seedY * (WORLD_H - 100);
+      });
+      return;
+    }
+    // Golden-angle spiral by weight rank: heavy nodes near the center.
+    const golden = Math.PI * (3 - Math.sqrt(5));
+    const maxR = Math.min(WORLD_W, WORLD_H) * 0.42;
+    const order = [...nodes].sort((a, b) => b.weight - a.weight);
+    order.forEach((n, rank) => {
+      const radius = rank === 0 ? 0 : maxR * Math.sqrt(rank / Math.max(1, nodes.length - 1));
+      const angle = rank * golden;
+      n.x = WORLD_W / 2 + Math.cos(angle) * radius;
+      n.y = WORLD_H / 2 + Math.sin(angle) * radius * 0.72;
+    });
+  }
+
+  /* ── physics (ported from legacy graph.js step()) ──────────────────────── */
+  function step() {
+    const centerPull = selectedId ? 0.00035 : 0.00055;
+    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];
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+        const d2 = Math.max(120, dx * dx + dy * dy);
+        const force = REPULSION / d2;
+        a.vx += dx * force; a.vy += dy * force;
+        b.vx -= dx * force; b.vy -= dy * force;
+      }
+    }
+    edges.forEach((e) => {
+      const dx = e.target.x - e.source.x;
+      const dy = e.target.y - e.source.y;
+      const dist = Math.max(1, Math.hypot(dx, dy));
+      const force = (dist - REST_LENGTH) * (SPRING + Math.min(0.003, e.weight * 0.0012));
+      e.source.vx += (dx / dist) * force;
+      e.source.vy += (dy / dist) * force;
+      e.target.vx -= (dx / dist) * force;
+      e.target.vy -= (dy / dist) * force;
+    });
+    let energy = 0;
+    nodes.forEach((n) => {
+      if (n === dragging) return;
+      n.vx += (WORLD_W / 2 - n.x) * centerPull;
+      n.vy += (WORLD_H / 2 - n.y) * centerPull;
+      n.vx *= DAMPING;
+      n.vy *= DAMPING;
+      n.x += n.vx;
+      n.y += n.vy;
+      energy += n.vx * n.vx + n.vy * n.vy;
+    });
+    return energy;
+  }
+
+  /* ── camera ────────────────────────────────────────────────────────────── */
+  function toWorld(px, py) {
+    return { x: (px - cam.tx) / cam.scale, y: (py - cam.ty) / cam.scale };
+  }
+
+  function applyZoom(px, py, factor) {
+    const next = clamp(cam.scale * factor, MIN_SCALE, MAX_SCALE);
+    cam.tx = px - (px - cam.tx) * (next / cam.scale);
+    cam.ty = py - (py - cam.ty) * (next / cam.scale);
+    cam.scale = next;
+  }
+
+  function fitToScreen() {
+    if (!nodes.length || !width || !height) return;
+    let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
+    nodes.forEach((n) => {
+      x0 = Math.min(x0, n.x - n.r); x1 = Math.max(x1, n.x + n.r);
+      y0 = Math.min(y0, n.y - n.r); y1 = Math.max(y1, n.y + n.r);
+    });
+    const margin = 48;
+    cam.scale = clamp(Math.min(
+      (width - margin * 2) / Math.max(1, x1 - x0),
+      (height - margin * 2) / Math.max(1, y1 - y0),
+    ), MIN_SCALE, 2.5);
+    cam.tx = (width - (x0 + x1) * cam.scale) / 2;
+    cam.ty = (height - (y0 + y1) * cam.scale) / 2;
+  }
+
+  function centerOnNode(node) {
+    cam.tx = width / 2 - node.x * cam.scale;
+    cam.ty = height / 2 - node.y * cam.scale;
+  }
+
+  function nodeOnScreen(node) {
+    const sx = node.x * cam.scale + cam.tx;
+    const sy = node.y * cam.scale + cam.ty;
+    return sx >= 0 && sx <= width && sy >= 0 && sy <= height;
+  }
+
+  function nodeAt(px, py) {
+    const w = toWorld(px, py);
+    let best = null;
+    let bestDist = Infinity;
+    nodes.forEach((n) => {
+      const dist = Math.hypot(n.x - w.x, n.y - w.y);
+      if (dist < n.r + 8 / cam.scale && dist < bestDist) { best = n; bestDist = dist; }
+    });
+    return best;
+  }
+
+  /* ── render loop (self-suspending) ─────────────────────────────────────── */
+  function wake() {
+    if (destroyed || raf || document.hidden || !canvas.isConnected) return;
+    raf = requestAnimationFrame(draw);
+  }
+
+  function neighborSetOf(node) {
+    const ids = new Set([node.id]);
+    edges.forEach((e) => {
+      if (e.from === node.id) ids.add(e.to);
+      if (e.to === node.id) ids.add(e.from);
+    });
+    return ids;
+  }
+
+  function draw() {
+    raf = 0;
+    if (destroyed || document.hidden || !canvas.isConnected) return;
+    if (!tokens) refreshTokens();
+    const energy = step();
+    if (needsFit) { fitToScreen(); needsFit = false; }
+
+    ctx.clearRect(0, 0, width, height);
+    ctx.save();
+    ctx.translate(cam.tx, cam.ty);
+    ctx.scale(cam.scale, cam.scale);
+
+    const selected = selectedId ? byId.get(selectedId) : null;
+    const active = hovered || selected;
+    const neighbors = active ? neighborSetOf(active) : null;
+    // LOD: drop labels when zoomed far out or the mesh is dense.
+    const showLabels = cam.scale >= 0.55 && nodes.length <= 200;
+
+    edges.forEach((e) => {
+      const lit = neighbors && neighbors.has(e.from) && neighbors.has(e.to);
+      ctx.globalAlpha = neighbors ? (lit ? 0.85 : 0.07) : 0.35;
+      ctx.strokeStyle = tokens.edge;
+      ctx.lineWidth = (1 + Math.min(2.4, e.weight * 0.6) + (lit ? 0.5 : 0)) / cam.scale;
+      ctx.beginPath();
+      ctx.moveTo(e.source.x, e.source.y);
+      ctx.lineTo(e.target.x, e.target.y);
+      ctx.stroke();
+    });
+
+    nodes.forEach((n) => {
+      const isSelected = n === selected;
+      const isHovered = n === hovered;
+      const alpha = neighbors ? (neighbors.has(n.id) ? 1 : 0.14) : 1;
+      const radius = n.r + (isSelected ? 3 : isHovered ? 2 : 0);
+
+      ctx.globalAlpha = alpha;
+      ctx.fillStyle = nodeColor(n.type);
+      ctx.beginPath();
+      ctx.arc(n.x, n.y, radius, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.strokeStyle = tokens.surface;
+      ctx.lineWidth = 2 / cam.scale;
+      ctx.stroke();
+
+      if (isSelected || isHovered) {
+        ctx.strokeStyle = isSelected ? tokens.accent : nodeColor(n.type);
+        ctx.lineWidth = (isSelected ? 2.6 : 1.8) / cam.scale;
+        ctx.globalAlpha = alpha * 0.6;
+        ctx.beginPath();
+        ctx.arc(n.x, n.y, radius + 5 / cam.scale, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.globalAlpha = alpha;
+      }
+
+      if (showLabels || isSelected || isHovered) {
+        const label = n.label.length > 22 ? n.label.slice(0, 21) + "…" : n.label;
+        const fs = Math.max(9.5, 12 / cam.scale);
+        ctx.font = `600 ${fs}px ${tokens.font}`;
+        const lw = ctx.measureText(label).width;
+        const lx = n.x - lw / 2;
+        const ly = n.y + radius + (8 / cam.scale) + fs;
+        const pad = 4 / cam.scale;
+        ctx.globalAlpha = alpha > 0.5 ? alpha * 0.85 : alpha * 0.25;
+        ctx.fillStyle = tokens.surface;
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(lx - pad, ly - fs, lw + pad * 2, fs + pad * 1.6, 5 / cam.scale);
+        else ctx.rect(lx - pad, ly - fs, lw + pad * 2, fs + pad * 1.6);
+        ctx.fill();
+        ctx.globalAlpha = alpha;
+        ctx.fillStyle = tokens.text;
+        ctx.fillText(label, lx, ly);
+      }
+    });
+
+    ctx.globalAlpha = 1;
+    ctx.restore();
+    if (energy > SETTLE_ENERGY || dragging) raf = requestAnimationFrame(draw);
+  }
+
+  /* ── interactions (pointer events: mouse + touch + pen) ────────────────── */
+  function localPoint(e) {
+    const rect = canvas.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  }
+
+  function pinchState() {
+    const [a, b] = [...pointers.values()];
+    return { d: Math.hypot(a.x - b.x, a.y - b.y), cx: (a.x + b.x) / 2, cy: (a.y + b.y) / 2 };
+  }
+
+  function onPointerDown(e) {
+    canvas.setPointerCapture(e.pointerId);
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pointers.size === 2) {
+      dragging = null;
+      panning = null;
+      pinch = pinchState();
+      return;
+    }
+    pressTravel = 0;
+    const p = localPoint(e);
+    const node = nodeAt(p.x, p.y);
+    if (node) {
+      dragging = node;
+    } else {
+      panning = { sx: e.clientX, sy: e.clientY, tx0: cam.tx, ty0: cam.ty };
+      canvas.style.cursor = "grabbing";
+    }
+    wake();
+  }
+
+  function onPointerMove(e) {
+    const prev = pointers.get(e.pointerId);
+    if (prev) {
+      pressTravel += Math.hypot(e.clientX - prev.x, e.clientY - prev.y);
+      pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    }
+    if (pinch && pointers.size === 2) {
+      const next = pinchState();
+      const rect = canvas.getBoundingClientRect();
+      applyZoom(next.cx - rect.left, next.cy - rect.top, next.d / Math.max(1, pinch.d));
+      pinch = next;
+      wake();
+      return;
+    }
+    if (dragging) {
+      const p = localPoint(e);
+      const w = toWorld(p.x, p.y);
+      dragging.x = w.x; dragging.y = w.y;
+      dragging.vx = 0; dragging.vy = 0;
+      wake();
+    } else if (panning) {
+      cam.tx = panning.tx0 + (e.clientX - panning.sx);
+      cam.ty = panning.ty0 + (e.clientY - panning.sy);
+      wake();
+    } else {
+      const p = localPoint(e);
+      const node = nodeAt(p.x, p.y);
+      if (node !== hovered) { hovered = node; wake(); }
+      canvas.style.cursor = node ? "pointer" : "grab";
+    }
+  }
+
+  function onPointerUp(e) {
+    pointers.delete(e.pointerId);
+    if (pointers.size < 2) pinch = null;
+    dragging = null;
+    panning = null;
+    canvas.style.cursor = "grab";
+    if (pressTravel < CLICK_SLOP_PX) {
+      const p = localPoint(e);
+      const node = nodeAt(p.x, p.y);
+      const next = node && node.id !== selectedId ? node.id : null;
+      selectedId = next;
+      if (onSelect) onSelect(next);
+    }
+    pressTravel = Infinity;
+    wake();
+  }
+
+  function onPointerCancel(e) {
+    pointers.delete(e.pointerId);
+    pinch = null;
+    dragging = null;
+    panning = null;
+    pressTravel = Infinity;
+  }
+
+  function onPointerLeave() {
+    if (hovered) { hovered = null; wake(); }
+  }
+
+  function onWheel(e) {
+    e.preventDefault();
+    const p = localPoint(e);
+    applyZoom(p.x, p.y, e.deltaY < 0 ? 1.12 : 1 / 1.12);
+    wake();
+  }
+
+  function onDblClick() {
+    fitToScreen();
+    wake();
+  }
+
+  function onVisibility() {
+    if (!document.hidden) wake();
+  }
+
+  /* ── environment: resize (DPR-aware) + theme flips ─────────────────────── */
+  function resize() {
+    const rect = canvas.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+    width = rect.width;
+    height = rect.height;
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.floor(width * dpr);
+    canvas.height = Math.floor(height * dpr);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    wake();
+  }
+
+  const resizeObserver = new ResizeObserver(resize);
+  resizeObserver.observe(canvas);
+
+  const themeObserver = new MutationObserver(() => { refreshTokens(); wake(); });
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["data-lt-theme"] });
+  const colorScheme = window.matchMedia("(prefers-color-scheme: dark)");
+  const onScheme = () => { refreshTokens(); wake(); };
+  colorScheme.addEventListener("change", onScheme);
+
+  canvas.addEventListener("pointerdown", onPointerDown);
+  canvas.addEventListener("pointermove", onPointerMove);
+  canvas.addEventListener("pointerup", onPointerUp);
+  canvas.addEventListener("pointercancel", onPointerCancel);
+  canvas.addEventListener("pointerleave", onPointerLeave);
+  canvas.addEventListener("wheel", onWheel, { passive: false });
+  canvas.addEventListener("dblclick", onDblClick);
+  document.addEventListener("visibilitychange", onVisibility);
+
+  function setSelected(id) {
+    selectedId = id || null;
+    const node = selectedId ? byId.get(selectedId) : null;
+    if (node && width && !nodeOnScreen(node)) centerOnNode(node);
+    wake();
+  }
+
+  function destroy() {
+    destroyed = true;
+    if (raf) { cancelAnimationFrame(raf); raf = 0; }
+    resizeObserver.disconnect();
+    themeObserver.disconnect();
+    colorScheme.removeEventListener("change", onScheme);
+    document.removeEventListener("visibilitychange", onVisibility);
+    canvas.removeEventListener("pointerdown", onPointerDown);
+    canvas.removeEventListener("pointermove", onPointerMove);
+    canvas.removeEventListener("pointerup", onPointerUp);
+    canvas.removeEventListener("pointercancel", onPointerCancel);
+    canvas.removeEventListener("pointerleave", onPointerLeave);
+    canvas.removeEventListener("wheel", onWheel);
+    canvas.removeEventListener("dblclick", onDblClick);
+    pointers.clear();
+    nodes = [];
+    edges = [];
+    byId = new Map();
+  }
+
+  return { el: canvas, setData, setSelected, destroy };
+}
+
+function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}