refactor: improve layout handling in MainScene, SideBarLeft, and SideBarRight; enhance ComparisonResult charts and styles for better visualization

app/src/components/layout/scenes/MainScene.tsx

@@ -48,12 +48,12 @@ function MainScene() {
   const { setFloatingWidget } = useFloatingWidget();
   const { comparisonProduct } = useComparisonProduct();
 
-    const handleSelectLayout = (option: string) => {
-        const product = products.find((product) => product.productName === option);
-        if (product) {
-            setMainProduct(product.productUuid, product.productName);
-        }
-    };
+  const handleSelectLayout = (option: string) => {
+    const product = products.find((product) => product.productName === option);
+    if (product) {
+      setMainProduct(product.productUuid, product.productName);
+    }
+  };
 
   return (
     <>
@@ -108,7 +108,7 @@ function MainScene() {
         <Scene layout="Main Layout" />
       </div>
 
-      {selectedProduct && isVersionSaved && !isPlaying && (
+      {selectedProduct && isVersionSaved && !isPlaying && activeModule === "simulation" && (
         <div className="selectLayout-wrapper">
           <RegularDropDown
             header={selectedProduct.productName}

app/src/components/layout/sidebarLeft/SideBarLeft.tsx

@@ -33,11 +33,13 @@ const SideBarLeft: React.FC = () => {
     console.log(value);
   };
 
+  console.log('isVersionSaved: ', isVersionSaved);
+  console.log('toggleUILeft: ', toggleUILeft);
+
   return (
     <div
-      className={`sidebar-left-wrapper ${
-        toggleUILeft && !isVersionSaved ? "open" : "closed"
-      }`}
+      className={`sidebar-left-wrapper ${toggleUILeft && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
+        }`}
     >
       <Header />
       {toggleUILeft && (

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -65,7 +65,7 @@ const SideBarRight: React.FC = () => {
 
   return (
     <div
-      className={`sidebar-right-wrapper ${toggleUIRight && !isVersionSaved ? "open" : "closed"
+      className={`sidebar-left-wrapper ${toggleUIRight && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
         }`}
     >
       <Header />

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

@@ -1,57 +1,89 @@
 import React, { useMemo } from "react";
 import PerformanceResult from "./result-card/PerformanceResult";
 import EnergyUsage from "./result-card/EnergyUsage";
-import { Bar } from "react-chartjs-2";
+import { Bar, Line } from "react-chartjs-2";
 
 const ComparisonResult = () => {
-  const defaultData = {
-    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-    datasets: [
-      {
-        label: "Dataset",
-        data: [12, 19, 3, 5, 2, 3],
-        backgroundColor: ["#6f42c1"],
-        borderColor: "#b392f0",
-        borderWidth: 1,
-      },
-    ],
-  };
-
-  // Memoize Chart Options
   const options = useMemo(
     () => ({
       responsive: true,
       maintainAspectRatio: false,
       plugins: {
-        title: {
-          display: true,
-        },
-        legend: {
-          display: false,
-        },
+        title: { display: false },
+        legend: { display: false },
       },
       scales: {
-        x: {
-          display: false, // Hide x-axis
-          grid: {
-            display: false,
-          },
-        },
-        y: {
-          display: false, // Hide y-axis
-          grid: {
-            display: false,
-          },
-        },
+        x: { display: false, grid: { display: false } },
+        y: { display: false, grid: { display: false } },
       },
     }),
     []
   );
+
+  // Color palette
+  const purpleDark = "#6a0dad";
+  const purpleLight = "#b19cd9";
+
+  const throughputData = {
+    labels: ["Layout 1", "Layout 2"],
+    datasets: [
+      {
+        label: "Throughput (units/hr)",
+        data: [500, 550],
+        backgroundColor: [purpleDark, purpleLight],
+        borderColor: [purpleDark, purpleLight],
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  const cycleTimeData = {
+    labels: ["Layout 1", "Layout 2"],
+    datasets: [
+      {
+        label: "Cycle Time (sec)",
+        data: [110, 110],
+        backgroundColor: [purpleLight],
+        borderColor: purpleDark,
+        borderWidth: 2,
+        tension: 0.4,
+        fill: false,
+      },
+    ],
+  };
+
+  const downtimeData = {
+    labels: ["Layout 1", "Layout 2"],
+    datasets: [
+      {
+        label: "Downtime (mins)",
+        data: [17, 12],
+        backgroundColor: [purpleDark, purpleLight],
+        borderColor: [purpleDark, purpleLight],
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  const scrapRateData = {
+    labels: ["Layout 1", "Layout 2"],
+    datasets: [
+      {
+        label: "Scrap Rate (tons)",
+        data: [2.7, 1.9],
+        backgroundColor: [purpleDark, purpleLight],
+        borderColor: [purpleDark, purpleLight],
+        borderWidth: 1,
+      },
+    ],
+  };
+
   return (
     <div className="compare-result-container">
       <div className="header">Performance Comparison</div>
       <div className="compare-result-wrapper">
         <EnergyUsage />
+
         <div className="throughPutCard-container comparisionCard">
           <h4>Throughput (units/hr)</h4>
           <div className="layers-wrapper">
@@ -64,8 +96,11 @@ const ComparisonResult = () => {
               <div className="value">550/ hr</div>
             </div>
           </div>
-          <div className="chart"></div>
+          <div className="chart">
+            <Bar data={throughputData} options={options} />
+          </div>
         </div>
+
         <div className="cycle-time-container comparisionCard">
           <div className="cycle-main">
             <div className="cycle-header">Cycle Time</div>
@@ -81,12 +116,16 @@ const ComparisonResult = () => {
                 <div className="layer-name">Layout 2</div>
                 <div className="layer-time">110 Sec</div>
                 <div className="layer-profit">
-                  <span>↑</span>19.6%1.6%
+                  <span>↑</span>1.6%
                 </div>
               </div>
             </div>
           </div>
+          <div className="chart">
+            <Line data={cycleTimeData} options={options} />
+          </div>
         </div>
+
         <div className="overallDowntime-container comparisionCard">
           <div className="overallDowntime-header">Overall Downtime</div>
           <div className="totalDownTime-wrapper">
@@ -101,10 +140,7 @@ const ComparisonResult = () => {
               </div>
             </div>
             <div className="chart">
-              <div className="vertical-chart">
-                <div className="layout1"></div>
-                <div className="layout2"></div>
-              </div>
+              <Bar data={downtimeData} options={options} />
             </div>
           </div>
         </div>
@@ -114,16 +150,15 @@ const ComparisonResult = () => {
           <div className="overallScrapRate-wrapper">
             <div className="overallScrapRate-value">
               <div className="overallScrapRate-label">Layout 1</div>
-              <div className="overallScrapRate-key">
-                Total scrap produced by
-              </div>
+              <div className="overallScrapRate-key">Total scrap produced by</div>
               <div className="overallScrapRateKey-value">2.7 ton</div>
             </div>
             <div className="chart">
-              <Bar data={defaultData} options={options} />
+              <Bar data={scrapRateData} options={options} />
             </div>
           </div>
         </div>
+
         <PerformanceResult />
       </div>
     </div>

app/src/styles/layout/compareLayout.scss

@@ -475,6 +475,7 @@
     }
 
     .chart {
+        width: 80%;
         height: 90%;
         position: absolute;
         bottom: 0;