گراف

import { useEffect, useMemo, useState } from "react";
import { useDebounce } from "ahooks";
import { useLogger } from "@/components/pages/tests/experiment.tsx";
import { parseEdges } from "@/components/pages/tests/graph-utils.ts";
import { GraphDiagram } from "@/components/pages/tests/graph-diagram.tsx";

const DEFAULT_EDGES = "[[1, 2], [1, 4], [2, 3], [3, 4]]";

export function ShortestPathDemo() {
  const [edgesString, setEdgesString] = useState(DEFAULT_EDGES);
  const { logTable } = useLogger();

  const debouncedValue = useDebounce(edgesString, {
    wait: 300,
    leading: false,
    trailing: true,
  });

  const numericEdges = useMemo(() => parseEdges(debouncedValue), [debouncedValue]);
  const nodes = useMemo(
    () => Array.from(new Set(numericEdges.flat())).map(String),
    [numericEdges],
  );
  const edges = useMemo<Array<[string, string]>>(
    () => numericEdges.map(([from, to]) => [String(from), String(to)]),
    [numericEdges],
  );

  useEffect(() => {
    if (numericEdges.length === 0) return;
    logTable(
      numericEdges.map(([from, to]) => ({ from, to })),
      "edges",
    );
  }, [numericEdges, logTable]);

  return (
    <div className="flex flex-col gap-4">
      <input
        type="text"
        dir="ltr"
        value={edgesString}
        onChange={(e) => setEdgesString(e.target.value)}
        placeholder="[[1,2],[2,3]]"
        className="w-full rounded-md border border-rule bg-background px-3 py-2 text-[.8rem] font-mono text-text placeholder:text-faint focus:outline-none focus:border-accent"
      />
      <GraphDiagram nodes={nodes} edges={edges} />
    </div>
  );
}