Function CodeGraphExplorer

dashboard/graph/src/CodeGraphExplorer.tsx:137–581

()

}

export default function CodeGraphExplorer() {
  // Canvas is the landing view: it self-populates with the default slice,
  // so tab entry shows the graph immediately (Overview stays one click away).
  const [view, setView] = useState<"overview" | "canvas">("canvas");
  const [overview, setOverview] = useState<GraphOverview | null>(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  // Accumulated canvas graph (progressive exploration).
  const [graphNodes, setGraphNodes] = useState<Map<string, GraphNode>>(new Map());
  const [graphEdges, setGraphEdges] = useState<Map<string, GraphEdge>>(new Map());
  const [focusId, setFocusId] = useState<string | null>(null);
  const [fitSignal, setFitSignal] = useState(0);
  const [history, setHistory] = useState<Array<{ id: string; name: string }>>([]);

  // Filters.
  const [kindFilters, setKindFilters] = useState<Set<string>>(new Set());
  const [langFilters, setLangFilters] = useState<Set<string>>(new Set());
  const [dirScope, setDirScope] = useState("");

  // Path-finding mode.
  const [pathMode, setPathMode] = useState(false);
  const [pathFrom, setPathFrom] = useState<GraphNode | null>(null);
  const [pathTo, setPathTo] = useState<GraphNode | null>(null);
  const [pathResult, setPathResult] = useState<GraphPathResponse | null>(null);

  // True while the canvas shows the untouched seedless default view; the
  // first search-to-focus replaces it instead of merging into it.
  const defaultViewRef = useRef(false);
  // Invalidates an in-flight default load once the user takes over the canvas.
  const defaultSeq = useRef(makeSequence()).current;

  const {
    selected,
    neighbors,
    setSelected,
    setNeighbors,
    inspect,
  } = useGraphInspection({
    loadNode: api.node,
    loadNeighbors: (id: string) => api.neighbors(id, { limit: 60 }),
    onError: setError,
  });

  useEffect(() => {
    api.overview().then(setOverview).catch((err) => setError(String(err)));
  }, []);

  const mergeGraph = useCallback((nodes: GraphNode[], edges: GraphEdge[]) => {
    setGraphNodes((prev) => mergeNodesInto(prev, nodes));
    setGraphEdges((prev) => mergeEdgesInto(prev, edges));
  }, []);

  /** Loads the seedless default slice (top-connected hubs + their edges). */
  const loadDefaultView = useCallback(async () => {
    const ticket = defaultSeq.next();
    setLoading(true);
    setError("");