Fast Travel YCB Graphs

Moving around a graph with arrow keys feels really good (or swiping on mobile). The user experience matters most to human psychology, even if just perceived.

// Arrow-key navigation: left/right to move through nodes if hovered
  useEffect(() => {
    function handleKeyDown(event: KeyboardEvent) {
      if (!hovered || graphNodes.length === 0) return;

      if (event.key === 'ArrowRight') {
        setCurrentIndex((prevIndex) => {
          if (prevIndex === null) return 0;
          return (prevIndex + 1) % graphNodes.length;
        });
      } else if (event.key === 'ArrowLeft') {
        setCurrentIndex((prevIndex) => {
          if (prevIndex === null) return graphNodes.length - 1;
          return (prevIndex - 1 + graphNodes.length) % graphNodes.length;
        });
      }
    }

    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [hovered, graphNodes]);