diff --git a/app/src/components/layout/scenes/ComparisonScene.tsx b/app/src/components/layout/scenes/ComparisonScene.tsx index f803dee..5bcd08a 100644 --- a/app/src/components/layout/scenes/ComparisonScene.tsx +++ b/app/src/components/layout/scenes/ComparisonScene.tsx @@ -1,132 +1,151 @@ -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 { useDuplicateProductStore } from '../../../modules/duplicate/duplicateStores/duplicateProductStore'; -import ProductsDuplicate from '../../../modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct'; +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 { useDuplicateProductStore } from "../../../modules/duplicate/duplicateStores/duplicateProductStore"; +import ProductsDuplicate from "../../../modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct"; function ComparisonScene() { - const { isPlaying } = usePlayButtonStore(); - const { products, getProductById } = useDuplicateProductStore(); - const { isVersionSaved } = useSaveVersion(); - const { activeModule } = useModuleStore(); - const { selectedProductStore } = useProductContext(); - const { selectedProduct } = selectedProductStore(); - const { comparisonProduct, setComparisonProduct } = useComparisonProduct(); - const { mainProduct } = useMainProduct(); - const { loadingProgress } = useLoadingProgress(); - const { compareProductsData, setCompareProductsData } = useCompareProductDataStore(); - const [shouldShowComparisonResult, setShouldShowComparisonResult] = useState(false); + const { isPlaying } = usePlayButtonStore(); + const { products, getProductById } = useDuplicateProductStore(); + const { isVersionSaved } = useSaveVersion(); + const { activeModule } = useModuleStore(); + const { selectedProductStore } = useProductContext(); + const { selectedProduct } = selectedProductStore(); + const { comparisonProduct, setComparisonProduct } = useComparisonProduct(); + const { mainProduct } = useMainProduct(); + const { loadingProgress } = useLoadingProgress(); + const { compareProductsData, setCompareProductsData } = + useCompareProductDataStore(); + const [shouldShowComparisonResult, setShouldShowComparisonResult] = + useState(false); - const handleSelectLayout = (option: string) => { - const product = products.find((product) => product.productName === option); - if (product) { - setComparisonProduct(product.productUuid, product.productName); - } - }; - useEffect(() => { - if (compareProductsData.length === 2) return; + const handleSelectLayout = (option: string) => { + const product = products.find((product) => product.productName === option); + if (product) { + setComparisonProduct(product.productUuid, product.productName); + } + }; + useEffect(() => { + if (compareProductsData.length === 2) return; - // const productData = getProductById(selectedProduct.productUuid); + // const productData = getProductById(selectedProduct.productUuid); - // const newData = { - // "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2", - // "productName": "Product 2", - // "simulationData": { - // "roiPercentage": 281.7214285714286, - // "paybackPeriod": 1.7748028701097842, - // "netProfit": 9860250, - // "productionCapacity": 4599.25, - // "machineIdleTime": 1885, - // "machineActiveTime": 646, - // "throughputData": 183.97 - // } - // } + // const newData = { + // "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2", + // "productName": "Product 2", + // "simulationData": { + // "roiPercentage": 281.7214285714286, + // "paybackPeriod": 1.7748028701097842, + // "netProfit": 9860250, + // "productionCapacity": 4599.25, + // "machineIdleTime": 1885, + // "machineActiveTime": 646, + // "throughputData": 183.97 + // } + // } - // const existingIndex = compareProductsData.findIndex((item) => - // item.productUuid === productData?.productUuid - // ); + // const existingIndex = compareProductsData.findIndex((item) => + // item.productUuid === productData?.productUuid + // ); - // if (existingIndex !== -1) { - // const updated = [...compareProductsData]; - // updated[existingIndex] = newData; - // setCompareProductsData(updated); - // } else { - // setCompareProductsData([...compareProductsData, newData]); - // } + // if (existingIndex !== -1) { + // const updated = [...compareProductsData]; + // updated[existingIndex] = newData; + // setCompareProductsData(updated); + // } else { + // setCompareProductsData([...compareProductsData, newData]); + // } - setCompareProductsData([ - { - "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf1", - "productName": "Product 1", - "simulationData": { - "roiPercentage": 273.9428571428571, - "paybackPeriod": 1.8251981643721318, - "netProfit": 9588000, - "productionCapacity": 4508.5, - "machineIdleTime": 1450, - "machineActiveTime": 430, - "throughputData": 180.34 - } - }, - { - "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2", - "productName": "Product 2", - "simulationData": { - "roiPercentage": 281.7214285714286, - "paybackPeriod": 1.7748028701097842, - "netProfit": 9860250, - "productionCapacity": 4599.25, - "machineIdleTime": 1885, - "machineActiveTime": 646, - "throughputData": 183.97 - } - } - ]) - }, [compareProductsData]); // ✅ Runs only once on mount + setCompareProductsData([ + { + productUuid: "70a4d942-f201-4364-bc19-de98ed41500a", + productName: "Product 1", + simulationData: { + roiPercentage: 273.9428571428571, + paybackPeriod: 1.8251981643721318, + netProfit: 9588000, + productionCapacity: 4508.5, + machineIdleTime: 1450, + machineActiveTime: 430, + throughputData: 180.34, + }, + }, + { + productUuid: "70a4d942-f201-4364-bc19-de98ed41500b", + productName: "Product 2", + simulationData: { + roiPercentage: 281.7214285714286, + paybackPeriod: 1.7748028701097842, + netProfit: 9860250, + productionCapacity: 4599.25, + machineIdleTime: 1885, + machineActiveTime: 646, + throughputData: 183.97, + }, + }, + ]); + }, [compareProductsData]); // ✅ Runs only once on mount - useEffect(() => { - if (mainProduct && comparisonProduct && compareProductsData.length > 1) { - 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 { - setShouldShowComparisonResult(false); - } - } else { - setShouldShowComparisonResult(false); - } - }, [compareProductsData, mainProduct, comparisonProduct]); + useEffect(() => { + if (mainProduct && comparisonProduct && compareProductsData.length > 1) { + 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 { + setShouldShowComparisonResult(false); + } + } else { + setShouldShowComparisonResult(false); + } + }, [compareProductsData, mainProduct, comparisonProduct]); - return ( + return ( + <> + {isVersionSaved && activeModule === "simulation" && selectedProduct && ( <> - {isVersionSaved && activeModule === "simulation" && selectedProduct && ( - <> - {comparisonProduct && !isPlaying && -
- l.productName)} // Pass layout names as options - onSelect={handleSelectLayout} - search={false} - /> -
- } - + {comparisonProduct && !isPlaying && ( +
+ l.productName)} // Pass layout names as options + onSelect={handleSelectLayout} + search={false} + /> +
+ )} + - + - {(shouldShowComparisonResult && !loadingProgress) && } - - )} + {shouldShowComparisonResult && !loadingProgress && ( + + )} - ) + )} + + ); } export default ComparisonScene; diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx index f2c62ff..44ff568 100644 --- a/app/src/components/layout/scenes/MainScene.tsx +++ b/app/src/components/layout/scenes/MainScene.tsx @@ -120,9 +120,7 @@ function MainScene() { )}
{ ); // Color palette - const purpleDark = "#6a0dad"; - const purpleLight = "#b19cd9"; + const purpleDark = "#3466F1"; + const purpleLight = "#FFC527"; const throughputData = { labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName], @@ -71,7 +71,6 @@ const ComparisonResult = () => { ], }; - const cycleTimePieData = { labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName], datasets: [ diff --git a/app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx b/app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx index 0c453a4..0eadb1c 100644 --- a/app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx +++ b/app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx @@ -22,7 +22,7 @@ ChartJS.register( const EnergyUsage = ({comparedProducts}:any) => { const data = useMemo(() => { const randomizeData = () => - Array.from({ length: 5 }, () => Math.floor(Math.random() * (2000 - 300 + 1)) + 300); + Array.from({ length: 7 }, () => Math.floor(Math.random() * 10)); return { labels: ["Mon", "Tue", "Wed", "Thu", "Fri"], @@ -30,7 +30,7 @@ const EnergyUsage = ({comparedProducts}:any) => { { label: "Simulation 1", data: randomizeData(), - borderColor: "#6a0dad", + borderColor: "#3466F1", fill: false, tension: 0.5, // More curved line pointRadius: 0, // Remove point indicators @@ -38,7 +38,7 @@ const EnergyUsage = ({comparedProducts}:any) => { { label: "Simulation 2", data: randomizeData(), - borderColor: "#b19cd9", + borderColor: "#FFC527", fill: false, tension: 0.5, pointRadius: 0, diff --git a/app/src/modules/duplicate/duplicateSetup/postProcessingDuplicate.tsx b/app/src/modules/duplicate/duplicateSetup/postProcessingDuplicate.tsx index dfc2e2c..5268d45 100644 --- a/app/src/modules/duplicate/duplicateSetup/postProcessingDuplicate.tsx +++ b/app/src/modules/duplicate/duplicateSetup/postProcessingDuplicate.tsx @@ -5,7 +5,7 @@ export default function PostProcessingDuplicate() { return ( + {activeModule === "simulation" && ( <> - {activeModule === "simulation" && ( - <> - - {events.map((event, index) => { - const usedEvent = event; + + {events.map((event, index) => { + const usedEvent = event; - if (usedEvent.type === "transfer") { - return ( - - {usedEvent.points.map((point, j) => ( - - - - - ))} - - ); - } else if (usedEvent.type === "vehicle") { - const point = usedEvent.point; - return ( - - - - - - - ); - } else if (usedEvent.type === "roboticArm") { - const point = usedEvent.point; - return ( - - - - - - - ); - } else if (usedEvent.type === "machine") { - const point = usedEvent.point; - return ( - - - - - - - ); - } else if (usedEvent.type === "storageUnit") { - const point = usedEvent.point; - return ( - - - - - - - ); - } else { - return null; - } - })} - - - )} + if (usedEvent.type === "transfer") { + return ( + + {usedEvent.points.map((point, j) => ( + + + + + ))} + + ); + } else if (usedEvent.type === "vehicle") { + const point = usedEvent.point; + return ( + + + + + + + ); + } else if (usedEvent.type === "roboticArm") { + const point = usedEvent.point; + return ( + + + + + + + ); + } else if (usedEvent.type === "machine") { + const point = usedEvent.point; + return ( + + + + + + + ); + } else if (usedEvent.type === "storageUnit") { + const point = usedEvent.point; + return ( + + + + + + + ); + } else { + return null; + } + })} + - ); + )} + + ); } export default PointsDuplicate; diff --git a/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx b/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx index 4c1a69d..e09df08 100644 --- a/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx +++ b/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx @@ -1,6 +1,5 @@ import * as THREE from 'three'; import { useEffect } from 'react'; -import { upsertProductOrEventApi } from '../../../../services/simulation/products/UpsertProductOrEventApi'; import { getAllProductsApi } from '../../../../services/simulation/products/getallProductsApi'; import { usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore'; import { useSceneContext } from '../../../scene/sceneContext'; diff --git a/app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx b/app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx index 71aa629..7e02545 100644 --- a/app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx +++ b/app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx @@ -1,18 +1,13 @@ -import React from 'react' -import ProductsDuplicate from './duplicateProduct/duplicateProduct' -import PointsDuplicate from './duplicatePoint/duplicatePoint' -import TriggerDuplicate from './duplicateTrigger/duplicateTrigger' +import PointsDuplicate from "./duplicatePoint/duplicatePoint"; +import TriggerDuplicate from "./duplicateTrigger/duplicateTrigger"; function SimulationDuplicate() { - return ( - <> - - - - - - - ) + return ( + <> + + + + ); } -export default SimulationDuplicate \ No newline at end of file +export default SimulationDuplicate; diff --git a/app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx b/app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx index a6cd8fd..0772a52 100644 --- a/app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx +++ b/app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx @@ -147,7 +147,7 @@ function TriggerDuplicate() { start={startPoint.toArray()} end={endPoint.toArray()} mid={midPoint.toArray()} - color={"#c4abf1"} + color={"#FFC527"} lineWidth={4} dashed={true} dashSize={0.75} @@ -157,7 +157,7 @@ function TriggerDuplicate() { ); })} - + ); } diff --git a/app/src/modules/duplicate/sceneDuplicate.tsx b/app/src/modules/duplicate/sceneDuplicate.tsx index 3c501a5..034b0a6 100644 --- a/app/src/modules/duplicate/sceneDuplicate.tsx +++ b/app/src/modules/duplicate/sceneDuplicate.tsx @@ -12,39 +12,42 @@ import { Color } from "three"; import SimulationDuplicate from "./duplicateSimulation/duplicateSimulation"; export default function DuplicateScene() { - const projectId = "684bcd620a64bc2a815a88d6"; + const projectId = "6842c683d4c6ce57664da93b"; - return ( - { - e.preventDefault(); - }} - onCreated={(e) => { - e.scene.background = new Color(0x19191d); - }} - gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }} - > + return ( + { + e.preventDefault(); + }} + onCreated={(e) => { + e.scene.background = new Color(0x19191d); + }} + gl={{ + powerPreference: "high-performance", + antialias: true, + preserveDrawingBuffer: true, + }} + > + - + - + - + - + - + - - - - - ); -} \ No newline at end of file + + + ); +} diff --git a/app/src/modules/simulation/events/arrows/arrows.tsx b/app/src/modules/simulation/events/arrows/arrows.tsx index eca413f..e0a3edb 100644 --- a/app/src/modules/simulation/events/arrows/arrows.tsx +++ b/app/src/modules/simulation/events/arrows/arrows.tsx @@ -150,7 +150,7 @@ export function ArrowOnQuadraticBezier({ start, mid, end, - color = "#42a5f5", + color = "#3466F1", }: { start: number[]; mid: number[]; diff --git a/app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx b/app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx index 80e5ae9..092c92b 100644 --- a/app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx +++ b/app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx @@ -421,7 +421,7 @@ function TriggerConnector() { end: endPoint, }); - setHelperLineColor(sphereIntersects.length > 0 ? "#6cf542" : "red"); + setHelperLineColor(sphereIntersects.length > 0 ? "#3466F1" : "red"); } else { setCurrentLine(null); } @@ -477,7 +477,7 @@ function TriggerConnector() { start={startPoint.toArray()} end={endPoint.toArray()} mid={midPoint.toArray()} - color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#6f42c1"} + color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#42a5f5"} lineWidth={4} dashed={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? false : true} dashSize={0.75} @@ -496,7 +496,7 @@ function TriggerConnector() { ); })} - + {currentLine && ( <> diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss index 15c0a6b..805ae7c 100644 --- a/app/src/styles/layout/compareLayout.scss +++ b/app/src/styles/layout/compareLayout.scss @@ -8,7 +8,12 @@ z-index: 10; .regularDropdown-container { - background: var(--background-color); + background: #FFC527; + .key, + .icon { + color: #323232; + font-weight: 600; + } } } @@ -19,7 +24,11 @@ z-index: 10; .regularDropdown-container { - background: var(--background-color); + background: #3466f1; + .key, + .icon { + color: #fff; + } } } @@ -55,8 +64,8 @@ cursor: ew-resize; transition: transform 0.1s ease; z-index: 100; - // pointer-events: all; - opacity: 0; + pointer-events: all; + // opacity: 0; } .chooseLayout-container { @@ -71,7 +80,7 @@ .compare-layout-canvas-container { position: absolute; height: 100vh; - width: 50vw; + width: 100vw; top: 0; right: 0; } @@ -265,7 +274,7 @@ .metric-value { padding-top: 6px; font-size: var(--font-size-xlarge); - color: var(--background-color-accent); + color: #14ca44; font-weight: 600; } } @@ -401,9 +410,9 @@ } .simulation-tag { - background: var(--background-color-button); - - color: var(--icon-default-color-active); + background: #FFC527; + color: #323232; + font-weight: 600; position: absolute; bottom: 0; right: 0; @@ -431,7 +440,7 @@ .energy-usage-wrapper { .value { - padding-top: 25px; + padding-top: 100px; font-size: var(--font-size-xxxlarge); color: var(--background-color-accent); } @@ -439,7 +448,7 @@ .simulation-details { position: absolute; - bottom: 12px; + top: 12px; right: 12px; .simulation-wrapper { @@ -447,6 +456,16 @@ align-items: center; gap: 6px; + &.sim-1 { + .icon { + background-color: #3466f1; + } + } + &.sim-2 { + .icon { + background-color: #FFC527; + } + } .icon { width: 20px; height: 20px; @@ -457,9 +476,10 @@ } .chart { + height: 80px; width: 90%; position: absolute; - top: 10px; + top: 40px; left: 0; } } @@ -476,9 +496,16 @@ .layer-wrapper { display: flex; flex-direction: column; - - &:last-child { - justify-content: end; + &:first-child { + .key { + color: #3466f1; + } + } + &:nth-child(2) { + // justify-content: end; + .key { + color: #FFC527; + } } } @@ -516,6 +543,16 @@ display: flex; flex-direction: column; gap: 4px; + &:first-child { + .layer-name { + color: #3466f1; + } + } + &:last-child { + .layer-name { + color: #FFC527; + } + } .layer-name { color: var(--background-color-accent);