Refactor simulation product handling and state management

- Replaced `useComparisonProduct` with `useSimulationState` in multiple components to streamline state management.
- Updated `SyncCam` to use `comparisonScene` instead of `comparisonProduct`.
- Modified `Products` component to utilize `mainScene` and `comparisonScene` for product selection.
- Adjusted various simulation functions to accept `ProductsSchema` instead of `productsSchema`.
- Enhanced `Simulator` component to fetch simulation data using the updated state structure.
- Refined Zustand store to manage `mainScene` and `comparisonScene` states, including their respective setters and clearers.
- Updated type definitions for products to ensure consistency across the application.
- Cleaned up shortcut key handling to reflect changes in state management.

app/src/components/ui/compareVersion/CompareLayOut.tsx

@@ -2,7 +2,7 @@ import { useParams } from "react-router-dom";
 import React, { useState, useRef, useEffect, Suspense } from "react";
 import { CompareLayoutIcon, LayoutIcon, ResizerIcon } from "../../icons/SimulationIcons";
 import { useLoadingProgress, useIsComparing } from "../../../store/builder/store";
-import { useComparisonProduct } from "../../../store/simulation/useSimulationStore";
+import { useSimulationState } from "../../../store/simulation/useSimulationStore";
 import { usePlayButtonStore } from "../../../store/ui/usePlayButtonStore";
 import { useSceneContext } from "../../../modules/scene/sceneContext";
 import { getAllProductsApi } from "../../../services/simulation/products/getallProductsApi";
@@ -14,7 +14,7 @@ import useRestStates from "../../../hooks/useResetStates";
 import { getVersionHistoryApi } from "../../../services/factoryBuilder/versionControl/getVersionHistoryApi";
 
 const CompareLayOut = () => {
-    const { clearComparisonProduct, comparisonProduct, setComparisonProduct } = useComparisonProduct();
+    const { clearComparisonState, comparisonScene, setComparisonState } = useSimulationState();
     const { versionStore } = useSceneContext();
     const { versionHistory, selectedVersion, setSelectedVersion, clearSelectedVersion, setVersions } = versionStore();
     const { setLoadingProgress } = useLoadingProgress();
@@ -32,11 +32,10 @@ const CompareLayOut = () => {
 
     useEffect(() => {
         return () => {
-            if (selectedVersion?.versionId) {
-                resetStates();
-            }
+            resetStates();
         };
-    }, [selectedVersion?.versionId]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     useEffect(() => {
         if (!projectId) return;
@@ -63,10 +62,10 @@ const CompareLayOut = () => {
     }, [projectId]);
 
     useEffect(() => {
-        if (!comparisonProduct) {
+        if (!comparisonScene) {
             clearSelectedVersion();
         }
-    }, [comparisonProduct]);
+    }, [comparisonScene]);
 
     OuterClick({
         contextClassName: ["displayLayouts-container", "selectLayout"],
@@ -108,7 +107,7 @@ const CompareLayOut = () => {
             if (finalWidthVw <= 10) {
                 setWidth("0px");
                 setIsComparing(false);
-                clearComparisonProduct();
+                clearComparisonState();
                 setIsPlaying(false);
             } else {
                 setWidth(`${finalWidthVw}vw`);
@@ -154,7 +153,13 @@ const CompareLayOut = () => {
         getAllProductsApi(projectId || "", version.versionId || "").then((data) => {
             if (data && data.length > 0) {
                 setSelectedVersion(version);
-                setComparisonProduct(data[0].productUuid, data[0].productName);
+                const comparisonData = {
+                    productUuid: data[0].productUuid,
+                    productName: data[0].productName,
+                    versionUuid: version.versionId,
+                    versionName: version.versionName,
+                };
+                setComparisonState(comparisonData);
                 setLoadingProgress(1);
             }
         });

app/src/components/ui/compareVersion/ComparisonResult.tsx

@@ -1,10 +1,9 @@
-import React, { useEffect, useMemo, useState } from "react";
+import { 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 { Bar, Pie } from "react-chartjs-2";
 import { useCompareProductDataStore } from "../../../store/builder/store";
-// import { CompareProduct, useCompareProductDataStore } from "../../../store/builder/store";
-import { useComparisonProduct, useMainProduct } from "../../../store/simulation/useSimulationStore";
+import { useSimulationState } from "../../../store/simulation/useSimulationStore";
+
 export interface CompareProduct {
     productUuid: string;
     productName: string;
@@ -21,16 +20,16 @@ export interface CompareProduct {
         efficiencyScore?: number;
     };
 }
+
 const ComparisonResult = () => {
-    const { compareProductsData, setCompareProductsData } = useCompareProductDataStore();
-    const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
-    const { mainProduct } = useMainProduct();
+    const { compareProductsData } = useCompareProductDataStore();
+    const { comparisonScene, mainScene } = useSimulationState();
     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);
+        if (compareProductsData.length > 0 && comparisonScene && mainScene) {
+            const mainProductData = compareProductsData.find((product) => product.productUuid === mainScene.product.productUuid);
+            const comparisonProductData = compareProductsData.find((product) => product.productUuid === comparisonScene.product.productUuid);
 
             if (mainProductData && comparisonProductData) {
                 setComparedProducts([mainProductData, comparisonProductData]);
@@ -40,7 +39,7 @@ const ComparisonResult = () => {
         } else {
             setComparedProducts([]);
         }
-    }, [compareProductsData, mainProduct, comparisonProduct]);
+    }, [compareProductsData, comparisonScene, mainScene]);
 
     useEffect(() => {
         if (comparedProducts.length === 2) {