Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added comparsion data

Browse Source
This commit is contained in:
Poovizhi99
2025-09-05 15:06:35 +05:30
parent f6a63c20d7
commit b3a4c03ba0
7 changed files with 584 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
app/src/components/layout/scenes/ComparisonScene.tsx
View File

@@ -1,15 +1,103 @@
import { useProductContext } from '../../../modules/simulation/products/productContext'
import RegularDropDown from '../../ui/inputs/RegularDropDown';
import { useCompareProductDataStore, useLoadingProgress, useSaveVersion } from '../../../store/builder/store';
import useModuleStore from '../../../store/useModuleStore';
import CompareLayOut from '../../ui/compareVersion/CompareLayOut';
import ComparisonResult from '../../ui/compareVersion/ComparisonResult';
import { useComparisonProduct, useMainProduct } from '../../../store/simulation/useSimulationStore';
import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
import { useEffect, useState } from 'react';
import { useVersionHistoryStore } from '../../../store/builder/useVersionHistoryStore';
import { useVersionContext } from '../../../modules/builder/version/versionContext';
import { useSceneContext } from '../../../modules/scene/sceneContext';
import { useProductContext } from "../../../modules/simulation/products/productContext";
import RegularDropDown from "../../ui/inputs/RegularDropDown";
import { useCompareProductDataStore, useLoadingProgress, useSaveVersion } from "../../../store/builder/store";
import useModuleStore from "../../../store/useModuleStore";
import CompareLayOut from "../../ui/compareVersion/CompareLayOut";
import ComparisonResult from "../../ui/compareVersion/ComparisonResult";
import { useComparisonProduct, useMainProduct } from "../../../store/simulation/useSimulationStore";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { useEffect, useState } from "react";
import { useVersionHistoryStore } from "../../../store/builder/useVersionHistoryStore";
import { useVersionContext } from "../../../modules/builder/version/versionContext";
import { useSceneContext } from "../../../modules/scene/sceneContext";
import { useSimulationManager } from "../../../store/rough/useSimulationManagerStore";
import { useParams } from "react-router-dom";
export interface CompareProduct {
productUuid: string;
productName: string;
simulationData: {
roiPercentage: number;
netProfit: number;
productionCapacity: number;
paybackPeriod: number;
machineIdleTime: number;
machineActiveTime: number;
throughputData: number;
simulationTime?: number;
simulationCost?: number;
efficiencyScore?: number;
};
}
type AssetData = {
activeTime: number;
idleTime: number;
type: string;
assetId: string;
};
const calculateSimulationData = (assets: AssetData[]) => {
let totalActiveTime = 0;
let totalIdleTime = 0;
let throughput = 0;
let productionCapacity = 0;
let simulationCost = 0;
// Cost weight per type (example values, adjust as needed)
const costWeight: Record<string, number> = {
roboticArm: 50,
machine: 100,
human: 30,
transfer: 20,
storageUnit: 10,
};
assets.forEach((asset) => {
totalActiveTime += asset.activeTime;
totalIdleTime += asset.idleTime;
if (asset.activeTime > 0) throughput += 1;
productionCapacity += asset.activeTime;
simulationCost += asset.activeTime * (costWeight[asset.type] || 10);
});
const machineActiveTime = assets.filter((a) => a.type === "machine").reduce((acc, a) => acc + a.activeTime, 0);
const machineIdleTime = assets.filter((a) => a.type === "machine").reduce((acc, a) => acc + a.idleTime, 0);
const simulationTime = totalActiveTime + totalIdleTime;
// --- Efficiency Score ---
// Weighted formula: lower cost + lower time => higher score
// Example formula (normalize to 0–100):
const efficiencyScore = Math.max(
0,
100 -
(simulationTime / 1000) * 0.5 - // weight 0.5 for time
(simulationCost / 1000) * 0.5 // weight 0.5 for cost
);
return {
throughputData: throughput,
machineActiveTime,
machineIdleTime,
productionCapacity,
netProfit: 0, // placeholder
roiPercentage: 0, // placeholder
paybackPeriod: 0, // placeholder
simulationTime,
simulationCost,
efficiencyScore,
};
};
export const createCompareProduct = (productUuid: string, productName: string, assets: AssetData[]): CompareProduct => ({
productUuid,
productName,
simulationData: calculateSimulationData(assets),
});
function ComparisonScene() {
const { isPlaying } = usePlayButtonStore();
@@ -27,6 +115,8 @@ function ComparisonScene() {
const { versionHistory } = useVersionHistoryStore();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion, setSelectedVersion } = selectedVersionStore();
const { simulationRecords } = useSimulationManager();
const { projectId } = useParams();
const handleSelectVersion = (option: string) => {
const version = versionHistory.find((version) => version.versionName === option);
@@ -79,27 +169,53 @@ function ComparisonScene() {
// ])
// }, []);
// useEffect(() => {
// console.log('mainProduct: ', mainProduct);
// console.log('comparisonProduct: ', comparisonProduct);
// if (mainProduct && comparisonProduct) {
// // if (mainProduct && comparisonProduct && compareProductsData.length > 1) {
// // console.log('compareProductsData: ', compareProductsData);
// const hasMain = compareProductsData.some(val => val.productUuid === mainProduct.productUuid);
// const hasComparison = compareProductsData.some(val => val.productUuid === comparisonProduct.productUuid);
// console.log('hasMain: ', hasMain);
// console.log('hasComparison: ', hasComparison);
// if (hasMain && hasComparison) {
// setShouldShowComparisonResult(true);
// } else {
// setShouldShowComparisonResult(false);
// }
// }
// }, [compareProductsData, mainProduct, comparisonProduct]);
useEffect(() => {
if (mainProduct && comparisonProduct && compareProductsData.length > 1) {
// console.log('compareProductsData: ', compareProductsData);
const hasMain = compareProductsData.some(val => val.productUuid === mainProduct.productUuid);
const hasComparison = compareProductsData.some(val => val.productUuid === comparisonProduct.productUuid);
if (hasMain && hasComparison && mainProduct.productUuid !== comparisonProduct.productUuid) {
setShouldShowComparisonResult(true);
} else {
if (mainProduct && comparisonProduct && selectedVersion) {
const product1 = useSimulationManager.getState().getProductById(projectId, selectedVersion?.versionId, mainProduct.productUuid);
const product2 = useSimulationManager.getState().getProductById(projectId, selectedVersion?.versionId, comparisonProduct.productUuid);
const compareProduct1 = createCompareProduct(product1?.productId ?? "", mainProduct.productName, product1?.data || []);
const compareProduct2 = createCompareProduct(product2?.productId ?? "", comparisonProduct.productName, product2?.data || []);
const comparedArray = [compareProduct1, compareProduct2];
if (product1 == undefined || product2 === undefined) {
setShouldShowComparisonResult(false);
} else if (comparedArray.length === 2) {
console.log("comparedArray: ", comparedArray);
setCompareProductsData(comparedArray);
setShouldShowComparisonResult(true);
}
} else {
setShouldShowComparisonResult(false);
}
}, [compareProductsData, mainProduct, comparisonProduct]);
}, [mainProduct, comparisonProduct, simulationRecords]);
return (
<>
{isVersionSaved && activeModule === "simulation" && selectedProduct && (
<>
{selectedVersion && !isPlaying &&
{selectedVersion && !isPlaying && (
<div className="initial-selectLayout-wrapper">
<RegularDropDown
header={selectedVersion.versionName}
@@ -115,14 +231,13 @@ function ComparisonScene() {
search={false}
/>
</div>
}
)}
<CompareLayOut />
{(shouldShowComparisonResult && !loadingProgress) && <ComparisonResult />}
{shouldShowComparisonResult && !loadingProgress && compareProductsData && <ComparisonResult />}
</>
)}
</>
)
);
}
export default ComparisonScene;

1
app/src/components/layout/scenes/functions/simulationStorage.ts
View File

@@ -9,5 +9,6 @@ export const saveSimulationData = ({ key, data }: SimulationData) => {
export const getSimulationData = ({ key }: SimulationData) => {
const data = localStorage.getItem(key);
console.log("data: ", JSON.parse(data || "{}"));
return data;
};
export const clearSimulationData = ({ key, data }: SimulationData) => {};

400
app/src/components/ui/compareVersion/ComparisonResult.tsx
View File

@@ -2,205 +2,211 @@ import React, { useEffect, useMemo, useState } from "react";
import PerformanceResult from "./result-card/PerformanceResult";
import EnergyUsage from "./result-card/EnergyUsage";
import { Bar, Line, Pie } from "react-chartjs-2";
import { CompareProduct, useCompareProductDataStore } from "../../../store/builder/store";
import { useCompareProductDataStore } from "../../../store/builder/store";
// import { CompareProduct, useCompareProductDataStore } from "../../../store/builder/store";
import { useComparisonProduct, useMainProduct } from "../../../store/simulation/useSimulationStore";
export interface CompareProduct {
productUuid: string;
productName: string;
simulationData: {
roiPercentage: number;
netProfit: number;
productionCapacity: number;
paybackPeriod: number;
machineIdleTime: number;
machineActiveTime: number;
throughputData: number;
simulationTime?: number;
simulationCost?: number;
efficiencyScore?: number;
};
}
const ComparisonResult = () => {
const { compareProductsData, setCompareProductsData } = useCompareProductDataStore();
const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
const { mainProduct } = useMainProduct();
const [comparedProducts, setComparedProducts] = useState<[CompareProduct, CompareProduct] | []>([]);
const { compareProductsData, setCompareProductsData } = useCompareProductDataStore();
const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
const { mainProduct } = useMainProduct();
const [comparedProducts, setComparedProducts] = useState<[CompareProduct, CompareProduct] | []>([]);
useEffect(() => {
if (compareProductsData.length > 0 && mainProduct && comparisonProduct) {
const mainProductData = compareProductsData.find(
(product) => product.productUuid === mainProduct.productUuid
);
const comparisonProductData = compareProductsData.find(
(product) => product.productUuid === comparisonProduct.productUuid
);
useEffect(() => {
if (compareProductsData.length > 0 && mainProduct && comparisonProduct) {
const mainProductData = compareProductsData.find((product) => product.productUuid === mainProduct.productUuid);
const comparisonProductData = compareProductsData.find((product) => product.productUuid === comparisonProduct.productUuid);
if (mainProductData && comparisonProductData) {
setComparedProducts([mainProductData, comparisonProductData]);
} else {
setComparedProducts([]);
}
} else {
setComparedProducts([]);
}
}, [compareProductsData, mainProduct, comparisonProduct]);
if (mainProductData && comparisonProductData) {
setComparedProducts([mainProductData, comparisonProductData]);
} else {
setComparedProducts([]);
}
} else {
setComparedProducts([]);
}
}, [compareProductsData, mainProduct, comparisonProduct]);
useEffect(() => {
if (comparedProducts.length === 2) {
}
}, [comparedProducts]);
useEffect(() => {
if (comparedProducts.length === 2) {
}
}, [comparedProducts]);
const options = useMemo(
() => ({
responsive: true,
maintainAspectRatio: false,
plugins: {
title: { display: false },
legend: { display: false },
},
scales: {
x: { display: false, grid: { display: false } },
y: { display: false, grid: { display: false } },
},
}),
[]
);
const options = useMemo(
() => ({
responsive: true,
maintainAspectRatio: false,
plugins: {
title: { display: false },
legend: { display: false },
},
scales: {
x: { display: false, grid: { display: false } },
y: { display: false, grid: { display: false } },
},
}),
[]
);
// Color palette
const purpleDark = "#6a0dad";
const purpleLight = "#b19cd9";
// Color palette
const purpleDark = "#6a0dad";
const purpleLight = "#b19cd9";
const throughputData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
datasets: [
{
label: "Throughput (units/hr)",
data: [comparedProducts[0]?.simulationData.throughputData, comparedProducts[1]?.simulationData.throughputData],
backgroundColor: [purpleDark, purpleLight],
borderColor: [purpleDark, purpleLight],
borderWidth: 1,
borderRadius: 10, // ✅ Rounded all corners (TypeScript-safe)
// borderSkipped: "bottom", // ✅ This is allowed by the Chart.js types
},
],
};
const throughputData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
datasets: [
{
label: "Throughput (units/hr)",
data: [comparedProducts[0]?.simulationData.throughputData, comparedProducts[1]?.simulationData.throughputData],
backgroundColor: [purpleDark, purpleLight],
borderColor: [purpleDark, purpleLight],
borderWidth: 1,
borderRadius: 10, // ✅ Rounded all corners (TypeScript-safe)
// borderSkipped: "bottom", // ✅ This is allowed by the Chart.js types
},
],
};
const cycleTimePieData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
datasets: [
{
label: "Cycle Time (sec)",
data: [comparedProducts[0]?.simulationData.machineActiveTime, comparedProducts[1]?.simulationData.machineActiveTime],
backgroundColor: [purpleDark, purpleLight],
borderColor: "#fff",
borderWidth: 2,
},
],
};
const cycleTimePieData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
datasets: [
{
label: "Cycle Time (sec)",
data: [comparedProducts[0]?.simulationData.machineActiveTime, comparedProducts[1]?.simulationData.machineActiveTime],
backgroundColor: [purpleDark, purpleLight],
borderColor: "#fff",
borderWidth: 2,
},
],
};
const downtimeData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
datasets: [
{
label: "Downtime (mins)",
data: [comparedProducts[0]?.simulationData.machineIdleTime, comparedProducts[1]?.simulationData.machineIdleTime],
backgroundColor: [purpleDark, purpleLight],
borderColor: "#fff",
borderWidth: 2,
},
],
};
const downtimeData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
datasets: [
{
label: "Downtime (mins)",
data: [comparedProducts[0]?.simulationData.machineIdleTime, comparedProducts[1]?.simulationData.machineIdleTime],
backgroundColor: [purpleDark, purpleLight],
borderColor: "#fff",
borderWidth: 2,
},
],
};
const productionCapacityData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
datasets: [
{
label: "Production Capacity (units)",
data: [comparedProducts[0]?.simulationData.productionCapacity, comparedProducts[1]?.simulationData.productionCapacity],
backgroundColor: [purpleDark, purpleLight],
borderColor: [purpleDark, purpleLight],
borderWidth: 1,
borderRadius: 10,
borderSkipped: false,
},
],
};
const productionCapacityData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
datasets: [
{
label: "Production Capacity (units)",
data: [comparedProducts[0]?.simulationData.productionCapacity, comparedProducts[1]?.simulationData.productionCapacity],
backgroundColor: [purpleDark, purpleLight],
borderColor: [purpleDark, purpleLight],
borderWidth: 1,
borderRadius: 10,
borderSkipped: false,
},
],
};
const highestProductivityProduct = (comparedProducts[0]?.simulationData?.productionCapacity ?? 0) > (comparedProducts[1]?.simulationData?.productionCapacity ?? 0) ? comparedProducts[0] : comparedProducts[1];
const highestProductivityProduct = (comparedProducts[0]?.simulationData?.productionCapacity ?? 0) > (comparedProducts[1]?.simulationData?.productionCapacity ?? 0) ? comparedProducts[0] : comparedProducts[1];
const product1CyclePercentage = ((comparedProducts[0]?.simulationData?.machineActiveTime ?? 0) / ((compareProductsData[0]?.simulationData?.machineActiveTime ?? 0) + (compareProductsData[0]?.simulationData?.machineIdleTime ?? 0))) * 100;
const product2CyclePercentage = ((comparedProducts[1]?.simulationData?.machineActiveTime ?? 0) / ((compareProductsData[1]?.simulationData?.machineActiveTime ?? 0) + (compareProductsData[1]?.simulationData?.machineIdleTime ?? 0))) * 100;
const product1CyclePercentage = (comparedProducts[0]?.simulationData?.machineActiveTime ?? 0) /
((compareProductsData[0]?.simulationData?.machineActiveTime ?? 0) +
(compareProductsData[0]?.simulationData?.machineIdleTime ?? 0)) * 100;
const product2CyclePercentage = ((comparedProducts[1]?.simulationData?.machineActiveTime ?? 0) /
((compareProductsData[1]?.simulationData?.machineActiveTime ?? 0) +
(compareProductsData[1]?.simulationData?.machineIdleTime ?? 0))) * 100;
const product1IdlePercentage = ((comparedProducts[0]?.simulationData?.machineIdleTime ?? 0) / ((compareProductsData[0]?.simulationData?.machineActiveTime ?? 0) + (compareProductsData[0]?.simulationData?.machineIdleTime ?? 0))) * 100;
const product2IdlePercentage = ((comparedProducts[1]?.simulationData?.machineIdleTime ?? 0) / ((compareProductsData[1]?.simulationData?.machineActiveTime ?? 0) + (compareProductsData[1]?.simulationData?.machineIdleTime ?? 0))) * 100;
const product1IdlePercentage = (comparedProducts[0]?.simulationData?.machineIdleTime ?? 0) /
((compareProductsData[0]?.simulationData?.machineActiveTime ?? 0) +
(compareProductsData[0]?.simulationData?.machineIdleTime ?? 0)) * 100;
const product2IdlePercentage = ((comparedProducts[1]?.simulationData?.machineIdleTime ?? 0) /
((compareProductsData[1]?.simulationData?.machineActiveTime ?? 0) +
(compareProductsData[1]?.simulationData?.machineIdleTime ?? 0))) * 100;
return (
<div className="compare-result-container">
<div className="header">Performance Comparison</div>
<div className="compare-result-wrapper">
<EnergyUsage comparedProducts={comparedProducts}/>
<div className="throughPutCard-container comparisionCard">
<h4>Throughput (units/hr)</h4>
<div className="layers-wrapper">
<div className="layer-wrapper">
<div className="key">{comparedProducts[0]?.productName}</div>
<div className="value">{comparedProducts[0]?.simulationData.throughputData}/ hr</div>
</div>
<div className="layer-wrapper">
<div className="key">{comparedProducts[1]?.productName}</div>
<div className="value">{comparedProducts[1]?.simulationData.throughputData}/ hr</div>
</div>
<div className="chart">
<Bar data={throughputData} options={options} />
</div>
</div>
</div>
<div className="cycle-time-container comparisionCard">
<div className="cycle-main">
<h4 className="cycle-header">Cycle Time</h4>
<div className="layers-wrapper">
<div className="layers">
<div className="layer-name">{comparedProducts[0]?.productName}</div>
<div className="layer-time">{compareProductsData[0]?.simulationData.machineActiveTime} Sec</div>
<div className="layer-profit">
<span>↑</span>{(100 - product1CyclePercentage).toFixed(2)}%
return (
<div className="compare-result-container">
<div className="header">Performance Comparison</div>
<div className="compare-result-wrapper">
<EnergyUsage comparedProducts={comparedProducts} />
<div className="throughPutCard-container comparisionCard">
<h4>Throughput (units/hr)</h4>
<div className="layers-wrapper">
<div className="layer-wrapper">
<div className="key">{comparedProducts[0]?.productName}</div>
<div className="value">{comparedProducts[0]?.simulationData.throughputData}/ hr</div>
</div>
<div className="layer-wrapper">
<div className="key">{comparedProducts[1]?.productName}</div>
<div className="value">{comparedProducts[1]?.simulationData.throughputData}/ hr</div>
</div>
<div className="chart">
<Bar data={throughputData} options={options} />
</div>
</div>
</div>
</div>
<div className="layers">
<div className="layer-name">{comparedProducts[1]?.productName}</div>
<div className="layer-time">{compareProductsData[1]?.simulationData.machineActiveTime} Sec</div>
<div className="layer-profit">
<span>↑</span>{(100 - product2CyclePercentage).toFixed(2)}%
</div>
</div>
</div>
</div>
<div className="chart">
<Pie data={cycleTimePieData} options={options} />
</div>
</div>
<div className="cycle-time-container comparisionCard">
<div className="cycle-main">
<div className="cycle-header">Overall Downtime</div>
<div className="layers-wrapper">
<div className="layers">
<div className="layer-name">{comparedProducts[0]?.productName}</div>
<div className="layer-time">{compareProductsData[0]?.simulationData.machineIdleTime} Sec</div>
<div className="layer-profit">
<span>↑</span>{(100 - product1IdlePercentage).toFixed(2)}%
<div className="cycle-time-container comparisionCard">
<div className="cycle-main">
<h4 className="cycle-header">Cycle Time</h4>
<div className="layers-wrapper">
<div className="layers">
<div className="layer-name">{comparedProducts[0]?.productName}</div>
<div className="layer-time">{compareProductsData[0]?.simulationData.machineActiveTime} Sec</div>
<div className="layer-profit">
<span>↑</span>
{(100 - product1CyclePercentage).toFixed(2)}%
</div>
</div>
<div className="layers">
<div className="layer-name">{comparedProducts[1]?.productName}</div>
<div className="layer-time">{compareProductsData[1]?.simulationData.machineActiveTime} Sec</div>
<div className="layer-profit">
<span>↑</span>
{(100 - product2CyclePercentage).toFixed(2)}%
</div>
</div>
</div>
</div>
<div className="chart">
<Pie data={cycleTimePieData} options={options} />
</div>
</div>
</div>
<div className="layers">
<div className="layer-name">{comparedProducts[1]?.productName}</div>
<div className="layer-time">{compareProductsData[1]?.simulationData.machineIdleTime} Sec</div>
<div className="layer-profit">
<span>↑</span>{(100 - product2IdlePercentage).toFixed(2)}%
<div className="cycle-time-container comparisionCard">
<div className="cycle-main">
<div className="cycle-header">Overall Downtime</div>
<div className="layers-wrapper">
<div className="layers">
<div className="layer-name">{comparedProducts[0]?.productName}</div>
<div className="layer-time">{compareProductsData[0]?.simulationData.machineIdleTime} Sec</div>
<div className="layer-profit">
<span>↑</span>
{(100 - product1IdlePercentage).toFixed(2)}%
</div>
</div>
<div className="layers">
<div className="layer-name">{comparedProducts[1]?.productName}</div>
<div className="layer-time">{compareProductsData[1]?.simulationData.machineIdleTime} Sec</div>
<div className="layer-profit">
<span>↑</span>
{(100 - product2IdlePercentage).toFixed(2)}%
</div>
</div>
</div>
</div>
<div className="chart">
<Pie data={downtimeData} options={options} />
</div>
</div>
</div>
</div>
</div>
<div className="chart">
<Pie data={downtimeData} options={options} />
</div>
</div>
{/*
{/*
<div className="overallDowntime-container comparisionCard">
<h4 className="overallDowntime-header">Overall Downtime</h4>
<div className="totalDownTime-wrapper">
@@ -220,24 +226,24 @@ const ComparisonResult = () => {
</div>
</div> */}
<div className="overallScrapRate comparisionCard">
<h4 className="overallScrapRate-header">Production Capacity</h4>
<div className="overallScrapRate-wrapper">
<div className="overallScrapRate-value">
<div className="overallScrapRate-label">{highestProductivityProduct?.productName}</div>
<div className="overallScrapRate-key">Total product produced</div>
<div className="overallScrapRateKey-value">{highestProductivityProduct?.simulationData.productionCapacity}</div>
</div>
<div className="chart">
<Bar data={productionCapacityData} options={options} />
</div>
</div>
</div>
<div className="overallScrapRate comparisionCard">
<h4 className="overallScrapRate-header">Production Capacity</h4>
<div className="overallScrapRate-wrapper">
<div className="overallScrapRate-value">
<div className="overallScrapRate-label">{highestProductivityProduct?.productName}</div>
<div className="overallScrapRate-key">Total product produced</div>
<div className="overallScrapRateKey-value">{highestProductivityProduct?.simulationData.productionCapacity}</div>
</div>
<div className="chart">
<Bar data={productionCapacityData} options={options} />
</div>
</div>
</div>
{ comparedProducts.length === 2 &&<PerformanceResult comparedProducts={comparedProducts}/>}
</div>
</div>
);
{comparedProducts.length === 2 && <PerformanceResult comparedProducts={comparedProducts} />}
</div>
</div>
);
};
export default ComparisonResult;

