Enhance simulation components with time tracking and performance metrics

- Added idle and active time tracking to ConveyorInstance, PillarJibInstance, HumanInstance, RoboticArmInstance, and StorageUnitInstance.
- Integrated animation play speed and pause functionality into simulation components.
- Updated simulation types to include cost and energy metrics for various analyses.
- Improved performance tracking with additional metrics such as load utilization and efficiency calculations.

app/src/modules/simulation/conveyor/instances/conveyorInstance/conveyorInstance.tsx

@@ -1,6 +1,8 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useFrame } from "@react-three/fiber";
 import { useSceneContext } from "../../../../scene/sceneContext";
+import { usePauseButtonStore } from "../../../../../store/ui/usePlayButtonStore";
+import { useAnimationPlaySpeed, usePlayButtonStore } from "../../../../../store/ui/usePlayButtonStore";
 
 // import { findConveyorSubsequence } from '../../../simulator/functions/getConveyorSequencesInProduct';
 
@@ -8,7 +10,70 @@ function ConveyorInstance({ conveyor }: { readonly conveyor: ConveyorStatus }) {
     const { materialStore, conveyorStore, productStore } = useSceneContext();
     const { getProductById, selectedProduct } = productStore();
     const { getMaterialsByCurrentModelUuid } = materialStore();
-    const { setConveyorPaused } = conveyorStore();
+    const { setConveyorPaused, conveyors, incrementActiveTime, incrementIdleTime } = conveyorStore();
+    const { isPlaying } = usePlayButtonStore();
+
+    const idleTimeRef = useRef<number>(0);
+    const activeTimeRef = useRef<number>(0);
+    const previousTimeRef = useRef<number | null>(null);
+    const animationFrameIdRef = useRef<number | null>(null);
+    const isSpeedRef = useRef<number>(0);
+    const isPausedRef = useRef<boolean>(false);
+
+    const { speed } = useAnimationPlaySpeed();
+    const { isPaused } = usePauseButtonStore();
+
+    useEffect(() => {
+        isPausedRef.current = isPaused;
+    }, [isPaused]);
+
+    useEffect(() => {
+        isSpeedRef.current = speed;
+    }, [speed]);
+
+    function animate(currentTime: number) {
+        if (previousTimeRef.current === null) {
+            previousTimeRef.current = currentTime;
+        }
+
+        const deltaTime = (currentTime - previousTimeRef.current) / 1000;
+        previousTimeRef.current = currentTime;
+
+        if (!conveyor.isPaused) {
+            if (!isPausedRef.current) {
+                activeTimeRef.current += deltaTime * isSpeedRef.current;
+            }
+        } else {
+            if (!isPausedRef.current) {
+                idleTimeRef.current += deltaTime * isSpeedRef.current;
+            }
+        }
+        animationFrameIdRef.current = requestAnimationFrame(animate);
+    }
+
+    useEffect(() => {
+        if (!isPlaying) return;
+        if (!conveyor.isPaused) {
+            const roundedActiveTime = Math.round(activeTimeRef.current);
+            incrementActiveTime(conveyor.modelUuid, roundedActiveTime);
+            activeTimeRef.current = 0;
+        } else {
+            const roundedIdleTime = Math.round(idleTimeRef.current);
+            incrementIdleTime(conveyor.modelUuid, roundedIdleTime);
+            idleTimeRef.current = 0;
+        }
+
+        if (animationFrameIdRef.current === null) {
+            animationFrameIdRef.current = requestAnimationFrame(animate);
+        }
+
+        return () => {
+            if (animationFrameIdRef.current !== null) {
+                cancelAnimationFrame(animationFrameIdRef.current);
+                animationFrameIdRef.current = null;
+            }
+        };
+    }, [conveyor, conveyors, isPlaying]);
 
     useFrame(() => {
         const product = getProductById(selectedProduct.productUuid);

app/src/modules/simulation/crane/instances/instance/pillarJibInstance.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import * as THREE from "three";
-import { usePlayButtonStore } from "../../../../../store/ui/usePlayButtonStore";
+import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore } from "../../../../../store/ui/usePlayButtonStore";
 import { useSceneContext } from "../../../../scene/sceneContext";
 import { useTriggerHandler } from "../../../triggers/triggerHandler/useTriggerHandler";
 
@@ -13,7 +13,7 @@ function PillarJibInstance({ crane }: { readonly crane: CraneStatus }) {
     const { craneStore, productStore, humanStore, assetStore } = useSceneContext();
     const { triggerPointActions } = useTriggerHandler();
     const { getActionByUuid, selectedProduct } = productStore();
-    const { setCurrentPhase, setCraneActive, setIsCaryying, removeCurrentAction, removeLastMaterial, decrementCraneLoad } = craneStore();
+    const { cranes, setCurrentPhase, setCraneActive, setIsCaryying, removeCurrentAction, removeLastMaterial, decrementCraneLoad, incrementActiveTime, incrementIdleTime } = craneStore();
     const { setCurrentPhase: setCurrentPhaseHuman, setHumanActive, setHumanState, getHumanById } = humanStore();
     const { setCurrentAnimation, getAssetById } = assetStore();
     const [animationPhase, setAnimationPhase] = useState<string>("idle");
@@ -24,6 +24,68 @@ function PillarJibInstance({ crane }: { readonly crane: CraneStatus }) {
     const humanAsset = getAssetById(humanId || "");
     const humanAction = getActionByUuid(selectedProduct.productUuid, actionTriggers?.[0]?.triggeredAsset?.triggeredAction?.actionUuid ?? "");
 
+    const idleTimeRef = useRef<number>(0);
+    const activeTimeRef = useRef<number>(0);
+    const previousTimeRef = useRef<number | null>(null);
+    const animationFrameIdRef = useRef<number | null>(null);
+    const isSpeedRef = useRef<number>(0);
+    const isPausedRef = useRef<boolean>(false);
+
+    const { speed } = useAnimationPlaySpeed();
+    const { isPaused } = usePauseButtonStore();
+
+    useEffect(() => {
+        isPausedRef.current = isPaused;
+    }, [isPaused]);
+
+    useEffect(() => {
+        isSpeedRef.current = speed;
+    }, [speed]);
+
+    function animate(currentTime: number) {
+        if (previousTimeRef.current === null) {
+            previousTimeRef.current = currentTime;
+        }
+
+        const deltaTime = (currentTime - previousTimeRef.current) / 1000;
+        previousTimeRef.current = currentTime;
+
+        if (crane.isActive) {
+            if (!isPausedRef.current) {
+                activeTimeRef.current += deltaTime * isSpeedRef.current;
+            }
+        } else {
+            if (!isPausedRef.current) {
+                idleTimeRef.current += deltaTime * isSpeedRef.current;
+            }
+        }
+        animationFrameIdRef.current = requestAnimationFrame(animate);
+    }
+
+    useEffect(() => {
+        if (!isPlaying) return;
+        if (crane.isActive) {
+            const roundedActiveTime = Math.round(activeTimeRef.current);
+            incrementActiveTime(crane.modelUuid, roundedActiveTime);
+            activeTimeRef.current = 0;
+        } else {
+            const roundedIdleTime = Math.round(idleTimeRef.current);
+            incrementIdleTime(crane.modelUuid, roundedIdleTime);
+            idleTimeRef.current = 0;
+        }
+
+        if (animationFrameIdRef.current === null) {
+            animationFrameIdRef.current = requestAnimationFrame(animate);
+        }
+
+        return () => {
+            if (animationFrameIdRef.current !== null) {
+                cancelAnimationFrame(animationFrameIdRef.current);
+                animationFrameIdRef.current = null;
+            }
+        };
+    }, [crane, cranes, isPlaying]);
+
     useEffect(() => {
         if (isPlaying) {
             const human = getHumanById(humanId || "");
@@ -42,7 +104,13 @@ function PillarJibInstance({ crane }: { readonly crane: CraneStatus }) {
                     setHumanState(humanId, "running");
                     setCurrentAnimation(humanId, "working_standing", true, false, false);
                 }
-            } else if (crane.currentPhase === "dropping" && crane.currentMaterials.length > 0 && action.maxPickUpCount <= crane.currentMaterials.length && crane.isCarrying && human.currentPhase === "hooking") {
+            } else if (
+                crane.currentPhase === "dropping" &&
+                crane.currentMaterials.length > 0 &&
+                action.maxPickUpCount <= crane.currentMaterials.length &&
+                crane.isCarrying &&
+                human.currentPhase === "hooking"
+            ) {
                 setCurrentPhaseHuman(humanId, "loadPoint-unloadPoint");
             } else if (human.state === "running" && human.currentPhase === "unhooking") {
                 if (humanAsset?.animationState?.current === "working_standing" && humanAsset?.animationState?.isCompleted) {
@@ -83,7 +151,15 @@ function PillarJibInstance({ crane }: { readonly crane: CraneStatus }) {
 
     return (
         <>
-            <PillarJibAnimator key={crane.modelUuid} crane={crane} points={points} setPoints={setPoints} animationPhase={animationPhase} setAnimationPhase={setAnimationPhase} onAnimationComplete={handleAnimationComplete} />
+            <PillarJibAnimator
+                key={crane.modelUuid}
+                crane={crane}
+                points={points}
+                setPoints={setPoints}
+                animationPhase={animationPhase}
+                setAnimationPhase={setAnimationPhase}
+                onAnimationComplete={handleAnimationComplete}
+            />
 
             <MaterialAnimator crane={crane} />
 

app/src/modules/simulation/human/instances/instance/humanInstance.tsx

@@ -11,7 +11,7 @@ function HumanInstance({ human }: { readonly human: HumanStatus }) {
     const { isPlaying } = usePlayButtonStore();
     const { humanStore, productStore } = useSceneContext();
     const { getActionByUuid, selectedProduct } = productStore();
-    const { incrementIdleTime, incrementActiveTime } = humanStore();
+    const { incrementIdleTime, incrementActiveTime, humans } = humanStore();
 
     const idleTimeRef = useRef<number>(0);
     const activeTimeRef = useRef<number>(0);
@@ -73,7 +73,7 @@ function HumanInstance({ human }: { readonly human: HumanStatus }) {
                 animationFrameIdRef.current = null;
             }
         };
-    }, [human, isPlaying]);
+    }, [human, humans, isPlaying]);
 
     return (
         <>

app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx

@@ -19,7 +19,7 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
 
     const { materialStore, armBotStore, vehicleStore, storageUnitStore, productStore, assetStore } = useSceneContext();
     const { resetAsset } = assetStore();
-    const { setArmBotActive, setArmBotState, removeCurrentAction, incrementActiveTime, incrementIdleTime } = armBotStore();
+    const { setArmBotActive, setArmBotState, removeCurrentAction, incrementActiveTime, incrementIdleTime, armBots } = armBotStore();
     const { decrementVehicleLoad, removeLastMaterial } = vehicleStore();
     const { removeLastMaterial: removeLastStorageMaterial, updateCurrentLoad } = storageUnitStore();
     const { getMaterialById, setIsVisible } = materialStore();
@@ -186,7 +186,7 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
                 animationFrameIdRef.current = null; // Reset the animation frame ID
             }
         };
-    }, [armBot, currentPhase, isPlaying]);
+    }, [armBot, armBots, currentPhase, isPlaying]);
 
     useEffect(() => {
         const targetBones = ikSolver?.mesh.skeleton.bones.find((b: any) => b.name === targetBone);
@@ -320,7 +320,15 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
             {!isReset && isPlaying && (
                 <>
                     <IKInstance setIkSolver={setIkSolver} armBot={armBot} />
-                    <RoboticArmAnimator HandleCallback={HandleCallback} restPosition={restPosition} ikSolver={ikSolver} targetBone={targetBone} armBot={armBot} path={path} currentPhase={currentPhase} />
+                    <RoboticArmAnimator
+                        HandleCallback={HandleCallback}
+                        restPosition={restPosition}
+                        ikSolver={ikSolver}
+                        targetBone={targetBone}
+                        armBot={armBot}
+                        path={path}
+                        currentPhase={currentPhase}
+                    />
                 </>
             )}
             <MaterialAnimator ikSolver={ikSolver} armBot={armBot} currentPhase={currentPhase} />

app/src/modules/simulation/storageUnit/instances/storageUnitInstance/storageUnitInstance.tsx

@@ -1,15 +1,80 @@
-import { useEffect } from 'react'
+import { useEffect, useRef } from "react";
-import MaterialAnimator from '../animator/MaterialAnimator'
+import MaterialAnimator from "../animator/MaterialAnimator";
+import { useSceneContext } from "../../../../scene/sceneContext";
+import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore } from "../../../../../store/ui/usePlayButtonStore";
 
 function StorageUnitInstance({ storageUnit }: Readonly<{ storageUnit: StorageUnitStatus }>) {
+    const { storageUnitStore } = useSceneContext();
+    const { storageUnits, incrementActiveTime, incrementIdleTime } = storageUnitStore();
+    const { isPlaying } = usePlayButtonStore();
+
+    const idleTimeRef = useRef<number>(0);
+    const activeTimeRef = useRef<number>(0);
+    const previousTimeRef = useRef<number | null>(null);
+    const animationFrameIdRef = useRef<number | null>(null);
+    const isSpeedRef = useRef<number>(0);
+    const isPausedRef = useRef<boolean>(false);
+
+    const { speed } = useAnimationPlaySpeed();
+    const { isPaused } = usePauseButtonStore();
+
+    useEffect(() => {
+        isPausedRef.current = isPaused;
+    }, [isPaused]);
+
+    useEffect(() => {
+        isSpeedRef.current = speed;
+    }, [speed]);
+
+    function animate(currentTime: number) {
+        if (previousTimeRef.current === null) {
+            previousTimeRef.current = currentTime;
+        }
+
+        const deltaTime = (currentTime - previousTimeRef.current) / 1000;
+        previousTimeRef.current = currentTime;
+
+        if (storageUnit.isActive) {
+            if (!isPausedRef.current) {
+                activeTimeRef.current += deltaTime * isSpeedRef.current;
+            }
+        } else {
+            if (!isPausedRef.current) {
+                idleTimeRef.current += deltaTime * isSpeedRef.current;
+            }
+        }
+        animationFrameIdRef.current = requestAnimationFrame(animate);
+    }
+
+    useEffect(() => {
+        if (!isPlaying) return;
+        if (storageUnit.isActive) {
+            const roundedActiveTime = Math.round(activeTimeRef.current);
+            incrementActiveTime(storageUnit.modelUuid, roundedActiveTime);
+            activeTimeRef.current = 0;
+        } else {
+            const roundedIdleTime = Math.round(idleTimeRef.current);
+            incrementIdleTime(storageUnit.modelUuid, roundedIdleTime);
+            idleTimeRef.current = 0;
+        }
+
+        if (animationFrameIdRef.current === null) {
+            animationFrameIdRef.current = requestAnimationFrame(animate);
+        }
+
+        return () => {
+            if (animationFrameIdRef.current !== null) {
+                cancelAnimationFrame(animationFrameIdRef.current);
+                animationFrameIdRef.current = null;
+            }
+        };
+    }, [storageUnit, storageUnits, isPlaying]);
 
     useEffect(() => {
         // console.log('storageUnit: ', storageUnit);
-    }, [storageUnit])
+    }, [storageUnit]);
 
-    return (
+    return <MaterialAnimator storage={storageUnit} />;
-        <MaterialAnimator storage={storageUnit} />
-    )
 }
 
