H-6281, FE-501: Add undo/redo support to Petrinaut demo app

.changeset/probabilistic-transition-kernels.md

@@ -0,0 +1,5 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Add probability distribution support to transition kernels (`Distribution.Gaussian`, `Distribution.Uniform`, `Distribution.Lognormal`)

.changeset/undo-redo-support.md

@@ -0,0 +1,5 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Add optional undo/redo support with version history UI, keyboard shortcuts (Cmd|Ctrl+Z / Cmd|Ctrl+Shift+Z), and drag debouncing

libs/@hashintel/petrinaut/demo-site/main/app.tsx

@@ -1,5 +1,5 @@
 import { produce } from "immer";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { MinimalNetMetadata, SDCPN } from "../../src/core/types/sdcpn";
 import { convertOldFormatToSDCPN } from "../../src/old-formats/convert-old-format";
@@ -9,6 +9,7 @@ import {
   type SDCPNInLocalStorage,
   useLocalStorageSDCPNs,
 } from "./app/use-local-storage-sdcpns";
+import { useUndoRedo } from "./app/use-undo-redo";
 
 export const DevApp = () => {
   const { storedSDCPNs, setStoredSDCPNs } = useLocalStorageSDCPNs();
@@ -72,25 +73,109 @@ export const DevApp = () => {
     [currentNetId, setStoredSDCPNs],
   );
 
-  const mutatePetriNetDefinition = useCallback(
-    (definitionMutationFn: (draft: SDCPN) => void) => {
-      if (!currentNetId) {
-        return;
+  const setSDCPNDirectly = (sdcpn: SDCPN) => {
+    if (!currentNetId) {
+      return;
+    }
+    setStoredSDCPNs((prev) =>
+      produce(prev, (draft) => {
+        if (draft[currentNetId]) {
+          draft[currentNetId].sdcpn = sdcpn;
+        }
+      }),
+    );
+  };
+
+  const emptySDCPN: SDCPN = {
+    places: [],
+    transitions: [],
+    types: [],
+    parameters: [],
+    differentialEquations: [],
+  };
+
+  const {
+    pushState,
+    undo: undoHistory,
+    redo: redoHistory,
+    goToIndex: goToHistoryIndex,
+    canUndo,
+    canRedo,
+    history,
+    currentIndex,
+    reset: resetHistory,
+  } = useUndoRedo(
+    currentNet && !isOldFormatInLocalStorage(currentNet)
+      ? currentNet.sdcpn
+      : emptySDCPN,
+  );
+
+  const mutatePetriNetDefinition = (
+    definitionMutationFn: (draft: SDCPN) => void,
+  ) => {
+    if (!currentNetId) {
+      return;
+    }
+
+    let newSDCPN: SDCPN | undefined;
+
+    // Use the updater form so that multiple calls before a re-render
+    // (e.g. multi-node drag end) each see the latest state.
+    setStoredSDCPNs((prev) => {
+      const net = prev[currentNetId];
+      if (!net || isOldFormatInLocalStorage(net)) {
+        return prev;
       }
+      const updatedSDCPN = produce(net.sdcpn, definitionMutationFn);
+      newSDCPN = updatedSDCPN;
+      return {
+        ...prev,
+        [currentNetId]: {
+          ...net,
+          sdcpn: updatedSDCPN,
+        },
+      };
+    });
 
-      setStoredSDCPNs((prev) =>
-        produce(prev, (draft) => {
-          if (draft[currentNetId]) {
-            draft[currentNetId].sdcpn = produce(
-              draft[currentNetId].sdcpn,
-              definitionMutationFn,
-            );
-          }
-        }),
-      );
+    if (newSDCPN) {
+      pushState(newSDCPN);
+    }
+  };
+
+  const prevNetIdRef = useRef(currentNetId);
+  useEffect(() => {
+    if (currentNetId !== prevNetIdRef.current) {
+      prevNetIdRef.current = currentNetId;
+      if (currentNet && !isOldFormatInLocalStorage(currentNet)) {
+        resetHistory(currentNet.sdcpn);
+      }
+    }
+  }, [currentNetId, currentNet, resetHistory]);
+
+  const undoRedo = {
+    undo: () => {
+      const sdcpn = undoHistory();
+      if (sdcpn) {
+        setSDCPNDirectly(sdcpn);
+      }
     },
-    [currentNetId, setStoredSDCPNs],
-  );
+    redo: () => {
+      const sdcpn = redoHistory();
+      if (sdcpn) {
+        setSDCPNDirectly(sdcpn);
+      }
+    },
+    canUndo,
+    canRedo,
+    history: history.current,
+    currentIndex,
+    goToIndex: (index: number) => {
+      const sdcpn = goToHistoryIndex(index);
+      if (sdcpn) {
+        setSDCPNDirectly(sdcpn);
+      }
+    },
+  };
 
   // Initialize with a default net if none exists
   useEffect(() => {
@@ -168,6 +253,7 @@ export const DevApp = () => {
         readonly={false}
         setTitle={setTitle}
         title={currentNet.title}
+        undoRedo={undoRedo}
       />
     </div>
   );

libs/@hashintel/petrinaut/demo-site/main/app/use-undo-redo.ts

@@ -0,0 +1,151 @@
+import { useRef, useState } from "react";
+
+import type { SDCPN } from "../../../src/core/types/sdcpn";
+import { isSDCPNEqual } from "../../../src/petrinaut";
+
+export type HistoryEntry = {
+  sdcpn: SDCPN;
+  timestamp: string;
+};
+
+const MAX_HISTORY = 50;
+const DEBOUNCE_MS = 500;
+
+export function useUndoRedo(initialSDCPN: SDCPN) {
+  const historyRef = useRef<HistoryEntry[]>([
+    { sdcpn: initialSDCPN, timestamp: new Date().toISOString() },
+  ]);
+  const currentIndexRef = useRef(0);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  /**
+   * Snapshot of render-visible values derived from the refs.
+   * Updated via `bump()` after every mutation so consumers re-render
+   * without reading refs during render.
+   */
+  const [snapshot, setSnapshot] = useState({
+    currentIndex: 0,
+    historyLength: 1,
+  });
+  const bump = () =>
+    setSnapshot({
+      currentIndex: currentIndexRef.current,
+      historyLength: historyRef.current.length,
+    });
+
+  const canUndo = snapshot.currentIndex > 0;
+  const canRedo = snapshot.currentIndex < snapshot.historyLength - 1;
+
+  const pushState = (sdcpn: SDCPN) => {
+    const current = historyRef.current[currentIndexRef.current];
+
+    // No-op detection
+    if (current && isSDCPNEqual(current.sdcpn, sdcpn)) {
+      return;
+    }
+
+    // Debounce: coalesce rapid mutations into one entry
+    if (debounceTimerRef.current !== null) {
+      clearTimeout(debounceTimerRef.current);
+      // Replace the entry at currentIndex (it was a pending debounced entry)
+      historyRef.current[currentIndexRef.current] = {
+        sdcpn,
+        timestamp: new Date().toISOString(),
+      };
+
+      debounceTimerRef.current = setTimeout(() => {
+        debounceTimerRef.current = null;
+      }, DEBOUNCE_MS);
+
+      bump();
+      return;
+    }
+
+    // Truncate any redo entries
+    historyRef.current = historyRef.current.slice(
+      0,
+      currentIndexRef.current + 1,
+    );
+
+    // Push new entry
+    historyRef.current.push({
+      sdcpn,
+      timestamp: new Date().toISOString(),
+    });
+
+    // Enforce max history size
+    if (historyRef.current.length > MAX_HISTORY) {
+      historyRef.current = historyRef.current.slice(
+        historyRef.current.length - MAX_HISTORY,
+      );
+    }
+
+    currentIndexRef.current = historyRef.current.length - 1;
+
+    // Start debounce window
+    debounceTimerRef.current = setTimeout(() => {
+      debounceTimerRef.current = null;
+    }, DEBOUNCE_MS);
+
+    bump();
+  };
+
+  const clearDebounce = () => {
+    if (debounceTimerRef.current !== null) {
+      clearTimeout(debounceTimerRef.current);
+      debounceTimerRef.current = null;
+    }
+  };
+
+  const undo = (): SDCPN | null => {
+    if (currentIndexRef.current <= 0) {
+      return null;
+    }
+    clearDebounce();
+    currentIndexRef.current -= 1;
+    bump();
+    return historyRef.current[currentIndexRef.current]!.sdcpn;
+  };
+
+  const redo = (): SDCPN | null => {
+    if (currentIndexRef.current >= historyRef.current.length - 1) {
+      return null;
+    }
+    clearDebounce();
+    currentIndexRef.current += 1;
+    bump();
+    return historyRef.current[currentIndexRef.current]!.sdcpn;
+  };
+
+  const goToIndex = (index: number): SDCPN | null => {
+    if (index < 0 || index >= historyRef.current.length) {
+      return null;
+    }
+    clearDebounce();
+    currentIndexRef.current = index;
+    bump();
+    return historyRef.current[index]!.sdcpn;
+  };
+
+  const reset = (sdcpn: SDCPN) => {
+    historyRef.current = [{ sdcpn, timestamp: new Date().toISOString() }];
+    currentIndexRef.current = 0;
+    if (debounceTimerRef.current !== null) {
+      clearTimeout(debounceTimerRef.current);
+      debounceTimerRef.current = null;
+    }
+    bump();
+  };
+
+  return {
+    pushState,
+    undo,
+    redo,
+    goToIndex,
+    canUndo,
+    canRedo,
+    history: historyRef,
+    currentIndex: snapshot.currentIndex,
+    reset,
+  };
+}

libs/@hashintel/petrinaut/src/components/menu.tsx

@@ -147,6 +147,9 @@ const itemDescriptionStyle = css({
 });
 
 const itemSuffixStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "1",
   marginLeft: "auto",
   fontSize: "xs",
   color: "neutral.s80",
@@ -204,6 +207,10 @@ export interface MenuProps {
   items: MenuItem[] | MenuGroup[];
   /** Whether to animate the menu open/close. Adapts direction automatically. */
   animated?: boolean;
+  /** Maximum height of the menu content (enables scrolling). */
+  maxHeight?: string;
+  /** Whether to close the menu when an item is selected. Defaults to true. */
+  closeOnSelect?: boolean;
   /** Preferred placement of the menu relative to the trigger. */
   placement?:
     | "top"
@@ -265,6 +272,8 @@ export const Menu: React.FC<MenuProps> = ({
   trigger,
   items,
   animated,
+  maxHeight,
+  closeOnSelect,
   placement,
 }) => {
   const portalContainerRef = usePortalContainerRef();
@@ -274,12 +283,16 @@ export const Menu: React.FC<MenuProps> = ({
     <ArkMenu.Root
       lazyMount={!!animated}
       unmountOnExit={!!animated}
+      closeOnSelect={closeOnSelect}
       positioning={placement ? { placement, gutter: 8 } : { gutter: 8 }}
     >
       <ArkMenu.Trigger asChild>{trigger}</ArkMenu.Trigger>
       <Portal container={portalContainerRef}>
         <ArkMenu.Positioner>
-          <ArkMenu.Content className={menuContentStyle({ animated })}>
+          <ArkMenu.Content
+            className={menuContentStyle({ animated })}
+            style={maxHeight ? { maxHeight, overflowY: "auto" } : undefined}
+          >
             {groups.map((group, groupIndex) => (
               <div key={group.title ?? `group-${String(groupIndex)}`}>
                 {groupIndex > 0 && <div className={separatorStyle} />}