@knotpad/app 0.1.5 → 0.1.6

package/components/graph/graph-view.tsx

@@ -0,0 +1,322 @@
+"use client";
+
+import { useEffect, useRef, useCallback, useState, useImperativeHandle, forwardRef, useMemo } from "react";
+import * as d3 from "d3";
+import type { SimNode, SimLink, Props, GraphViewHandle } from "./graph-types";
+import { NODE_COLORS } from "./graph-types";
+import { createGraphDraw } from "./graph-draw";
+import { GraphLegend, GraphTooltip, GraphContextMenu } from "./graph-overlays";
+
+export type { GraphViewHandle } from "./graph-types";
+
+const GraphView = forwardRef<GraphViewHandle, Props>(function GraphView(
+  { nodes, edges, selectedNoteIds, searchQuery, onNoteSelect, onSelectionChange },
+  ref
+) {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const gRef = useRef<SVGGElement | null>(null);
+  const zoomRef = useRef<d3.ZoomBehavior<SVGSVGElement, unknown> | null>(null);
+  const transformRef = useRef<d3.ZoomTransform>(d3.zoomIdentity);
+  const hasAutoFitRef = useRef(false);
+
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [collapsedNodeIds, setCollapsedNodeIds] = useState<Set<string>>(new Set());
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; nodeId: string } | null>(null);
+  const [tooltip, setTooltip] = useState<{ x: number; y: number; label: string; type: string } | null>(null);
+
+  // Refs for visual state — updated without rebuilding the simulation
+  const selectedNodeIdRef = useRef<string | null>(null);
+  const highlightNodeIdsRef = useRef<Set<string>>(new Set());
+  const highlightEdgePairsRef = useRef<Set<string>>(new Set());
+  const dimmedRef = useRef<boolean>(false);
+  const nodeSelRef = useRef<d3.Selection<SVGGElement, SimNode, SVGGElement, unknown> | null>(null);
+  const linkSelRef = useRef<d3.Selection<SVGLineElement, SimLink, SVGGElement, unknown> | null>(null);
+
+  // Position cache: preserves node positions across simulation rebuilds
+  const positionsRef = useRef<Map<string, { x: number; y: number }>>(new Map());
+
+  const selectedNoteNodeIds = useMemo(() =>
+    new Set(selectedNoteIds.map((id) => `note-${id}`)),
+  [selectedNoteIds]);
+
+  // Build descendant map for expand/collapse via contains edges
+  const getDescendants = useCallback((nodeId: string) => {
+    const descendants = new Set<string>();
+    const queue = [nodeId];
+    while (queue.length > 0) {
+      const current = queue.shift()!;
+      for (const e of edges) {
+        if (e.source === current && e.type === "contains" && !descendants.has(e.target)) {
+          descendants.add(e.target);
+          queue.push(e.target);
+        }
+      }
+    }
+    return descendants;
+  }, [edges]);
+
+  // Compute visible nodes after collapse
+  const { visibleNodes, visibleEdges } = useMemo(() => {
+    const hidden = new Set<string>();
+    for (const id of collapsedNodeIds) {
+      for (const desc of getDescendants(id)) {
+        hidden.add(desc);
+      }
+    }
+    const vNodes = nodes.filter((n) => !hidden.has(n.id));
+    const vNodeIds = new Set(vNodes.map((n) => n.id));
+    const vEdges = edges.filter((e) => vNodeIds.has(e.source) && vNodeIds.has(e.target));
+    return { visibleNodes: vNodes, visibleEdges: vEdges };
+  }, [nodes, edges, collapsedNodeIds, getDescendants]);
+
+  // Build highlight sets (sidebar selection + graph click + search)
+  const { highlightNodeIds, highlightEdgePairs, dimmed } = useMemo(() => {
+    const hNodes = new Set<string>();
+    const hEdges = new Set<string>();
+
+    for (const noteNodeId of selectedNoteNodeIds) {
+      hNodes.add(noteNodeId);
+      for (const e of visibleEdges) {
+        if (e.source === noteNodeId || e.target === noteNodeId) {
+          hNodes.add(e.source);
+          hNodes.add(e.target);
+          hEdges.add(`${e.source}→${e.target}`);
+        }
+      }
+    }
+
+    if (selectedNodeId) {
+      hNodes.add(selectedNodeId);
+      for (const e of visibleEdges) {
+        if (e.source === selectedNodeId || e.target === selectedNodeId) {
+          hNodes.add(e.source);
+          hNodes.add(e.target);
+          hEdges.add(`${e.source}→${e.target}`);
+        }
+      }
+    }
+
+    const sq = searchQuery.trim().toLowerCase();
+    if (sq) {
+      for (const n of visibleNodes) {
+        if (n.label.toLowerCase().includes(sq)) {
+          hNodes.add(n.id);
+          for (const e of visibleEdges) {
+            if (e.source === n.id || e.target === n.id) {
+              hNodes.add(e.source);
+              hNodes.add(e.target);
+              hEdges.add(`${e.source}→${e.target}`);
+            }
+          }
+        }
+      }
+    }
+
+    return { highlightNodeIds: hNodes, highlightEdgePairs: hEdges, dimmed: hNodes.size > 0 };
+  }, [selectedNoteNodeIds, selectedNodeId, searchQuery, visibleEdges, visibleNodes]);
+
+  // Sync visual state to refs and update SVG attrs without rebuilding simulation
+  useEffect(() => {
+    selectedNodeIdRef.current = selectedNodeId;
+    highlightNodeIdsRef.current = highlightNodeIds;
+    highlightEdgePairsRef.current = highlightEdgePairs;
+    dimmedRef.current = dimmed;
+
+    const nodeSel = nodeSelRef.current;
+    const linkSel = linkSelRef.current;
+    if (!nodeSel || !linkSel) return;
+
+    nodeSel.select("circle")
+      .attr("fill-opacity", (d) => (dimmed && !highlightNodeIds.has(d.id) ? 0.12 : 0.9))
+      .attr("stroke", (d) => {
+        if (selectedNodeId === d.id) return "#e4e4e7";
+        if (!dimmed || !highlightNodeIds.has(d.id)) return "transparent";
+        return NODE_COLORS[d.type] ?? "#52525b";
+      })
+      .attr("stroke-width", (d) => selectedNodeId === d.id ? 3 : 2)
+      .attr("stroke-opacity", (d) => selectedNodeId === d.id ? 1 : 0.6);
+
+    nodeSel.select("text")
+      .attr("fill", (d) => (dimmed && !highlightNodeIds.has(d.id) ? "#3f3f46" : "#a1a1aa"));
+
+    linkSel
+      .attr("stroke", (d) => {
+        const src = (d.source as SimNode).id;
+        const tgt = (d.target as SimNode).id;
+        const key = `${src}→${tgt}`;
+        if (d.type === "references") {
+          return dimmed ? (highlightEdgePairs.has(key) ? "#78716c" : "#27272a") : "#57534e";
+        }
+        if (dimmed) return highlightEdgePairs.has(key) ? "#52525b" : "#27272a";
+        return "#3f3f46";
+      })
+      .attr("stroke-width", (d) => {
+        const src = (d.source as SimNode).id;
+        const tgt = (d.target as SimNode).id;
+        return highlightEdgePairs.has(`${src}→${tgt}`) ? 2.5 : 1;
+      })
+      .attr("stroke-opacity", (d) => {
+        const src = (d.source as SimNode).id;
+        const tgt = (d.target as SimNode).id;
+        if (dimmed && !highlightEdgePairs.has(`${src}→${tgt}`)) return 0.15;
+        return d.type === "references" ? 0.5 : 0.7;
+      });
+  }, [selectedNodeId, dimmed, highlightNodeIds, highlightEdgePairs]);
+
+  useEffect(() => {
+    if (!onSelectionChange) {
+      return;
+    }
+
+    if (!selectedNodeId) {
+      onSelectionChange(null);
+      return;
+    }
+
+    const selectedNode = nodes.find((node) => node.id === selectedNodeId) ?? null;
+    onSelectionChange(selectedNode);
+  }, [nodes, onSelectionChange, selectedNodeId]);
+
+  // fitView uses getBBox() on the actual rendered group — no stale position data
+  const fitView = useCallback(() => {
+    const svg = svgRef.current;
+    const zoom = zoomRef.current;
+    const g = gRef.current;
+    if (!svg || !zoom || !g) return;
+    try {
+      const bbox = g.getBBox();
+      if (bbox.width === 0 || bbox.height === 0) return;
+      const w = svg.clientWidth || 900;
+      const h = svg.clientHeight || 600;
+      const pad = 48;
+      const k = Math.min((w - pad * 2) / bbox.width, (h - pad * 2) / bbox.height, 4);
+      const tx = (w - bbox.width * k) / 2 - bbox.x * k;
+      const ty = (h - bbox.height * k) / 2 - bbox.y * k;
+      d3.select(svg).transition().duration(750)
+        .call(zoom.transform as any, d3.zoomIdentity.translate(tx, ty).scale(k));
+    } catch {
+      // getBBox can throw if SVG is not rendered
+    }
+  }, []);
+
+  const zoomToNode = useCallback((nodeId: string) => {
+    const svg = svgRef.current;
+    const zoom = zoomRef.current;
+    if (!svg || !zoom) return;
+
+    // Read position from cache (live positions), not React state
+    const pos = positionsRef.current.get(nodeId);
+    if (!pos) return;
+
+    const width = svg.clientWidth || 900;
+    const height = svg.clientHeight || 600;
+    const k = 1.8;
+    const tx = width / 2 - pos.x * k;
+    const ty = height / 2 - pos.y * k;
+
+    d3.select(svg)
+      .transition()
+      .duration(750)
+      .call(zoom.transform as any, d3.zoomIdentity.translate(tx, ty).scale(k));
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedNodeId(null);
+    onNoteSelect(null);
+  }, [onNoteSelect]);
+
+  useImperativeHandle(ref, () => ({
+    fitView,
+    clearSelection,
+    zoomToNode,
+  }));
+
+  // draw only re-runs when topology changes (visibleNodes/Edges, collapse state)
+  // Visual-only state (selection, highlight, dim) is handled by the updateVisuals effect above
+  const draw = useCallback(() => {
+    return createGraphDraw({
+      svgRef, gRef, zoomRef, transformRef, positionsRef,
+      nodeSelRef, linkSelRef,
+      dimmedRef, highlightNodeIdsRef, highlightEdgePairsRef, selectedNodeIdRef,
+      collapsedNodeIds, visibleNodes, visibleEdges,
+      setSelectedNodeId, setContextMenu, setTooltip, onNoteSelect,
+    })();
+  }, [visibleNodes, visibleEdges, collapsedNodeIds, onNoteSelect]);
+
+  useEffect(() => {
+    const cleanup = draw();
+    return cleanup;
+  }, [draw]);
+
+  useEffect(() => {
+    if (hasAutoFitRef.current || visibleNodes.length === 0) {
+      return;
+    }
+
+    const frame = window.requestAnimationFrame(() => {
+      fitView();
+      hasAutoFitRef.current = true;
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [fitView, visibleNodes.length]);
+
+  useEffect(() => {
+    const observer = new ResizeObserver(() => draw());
+    if (svgRef.current) observer.observe(svgRef.current);
+    return () => observer.disconnect();
+  }, [draw]);
+
+  const contextNode = useMemo(() => {
+    if (!contextMenu) return null;
+    return visibleNodes.find((n) => n.id === contextMenu.nodeId) ?? null;
+  }, [contextMenu, visibleNodes]);
+
+  const canCollapse = useCallback((nodeId: string) => {
+    return edges.some((e) => e.source === nodeId && e.type === "contains");
+  }, [edges]);
+
+  if (nodes.length === 0) {
+    return (
+      <div className="flex flex-1 items-center justify-center text-center">
+        <div className="space-y-2">
+          <p className="text-zinc-500">No data to graph yet.</p>
+          <p className="text-sm text-zinc-600">
+            Create notes with tasks and assignees to see the relationship graph.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex flex-1 flex-col">
+      <GraphLegend />
+      <GraphTooltip tooltip={tooltip} />
+      <GraphContextMenu
+        contextMenu={contextMenu}
+        contextNode={contextNode}
+        collapsedNodeIds={collapsedNodeIds}
+        canCollapse={canCollapse}
+        onClose={() => setContextMenu(null)}
+        onToggleCollapse={(nodeId) => {
+          setCollapsedNodeIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(nodeId)) next.delete(nodeId);
+            else next.add(nodeId);
+            return next;
+          });
+        }}
+        onZoomTo={zoomToNode}
+        onFitView={fitView}
+      />
+      <svg
+        ref={svgRef}
+        className="flex-1 w-full"
+        style={{ background: "transparent" }}
+      />
+    </div>
+  );
+});
+
+export { GraphView };