@knotpad/app 0.1.0 → 0.1.2

package/components/graph/graph-view.tsx

@@ -1,322 +0,0 @@
-"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 };