Function TutorialDialog

src/components/graph/tutorial/TutorialDialog.tsx:91–218

({
  show: isTutorialOpen,
  setShow: setIsTutorialOpen,
  initialStep = 0,
})

};

const TutorialDialog: FC<TutorialProps> = ({
  show: isTutorialOpen,
  setShow: setIsTutorialOpen,
  initialStep = 0,
}) => {
  const [currentStep, setCurrentStep] = useState(initialStep);
  const steps = useMemo(() => tutorialSteps, []);

  // Hotkeys for tutorial
  // ArrowLeft: Go to previous slide
  // ArrowRight: Go to next slide
  const hotKeysMap: HotKeysType = {
    ARROW_LEFT: {
      key: "ArrowLeft",
      asyncHandler: async (event: KeyboardEvent<HTMLElement>) => {
        event.preventDefault();

        decreaseSlide();
        logAnalyticsEvent("tutorial_arrow_left");
      },
    },
    ARROW_RIGHT: {
      key: "ArrowRight",
      asyncHandler: async (event: KeyboardEvent<HTMLElement>) => {
        event.preventDefault();

        increaseSlide();
        logAnalyticsEvent("tutorial_arrow_right");
      },
    },
  };

  const increaseSlide = () => {
    if (currentStep === steps.length - 1) {
      closeTutorial();
      return;
    }

    setCurrentStep(currentStep + 1);
  };

  const decreaseSlide = () => {
    if (currentStep === 0) return;
    setCurrentStep(currentStep - 1);
  };

  const closeTutorial = () => {
    setIsTutorialOpen(false);
    setCurrentStep(0);
    logAnalyticsEvent("tutorial_closed");
  };

  return (
    <Modal isOpen={isTutorialOpen} closeModal={closeTutorial}>
      <div
        className="w-[30rem]"
        onKeyDown={async (event: KeyboardEvent<HTMLElement>) => {
          const hotKey = event.key;