Function GraphView

web/components/GraphView.tsx:271–913

({ initialFilters = {} }: GraphViewProps)

}

export function GraphView({ initialFilters = {} }: GraphViewProps) {
  const t = useT();
  const router = useRouter();

  const [filterType, setFilterType] = useState<string>(initialFilters.type || "");
  const [filterTag, setFilterTag] = useState<string>(initialFilters.tag || "");
  const [includeArchive, setIncludeArchive] = useState<boolean>(!!initialFilters.includeArchive);
  const [theme, setTheme] = useState<"light" | "dark">("dark"); // 科技感默认深色

  const [data, setData] = useState<ApiGraph | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  const [hoverCard, setHoverCard] = useState<{ api: ApiNode; sx: number; sy: number } | null>(null);

  const wrapRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const simRef = useRef<Simulation<SimNode, SimLink> | null>(null);
  const nodesRef = useRef<SimNode[]>([]);
  const linksRef = useRef<SimLink[]>([]);
  const neighborRef = useRef<Map<string, Set<string>>>(new Map());
  const transformRef = useRef<ZoomTransform>(zoomIdentity);
  const zoomRef = useRef<ZoomBehavior<HTMLCanvasElement, unknown> | null>(null);
  const hoverIdRef = useRef<string | null>(null);
  const selectedIdRef = useRef<string | null>(null); // 点击选中并持久高亮的节点
  const draggingRef = useRef<SimNode | null>(null);
  const dprRef = useRef<number>(1);
  const sizeRef = useRef<{ w: number; h: number }>({ w: 1, h: 1 });
  const themeRef = useRef<Palette>(DARK);
  const pointerDownRef = useRef<{ x: number; y: number; moved: boolean } | null>(null);

  themeRef.current = theme === "dark" ? DARK : LIGHT;

  // ---------- 数据加载 ----------
  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    setError(null);
    const sp = new URLSearchParams();
    if (filterType) sp.set("type", filterType);
    if (filterTag) sp.set("tag", filterTag);
    if (includeArchive) sp.set("include_archive", "1");
    fetch(`/api/graph${sp.toString() ? "?" + sp.toString() : ""}`)
      .then((r) => r.json())
      .then((d: ApiGraph & { error?: string }) => {
        if (cancelled) return;
        if (d.error) {
          setError(d.error);
          setData({ nodes: [], edges: [] });
          return;
        }
        setData({ nodes: d.nodes || [], edges: d.edges || [] });
      })
      .catch((e: unknown) => {
        if (!cancelled) setError(String(e));
      })
      .finally(() => {
        if (!cancelled) setLoading(false);