updated

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

@@ -10,15 +10,22 @@ import {
 } from "../../../store/builder/store";
 import Search from "../inputs/Search";
 import OuterClick from "../../../utils/outerClick";
-import { useProductStore } from "../../../store/simulation/useProductStore";
 import Scene from "../../../modules/scene/scene";
 import { useComparisonProduct } from "../../../store/simulation/useSimulationStore";
-import { usePauseButtonStore, usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { useVersionHistoryStore } from "../../../store/builder/useVersionHistoryStore";
+import { useVersionContext } from "../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../modules/scene/sceneContext";
+import { getAllProductsApi } from "../../../services/simulation/products/getallProductsApi";
+import { useParams } from "react-router-dom";
 
 const CompareLayOut = () => {
-  const { comparisonProduct, setComparisonProduct, clearComparisonProduct } =
-    useComparisonProduct();
-  const { products } = useProductStore();
+  const { clearComparisonProduct, comparisonProduct, setComparisonProduct } = useComparisonProduct();
+  const { productStore } = useSceneContext();
+  const { products } = productStore();
+  const { versionHistory } = useVersionHistoryStore();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion, setSelectedVersion, clearSelectedVersion } = selectedVersionStore();
   const { setLoadingProgress } = useLoadingProgress();
   const [width, setWidth] = useState("50vw");
   const [isResizing, setIsResizing] = useState(false);
@@ -29,7 +36,13 @@ const CompareLayOut = () => {
   const { setIsVersionSaved } = useSaveVersion();
   const { loadingProgress } = useLoadingProgress();
   const { setIsPlaying } = usePlayButtonStore();
-  const { setIsPaused } = usePauseButtonStore();
+  const { projectId } = useParams();
+
+  useEffect(() => {
+    if (!comparisonProduct) {
+      clearSelectedVersion();
+    }
+  }, [comparisonProduct])
 
   OuterClick({
     contextClassName: ["displayLayouts-container", "selectLayout"],
@@ -113,12 +126,14 @@ const CompareLayOut = () => {
     return () => window.removeEventListener("resize", handleResize);
   }, [isResizing]);
 
-  const handleSelectLayout = (option: string) => {
-    const product = products.find((product) => product.productName === option);
-    if (product) {
-      setComparisonProduct(product.productUuid, product.productName);
-      setLoadingProgress(1);
-    }
+  const handleSelectLayout = (version: Version) => {
+    getAllProductsApi(projectId || '', version.versionId || '').then((data) => {
+      if (data && data.length > 0) {
+        setSelectedVersion(version);
+        setComparisonProduct(data[0].productUuid, data[0].productName);
+        setLoadingProgress(1);
+      }
+    })
   };
 
   return (
@@ -127,7 +142,7 @@ const CompareLayOut = () => {
       ref={wrapperRef}
       style={{ width }}
     >
-      {loadingProgress == 0 && (
+      {loadingProgress == 0 && selectedVersion?.versionId && (
         <button
           title="resize-canvas"
           id="compare-resize-slider-btn"
@@ -138,7 +153,7 @@ const CompareLayOut = () => {
         </button>
       )}
       <div className="chooseLayout-container">
-        {comparisonProduct && (
+        {selectedVersion?.versionId && (
           <div className="compare-layout-canvas-container">
             <Suspense fallback={null}>
               <Scene layout="Comparison Layout" />
@@ -147,35 +162,35 @@ const CompareLayOut = () => {
         )}
 
         {width !== "0px" &&
-          !comparisonProduct && ( // Show only if no layout selected
+          !selectedVersion?.versionId && ( // Show only if no layout selected
             <div className="chooseLayout-wrapper">
               <div className="icon">
                 <CompareLayoutIcon />
               </div>
-              <div className="value">Choose Layout to compare</div>
+              <div className="value">Choose Version to compare</div>
               <button
                 className="selectLayout"
                 onClick={() => setShowLayoutDropdown(!showLayoutDropdown)}
               >
-                Select Layout
+                Select Version
               </button>
 
               {showLayoutDropdown && (
                 <div className="displayLayouts-container">
-                  <div className="header">Layouts</div>
-                  <Search onChange={() => {}} />
+                  <div className="header">Versions</div>
+                  <Search onChange={() => { }} />
                   <div className="layouts-container">
-                    {products.map((layout) => (
+                    {versionHistory.map((version) => (
                       <button
-                        key={layout.productUuid}
+                        key={version.versionId}
                         className="layout-wrapper"
                         onClick={() => {
-                          handleSelectLayout(layout.productName);
+                          handleSelectLayout(version);
                           setShowLayoutDropdown(false);
                         }}
                       >
                         <LayoutIcon />
-                        <div className="layout">{layout.productName}</div>
+                        <div className="layout">{version.versionName}</div>
                       </button>
                     ))}
                   </div>

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

@@ -133,7 +133,7 @@ const ComparisonResult = () => {
     <div className="compare-result-container">
       <div className="header">Performance Comparison</div>
       <div className="compare-result-wrapper">
-        <EnergyUsage />
+        <EnergyUsage comparedProducts={comparedProducts}/>
         <div className="throughPutCard-container comparisionCard">
           <h4>Throughput (units/hr)</h4>
           <div className="layers-wrapper">
@@ -153,7 +153,7 @@ const ComparisonResult = () => {
 
         <div className="cycle-time-container comparisionCard">
           <div className="cycle-main">
-            <div className="cycle-header">Cycle Time</div>
+            <h4 className="cycle-header">Cycle Time</h4>
             <div className="layers-wrapper">
               <div className="layers">
                 <div className="layer-name">{comparedProducts[0]?.productName}</div>
@@ -202,7 +202,7 @@ const ComparisonResult = () => {
         </div>
 {/* 
         <div className="overallDowntime-container comparisionCard">
-          <div className="overallDowntime-header">Overall Downtime</div>
+          <h4 className="overallDowntime-header">Overall Downtime</h4>
           <div className="totalDownTime-wrapper">
             <div className="totalDownTime">
               <div className="totalDownTime-right">
@@ -221,7 +221,7 @@ const ComparisonResult = () => {
         </div> */}
 
         <div className="overallScrapRate comparisionCard">
-          <div className="overallScrapRate-header">Production Capacity</div>
+          <h4 className="overallScrapRate-header">Production Capacity</h4>
           <div className="overallScrapRate-wrapper">
             <div className="overallScrapRate-value">
               <div className="overallScrapRate-label">{highestProductivityProduct?.productName}</div>

app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx

@@ -19,7 +19,7 @@ ChartJS.register(
   Legend
 );
 
-const EnergyUsage = () => {
+const EnergyUsage = ({comparedProducts}:any) => {
   const data = useMemo(() => {
     const randomizeData = () =>
       Array.from({ length: 5 }, () => Math.floor(Math.random() * (2000 - 300 + 1)) + 300);
@@ -90,14 +90,14 @@ const EnergyUsage = () => {
         <div className="simulation-wrapper sim-1">
           <div className="icon"></div>
           <div className="simulation-details-wrapper">
-            <div className="label">Simulation 1</div>
+            <div className="label">{comparedProducts[0]?.productName}</div>
             <div className="value">98%</div>
           </div>
         </div>
         <div className="simulation-wrapper sim-2">
           <div className="icon"></div>
           <div className="simulation-details-wrapper">
-            <div className="label">Simulation 2</div>
+            <div className="label">{comparedProducts[1]?.productName}</div>
             <div className="value">97%</div>
           </div>
         </div>

app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx

@@ -13,7 +13,7 @@ const PerformanceResult = ({ comparedProducts }: any) => {
         <div className="icon">
           <PerformanceIcon />
         </div>
-        <div className="head">Performance result</div>
+        <h4 className="head">Performance result</h4>
       </div>
 
       <div className="metrics-container">
@@ -56,7 +56,7 @@ const PerformanceResult = ({ comparedProducts }: any) => {
         </div>
       </div>
 
-      <div className="simulation-tag">Simulation 1</div>
+      <div className="simulation-tag">{ProfitProduct.productName}</div>
     </div>
   );
 };