H-5691: Simulation Timeline Visualizer

.changeset/four-bugs-collect.md

@@ -0,0 +1,5 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Add Simulation Timeline Visualizer

libs/@hashintel/petrinaut/package.json

@@ -35,6 +35,8 @@
     "@mantine/hooks": "8.3.5",
     "@monaco-editor/react": "4.8.0-rc.3",
     "@mui/material": "5.18.0",
+    "d3-array": "3.2.4",
+    "d3-scale": "4.0.2",
     "elkjs": "0.11.0",
     "monaco-editor": "0.55.1",
     "react-icons": "5.5.0",
@@ -50,6 +52,8 @@
     "@pandacss/dev": "1.4.3",
     "@sentry/react": "10.22.0",
     "@types/babel__standalone": "7.1.9",
+    "@types/d3-array": "3.2.2",
+    "@types/d3-scale": "4.0.9",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "5.0.4",

libs/@hashintel/petrinaut/src/components/segment-group.tsx

@@ -1,44 +1,85 @@
 import { SegmentGroup as ArkSegmentGroup } from "@ark-ui/react/segment-group";
-import { css, cva } from "@hashintel/ds-helpers/css";
+import { cva } from "@hashintel/ds-helpers/css";
 
-const containerStyle = css({
-  display: "flex",
-  backgroundColor: "core.gray.20",
-  borderRadius: "radius.8",
-  gap: "spacing.1",
-  position: "relative",
-  padding: "[4px]",
+const containerStyle = cva({
+  base: {
+    display: "flex",
+    backgroundColor: "core.gray.20",
+    gap: "spacing.1",
+    position: "relative",
+  },
+  variants: {
+    size: {
+      md: {
+        borderRadius: "[18px]",
+        padding: "[4px]",
+      },
+      sm: {
+        borderRadius: "[12px]",
+        padding: "[3px]",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
 });
 
-const indicatorStyle = css({
-  backgroundColor: "core.gray.90",
-  borderRadius: "radius.6",
-  position: "absolute",
-  transition: "[all 0.2s ease]",
-  width: "var(--width)",
-  height: "var(--height)",
-  left: "var(--left)",
-  top: "var(--top)",
+const indicatorStyle = cva({
+  base: {
+    backgroundColor: "core.gray.90",
+    position: "absolute",
+    transition: "[all 0.2s ease]",
+    width: "var(--width)",
+    height: "var(--height)",
+    left: "var(--left)",
+    top: "var(--top)",
+  },
+  variants: {
+    size: {
+      md: {
+        borderRadius: "[14px]",
+      },
+      sm: {
+        borderRadius: "[10px]",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
 });
 
 const itemStyle = cva({
   base: {
     flex: "1",
-    fontSize: "[13px]",
     fontWeight: 500,
     textAlign: "center",
     cursor: "pointer",
-    borderRadius: "radius.6",
     transition: "[all 0.2s ease]",
     position: "relative",
     zIndex: 1,
-    padding: "[4px 6px]",
   },
   variants: {
     isSelected: {
       true: { color: "core.gray.10" },
       false: { color: "core.gray.70" },
     },
+    size: {
+      md: {
+        fontSize: "[13px]",
+        borderRadius: "radius.6",
+        padding: "[4px 8px]",
+      },
+      sm: {
+        fontSize: "[11px]",
+        borderRadius: "radius.4",
+        padding: "[1px 8px]",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
   },
 });
 
@@ -51,12 +92,15 @@ interface SegmentGroupProps {
   value: string;
   options: SegmentOption[];
   onChange: (value: string) => void;
+  /** Size variant. Defaults to "md". */
+  size?: "md" | "sm";
 }
 
 export const SegmentGroup: React.FC<SegmentGroupProps> = ({
   value,
   options,
   onChange,
+  size = "md",
 }) => {
   return (
     <ArkSegmentGroup.Root
@@ -67,13 +111,13 @@ export const SegmentGroup: React.FC<SegmentGroupProps> = ({
         }
       }}
     >
-      <div className={containerStyle}>
-        <ArkSegmentGroup.Indicator className={indicatorStyle} />
+      <div className={containerStyle({ size })}>
+        <ArkSegmentGroup.Indicator className={indicatorStyle({ size })} />
         {options.map((option) => (
           <ArkSegmentGroup.Item
             key={option.value}
             value={option.value}
-            className={itemStyle({ isSelected: value === option.value })}
+            className={itemStyle({ isSelected: value === option.value, size })}
           >
             <ArkSegmentGroup.ItemText>{option.label}</ArkSegmentGroup.ItemText>
             <ArkSegmentGroup.ItemControl />

libs/@hashintel/petrinaut/src/constants/ui.ts

@@ -8,6 +8,7 @@ import { differentialEquationsListSubView } from "../views/Editor/subviews/diffe
 import { nodesListSubView } from "../views/Editor/subviews/nodes-list";
 import { parametersListSubView } from "../views/Editor/subviews/parameters-list";
 import { simulationSettingsSubView } from "../views/Editor/subviews/simulation-settings";
+import { simulationTimelineSubView } from "../views/Editor/subviews/simulation-timeline";
 import { typesListSubView } from "../views/Editor/subviews/types-list";
 
 // Panel margin (spacing around panels)
@@ -43,7 +44,11 @@ export const LEFT_SIDEBAR_SUBVIEWS: SubView[] = [
   nodesListSubView,
 ];
 
+// Base subviews always visible in the bottom panel
 export const BOTTOM_PANEL_SUBVIEWS: SubView[] = [
   diagnosticsSubView,
   simulationSettingsSubView,
 ];
+
+// Subviews only visible when simulation is running/paused
+export const SIMULATION_ONLY_SUBVIEWS: SubView[] = [simulationTimelineSubView];

libs/@hashintel/petrinaut/src/core/simulation/build-simulation.test.ts

@@ -50,6 +50,7 @@ describe("buildSimulation", () => {
           },
         ],
       ]),
+      parameterValues: {},
       seed: 42,
       dt: 0.1,
     };
@@ -196,6 +197,7 @@ describe("buildSimulation", () => {
         ],
         // p3 has no initial tokens
       ]),
+      parameterValues: {},
       seed: 123,
       dt: 0.05,
     };
@@ -305,6 +307,7 @@ describe("buildSimulation", () => {
           },
         ],
       ]),
+      parameterValues: {},
       seed: 42,
       dt: 0.1,
     };
@@ -360,6 +363,7 @@ describe("buildSimulation", () => {
           },
         ],
       ]),
+      parameterValues: {},
       seed: 42,
       dt: 0.1,
     };

libs/@hashintel/petrinaut/src/core/simulation/build-simulation.ts

@@ -1,4 +1,7 @@
-import { deriveDefaultParameterValues } from "../../hooks/use-default-parameter-values";
+import {
+  deriveDefaultParameterValues,
+  mergeParameterValues,
+} from "../../hooks/use-default-parameter-values";
 import { SDCPNItemError } from "../errors";
 import type {
   DifferentialEquationFn,
@@ -52,7 +55,13 @@ function getPlaceDimensions(
  * @throws {Error} if user code fails to compile
  */
 export function buildSimulation(input: SimulationInput): SimulationInstance {
-  const { sdcpn, initialMarking, seed, dt } = input;
+  const {
+    sdcpn,
+    initialMarking,
+    parameterValues: inputParameterValues,
+    seed,
+    dt,
+  } = input;
 
   // Build maps for quick lookup
   const placesMap = new Map(sdcpn.places.map((place) => [place.id, place]));
@@ -61,8 +70,13 @@ export function buildSimulation(input: SimulationInput): SimulationInstance {
   );
   const typesMap = new Map(sdcpn.types.map((type) => [type.id, type]));
 
-  // Build parameter values from SDCPN parameters using the shared utility
-  const parameterValues = deriveDefaultParameterValues(sdcpn.parameters);
+  // Build parameter values: merge input values with SDCPN defaults
+  // Input values (from simulation store) take precedence over defaults
+  const defaultParameterValues = deriveDefaultParameterValues(sdcpn.parameters);
+  const parameterValues = mergeParameterValues(
+    inputParameterValues,
+    defaultParameterValues,
+  );
 
   // Validate that all places in initialMarking exist in SDCPN
   for (const placeId of initialMarking.keys()) {
@@ -111,9 +125,9 @@ export function buildSimulation(input: SimulationInput): SimulationInstance {
       differentialEquationFns.set(place.id, fn as DifferentialEquationFn);
     } catch (error) {
       throw new SDCPNItemError(
-        `Failed to compile differential equation for place \`${place.name}\`:\n\n${
-          error instanceof Error ? error.message : String(error)
-        }`,
+        `Failed to compile differential equation for place \`${
+          place.name
+        }\`:\n\n${error instanceof Error ? error.message : String(error)}`,
         place.id,
       );
     }
@@ -129,9 +143,9 @@ export function buildSimulation(input: SimulationInput): SimulationInstance {
       lambdaFns.set(transition.id, fn as LambdaFn);
     } catch (error) {
       throw new SDCPNItemError(
-        `Failed to compile Lambda function for transition \`${transition.name}\`:\n\n${
-          error instanceof Error ? error.message : String(error)
-        }`,
+        `Failed to compile Lambda function for transition \`${
+          transition.name
+        }\`:\n\n${error instanceof Error ? error.message : String(error)}`,
         transition.id,
       );
     }
@@ -164,9 +178,9 @@ export function buildSimulation(input: SimulationInput): SimulationInstance {
       transitionKernelFns.set(transition.id, fn as TransitionKernelFn);
     } catch (error) {
       throw new SDCPNItemError(
-        `Failed to compile transition kernel for transition \`${transition.name}\`:\n\n${
-          error instanceof Error ? error.message : String(error)
-        }`,
+        `Failed to compile transition kernel for transition \`${
+          transition.name
+        }\`:\n\n${error instanceof Error ? error.message : String(error)}`,
         transition.id,
       );
     }

libs/@hashintel/petrinaut/src/core/simulation/compute-next-frame.test.ts

@@ -65,6 +65,7 @@ describe("computeNextFrame", () => {
     const simulation = buildSimulation({
       sdcpn,
       initialMarking,
+      parameterValues: {},
       seed: 42,
       dt: 0.1,
     });
@@ -114,6 +115,7 @@ describe("computeNextFrame", () => {
     const simulation = buildSimulation({
       sdcpn,
       initialMarking,
+      parameterValues: {},
       seed: 42,
       dt: 0.1,
     });
@@ -167,6 +169,7 @@ describe("computeNextFrame", () => {
     const simulation = buildSimulation({
       sdcpn,
       initialMarking,
+      parameterValues: {},
       seed: 42,
       dt: 0.1,
     });

libs/@hashintel/petrinaut/src/core/types/simulation.ts

@@ -20,6 +20,8 @@ export type TransitionKernelFn = (
 export type SimulationInput = {
   sdcpn: SDCPN;
   initialMarking: Map<string, { values: Float64Array; count: number }>;
+  /** Parameter values from the simulation store (overrides SDCPN defaults) */
+  parameterValues: Record<string, string>;
   seed: number;
   dt: number;
 };

libs/@hashintel/petrinaut/src/examples/broken-machines.ts

@@ -361,13 +361,13 @@ export const productionMachines: { title: string; petriNetDefinition: SDCPN } =
           id: "5bfea547-faaf-4626-8662-6400d07c049e",
           name: "Reparation Dynamics",
           colorId: "type__1762560152725",
-          code: '// This function defines the differential equation for the place of type "Machine".\n// The function receives the current tokens in all places and the parameters.\n// It should return the derivative of the token value in this place.\nexport default Dynamics((tokens, parameters) => {\n  return tokens.map(({ machine_damage_ratio }) => {\n    // ...Do some computation with input token here if needed\n\n    return {\n      machine_damage_ratio: -1 / 3\n    };\n  });\n});',
+          code: '// This function defines the differential equation for the place of type "Machine".\n// The function receives the current tokens in all places and the parameters.\n// It should return the derivative of the token value in this place.\nexport default Dynamics((tokens, parameters) => {\n  return tokens.map(({ machine_damage_ratio }) => {\n    // ...Do some computation with input token here if needed\n\n    return {\n      machine_damage_ratio: -parameters.damage_reparation_per_second\n    };\n  });\n});',
         },
         {
           id: "ca26e5e2-0373-46a9-920e-a6eacadd92e8",
           name: "Production Dynamics",
           colorId: "type__1762560154179",
-          code: '// This function defines the differential equation for the place of type "Machine Producing Product".\n// The function receives the current tokens in all places and the parameters.\n// It should return the derivative of the token value in this place.\nexport default Dynamics((tokens, parameters) => {\n  return tokens.map(({ machine_damage_ratio, transformation_progress }) => {\n    // ...Do some computation with input token here if needed\n\n    return {\n      machine_damage_ratio: 1 / 1000,\n      transformation_progress: 1 / 3\n    };\n  });\n});',
+          code: '// This function defines the differential equation for the place of type "Machine Producing Product".\n// The function receives the current tokens in all places and the parameters.\n// It should return the derivative of the token value in this place.\nexport default Dynamics((tokens, parameters) => {\n  return tokens.map(({ machine_damage_ratio, transformation_progress }) => {\n    // ...Do some computation with input token here if needed\n\n    return {\n      machine_damage_ratio: parameters.damage_per_second,\n      transformation_progress: 1 / 3\n    };\n  });\n});',
         },
         {
           id: "887245c3-183c-4dac-a1aa-d602d21b6450",
@@ -376,6 +376,21 @@ export const productionMachines: { title: string; petriNetDefinition: SDCPN } =
           code: '// This function defines the differential equation for the place of type "Technician".\n// The function receives the current tokens in all places and the parameters.\n// It should return the derivative of the token value in this place.\nexport default Dynamics((tokens, parameters) => {\n  return tokens.map(({ distance_to_site }) => {\n    // ...Do some computation with input token here if needed\n\n    return {\n      distance_to_site: -1\n    };\n  });\n});',
         },
       ],
-      parameters: [],
+      parameters: [
+        {
+          id: "param__damage_per_second",
+          name: "Damage Per Second",
+          variableName: "damage_per_second",
+          type: "real",
+          defaultValue: "0.001",
+        },
+        {
+          id: "param__damage_reparation_per_second",
+          name: "Damage Reparation Per Second",
+          variableName: "damage_reparation_per_second",
+          type: "real",
+          defaultValue: "0.333",
+        },
+      ],
     },
   };