Function ResultsGraph

website/src/components/ResultsGraph.tsx:167–408

({paths, pagesById})

  readonly paths: readonly WikipediaPageId[][];
  readonly pagesById: Record<WikipediaPageId, WikipediaPage>;
}> = ({paths, pagesById}) => {
  const graphRef = useRef<SVGSVGElement | null>(null);
  const simulationRef = useRef<d3.Simulation<GraphNode, GraphLink> | null>(null);
  const graphSvgRef = useRef<d3.Selection<SVGGElement, unknown, null, undefined> | null>(null);
  const zoomableRef = useRef<d3.Selection<Element, unknown, null, undefined> | null>(null);
  const graphWrapperSizeRef = useRef<HTMLDivElement | null>(null);
  const zoomRef = useRef<d3.ZoomBehavior<Element, unknown> | null>(null);

  const color = d3.scaleOrdinal(d3.schemeCategory10);

  const getGraphWidth = useCallback(() => {
    if (!graphWrapperSizeRef.current) return 0;
    return graphWrapperSizeRef.current.getBoundingClientRect().width;
  }, [graphWrapperSizeRef]);

  const getGraphData = useCallback(() => {
    const seenNodes = new Set<WikipediaPageId>();
    const nodesData: GraphNode[] = [];
    const linksData: GraphLink[] = [];

    paths.forEach((path) => {
      let previousPageId: WikipediaPageId | null = null;
      path.forEach((currentPageId, i) => {
        const currentPage = pagesById[currentPageId];
        if (!currentPage) {
          // eslint-disable-next-line no-console
          console.error(`Failed to find page with ID ${currentPageId} in pages dictionary`);
          return;
        }

        if (!seenNodes.has(currentPageId)) {
          nodesData.push({id: currentPageId, title: currentPage.title, degree: i});
          seenNodes.add(currentPageId);
        }

        if (previousPageId) {
          const sourceNode = nodesData.find((n) => n.id === previousPageId);
          const targetNode = nodesData.find((n) => n.id === currentPageId);
          if (!sourceNode || !targetNode) {
            // eslint-disable-next-line no-console
            console.error('Failed to find source or target node');
            return;
          }
          linksData.push({source: sourceNode, target: targetNode});
        }

        previousPageId = currentPageId;
      });
    });

    return {nodesData, linksData};
  }, [pagesById, paths]);

  const resetGraph = useCallback(() => {
    const graphWidth = getGraphWidth();

    // Reset the center of the simulation force and restart it.
    simulationRef.current?.force(