add new features and optimizations to simulation and builder modules

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Header from "./Header";
-import useModuleStore from "../../../store/useModuleStore";
+import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
 import {
   AnalysisIcon,
   MechanicsIcon,
@@ -14,15 +14,17 @@ import GlobalProperties from "./properties/GlobalProperties";
 import AsstePropertiies from "./properties/AssetProperties";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
+import { useSelectedActionSphere } from "../../../store/store";
 
 const SideBarRight: React.FC = () => {
   const { activeModule } = useModuleStore();
-  const [activeList, setActiveList] = useState("properties");
+  const { selectedActionSphere } = useSelectedActionSphere();
+  const { subModule, setSubModule } = useSubModuleStore();
   const { toggleUI } = useToggleStore();
 
-  // Reset activeList whenever activeModule changes
+  // Reset subModule whenever activeModule changes
   useEffect(() => {
-    setActiveList("properties");
+    setSubModule("properties");
   }, [activeModule]);
 
   return (
@@ -31,38 +33,34 @@ const SideBarRight: React.FC = () => {
       {toggleUI && (
         <div className="sidebar-actions-container">
           <div
-            className={`sidebar-action-list ${
-              activeList === "properties" ? "active" : ""
-            }`}
-            onClick={() => setActiveList("properties")}
+            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
+              }`}
+            onClick={() => setSubModule("properties")}
           >
-            <PropertiesIcon isActive={activeList === "properties"} />
+            <PropertiesIcon isActive={subModule === "properties"} />
           </div>
           {activeModule === "simulation" && (
             <>
               <div
-                className={`sidebar-action-list ${
-                  activeList === "mechanics" ? "active" : ""
-                }`}
-                onClick={() => setActiveList("mechanics")}
+                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
+                  }`}
+                onClick={() => setSubModule("mechanics")}
               >
-                <MechanicsIcon isActive={activeList === "mechanics"} />
+                <MechanicsIcon isActive={subModule === "mechanics"} />
               </div>
               <div
-                className={`sidebar-action-list ${
-                  activeList === "simulations" ? "active" : ""
-                }`}
-                onClick={() => setActiveList("simulations")}
+                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
+                  }`}
+                onClick={() => setSubModule("simulations")}
               >
-                <SimulationIcon isActive={activeList === "simulations"} />
+                <SimulationIcon isActive={subModule === "simulations"} />
               </div>
               <div
-                className={`sidebar-action-list ${
-                  activeList === "analysis" ? "active" : ""
-                }`}
-                onClick={() => setActiveList("analysis")}
+                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
+                  }`}
+                onClick={() => setSubModule("analysis")}
               >
-                <AnalysisIcon isActive={activeList === "analysis"} />
+                <AnalysisIcon isActive={subModule === "analysis"} />
               </div>
             </>
           )}
@@ -70,7 +68,7 @@ const SideBarRight: React.FC = () => {
       )}
       {/* process builder */}
       {toggleUI &&
-        activeList === "properties" &&
+        subModule === "properties" &&
         activeModule !== "visualization" && (
           <div className="sidebar-right-container">
             <div className="sidebar-right-content-container">
@@ -84,21 +82,28 @@ const SideBarRight: React.FC = () => {
 
       {toggleUI && activeModule === "simulation" && (
         <>
-          {activeList === "mechanics" && (
+          {(subModule === "mechanics" && selectedActionSphere) && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
                 <MachineMechanics />
               </div>
             </div>
           )}
-          {activeList === "analysis" && (
+          {(subModule === "mechanics" && !selectedActionSphere) && (
+            <div className="sidebar-right-container">
+              <div className="sidebar-right-content-container">
+                {/* <MachineMechanics /> */}
+              </div>
+            </div>
+          )}
+          {subModule === "analysis" && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
                 <Analysis />
               </div>
             </div>
           )}
-          {activeList === "simulations" && (
+          {subModule === "simulations" && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
                 <Simulations />