diff --git a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx index 66996be..ca338ac 100644 --- a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx +++ b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx @@ -199,9 +199,8 @@ const BlockEditor: React.FC = ({ {["relative", "absolute"].map((position) => (
updateBlockPositionType( selectedBlock, @@ -220,8 +219,8 @@ const BlockEditor: React.FC = ({ value={ getCurrentBlockStyleValue(currentBlock, "padding") ? String( - getCurrentBlockStyleValue(currentBlock, "padding") - ) + getCurrentBlockStyleValue(currentBlock, "padding") + ) : "120" } /> @@ -231,8 +230,8 @@ const BlockEditor: React.FC = ({ value={ getCurrentBlockStyleValue(currentBlock, "padding") ? String( - getCurrentBlockStyleValue(currentBlock, "padding") - ) + getCurrentBlockStyleValue(currentBlock, "padding") + ) : "120" } /> @@ -242,8 +241,8 @@ const BlockEditor: React.FC = ({ value={ getCurrentBlockStyleValue(currentBlock, "padding") ? String( - getCurrentBlockStyleValue(currentBlock, "padding") - ) + getCurrentBlockStyleValue(currentBlock, "padding") + ) : "120" } /> @@ -253,8 +252,8 @@ const BlockEditor: React.FC = ({ value={ getCurrentBlockStyleValue(currentBlock, "padding") ? String( - getCurrentBlockStyleValue(currentBlock, "padding") - ) + getCurrentBlockStyleValue(currentBlock, "padding") + ) : "120" } /> @@ -277,7 +276,7 @@ const BlockEditor: React.FC = ({ min={0} value={String( parseInt(getCurrentBlockStyleValue(currentBlock, "borderRadius")) || - 8 + 8 )} placeholder={"Width"} onChange={(newValue) => { @@ -361,15 +360,9 @@ const BlockEditor: React.FC = ({ - handleBlurAmountChange(selectedBlock, updateBlockStyle, Number(value)) - } + max={30} + value={parseInt(getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(/\d+/)?.[0] || "10")} + onChange={(value: number) => handleBlurAmountChange(selectedBlock, updateBlockStyle, Number(value))} />
diff --git a/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx b/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx index 225ff30..f8c898e 100644 --- a/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx +++ b/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx @@ -12,7 +12,7 @@ import { } from "../../../icons/ExportCommonIcons"; import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; import InputRange from "../../../ui/inputs/InputRange"; -import { rgbaToHex } from "../../functions/helpers/colorHandlers"; +import { getAlphaFromRgba, hexToRgba, rgbaToHex } from "../../functions/helpers/colorHandlers"; import { ExtendedCSSProperties, UIElement } from "../../../../types/exportedTypes"; import { getCurrentElementStyleValue } from "../../functions/helpers/getCurrentElementStyleValue"; import { ResetIcon } from "../../../icons/SimulationIcons"; @@ -109,9 +109,8 @@ const ElementDesign: React.FC = ({ {["relative", "absolute"].map((position) => (
updateElementPositionType( selectedBlock, @@ -131,8 +130,8 @@ const ElementDesign: React.FC = ({ value={ getCurrentElementStyleValue(currentElement, "padding") ? String( - getCurrentElementStyleValue(currentElement, "padding") - ) + getCurrentElementStyleValue(currentElement, "padding") + ) : "120" } /> @@ -142,8 +141,8 @@ const ElementDesign: React.FC = ({ value={ getCurrentElementStyleValue(currentElement, "padding") ? String( - getCurrentElementStyleValue(currentElement, "padding") - ) + getCurrentElementStyleValue(currentElement, "padding") + ) : "120" } /> @@ -153,8 +152,8 @@ const ElementDesign: React.FC = ({ value={ getCurrentElementStyleValue(currentElement, "padding") ? String( - getCurrentElementStyleValue(currentElement, "padding") - ) + getCurrentElementStyleValue(currentElement, "padding") + ) : "120" } /> @@ -164,8 +163,8 @@ const ElementDesign: React.FC = ({ value={ getCurrentElementStyleValue(currentElement, "padding") ? String( - getCurrentElementStyleValue(currentElement, "padding") - ) + getCurrentElementStyleValue(currentElement, "padding") + ) : "120" } /> @@ -176,11 +175,10 @@ const ElementDesign: React.FC = ({
updateElementStyle(selectedBlock, selectedElement, { textAlign: "right", @@ -190,12 +188,11 @@ const ElementDesign: React.FC = ({
updateElementStyle(selectedBlock, selectedElement, { textAlign: "justify", @@ -205,11 +202,10 @@ const ElementDesign: React.FC = ({
updateElementStyle(selectedBlock, selectedElement, { textAlign: "left", @@ -221,11 +217,10 @@ const ElementDesign: React.FC = ({
updateElementStyle(selectedBlock, selectedElement, { flexDirection: "row", @@ -235,12 +230,11 @@ const ElementDesign: React.FC = ({
updateElementStyle(selectedBlock, selectedElement, { flexDirection: "column", @@ -250,12 +244,11 @@ const ElementDesign: React.FC = ({
updateElementStyle(selectedBlock, selectedElement, { flexDirection: "row-reverse", @@ -265,12 +258,11 @@ const ElementDesign: React.FC = ({
updateElementStyle(selectedBlock, selectedElement, { flexDirection: "column-reverse", @@ -282,69 +274,12 @@ const ElementDesign: React.FC = ({
-
- - updateElementZIndex( - selectedBlock, - selectedElement, - Number(newValue) - ) - } - /> - - - -
- - - updateElementStyle(selectedBlock, selectedElement, { - backdropFilter: `blur(${Number(value)}px)`, - }) - } + updateElementZIndex(selectedBlock, selectedElement, Number(newValue))} /> - = ({ label="Width" value={String( currentElement.size?.width ?? - (currentElement.type === "graph" ? 400 : 200) + (currentElement.type === "graph" ? 400 : 200) )} placeholder={"Width"} onChange={(newValue: string) => { @@ -406,7 +341,7 @@ const ElementDesign: React.FC = ({ label="Height" value={String( currentElement.size?.height ?? - (currentElement.type === "graph" ? 200 : 60) + (currentElement.type === "graph" ? 200 : 60) )} placeholder={"Height"} onChange={(newValue: string) => { @@ -420,7 +355,7 @@ const ElementDesign: React.FC = ({
-
Element Color
+
Background
Color
@@ -461,6 +396,27 @@ const ElementDesign: React.FC = ({
+ { + const currentBg = getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(0,0,0,1)"; + const currentHex = rgbaToHex(currentBg); + const newBg = hexToRgba(currentHex, Number(value) / 100); + updateElementStyle(selectedBlock, selectedElement, { backgroundColor: newBg }); + }} + /> + { + updateElementStyle(selectedBlock, selectedElement, { backdropFilter: `blur(${Number(value)}px)` }); + }} + />
); diff --git a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx index cf7f7f5..e3ad828 100644 --- a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx +++ b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx @@ -337,7 +337,7 @@ const ElementEditor: React.FC = ({ { id: "productivityMetrics.actionsPerHour", label: "Actions Per Hour", icon: }, { id: "efficiency.laborProductivity", label: "Labor Productivity", icon: }, { id: "timeMetrics.utilizationRate", label: "Utilization Rate", icon: }, - { id: "workloadDistribution", label: "Workload Distribution", icon: }, + { id: "workloadSummary", label: "Workload Distribution", icon: }, { id: "costMetrics.costPerHour", label: "Cost Per Hour", icon: }, { id: "productivityMetrics.distanceTraveled", label: "Distance Traveled", icon: }, ], diff --git a/app/src/modules/builder/asset/models/model/animator/modelAnimator.tsx b/app/src/modules/builder/asset/models/model/animator/modelAnimator.tsx index fb27fce..97ecc2a 100644 --- a/app/src/modules/builder/asset/models/model/animator/modelAnimator.tsx +++ b/app/src/modules/builder/asset/models/model/animator/modelAnimator.tsx @@ -60,14 +60,16 @@ export function ModelAnimator({ asset, gltfScene }: ModelAnimatorProps) { if (isPlaying && currentAction && !isPaused) { blendFactor.current = 0; + Object.values(actions.current).forEach((action) => { + if (action !== currentAction) { + action.stop(); + } + }); + currentAction.reset(); currentAction.setLoop(loopAnimation ? THREE.LoopRepeat : THREE.LoopOnce, loopAnimation ? Infinity : 1); currentAction.clampWhenFinished = true; - if (previousAction && previousAction !== currentAction) { - previousAction.crossFadeTo(currentAction, blendDuration, false); - } - currentAction.play(); mixerRef.current.addEventListener("finished", handleAnimationComplete); setPreviousAnimation(current); diff --git a/app/src/modules/simulation/analyzer/analyzer.tsx b/app/src/modules/simulation/analyzer/analyzer.tsx index b5c6544..9cb2273 100644 --- a/app/src/modules/simulation/analyzer/analyzer.tsx +++ b/app/src/modules/simulation/analyzer/analyzer.tsx @@ -1,10 +1,10 @@ import { useEffect, useCallback, useRef } from "react"; import { useSceneContext } from "../../scene/sceneContext"; -import { usePlayButtonStore } from "../../../store/ui/usePlayButtonStore"; +import { useAnimationPlaySpeed, usePlayButtonStore } from "../../../store/ui/usePlayButtonStore"; function Analyzer() { const { isPlaying } = usePlayButtonStore(); - const { conveyorStore, machineStore, armBotStore, humanStore, vehicleStore, craneStore, storageUnitStore, materialStore, analysisStore } = useSceneContext(); + const { conveyorStore, machineStore, armBotStore, humanStore, vehicleStore, craneStore, storageUnitStore, materialStore, analysisStore, humanEventManagerRef } = useSceneContext(); const { conveyors } = conveyorStore(); const { machines } = machineStore(); @@ -14,6 +14,7 @@ function Analyzer() { const { cranes } = craneStore(); const { storageUnits } = storageUnitStore(); const { materials, getMaterialsByModel } = materialStore(); + const { speed } = useAnimationPlaySpeed(); const { setAnalysis, setAnalyzing, analysis } = analysisStore(); @@ -183,6 +184,15 @@ function Analyzer() { > >({}); + // Track previous actions for ArmBots to detect cycle completion + const previousArmBotActionsRef = useRef>({}); + + // Track previous action counts for Humans to detect completion from EventManager + const previousHumanCountsRef = useRef>>({}); + + // Track previous vehicle phases to detect trip completion + const previousVehiclePhasesRef = useRef>({}); + // Material lifecycle tracking const materialLifecycleRef = useRef< Record< @@ -214,6 +224,9 @@ function Analyzer() { performanceSnapshotsRef.current = {}; bottleneckEventsRef.current = {}; previousAssetStatesRef.current = {}; + previousArmBotActionsRef.current = {}; + previousHumanCountsRef.current = {}; + previousVehiclePhasesRef.current = {}; materialLifecycleRef.current = {}; setAnalysis(null); setAnalyzing(false); @@ -222,6 +235,9 @@ function Analyzer() { useEffect(() => { if (!isPlaying) { resetAllRefs(); + } else { + // Reset start time when simulation starts + startTimeRef.current = new Date().toISOString(); } }, [isPlaying]); @@ -288,32 +304,35 @@ function Analyzer() { const calculateMaterialFlowMetricsForAsset = (assetId: string) => { const materialsOnAsset = getMaterialsByModel(assetId).length; - const materialHistory = materialHistoryRef.current.filter((m) => m.material.current?.modelUuid === assetId || m.material.previous?.modelUuid === assetId); + + // Use removals as the history of processed items + // This fixes the issue where items per hour was 0 because materialHistoryRef was empty + const removals = materialRemovalsRef.current[assetId] || []; // Calculate flow metrics const wip = materialsOnAsset; - const throughput = (materialHistory.length / (Date.now() - new Date(startTimeRef.current).getTime())) * 1000; - // Calculate lead times - const leadTimes = materialHistory - .map((m) => { - if (m.removedAt && m.material.startTime) { - return new Date(m.removedAt).getTime() - m.material.startTime; - } - return 0; - }) - .filter((t) => t > 0); + // Calculate throughput (items per second) + // Ensure we don't divide by zero + const durationMs = Date.now() - new Date(startTimeRef.current).getTime(); + + // Normalize by simulation speed to get "simulation time" throughput + const currentSpeed = Math.max(1, speed); + const throughput = durationMs > 1000 ? ((removals.length / durationMs) * 1000) / currentSpeed : 0; + + // Calculate lead times (processing times on this asset) + const leadTimes = removals.map((m) => m.processingTime || 0).filter((t) => t > 0); const avgLeadTime = leadTimes.length > 0 ? leadTimes.reduce((sum, t) => sum + t, 0) / leadTimes.length : 0; - // Calculate velocity - const velocity = materialHistory.length / Math.max(1, wip); + // Calculate velocity (turnover) + const velocity = removals.length / Math.max(1, wip); return { wip, throughput, avgLeadTime, - totalMaterialsProcessed: materialHistory.length, + totalMaterialsProcessed: removals.length, currentMaterials: materialsOnAsset, avgCycleTime: avgLeadTime / 1000, materialVelocity: velocity, @@ -544,9 +563,29 @@ function Analyzer() { /** * Track asset state change */ - const trackStateChange = useCallback((assetId: string, fromState: string, toState: string) => { + const trackStateChange = useCallback((assetId: string, fromState: string, toState: string, context?: { actionName?: string }) => { const timestamp = Date.now(); + // Increment error count if entering error state + if (toState === "error") { + if (!errorCountsRef.current[assetId]) { + errorCountsRef.current[assetId] = 0; + } + errorCountsRef.current[assetId]++; + + // Granular error tracking based on action type + if (context?.actionName) { + const actionName = context.actionName.toLowerCase(); + if (actionName.includes("pick")) { + if (!errorCountsRef.current[`${assetId}_pick`]) errorCountsRef.current[`${assetId}_pick`] = 0; + errorCountsRef.current[`${assetId}_pick`]++; + } else if (actionName.includes("place")) { + if (!errorCountsRef.current[`${assetId}_place`]) errorCountsRef.current[`${assetId}_place`] = 0; + errorCountsRef.current[`${assetId}_place`]++; + } + } + } + if (!assetStateChangesRef.current[assetId]) { assetStateChangesRef.current[assetId] = []; } @@ -670,32 +709,37 @@ function Analyzer() { /** * Update throughput snapshot for an asset */ - const updateThroughputSnapshot = useCallback((assetId: string) => { - const timestamp = Date.now(); - const timeWindow = 60; // 60 seconds + const updateThroughputSnapshot = useCallback( + (assetId: string) => { + const timestamp = Date.now(); + const timeWindow = 60; // 60 seconds - if (!throughputSnapshotsRef.current[assetId]) { - throughputSnapshotsRef.current[assetId] = []; - } + if (!throughputSnapshotsRef.current[assetId]) { + throughputSnapshotsRef.current[assetId] = []; + } - // Count items processed in the last time window - const removals = materialRemovalsRef.current[assetId] || []; - const recentRemovals = removals.filter((r) => timestamp - r.timestamp <= timeWindow * 1000); - const itemsProcessed = recentRemovals.length; - const rate = (itemsProcessed / timeWindow) * 3600; // items per hour + // Count items processed in the last time window + const removals = materialRemovalsRef.current[assetId] || []; + const recentRemovals = removals.filter((r) => timestamp - r.timestamp <= timeWindow * 1000); + const itemsProcessed = recentRemovals.length; + // Normalize by speed + const currentSpeed = Math.max(1, speed); + const rate = ((itemsProcessed / timeWindow) * 3600) / currentSpeed; // items per hour - throughputSnapshotsRef.current[assetId].push({ - timestamp, - itemsProcessed, - timeWindow, - rate, - }); + throughputSnapshotsRef.current[assetId].push({ + timestamp, + itemsProcessed, + timeWindow, + rate, + }); - // Keep only last 100 snapshots - if (throughputSnapshotsRef.current[assetId].length > 100) { - throughputSnapshotsRef.current[assetId] = throughputSnapshotsRef.current[assetId].slice(-100); - } - }, []); + // Keep only last 100 snapshots + if (throughputSnapshotsRef.current[assetId].length > 100) { + throughputSnapshotsRef.current[assetId] = throughputSnapshotsRef.current[assetId].slice(-100); + } + }, + [speed] + ); /** * Update performance snapshot for an asset @@ -948,7 +992,7 @@ function Analyzer() { historicalData: historicalDataRef.current[conveyor.modelUuid] || [], }; }, - [materials, analysis] + [materials, analysis, speed] ); // ============================================================================ @@ -963,7 +1007,7 @@ function Analyzer() { const materialFlow = calculateMaterialFlowMetricsForAsset(vehicle.modelUuid); const tripsCompleted = completedActionsRef.current[vehicle.modelUuid] || 0; const totalLoadsDelivered = completedActionsRef.current[`${vehicle.modelUuid}_loads`] || 0; - const defects = errorCountsRef.current[`${vehicle.modelUuid}_defects`] || 0; + const defects = errorCount; // Use main error count directly const qualityMetrics = calculateQualityMetrics(vehicle.modelUuid, totalLoadsDelivered, defects); // Performance calculations @@ -1079,7 +1123,7 @@ function Analyzer() { maintenanceCost: costMetrics.maintenanceCost, energyCost: energyMetrics.energyCost, totalCost: costMetrics.totalCost, - costPerMile: actualDistance > 0 ? costMetrics.totalCost / actualDistance : 0, + costPerMile: actualDistance > 0 ? costMetrics.totalCost / (actualDistance / 1609.34) : 0, // Convert meters to miles costPerTrip: tripsCompleted > 0 ? costMetrics.totalCost / tripsCompleted : 0, costPerLoad: totalLoadsDelivered > 0 ? costMetrics.totalCost / totalLoadsDelivered : 0, roi: costMetrics.roi, @@ -1099,7 +1143,7 @@ function Analyzer() { historicalData: historicalDataRef.current[vehicle.modelUuid] || [], }; }, - [materials, analysis] + [materials, analysis, speed] ); // ============================================================================ @@ -1114,7 +1158,7 @@ function Analyzer() { const materialFlow = calculateMaterialFlowMetricsForAsset(armBot.modelUuid); const cyclesCompleted = completedActionsRef.current[armBot.modelUuid] || 0; const pickAndPlaceCount = completedActionsRef.current[`${armBot.modelUuid}_pickplace`] || cyclesCompleted; - const defects = errorCountsRef.current[`${armBot.modelUuid}_defects`] || 0; + const defects = errorCount; // Use main error count directly const qualityMetrics = calculateQualityMetrics(armBot.modelUuid, pickAndPlaceCount, defects); @@ -1131,9 +1175,23 @@ function Analyzer() { const energyMetrics = calculateEnergyMetrics("roboticArm", armBot.activeTime || 0); // Calculate success rates - const pickAttempts = pickAndPlaceCount + (errorCountsRef.current[armBot.modelUuid] || 0); - const pickSuccessRate = pickAttempts > 0 ? (pickAndPlaceCount / pickAttempts) * 100 : 100; - const placeAccuracy = pickSuccessRate * 0.98; // Assuming 98% of successful picks are placed correctly + // Calculate success rates + const pickSuccessCount = completedActionsRef.current[`${armBot.modelUuid}_pick`] || pickAndPlaceCount / 2; + const placeSuccessCount = completedActionsRef.current[`${armBot.modelUuid}_place`] || pickAndPlaceCount / 2; + + const pickErrors = errorCountsRef.current[`${armBot.modelUuid}_pick`] || 0; + const placeErrors = errorCountsRef.current[`${armBot.modelUuid}_place`] || 0; + + // If granular errors are 0 but main error count > 0, distribute them (fallback) + const remainingErrors = Math.max(0, errorCount - pickErrors - placeErrors); + const effectivePickErrors = pickErrors + (remainingErrors > 0 ? Math.ceil(remainingErrors / 2) : 0); + const effectivePlaceErrors = placeErrors + (remainingErrors > 0 ? Math.floor(remainingErrors / 2) : 0); + + const pickAttempts = pickSuccessCount + effectivePickErrors; + const placeAttempts = placeSuccessCount + effectivePlaceErrors; + + const pickSuccessRate = pickAttempts > 0 ? (pickSuccessCount / pickAttempts) * 100 : 100; + const placeAccuracy = placeAttempts > 0 ? (placeSuccessCount / placeAttempts) * 100 : 100; // Update historical data @@ -1224,7 +1282,7 @@ function Analyzer() { historicalData: historicalDataRef.current[armBot.modelUuid] || [], }; }, - [materials, analysis] + [materials, analysis, speed] ); // ============================================================================ @@ -1349,7 +1407,7 @@ function Analyzer() { historicalData: historicalDataRef.current[machine.modelUuid] || [], }; }, - [materials, analysis] + [materials, analysis, speed] ); // ============================================================================ @@ -1486,7 +1544,7 @@ function Analyzer() { historicalData: historicalDataRef.current[storage.modelUuid] || [], }; }, - [analysis] + [analysis, speed] ); // ============================================================================ @@ -1517,13 +1575,15 @@ function Analyzer() { const totalActionTime = workerTime + manufacturerTime + operatorTime + assemblerTime; - const workloadDistribution = [ - { actionType: "worker", count: workerActions, totalTime: workerTime, percentage: totalActionTime > 0 ? (workerTime / totalActionTime) * 100 : 0 }, - { actionType: "manufacturer", count: manufacturerActions, totalTime: manufacturerTime, percentage: totalActionTime > 0 ? (manufacturerTime / totalActionTime) * 100 : 0 }, - { actionType: "operator", count: operatorActions, totalTime: operatorTime, percentage: totalActionTime > 0 ? (operatorTime / totalActionTime) * 100 : 0 }, - { actionType: "assembler", count: assemblerActions, totalTime: assemblerTime, percentage: totalActionTime > 0 ? (assemblerTime / totalActionTime) * 100 : 0 }, + const workloadDistributionData = [ + { actionType: "Worker", count: workerActions, totalTime: workerTime, percentage: totalActionTime > 0 ? (workerTime / totalActionTime) * 100 : 0 }, + { actionType: "Manufacturer", count: manufacturerActions, totalTime: manufacturerTime, percentage: totalActionTime > 0 ? (manufacturerTime / totalActionTime) * 100 : 0 }, + { actionType: "Operator", count: operatorActions, totalTime: operatorTime, percentage: totalActionTime > 0 ? (operatorTime / totalActionTime) * 100 : 0 }, + { actionType: "Assembler", count: assemblerActions, totalTime: assemblerTime, percentage: totalActionTime > 0 ? (assemblerTime / totalActionTime) * 100 : 0 }, ].filter((w) => w.count > 0); + const workloadDistribution = workloadDistributionData.map((d) => `${Math.round(d.percentage)}%`).join(" | "); + // Performance calculations const idealActionsPerHour = 60; // 60 actions per hour ideal const actualActionsPerHour = timeMetrics.totalTime > 0 ? (actionsCompleted / timeMetrics.totalTime) * 3600 : 0; @@ -1586,7 +1646,8 @@ function Analyzer() { loadEfficiency: loadUtilization, }, - workloadDistribution, + workloadDistribution: workloadDistributionData, + workloadSummary: workloadDistribution === "" ? "0%" : workloadDistribution, efficiency: { overallEffectiveness: calculateOEE(timeMetrics.uptime, performanceRate, qualityMetrics.firstPassYield), @@ -1624,7 +1685,7 @@ function Analyzer() { historicalData: historicalDataRef.current[human.modelUuid] || [], }; }, - [analysis] + [analysis, speed] ); // ============================================================================ @@ -1774,7 +1835,7 @@ function Analyzer() { historicalData: historicalDataRef.current[crane.modelUuid] || [], }; }, - [analysis] + [analysis, speed] ); // ============================================================================ @@ -2255,7 +2316,7 @@ function Analyzer() { const allAssets = [ ...conveyors.map((c) => ({ id: c.modelUuid, state: c.state, isActive: !c.isPaused, type: "conveyor" as const })), ...machines.map((m) => ({ id: m.modelUuid, state: m.state, isActive: m.isActive, type: "machine" as const })), - ...armBots.map((a) => ({ id: a.modelUuid, state: a.state, isActive: a.isActive, type: "roboticArm" as const })), + ...armBots.map((a) => ({ id: a.modelUuid, state: a.state, isActive: a.isActive, type: "roboticArm" as const, currentAction: a.currentAction })), ...vehicles.map((v) => ({ id: v.modelUuid, state: v.state, isActive: v.isActive, type: "vehicle" as const })), ...humans.map((h) => ({ id: h.modelUuid, state: h.state, isActive: h.isActive, type: "human" as const })), ...cranes.map((c) => ({ id: c.modelUuid, state: c.state, isActive: c.isActive, type: "crane" as const })), @@ -2269,7 +2330,7 @@ function Analyzer() { if (previousState) { // Check for state change if (previousState.state !== asset.state) { - trackStateChange(asset.id, previousState.state, asset.state); + trackStateChange(asset.id, previousState.state, asset.state, asset.type === "roboticArm" ? { actionName: (asset as any).currentAction?.actionName } : undefined); } // Check for material count change (potential bottleneck) @@ -2285,6 +2346,98 @@ function Analyzer() { }); }, [conveyors, machines, armBots, vehicles, humans, cranes, storageUnits, isPlaying, getMaterialsByModel, trackStateChange, trackBottleneckEvent, updatePreviousAssetState]); + // Monitor ArmBot action changes to track cycles + useEffect(() => { + if (!isPlaying) return; + + armBots.forEach((armBot) => { + const previousActionUuid = previousArmBotActionsRef.current[armBot.modelUuid]; + const currentActionUuid = armBot.currentAction?.actionUuid; + + // Check if action completed (transition from an action to no action or different action) + if (previousActionUuid && previousActionUuid !== currentActionUuid) { + // Action completed + if (!completedActionsRef.current[armBot.modelUuid]) { + completedActionsRef.current[armBot.modelUuid] = 0; + } + completedActionsRef.current[armBot.modelUuid]++; + + // Also update pick and place count which is used in analysis + if (!completedActionsRef.current[`${armBot.modelUuid}_pickplace`]) { + completedActionsRef.current[`${armBot.modelUuid}_pickplace`] = 0; + } + completedActionsRef.current[`${armBot.modelUuid}_pickplace`]++; + + // Granular pick/place tracking + if (previousActionUuid) { + // We need to look up what action this UUID corresponded to + // Since we don't store the action map history, we check the current config + // This assumes configuration hasn't changed, which is true for runtime + const action = armBot.point.actions.find((a) => a.actionUuid === previousActionUuid); + if (action) { + const actionName = action.actionName.toLowerCase(); + if (actionName.includes("pick")) { + if (!completedActionsRef.current[`${armBot.modelUuid}_pick`]) completedActionsRef.current[`${armBot.modelUuid}_pick`] = 0; + completedActionsRef.current[`${armBot.modelUuid}_pick`]++; + } else if (actionName.includes("place")) { + if (!completedActionsRef.current[`${armBot.modelUuid}_place`]) completedActionsRef.current[`${armBot.modelUuid}_place`] = 0; + completedActionsRef.current[`${armBot.modelUuid}_place`]++; + } + } + } + } + + previousArmBotActionsRef.current[armBot.modelUuid] = currentActionUuid; + }); + }, [armBots, isPlaying]); + + // Monitor Human action changes from EventManager + useEffect(() => { + if (!isPlaying || !humanEventManagerRef.current) return; + + const interval = setInterval(() => { + if (!humanEventManagerRef.current) return; + + humanEventManagerRef.current.humanStates.forEach((humanState) => { + const humanId = humanState.humanId; + + // Initialize tracking for this human if needed + if (!previousHumanCountsRef.current[humanId]) { + previousHumanCountsRef.current[humanId] = {}; + } + + humanState.actionQueue.forEach((action) => { + let lastCount = previousHumanCountsRef.current[humanId][action.actionUuid] || 0; + const currentCount = action.count || 0; + + // Handle reset case (new action instance with same UUID) + if (currentCount < lastCount) { + lastCount = 0; + previousHumanCountsRef.current[humanId][action.actionUuid] = 0; + } + + const delta = currentCount - lastCount; + + if (delta > 0) { + // Update total completions for this human + if (!completedActionsRef.current[humanId]) completedActionsRef.current[humanId] = 0; + completedActionsRef.current[humanId] += delta; + + // Update granular action type completions (e.g., worker, manufacturer) + const typeKey = `${humanId}_${action.actionType}`; + if (!completedActionsRef.current[typeKey]) completedActionsRef.current[typeKey] = 0; + completedActionsRef.current[typeKey] += delta; + + // Update the last known count + previousHumanCountsRef.current[humanId][action.actionUuid] = currentCount; + } + }); + }); + }, 100); + + return () => clearInterval(interval); + }, [isPlaying, humanEventManagerRef]); + // Periodic WIP and throughput snapshots useEffect(() => { if (!isPlaying) return; @@ -2308,6 +2461,32 @@ function Analyzer() { return () => clearInterval(snapshotInterval); }, [conveyors, machines, armBots, vehicles, humans, cranes, storageUnits, isPlaying, updateWIPSnapshot]); + // Monitor Vehicle phase changes to track completed trips + useEffect(() => { + if (!isPlaying) return; + + vehicles.forEach((vehicle) => { + const previousPhase = previousVehiclePhasesRef.current[vehicle.modelUuid]; + const currentPhase = vehicle.currentPhase; + + // Check for transition from 'drop-pickup' to 'picking' (Trip completed) + if (previousPhase === "drop-pickup" && currentPhase === "picking") { + if (!completedActionsRef.current[vehicle.modelUuid]) { + completedActionsRef.current[vehicle.modelUuid] = 0; + } + completedActionsRef.current[vehicle.modelUuid]++; + + // Track loads delivered (assuming 1 load per trip for now, or use vehicle.currentLoad if available/reliable at this point) + if (!completedActionsRef.current[`${vehicle.modelUuid}_loads`]) { + completedActionsRef.current[`${vehicle.modelUuid}_loads`] = 0; + } + completedActionsRef.current[`${vehicle.modelUuid}_loads`] += 1; + } + + previousVehiclePhasesRef.current[vehicle.modelUuid] = currentPhase; + }); + }, [vehicles, isPlaying]); + return null; } diff --git a/app/src/modules/simulation/human/instances/animator/manufacturerAnimator.tsx b/app/src/modules/simulation/human/instances/animator/manufacturerAnimator.tsx index d7b0147..e6e335e 100644 --- a/app/src/modules/simulation/human/instances/animator/manufacturerAnimator.tsx +++ b/app/src/modules/simulation/human/instances/animator/manufacturerAnimator.tsx @@ -15,7 +15,7 @@ interface ManufacturerAnimatorProps { function ManufacturerAnimator({ path, handleCallBack, human, reset }: Readonly) { const { humanStore, assetStore, productStore } = useSceneContext(); const { getActionByUuid, selectedProduct } = productStore(); - const { getHumanById } = humanStore(); + const { getHumanById, incrementDistanceTraveled } = humanStore(); const { setCurrentAnimation } = assetStore(); const { isPaused } = usePauseButtonStore(); const { isPlaying } = usePlayButtonStore(); @@ -109,6 +109,7 @@ function ManufacturerAnimator({ path, handleCallBack, human, reset }: Readonly) { const { humanStore, assetStore, productStore } = useSceneContext(); const { getActionByUuid, selectedProduct } = productStore(); - const { getHumanById } = humanStore(); + const { getHumanById, incrementDistanceTraveled } = humanStore(); const { setCurrentAnimation } = assetStore(); const { isPaused } = usePauseButtonStore(); const { isPlaying } = usePlayButtonStore(); @@ -117,6 +117,7 @@ function OperatorAnimator({ path, handleCallBack, human, reset }: Readonly) { const { humanStore, assetStore, productStore } = useSceneContext(); const { getActionByUuid, selectedProduct } = productStore(); - const { getHumanById } = humanStore(); + const { getHumanById, incrementDistanceTraveled } = humanStore(); const { setCurrentAnimation } = assetStore(); const { isPaused } = usePauseButtonStore(); const { isPlaying } = usePlayButtonStore(); @@ -119,6 +119,7 @@ function WorkerAnimator({ path, handleCallBack, human, reset, startUnloadingProc if (isAligned) { progressRef.current = Math.min(progressRef.current + delta * (speed * human.speed), totalDistance); + incrementDistanceTraveled(human.modelUuid, delta * (speed * human.speed)); const t = (progressRef.current - accumulatedDistance) / segmentDistance; const position = start.clone().lerp(end, t); object.position.copy(position); diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx index b94a167..304ccdf 100644 --- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx +++ b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx @@ -18,7 +18,7 @@ interface VehicleAnimatorProps { function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset, startUnloadingProcess }: Readonly) { const { vehicleStore } = useSceneContext(); - const { getVehicleById } = vehicleStore(); + const { getVehicleById, incrementDistanceTraveled } = vehicleStore(); const { isPaused } = usePauseButtonStore(); const { isPlaying } = usePlayButtonStore(); const { speed } = useAnimationPlaySpeed(); @@ -126,6 +126,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai if (isAligned) { progressRef.current += delta * (speed * agvDetail.speed); + incrementDistanceTraveled(agvUuid, delta * (speed * agvDetail.speed)); const t = (progressRef.current - accumulatedDistance) / segmentDistance; const position = start.clone().lerp(end, t); object.position.copy(position); diff --git a/app/src/store/simulation/useVehicleStore.ts b/app/src/store/simulation/useVehicleStore.ts index e01bbce..f160e2d 100644 --- a/app/src/store/simulation/useVehicleStore.ts +++ b/app/src/store/simulation/useVehicleStore.ts @@ -6,10 +6,7 @@ interface VehiclesStore { addVehicle: (productUuid: string, event: VehicleEventSchema) => void; removeVehicle: (modelUuid: string) => void; - updateVehicle: ( - modelUuid: string, - updates: Partial> - ) => void; + updateVehicle: (modelUuid: string, updates: Partial>) => void; addPathPoint: (modelUuid: string, pathKey: keyof VehicleAction["paths"], point: VehicleAction["paths"]["initPickup"][number]) => VehicleAction["paths"]; updatePathPoint: (modelUuid: string, pathKey: keyof VehicleAction["paths"], pointId: string, updates: Partial) => VehicleAction["paths"]; deletePathPoint: (modelUuid: string, pathKey: keyof VehicleAction["paths"], pointId: string) => VehicleAction["paths"]; @@ -22,17 +19,15 @@ interface VehiclesStore { incrementVehicleLoad: (modelUuid: string, incrementBy: number) => void; decrementVehicleLoad: (modelUuid: string, decrementBy: number) => void; setVehicleLoad: (modelUuid: string, load: number) => void; - setVehicleState: ( - modelUuid: string, - newState: VehicleStatus["state"] - ) => void; + setVehicleState: (modelUuid: string, newState: VehicleStatus["state"]) => void; addCurrentMaterial: (modelUuid: string, materialType: string, materialId: string) => void; - setCurrentMaterials: (modelUuid: string, materials: { materialType: string; materialId: string; }[]) => void; - removeLastMaterial: (modelUuid: string) => { materialId: string; materialType: string; } | undefined; - getLastMaterial: (modelUuid: string) => { materialId: string; materialType: string; } | undefined; + setCurrentMaterials: (modelUuid: string, materials: { materialType: string; materialId: string }[]) => void; + removeLastMaterial: (modelUuid: string) => { materialId: string; materialType: string } | undefined; + getLastMaterial: (modelUuid: string) => { materialId: string; materialType: string } | undefined; clearCurrentMaterials: (modelUuid: string) => void; incrementActiveTime: (modelUuid: string, incrementBy: number) => void; incrementIdleTime: (modelUuid: string, incrementBy: number) => void; + incrementDistanceTraveled: (modelUuid: string, incrementBy: number) => void; resetTime: (modelUuid: string) => void; getVehicleById: (modelUuid: string) => VehicleStatus | undefined; @@ -53,7 +48,7 @@ export const createVehicleStore = () => { state.vehicles.push({ ...event, productUuid, - currentPhase: 'stationed', + currentPhase: "stationed", isActive: false, isPicking: false, idleTime: 0, @@ -61,7 +56,7 @@ export const createVehicleStore = () => { currentLoad: 0, currentMaterials: [], distanceTraveled: 0, - state: 'idle' + state: "idle", }); } }); @@ -69,9 +64,7 @@ export const createVehicleStore = () => { removeVehicle: (modelUuid) => { set((state) => { - state.vehicles = state.vehicles.filter( - (v) => v.modelUuid !== modelUuid - ); + state.vehicles = state.vehicles.filter((v) => v.modelUuid !== modelUuid); }); }, @@ -87,7 +80,7 @@ export const createVehicleStore = () => { addPathPoint: (modelUuid, pathKey, point) => { let updatedPaths: VehicleAction["paths"] = { initPickup: [], pickupDrop: [], dropPickup: [] }; set((state) => { - const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid); + const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid); if (vehicle) { const path = vehicle.point.action.paths[pathKey]; path.push(point); @@ -100,10 +93,10 @@ export const createVehicleStore = () => { updatePathPoint: (modelUuid, pathKey, pointId, updates) => { let updatedPaths: VehicleAction["paths"] = { initPickup: [], pickupDrop: [], dropPickup: [] }; set((state) => { - const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid); + const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid); if (vehicle) { const path = vehicle.point.action.paths[pathKey]; - const index = path.findIndex(p => p.pointId === pointId); + const index = path.findIndex((p) => p.pointId === pointId); if (index !== -1) { Object.assign(path[index], updates); updatedPaths = vehicle.point.action.paths; @@ -116,10 +109,10 @@ export const createVehicleStore = () => { deletePathPoint: (modelUuid, pathKey, pointId) => { let updatedPaths: VehicleAction["paths"] = { initPickup: [], pickupDrop: [], dropPickup: [] }; set((state) => { - const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid); + const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid); if (vehicle) { const path = vehicle.point.action.paths[pathKey]; - vehicle.point.action.paths[pathKey] = path.filter(p => p.pointId !== pointId); + vehicle.point.action.paths[pathKey] = path.filter((p) => p.pointId !== pointId); updatedPaths = vehicle.point.action.paths; } }); @@ -134,7 +127,7 @@ export const createVehicleStore = () => { setCurrentPhase: (modelUuid, phase) => { set((state) => { - const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid); + const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid); if (vehicle) { vehicle.currentPhase = phase; } @@ -223,7 +216,7 @@ export const createVehicleStore = () => { }, removeLastMaterial: (modelUuid) => { - let removedMaterial: { materialId: string; materialType: string; } | undefined; + let removedMaterial: { materialId: string; materialType: string } | undefined; set((state) => { const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid); if (vehicle) { @@ -239,14 +232,14 @@ export const createVehicleStore = () => { }, getLastMaterial: (modelUuid) => { - let removedMaterial: { materialId: string; materialType: string; } | undefined; + let removedMaterial: { materialId: string; materialType: string } | undefined; set((state) => { const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid); if (vehicle) { if (vehicle.currentMaterials.length > 0) { removedMaterial = { materialId: vehicle.currentMaterials[vehicle.currentMaterials.length - 1].materialId, - materialType: vehicle.currentMaterials[vehicle.currentMaterials.length - 1].materialType + materialType: vehicle.currentMaterials[vehicle.currentMaterials.length - 1].materialType, }; } } @@ -281,6 +274,15 @@ export const createVehicleStore = () => { }); }, + incrementDistanceTraveled: (modelUuid, incrementBy) => { + set((state) => { + const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid); + if (vehicle) { + vehicle.distanceTraveled += incrementBy; + } + }); + }, + resetTime: (modelUuid) => { set((state) => { const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid); @@ -307,7 +309,7 @@ export const createVehicleStore = () => { return get().vehicles.filter((v) => v.isActive); }, })) - ) -} + ); +}; -export type VehicleStoreType = ReturnType; \ No newline at end of file +export type VehicleStoreType = ReturnType; diff --git a/app/src/types/simulationTypes.d.ts b/app/src/types/simulationTypes.d.ts index e04ae4f..f3a2366 100644 --- a/app/src/types/simulationTypes.d.ts +++ b/app/src/types/simulationTypes.d.ts @@ -930,6 +930,7 @@ interface HumanAnalysis { totalTime: number; percentage: number; }[]; + workloadSummary: string; // Efficiency efficiency: EfficiencyMetrics & {