Function useGraphSearch

dashboard/graph/src/useGraphSearch.ts:6–90

({
  search,
  focusSymbol,
  onError,
  debounceMs = 180,
}: {
  search: (params: { q?: string; limit?: number; offset?: number }) => Promise<{ results: GraphNode[] }>;
  focusSymbol: (node: Pick<GraphNode, "id" | "name">) => void;
  onError: (message: string) => void;
  debounceMs?: number;
})

import type { GraphNode } from "./types";

export function useGraphSearch({
  search,
  focusSymbol,
  onError,
  debounceMs = 180,
}: {
  search: (params: { q?: string; limit?: number; offset?: number }) => Promise<{ results: GraphNode[] }>;
  focusSymbol: (node: Pick<GraphNode, "id" | "name">) => void;
  onError: (message: string) => void;
  debounceMs?: number;
}) {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<GraphNode[]>([]);
  const [searchOpen, setSearchOpen] = useState(false);
  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const searchSeq = useRef(makeSequence()).current;
  const searchBoxRef = useRef<HTMLDivElement | null>(null);

  const onQueryChange = useCallback((value: string) => {
    setQuery(value);
    if (searchTimer.current) clearTimeout(searchTimer.current);
    if (!value.trim()) {
      searchSeq.next();
      setResults([]);
      setSearchOpen(false);
      return;
    }
    setSearchOpen(true);
    searchTimer.current = setTimeout(() => {
      const ticket = searchSeq.next();
      search({ q: value, limit: 20 })
        .then((payload) => {
          if (searchSeq.isCurrent(ticket)) setResults(payload.results);
        })
        .catch((err) => {
          if (searchSeq.isCurrent(ticket)) {
            onError(err instanceof Error ? err.message : String(err));
          }
        });
    }, debounceMs);
  }, [debounceMs, onError, search, searchSeq]);

  const onSearchKeyDown = useCallback(
    (event: KeyboardEvent<HTMLElement>) => {
      const box = searchBoxRef.current;
      if (!box) return;
      if (event.key === "Escape") {
        event.preventDefault();
        setSearchOpen(false);
        box.querySelector<HTMLInputElement>("input")?.focus();
        return;
      }
      if (!searchOpen || results.length === 0) return;
      const buttons: HTMLButtonElement[] = Array.from(
        box.querySelectorAll<HTMLButtonElement>(".tsg-search-pop button"),
      );
      const active = document.activeElement as HTMLElement | null;
      const index = buttons.indexOf(active as HTMLButtonElement);