Refactor simulation paths to simulation states

- Updated all instances of `simulationPaths` to `simulationStates` across multiple components including copyPasteControls, duplicationControls, moveControls, rotateControls, selectionControls, and others. - Adjusted related state management hooks in the store to reflect the change from `simulationPaths` to `simulationStates`. - Ensured that all references to simulation paths in the simulation logic and UI components are consistent with the new naming convention.
2025-04-05 10:12:28 +05:30
parent 42f0ae5317
commit e92345d820
22 changed files with 260 additions and 333 deletions
--- a/app/src/modules/simulation/behaviour/behaviour.tsx
+++ b/app/src/modules/simulation/behaviour/behaviour.tsx
@@ -1,10 +1,10 @@
-import { useFloorItems, useSimulationPaths } from '../../../store/store';
+import { useFloorItems, useSimulationStates } from '../../../store/store';
 import * as THREE from 'three';
 import * as Types from '../../../types/world/worldTypes';
 import { useEffect } from 'react';

 function Behaviour() {
-    const { setSimulationPaths } = useSimulationPaths();
+    const { setSimulationStates } = useSimulationStates();
    const { floorItems } = useFloorItems();

    useEffect(() => {
@@ -78,7 +78,7 @@ function Behaviour() {
        //     }
        // });

-        // setSimulationPaths(newPaths);
+        // setSimulationStates(newPaths);
        // console.log('floorItems: ', floorItems);
    }, [floorItems]);

--- a/app/src/modules/simulation/path/pathConnector.tsx
+++ b/app/src/modules/simulation/path/pathConnector.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import * as THREE from 'three';
 import * as Types from '../../../types/world/worldTypes';
 import { QuadraticBezierLine } from '@react-three/drei';
-import { useIsConnecting, useSimulationPaths } from '../../../store/store';
+import { useIsConnecting, useSimulationStates } from '../../../store/store';
 import useModuleStore from '../../../store/useModuleStore';
 import { usePlayButtonStore } from '../../../store/usePlayButtonStore';

@@ -11,7 +11,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
    const { activeModule } = useModuleStore();
    const { gl, raycaster, scene, pointer, camera } = useThree();
    const { setIsConnecting } = useIsConnecting();
-    const { simulationPaths, setSimulationPaths } = useSimulationPaths();
+    const { simulationStates, setSimulationStates } = useSimulationStates();
    const { isPlaying } = usePlayButtonStore();

    const [firstSelected, setFirstSelected] = useState<{
@@ -29,7 +29,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
        toPathUUID: string,
        toPointUUID: string
    ) => {
-        const updatedPaths = simulationPaths.map(path => {
+        const updatedPaths = simulationStates.map(path => {
            if (path.type === 'Conveyor') {
                if (path.modeluuid === fromPathUUID) {
                    return {
@@ -99,7 +99,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                    const existingTargets = path.points.connections.targets || [];

                    // Check if target is a Conveyor
-                    const toPath = simulationPaths.find(p => p.modeluuid === toPathUUID);
+                    const toPath = simulationStates.find(p => p.modeluuid === toPathUUID);
                    if (toPath?.type !== 'Conveyor') {
                        console.log("Vehicle can only connect to Conveyors");
                        return path;
@@ -136,7 +136,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                    const existingTargets = path.points.connections.targets || [];

                    // Check if source is a Conveyor
-                    const fromPath = simulationPaths.find(p => p.modeluuid === fromPathUUID);
+                    const fromPath = simulationStates.find(p => p.modeluuid === fromPathUUID);
                    if (fromPath?.type !== 'Conveyor') {
                        console.log("Vehicle can only connect to Conveyors");
                        return path;
@@ -169,7 +169,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
            return path;
        });

-        setSimulationPaths(updatedPaths);
+        setSimulationStates(updatedPaths);
    };

    const handleAddConnection = (fromPathUUID: string, fromUUID: string, toPathUUID: string, toUUID: string) => {
@@ -227,8 +227,8 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                    }

                    if (pathUUID) {
-                        const firstPath = simulationPaths.find(p => p.modeluuid === firstSelected?.pathUUID);
-                        const secondPath = simulationPaths.find(p => p.modeluuid === pathUUID);
+                        const firstPath = simulationStates.find(p => p.modeluuid === firstSelected?.pathUUID);
+                        const secondPath = simulationStates.find(p => p.modeluuid === pathUUID);

                        // Prevent vehicle-to-vehicle connections
                        if (firstPath && secondPath && firstPath.type === 'Vehicle' && secondPath.type === 'Vehicle') {
@@ -247,7 +247,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec

                        // Check if this specific connection already exists
                        const isDuplicateConnection = firstSelected
-                            ? simulationPaths.some(path => {
+                            ? simulationStates.some(path => {
                                if (path.modeluuid === firstSelected.pathUUID) {
                                    if (path.type === 'Conveyor') {
                                        const point = path.points.find(p => p.uuid === firstSelected.sphereUUID);
@@ -281,7 +281,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec

                        // For non-Vehicle paths, check if already connected
                        if (intersected.userData.path.type !== 'Vehicle') {
-                            const isAlreadyConnected = simulationPaths.some(path => {
+                            const isAlreadyConnected = simulationStates.some(path => {
                                if (path.type === 'Conveyor') {
                                    return path.points.some(point =>
                                        point.uuid === sphereUUID &&
@@ -361,7 +361,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
            canvasElement.removeEventListener("mousemove", onMouseMove);
            canvasElement.removeEventListener("contextmenu", onContextMenu);
        };
-    }, [camera, scene, raycaster, firstSelected, simulationPaths]);
+    }, [camera, scene, raycaster, firstSelected, simulationStates]);

    useFrame(() => {
        if (firstSelected) {
@@ -397,8 +397,8 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                const pathData = sphere.userData.path;
                const pathUUID = pathData.modeluuid;

-                const firstPath = simulationPaths.find(p => p.modeluuid === firstSelected.pathUUID);
-                const secondPath = simulationPaths.find(p => p.modeluuid === pathUUID);
+                const firstPath = simulationStates.find(p => p.modeluuid === firstSelected.pathUUID);
+                const secondPath = simulationStates.find(p => p.modeluuid === pathUUID);
                const isVehicleToVehicle = firstPath?.type === 'Vehicle' && secondPath?.type === 'Vehicle';

                // Inside the useFrame hook, where we check for snapped spheres:
@@ -413,7 +413,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
                        !firstSelected.isCorner);

                // Check for duplicate connection (regardless of path type)
-                const isDuplicateConnection = simulationPaths.some(path => {
+                const isDuplicateConnection = simulationStates.some(path => {
                    if (path.modeluuid === firstSelected.pathUUID) {
                        if (path.type === 'Conveyor') {
                            const point = path.points.find(p => p.uuid === firstSelected.sphereUUID);
@@ -431,7 +431,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec

                // For non-Vehicle paths, check if already connected
                const isNonVehicleAlreadyConnected = pathData.type !== 'Vehicle' &&
-                    simulationPaths.some(path => {
+                    simulationStates.some(path => {
                        if (path.type === 'Conveyor') {
                            return path.points.some(point =>
                                point.uuid === sphereUUID &&
@@ -505,11 +505,11 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec

    return (
        <group name='simulationConnectionGroup' visible={!isPlaying} >
-            {simulationPaths.flatMap(path => {
+            {simulationStates.flatMap(path => {
                if (path.type === 'Conveyor') {
                    return path.points.flatMap(point =>
                        point.connections.targets.map((target, index) => {
-                            const targetPath = simulationPaths.find(p => p.modeluuid === target.pathUUID);
+                            const targetPath = simulationStates.find(p => p.modeluuid === target.pathUUID);
                            if (targetPath?.type === 'Vehicle') return null;

                            const fromSphere = pathsGroupRef.current?.getObjectByProperty('uuid', point.uuid);
--- a/app/src/modules/simulation/path/pathCreation.tsx
+++ b/app/src/modules/simulation/path/pathCreation.tsx
@@ -10,7 +10,7 @@ import {
  useRenderDistance,
  useSelectedActionSphere,
  useSelectedPath,
-  useSimulationPaths,
+  useSimulationStates,
 } from "../../../store/store";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useSubModuleStore } from "../../../store/useModuleStore";
@@ -32,7 +32,7 @@ function PathCreation({
  const { raycaster, camera, pointer, gl } = useThree();
  const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
  const { setSelectedPath } = useSelectedPath();
-  const { simulationPaths, setSimulationPaths } = useSimulationPaths();
+  const { simulationStates, setSimulationStates } = useSimulationStates();
  const { isConnecting } = useIsConnecting();

  const groupRefs = useRef<{ [key: string]: THREE.Group }>({});
@@ -71,7 +71,7 @@ function PathCreation({
  const updateSimulationPaths = () => {
    if (!selectedActionSphere) return;

-    const updatedPaths = simulationPaths.map((path) => {
+    const updatedPaths = simulationStates.map((path) => {
      if (path.type === "Conveyor") {
        return {
          ...path,
@@ -97,7 +97,7 @@ function PathCreation({
      return path;
    }) as Types.ConveyorEventsSchema[];

-    setSimulationPaths(updatedPaths);
+    setSimulationStates(updatedPaths);
  };

  useFrame(() => {
@@ -173,7 +173,7 @@ function PathCreation({
    z: number
  ) => {
    if (!selectedActionSphere?.points?.uuid) return;
-    const updatedPaths = simulationPaths.map((path) => {
+    const updatedPaths = simulationStates.map((path) => {

      if (
        path.type === "Vehicle" &&
@@ -204,12 +204,12 @@ function PathCreation({
    );
    updateBackend(updatedPath);

-    setSimulationPaths(updatedPaths);
+    setSimulationStates(updatedPaths);
  };

  return (
-    <group visible={!isPlaying} name="simulation-simulationPaths-group" ref={pathsGroupRef}>
-      {simulationPaths.map((path) => {
+    <group visible={!isPlaying} name="simulation-simulationStates-group" ref={pathsGroupRef}>
+      {simulationStates.map((path) => {
        if (path.type === "Conveyor") {
          const points = path.points.map(
            (point) => new THREE.Vector3(...point.position)
--- a/app/src/modules/simulation/process/processCreator.tsx
+++ b/app/src/modules/simulation/process/processCreator.tsx
@@ -5,7 +5,7 @@
 //   useCallback,
 //   useRef,
 // } from "react";
-// import { useSimulationPaths } from "../../../store/store";
+// import { useSimulationStates } from "../../../store/store";
 // import * as THREE from "three";
 // import { useThree } from "@react-three/fiber";
 // import {
@@ -312,19 +312,19 @@

 // const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
 //   ({ onProcessesCreated }) => {
-//     const { simulationPaths } = useSimulationPaths();
+//     const { simulationStates } = useSimulationStates();
 //     const { createProcessesFromPaths } = useProcessCreation();
 //     const prevPathsRef = useRef<SimulationPath[]>([]);
 //     const prevProcessesRef = useRef<Process[]>([]);

 //     const convertedPaths = useMemo((): SimulationPath[] => {
-//       if (!simulationPaths) return [];
-//       return simulationPaths.map((path) =>
+//       if (!simulationStates) return [];
+//       return simulationStates.map((path) =>
 //         convertToSimulationPath(
 //           path as ConveyorEventsSchema | VehicleEventsSchema
 //         )
 //       );
-//     }, [simulationPaths]);
+//     }, [simulationStates]);

 //     const pathsDependency = useMemo(() => {
 //       if (!convertedPaths) return null;
@@ -404,7 +404,7 @@ import React, {
  useCallback,
  useRef,
 } from "react";
-import { useSimulationPaths } from "../../../store/store";
+import { useSimulationStates } from "../../../store/store";
 import * as THREE from "three";
 import { useThree } from "@react-three/fiber";
 import {
@@ -737,19 +737,19 @@ export function useProcessCreation() {

 const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
  ({ onProcessesCreated }) => {
-    const { simulationPaths } = useSimulationPaths();
+    const { simulationStates } = useSimulationStates();
    const { createProcessesFromPaths } = useProcessCreation();
    const prevPathsRef = useRef<SimulationPath[]>([]);
    const prevProcessesRef = useRef<Process[]>([]);

    const convertedPaths = useMemo((): SimulationPath[] => {
-      if (!simulationPaths) return [];
-      return simulationPaths.map((path) =>
+      if (!simulationStates) return [];
+      return simulationStates.map((path) =>
        convertToSimulationPath(
          path as ConveyorEventsSchema | VehicleEventsSchema
        )
      );
-    }, [simulationPaths]);
+    }, [simulationStates]);

    // Enhanced dependency tracking that includes action types
    const pathsDependency = useMemo(() => {
--- a/app/src/modules/simulation/simulation.tsx
+++ b/app/src/modules/simulation/simulation.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, useMemo } from "react";
 import {
  useSelectedActionSphere,
  useSelectedPath,
-  useSimulationPaths,
+  useSimulationStates,
 } from "../../store/store";
 import * as THREE from "three";
 import Behaviour from "./behaviour/behaviour";
@@ -15,12 +15,12 @@ import Agv from "../builder/agv/agv";
 function Simulation() {
  const { activeModule } = useModuleStore();
  const pathsGroupRef = useRef() as React.MutableRefObject<THREE.Group>;
-  const { simulationPaths, setSimulationPaths } = useSimulationPaths();
+  const { simulationStates, setSimulationStates } = useSimulationStates();
  const [processes, setProcesses] = useState([]);

  useEffect(() => {
-    // console.log('simulationPaths: ', simulationPaths);
-  }, [simulationPaths]);
+    // console.log('simulationStates: ', simulationStates);
+  }, [simulationStates]);

  // useEffect(() => {
  //     if (selectedActionSphere) {
--- a/app/src/modules/simulation/simulationUI.tsx
+++ b/app/src/modules/simulation/simulationUI.tsx
@@ -1,5 +1,5 @@
 // import { useMemo, useState } from 'react';
-// import { useSelectedActionSphere, useToggleView, useSimulationPaths, useSelectedPath, useStartSimulation, useDrawMaterialPath } from '../../store/store';
+// import { useSelectedActionSphere, useToggleView, useSimulationStates, useSelectedPath, useStartSimulation, useDrawMaterialPath } from '../../store/store';
 // import * as THREE from 'three';
 // import useModuleStore from '../../store/useModuleStore';

@@ -9,14 +9,14 @@
 //     const { startSimulation, setStartSimulation } = useStartSimulation();
 //     const { selectedActionSphere } = useSelectedActionSphere();
 //     const { selectedPath, setSelectedPath } = useSelectedPath();
-//     const { simulationPaths, setSimulationPaths } = useSimulationPaths();
+//     const { simulationStates, setSimulationStates } = useSimulationStates();
 //     const { drawMaterialPath, setDrawMaterialPath } = useDrawMaterialPath();
 //     const [activeButton, setActiveButton] = useState<string | null>(null);

 //     const handleAddAction = () => {
 //         if (!selectedActionSphere) return;

-//         const updatedPaths = simulationPaths.map((path) => ({
+//         const updatedPaths = simulationStates.map((path) => ({
 //             ...path,
 //             points: path.points.map((point) => {
 //                 if (point.uuid === selectedActionSphere.points.uuid) {
@@ -37,13 +37,13 @@
 //             }),
 //         }));

-//         setSimulationPaths(updatedPaths);
+//         setSimulationStates(updatedPaths);
 //     };

 //     const handleDeleteAction = (uuid: string) => {
 //         if (!selectedActionSphere) return;

-//         const updatedPaths = simulationPaths.map((path) => ({
+//         const updatedPaths = simulationStates.map((path) => ({
 //             ...path,
 //             points: path.points.map((point) =>
 //                 point.uuid === selectedActionSphere.points.uuid
@@ -52,13 +52,13 @@
 //             ),
 //         }));

-//         setSimulationPaths(updatedPaths);
+//         setSimulationStates(updatedPaths);
 //     };

 //     const handleActionSelect = (uuid: string, actionType: string) => {
 //         if (!selectedActionSphere) return;

-//         const updatedPaths = simulationPaths.map((path) => ({
+//         const updatedPaths = simulationStates.map((path) => ({
 //             ...path,
 //             points: path.points.map((point) =>
 //                 point.uuid === selectedActionSphere.points.uuid
@@ -72,13 +72,13 @@
 //             ),
 //         }));

-//         setSimulationPaths(updatedPaths);
+//         setSimulationStates(updatedPaths);
 //     };

 //     const handleMaterialSelect = (uuid: string, material: string) => {
 //         if (!selectedActionSphere) return;

-//         const updatedPaths = simulationPaths.map((path) => ({
+//         const updatedPaths = simulationStates.map((path) => ({
 //             ...path,
 //             points: path.points.map((point) =>
 //                 point.uuid === selectedActionSphere.points.uuid
@@ -92,13 +92,13 @@
 //             ),
 //         }));

-//         setSimulationPaths(updatedPaths);
+//         setSimulationStates(updatedPaths);
 //     };

 //     const handleDelayChange = (uuid: string, delay: number | string) => {
 //         if (!selectedActionSphere) return;

-//         const updatedPaths = simulationPaths.map((path) => ({
+//         const updatedPaths = simulationStates.map((path) => ({
 //             ...path,
 //             points: path.points.map((point) =>
 //                 point.uuid === selectedActionSphere.points.uuid
@@ -112,13 +112,13 @@
 //             ),
 //         }));

-//         setSimulationPaths(updatedPaths);
+//         setSimulationStates(updatedPaths);
 //     };

 //     const handleSpawnIntervalChange = (uuid: string, spawnInterval: number | string) => {
 //         if (!selectedActionSphere) return;

-//         const updatedPaths = simulationPaths.map((path) => ({
+//         const updatedPaths = simulationStates.map((path) => ({
 //             ...path,
 //             points: path.points.map((point) =>
 //                 point.uuid === selectedActionSphere.points.uuid
@@ -132,24 +132,24 @@
 //             ),
 //         }));

-//         setSimulationPaths(updatedPaths);
+//         setSimulationStates(updatedPaths);
 //     };

 //     const handleSpeedChange = (speed: number) => {
 //         if (!selectedPath) return;

-//         const updatedPaths = simulationPaths.map((path) =>
+//         const updatedPaths = simulationStates.map((path) =>
 //             path.modeluuid === selectedPath.path.modeluuid ? { ...path, speed } : path
 //         );

-//         setSimulationPaths(updatedPaths);
+//         setSimulationStates(updatedPaths);
 //         setSelectedPath({ ...selectedPath, path: { ...selectedPath.path, speed } });
 //     };

 //     const handleAddTrigger = () => {
 //         if (!selectedActionSphere) return;

-//         const updatedPaths = simulationPaths.map((path) => ({
+//         const updatedPaths = simulationStates.map((path) => ({
 //             ...path,
 //             points: path.points.map((point) => {
 //                 if (point.uuid === selectedActionSphere.points.uuid) {
@@ -167,13 +167,13 @@
 //             }),
 //         }));

-//         setSimulationPaths(updatedPaths);
+//         setSimulationStates(updatedPaths);
 //     };

 //     const handleDeleteTrigger = (uuid: string) => {
 //         if (!selectedActionSphere) return;

-//         const updatedPaths = simulationPaths.map((path) => ({
+//         const updatedPaths = simulationStates.map((path) => ({
 //             ...path,
 //             points: path.points.map((point) =>
 //                 point.uuid === selectedActionSphere.points.uuid
@@ -182,13 +182,13 @@
 //             ),
 //         }));

-//         setSimulationPaths(updatedPaths);
+//         setSimulationStates(updatedPaths);
 //     };

 //     const handleTriggerSelect = (uuid: string, triggerType: string) => {
 //         if (!selectedActionSphere) return;

-//         const updatedPaths = simulationPaths.map((path) => ({
+//         const updatedPaths = simulationStates.map((path) => ({
 //             ...path,
 //             points: path.points.map((point) =>
 //                 point.uuid === selectedActionSphere.points.uuid
@@ -202,7 +202,7 @@
 //             ),
 //         }));

-//         setSimulationPaths(updatedPaths);
+//         setSimulationStates(updatedPaths);
 //     };

 //     const handleResetPath = () => {
@@ -214,7 +214,7 @@
 //     const handleActionToggle = (uuid: string) => {
 //         if (!selectedActionSphere) return;

-//         const updatedPaths = simulationPaths.map((path) => ({
+//         const updatedPaths = simulationStates.map((path) => ({
 //             ...path,
 //             points: path.points.map((point) =>
 //                 point.uuid === selectedActionSphere.points.uuid
@@ -229,13 +229,13 @@
 //             ),
 //         }));

-//         setSimulationPaths(updatedPaths);
+//         setSimulationStates(updatedPaths);
 //     };

 //     const handleTriggerToggle = (uuid: string) => {
 //         if (!selectedActionSphere) return;

-//         const updatedPaths = simulationPaths.map((path) => ({
+//         const updatedPaths = simulationStates.map((path) => ({
 //             ...path,
 //             points: path.points.map((point) =>
 //                 point.uuid === selectedActionSphere.points.uuid
@@ -250,13 +250,13 @@
 //             ),
 //         }));

-//         setSimulationPaths(updatedPaths);
+//         setSimulationStates(updatedPaths);
 //     };

 //     const selectedPoint = useMemo(() => {
 //         if (!selectedActionSphere) return null;
-//         return simulationPaths.flatMap((path) => path.points).find((point) => point.uuid === selectedActionSphere.points.uuid);
-//     }, [selectedActionSphere, simulationPaths]);
+//         return simulationStates.flatMap((path) => path.points).find((point) => point.uuid === selectedActionSphere.points.uuid);
+//     }, [selectedActionSphere, simulationStates]);

 //     const createPath = () => {
 //         setActiveButton(activeButton !== 'addMaterialPath' ? 'addMaterialPath' : null);
--- a/app/src/modules/simulation/simulationtemp/path/pathCreator.tsx
+++ b/app/src/modules/simulation/simulationtemp/path/pathCreator.tsx
@@ -11,13 +11,13 @@ type PathPoint = {
 };

 type PathCreatorProps = {
-    simulationPaths: PathPoint[][];
-    setSimulationPaths: React.Dispatch<React.SetStateAction<PathPoint[][]>>;
+    simulationStates: PathPoint[][];
+    setSimulationStates: React.Dispatch<React.SetStateAction<PathPoint[][]>>;
    connections: { start: PathPoint; end: PathPoint }[];
    setConnections: React.Dispatch<React.SetStateAction<{ start: PathPoint; end: PathPoint }[]>>
 };

-const PathCreator = ({ simulationPaths, setSimulationPaths, connections, setConnections }: PathCreatorProps) => {
+const PathCreator = ({ simulationStates, setSimulationStates, connections, setConnections }: PathCreatorProps) => {
    const { camera, scene, raycaster, pointer, gl } = useThree();
    const { drawMaterialPath } = useDrawMaterialPath();

@@ -71,7 +71,7 @@ const PathCreator = ({ simulationPaths, setSimulationPaths, connections, setConn
            e.preventDefault();
            if (drag || e.button === 0) return;
            if (currentPath.length > 1) {
-                setSimulationPaths((prevPaths) => [...prevPaths, currentPath]);
+                setSimulationStates((prevPaths) => [...prevPaths, currentPath]);
            }
            setCurrentPath([]);
            setTemporaryPoint(null);
@@ -125,7 +125,7 @@ const PathCreator = ({ simulationPaths, setSimulationPaths, connections, setConn
            canvasElement.addEventListener("contextmenu", onContextMenu);
        } else {
            if (currentPath.length > 1) {
-                setSimulationPaths((prevPaths) => [...prevPaths, currentPath]);
+                setSimulationStates((prevPaths) => [...prevPaths, currentPath]);
            }
            setCurrentPath([]);
            setTemporaryPoint(null);
@@ -179,25 +179,25 @@ const PathCreator = ({ simulationPaths, setSimulationPaths, connections, setConn
        if (selectedPoint) {
            const updatedPosition = e.target.object.position.clone();
            const updatedRotation = e.target.object.quaternion.clone();
-            const updatedPaths = simulationPaths.map((path) =>
+            const updatedPaths = simulationStates.map((path) =>
                path.map((p) =>
                    p.uuid === selectedPoint.uuid ? { ...p, position: updatedPosition, rotation: updatedRotation } : p
                )
            );
-            setSimulationPaths(updatedPaths);
+            setSimulationStates(updatedPaths);
        }
    };


    const meshContext = (uuid: string) => {
-        const pathIndex = simulationPaths.findIndex(path => path.some(point => point.uuid === uuid));
+        const pathIndex = simulationStates.findIndex(path => path.some(point => point.uuid === uuid));
        if (pathIndex === -1) return;

-        const clickedPoint = simulationPaths[pathIndex].find(point => point.uuid === uuid);
+        const clickedPoint = simulationStates[pathIndex].find(point => point.uuid === uuid);
        if (!clickedPoint) return;

-        const isStart = simulationPaths[pathIndex][0].uuid === uuid;
-        const isEnd = simulationPaths[pathIndex][simulationPaths[pathIndex].length - 1].uuid === uuid;
+        const isStart = simulationStates[pathIndex][0].uuid === uuid;
+        const isEnd = simulationStates[pathIndex][simulationStates[pathIndex].length - 1].uuid === uuid;

        if (pathIndex === 0 && isStart) {
            console.log("The first-ever point is not connectable.");
@@ -285,8 +285,8 @@ const PathCreator = ({ simulationPaths, setSimulationPaths, connections, setConn
    return (
        <>
            <group name='pathObjects'>
-                {/* Render finalized simulationPaths */}
-                {simulationPaths.map((path, pathIndex) => (
+                {/* Render finalized simulationStates */}
+                {simulationStates.map((path, pathIndex) => (
                    <group key={`path-line-${pathIndex}`}>
                        <Line
                            name={`path-line-${pathIndex}`}
@@ -299,7 +299,7 @@ const PathCreator = ({ simulationPaths, setSimulationPaths, connections, setConn
                ))}

                {/* Render finalized points */}
-                {simulationPaths.map((path) =>
+                {simulationStates.map((path) =>
                    path.map((point) => (
                        <mesh
                            key={`path-point-${point.uuid}`}
--- a/app/src/modules/simulation/simulationtemp/simulation.tsx
+++ b/app/src/modules/simulation/simulationtemp/simulation.tsx
@@ -10,13 +10,13 @@ type PathPoint = {
 };

 function Simulation() {
-    const [simulationPaths, setSimulationPaths] = useState<{ position: THREE.Vector3; rotation: THREE.Quaternion; uuid: string }[][]>([]);
+    const [simulationStates, setSimulationStates] = useState<{ position: THREE.Vector3; rotation: THREE.Quaternion; uuid: string }[][]>([]);
    const [connections, setConnections] = useState<{ start: PathPoint; end: PathPoint }[]>([]);

    return (
        <>
-            <PathCreator simulationPaths={simulationPaths} setSimulationPaths={setSimulationPaths} connections={connections} setConnections={setConnections} />
-            {simulationPaths.map((path, index) => (
+            <PathCreator simulationStates={simulationStates} setSimulationStates={setSimulationStates} connections={connections} setConnections={setConnections} />
+            {simulationStates.map((path, index) => (
                <PathFlow key={index} path={path} connections={connections} />
            ))}
        </>