-export default StorageUnitInstance
+export default StorageUnitInstance;

app/src/types/simulationTypes.d.ts

@@ -736,6 +736,14 @@ interface RoboticArmAnalysis {
         placeAccuracy: number;
     };
 
+    // Cost
+    costMetrics: CostMetrics;
+
+    // Energy
+    energyMetrics: EnergyMetrics & {
+        energyPerUnit: number; // Energy per item processed
+    };
+
     // Historical Data
     historicalData: {
         timestamp: string;
@@ -784,6 +792,17 @@ interface MachineAnalysis {
     quality: QualityMetrics & {
         defectRate: number;
         reworkRate: number;
+        scrapRate: number;
+    };
+
+    // Cost
+    costMetrics: CostMetrics & {
+        costPerUnit: number; // Cost per item processed
+    };
+
+    // Energy
+    energyMetrics: EnergyMetrics & {
+        energyPerUnit: number; // Energy per item processed
     };
 
     // Historical Data
@@ -821,6 +840,7 @@ interface StorageAnalysis {
         averageOccupancy: number;
         peakOccupancy: number;
         turnoverRate: number; // Store/retrieve frequency
+        occupancyTrend: number; // Change in occupancy over time
     };
 
     // Throughput
@@ -838,6 +858,17 @@ interface StorageAnalysis {
     // Quality
     quality: QualityMetrics;
 
+    // Cost
+    costMetrics: CostMetrics & {
+        costPerUnit: number; // Cost per item processed
+        costPerStorageHour: number; // Cost per hour of storage
+    };
+
+    // Energy
+    energyMetrics: EnergyMetrics & {
+        energyPerUnit: number; // Energy per item processed
+    };
+
     // Occupancy Trends
     occupancyTrends: {
         timestamp: string;
@@ -871,6 +902,7 @@ interface HumanAnalysis {
             actionUuid: string;
             actionName: string;
         } | null;
+        loadUtilization: number;
     };
 
     // Time Metrics
@@ -887,6 +919,8 @@ interface HumanAnalysis {
         actionsPerHour: number;
         averageActionTime: number;
         distanceTraveled: number;
+        averageSpeed: number;
+        loadEfficiency: number; // Current load / max capacity
     };
 
     // Workload Distribution
@@ -906,6 +940,17 @@ interface HumanAnalysis {
     // Quality
     quality: QualityMetrics;
 
+    // Cost
+    costMetrics: CostMetrics & {
+        costPerAction: number; // Cost per action performed
+        costPerHour: number; // Cost per hour of labor
+    };
+
+    // Energy
+    energyMetrics: EnergyMetrics & {
+        energyPerAction: number; // Energy per action performed
+    };
+
     // Historical Data
     historicalData: {
         timestamp: string;
@@ -935,6 +980,7 @@ interface CraneAnalysis {
             materialType: string | null;
             materialId: string | null;
         } | null;
+        loadUtilization: number;
     };
 
     // Time Metrics
@@ -957,6 +1003,8 @@ interface CraneAnalysis {
         totalLifts: number;
         averageLiftHeight: number;
         movementEfficiency: number;
+        loadEfficiency: number;
+        cycleEfficiency: number;
     };
 
     // Efficiency
@@ -971,6 +1019,17 @@ interface CraneAnalysis {
         positioningAccuracy: number;
     };
 
+    // Cost
+    costMetrics: CostMetrics & {
+        costPerLift: number; // Cost per lift operation
+        costPerCycle: number; // Cost per operational cycle
+    };
+
+    // Energy
+    energyMetrics: EnergyMetrics & {
+        energyPerLift: number; // Energy per lift operation
+    };
+
     // Historical Data
     historicalData: {
         timestamp: string;
@@ -1033,8 +1092,10 @@ interface SystemPerformance {
         activeAssets: number;
         totalAssets: number;
         assetsInError: number;
+        assetsIdle: number;
         averageIdleTime: number;
         totalDowntime: number;
+        systemUptime: number;
     };
 }
 
@@ -1095,5 +1156,10 @@ interface AnalysisSchema {
         lastUpdated: string;
         dataPoints: number;
         analysisVersion: string;
+        totalCost: number;
+        totalValueAdded: number;
+        totalEnergyConsumed: number;
+        energyCost: number;
+        carbonFootprint: number;
     };
 }