1
app/src/modules/simulation/analysis/throughPut/throughPutData.tsx
View File

@@ -222,6 +222,7 @@ export default function ThroughPutData() {
const Throughput_per_day = Units_per_shift * shiftsPerDay * (yieldRate / 100);
const data = Number(Throughput_per_day.toFixed(2))
console.log('data: ', data);
saveSimulationData({ key: selectedProduct.productUuid, data: data });
setMaterialData({ ...materialData, throughput: data });

167
app/src/modules/simulation/simulator/SimulationHandler.tsx
View File

@@ -1,11 +1,13 @@
import React, { useEffect } from 'react';
import { useSceneContext } from '../../scene/sceneContext';
import { useProductContext } from '../products/productContext';
import { determineExecutionMachineSequences } from './functions/determineExecutionMachineSequences';
import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
import { useSimulationManager } from '../../../store/rough/useSimulationManagerStore';
import { useParams } from 'react-router-dom';
import { useVersionContext } from '../../builder/version/versionContext';
import React, { useEffect } from "react";
import { useSceneContext } from "../../scene/sceneContext";
import { useProductContext } from "../products/productContext";
import { determineExecutionMachineSequences } from "./functions/determineExecutionMachineSequences";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { useSimulationManager } from "../../../store/rough/useSimulationManagerStore";
import { useParams } from "react-router-dom";
import { useVersionContext } from "../../builder/version/versionContext";
import { getSimulationData, saveSimulationData } from "../../../components/layout/scenes/functions/simulationStorage";
import { get } from "http";
interface SimulationUsageRecord {
activeTime: number;
isActive: boolean;
@@ -38,7 +40,17 @@ interface ProjectSimulation {
versions: VersionSimulation[];
}
const SimulationHandler = () => {
const { materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, productStore, craneStore, humanStore } = useSceneContext();
const {
materialStore,
armBotStore,
machineStore,
conveyorStore,
vehicleStore,
storageUnitStore,
productStore,
craneStore,
humanStore,
} = useSceneContext();
const { armBots, getArmBotById } = armBotStore();
const { vehicles, getVehicleById } = vehicleStore();
const { getConveyorById } = conveyorStore();
@@ -48,16 +60,106 @@ const SimulationHandler = () => {
const { selectedProduct } = selectedProductStore();
const { machines, getMachineById } = machineStore();
const { getHumanById } = humanStore();
const { getCraneById, } = craneStore();
const { getCraneById } = craneStore();
const { getStorageUnitById } = storageUnitStore();
const { isPlaying, setIsPlaying } = usePlayButtonStore();
const { simulationData, addData } = useSimulationManager();
const { simulationRecords, addSimulationRecord } = useSimulationManager();
const { projectId } = useParams();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const COST_RATES: Record<SimulationUsageRecord["type"], number> = {
roboticArm: 5,
vehicle: 2,
transfer: 1,
storageUnit: 1,
crane: 6,
human: 4,
machine: 3,
};
// Calculate totals for one product
function calculateProductMetrics(product: ProductSimulation) {
let totalActiveTime = 0;
let totalIdleTime = 0;
let totalCost = 0;
product.data.forEach((record) => {
const resourceTime = record.activeTime + record.idleTime;
const costRate = COST_RATES[record.type] || 0;
totalActiveTime += record.activeTime;
totalIdleTime += record.idleTime;
totalCost += resourceTime * costRate;
});
return {
totalTime: totalActiveTime + totalIdleTime,
totalActiveTime,
totalIdleTime,
totalCost,
};
}
// Calculate totals for a version
function calculateVersionMetrics(version: VersionSimulation) {
return version.products.reduce(
(acc, product) => {
const metrics = calculateProductMetrics(product);
acc.totalTime += metrics.totalTime;
acc.totalActiveTime += metrics.totalActiveTime;
acc.totalIdleTime += metrics.totalIdleTime;
acc.totalCost += metrics.totalCost;
return acc;
},
{ totalTime: 0, totalActiveTime: 0, totalIdleTime: 0, totalCost: 0 }
);
}
// Efficiency score (compare across versions)
function calculateEfficiencyScores(versions: VersionSimulation[]) {
const versionMetrics = versions.map((v) => ({
versionId: v.versionId,
...calculateVersionMetrics(v),
}));
const minTime = Math.min(...versionMetrics.map((m) => m.totalTime));
const minCost = Math.min(...versionMetrics.map((m) => m.totalCost));
return versionMetrics.map((m) => {
const timeFactor = minTime / m.totalTime;
const costFactor = minCost / m.totalCost;
const efficiencyScore = 0.5 * timeFactor + 0.5 * costFactor;
return { ...m, efficiencyScore };
});
}
useEffect(() => {
console.log('simulationRecords: ', simulationRecords);
if (!projectId || !selectedVersion || !selectedProduct.productUuid || simulationRecords.length === 0) return;
const project = simulationRecords[0];
if (project) {
const scores = calculateEfficiencyScores(project.versions);
console.log("Version Comparisons:", scores);
}
saveSimulationData({
key: selectedProduct.productUuid,
data: simulationRecords,
});
}, [simulationRecords]);
useEffect(() => {
const simData = getSimulationData({ key: selectedProduct.productUuid });
if (simData) {
useSimulationManager.getState().setSimulationRecords(JSON.parse(simData));
// Parse and set in the store
} else { }
}, [])
useEffect(() => {
let checkTimer: ReturnType<typeof setTimeout>;
@@ -67,41 +169,43 @@ const SimulationHandler = () => {
let hasActiveEntity = false;
if (currentProduct) {
const executionSequences = await determineExecutionMachineSequences([currentProduct]);
const executionSequences = await determineExecutionMachineSequences([
currentProduct,
]);
if (executionSequences?.length > 0) {
executionSequences.forEach(sequence => {
sequence.forEach(entity => {
if (entity.type === 'roboticArm') {
executionSequences.forEach((sequence) => {
sequence.forEach((entity) => {
if (entity.type === "roboticArm") {
const roboticArm = getArmBotById(entity.modelUuid);
if (roboticArm?.isActive) {
hasActiveEntity = true;
}
}
if (entity.type === 'vehicle') {
if (entity.type === "vehicle") {
const vehicle = getVehicleById(entity.modelUuid);
if (vehicle?.isActive) {
hasActiveEntity = true;
}
}
if (entity.type === 'machine') {
if (entity.type === "machine") {
const machine = getMachineById(entity.modelUuid);
if (machine?.isActive) {
hasActiveEntity = true;
}
}
if (entity.type === 'human') {
if (entity.type === "human") {
const human = getHumanById(entity.modelUuid);
if (human?.isActive) {
hasActiveEntity = true;
}
}
if (entity.type === 'crane') {
if (entity.type === "crane") {
const crane = getCraneById(entity.modelUuid);
if (crane?.isActive) {
hasActiveEntity = true;
}
}
if (entity.type === 'storageUnit') {
if (entity.type === "storageUnit") {
const storageUnit = getStorageUnitById(entity.modelUuid);
if (storageUnit?.isActive) {
hasActiveEntity = true;
@@ -117,8 +221,11 @@ const SimulationHandler = () => {
});
}
if (materials.length === 0 && materialHistory.length >= 0 && !hasActiveEntity) {
if (
materials.length === 0 &&
materialHistory.length >= 0 &&
!hasActiveEntity
) {
if (executionSequences?.length > 0) {
executionSequences.forEach((sequence) => {
sequence.forEach((entity) => {
@@ -138,7 +245,7 @@ const SimulationHandler = () => {
const obj = getter(entity.modelUuid);
if (!obj) return; // skip if not found
addData(
addSimulationRecord(
projectId,
selectedVersion?.versionId || "",
selectedProduct?.productUuid,
@@ -154,6 +261,7 @@ const SimulationHandler = () => {
| "crane"
| "storageUnit"
| "transfer",
assetId: entity.modelUuid,
}
);
});
@@ -173,9 +281,18 @@ const SimulationHandler = () => {
return () => {
if (checkTimer) clearTimeout(checkTimer);
};
}, [materials, materialHistory, selectedVersion, selectedProduct?.productUuid, isPlaying, armBots, vehicles, machines]);
}, [
materials,
materialHistory,
selectedVersion,
selectedProduct?.productUuid,
isPlaying,
armBots,
vehicles,
machines,
]);
return null;
}
};
export default SimulationHandler;

199
app/src/store/rough/useSimulationManagerStore.ts
View File

@@ -1,136 +1,129 @@
import { create } from "zustand";
interface SimulationUsageRecord {
activeTime: number;
isActive: boolean;
idleTime: number;
type:
| "roboticArm"
| "vehicle"
| "transfer"
| "storageUnit"
| "crane"
| "human"
| "machine";
activeTime: number;
isActive: boolean;
idleTime: number;
type: "roboticArm" | "vehicle" | "transfer" | "storageUnit" | "crane" | "human" | "machine";
assetId: string;
}
// Product → holds multiple usage records
interface ProductSimulation {
productId: string;
data: SimulationUsageRecord[];
productId: string;
data: SimulationUsageRecord[];
}
// Version → holds multiple products
interface VersionSimulation {
versionId: string;
products: ProductSimulation[];
versionId: string;
products: ProductSimulation[];
}
// Project → holds multiple versions
interface ProjectSimulation {
projectId: string | undefined;
versions: VersionSimulation[];
projectId: string | undefined;
versions: VersionSimulation[];
}
// or same file
interface SimulationManagerStore {
simulationData: ProjectSimulation[];
simulationRecords: ProjectSimulation[];
setSimulationRecords: (data: ProjectSimulation[]) => void;
addSimulationRecord: (projectId: string | undefined, versionId: string, productId: string, record: SimulationUsageRecord) => void;
addData: (
projectId: string | undefined,
versionId: string,
productId: string,
record: SimulationUsageRecord
) => void;
resetProductData: (
projectId: string,
versionId: string,
productId: string
) => void;
resetProductRecords: (projectId: string, versionId: string, productId: string) => void;
getProjectById: (projectId: string | undefined) => ProjectSimulation | undefined;
getVersionById: (projectId: string | undefined, versionId: string) => VersionSimulation | undefined;
getProductById: (projectId: string | undefined, versionId: string, productId: string) => ProductSimulation | undefined;
}
export const useSimulationManager = create<SimulationManagerStore>((set) => ({
simulationData: [],
export const useSimulationManager = create<SimulationManagerStore>((set, get) => ({
simulationRecords: [],
addData: (projectId, versionId, productId, record) =>
set((state) => {
const projects = state.simulationData.map((project) => {
if (project.projectId !== projectId) return project;
addSimulationRecord: (projectId, versionId, productId, record) =>
set((state) => {
const projects = state.simulationRecords.map((project) => {
if (project.projectId !== projectId) return project;
return {
...project,
versions: project.versions.map((version) => {
if (version.versionId !== versionId) return version;
return {
...project,
versions: project.versions.map((version) => {
if (version.versionId !== versionId) return version;
return {
...version,
products: version.products.map((product) =>
product.productId === productId
? { ...product, data: [...product.data, record] }
: product
),
};
}),
};
});
return {
...version,
products: version.products.map((product) => (product.productId === productId ? { ...product, data: [...product.data, record] } : product)),
};
}),
};
});
// If project doesn't exist, create it
if (!state.simulationData.find((p) => p.projectId === projectId)) {
projects.push({
projectId,
versions: [
{
versionId,
products: [{ productId, data: [record] }],
},
],
});
} else {
const project = projects.find((p) => p.projectId === projectId)!;
if (!project.versions.find((v) => v.versionId === versionId)) {
project.versions.push({
versionId,
products: [{ productId, data: [record] }],
});
} else {
const version = project.versions.find(
(v) => v.versionId === versionId
)!;
if (!version.products.find((p) => p.productId === productId)) {
version.products.push({ productId, data: [record] });
}
}
}
// If project doesn't exist, create it
if (!state.simulationRecords.find((p) => p.projectId === projectId)) {
projects.push({
projectId,
versions: [
{
versionId,
products: [{ productId, data: [record] }],
},
],
});
} else {
const project = projects.find((p) => p.projectId === projectId)!;
if (!project.versions.find((v) => v.versionId === versionId)) {
project.versions.push({
versionId,
products: [{ productId, data: [record] }],
});
} else {
const version = project.versions.find((v) => v.versionId === versionId)!;
if (!version.products.find((p) => p.productId === productId)) {
version.products.push({ productId, data: [record] });
}
}
}
return { simulationData: projects };
}),
return { simulationRecords: projects };
}),
resetProductData: (projectId, versionId, productId) =>
set((state) => {
const projects = state.simulationData.map((project) => {
if (project.projectId !== projectId) return project;
resetProductRecords: (projectId, versionId, productId) =>
set((state) => {
const projects = state.simulationRecords.map((project) => {
if (project.projectId !== projectId) return project;
return {
...project,
versions: project.versions.map((version) => {
if (version.versionId !== versionId) return version;
return {
...project,
versions: project.versions.map((version) => {
if (version.versionId !== versionId) return version;
return {
...version,
products: version.products.map((product) =>
product.productId === productId
? { ...product, data: [] }
: product
),
};
}),
};
});
return {
...version,
products: version.products.map((product) => (product.productId === productId ? { ...product, data: [] } : product)),
};
}),
};
});
return { simulationData: projects };
}),
return { simulationRecords: projects };
}),
setSimulationRecords: (data) => {
set({ simulationRecords: data });
},
getProjectById: (projectId: string | undefined) => {
return get().simulationRecords.find((p: ProjectSimulation) => p.projectId === projectId);
},
getVersionById: (projectId: string | undefined, versionId: string) => {
const project = get().simulationRecords.find((p: ProjectSimulation) => p.projectId === projectId);
return project?.versions.find((v: VersionSimulation) => v.versionId === versionId);
},
getProductById: (projectId: string | undefined, versionId: string, productId: string) => {
const project = get().simulationRecords.find((p: ProjectSimulation) => p.projectId === projectId);
const version = project?.versions.find((v: VersionSimulation) => v.versionId === versionId);
return version?.products.find((p: ProductSimulation) => p.productId === productId);
},
}));
///////////////////////////

2
app/src/styles/layout/_compareLayout.scss
View File

@@ -305,7 +305,7 @@
background-color: #b7b7c6;
// Custom polygon shape (adjust if needed)
clipPath: polygon(96% 52%,
clip-path: polygon(96% 52%,
96% 54%,
45% 53%,
3% 100%,