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 />

app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx

@@ -11,8 +11,11 @@ import LabledDropdown from "../../../ui/inputs/LabledDropdown";
 import RegularDropDown from "../../../ui/inputs/RegularDropDown";
 import { handleResize } from "../../../../functions/handleResizePannel";
 import EyeDropInput from "../../../ui/inputs/EyeDropInput";
+import { useSelectedActionSphere } from "../../../../store/store";
 
 const MachineMechanics: React.FC = () => {
+  const { selectedActionSphere, setSelectedActionSphere } = useSelectedActionSphere();
+  console.log('selectedActionSphere: ', selectedActionSphere);
   const [actionList, setActionList] = useState<string[]>([]);
   const [triggerList, setTriggerList] = useState<string[]>([]);
   const [selectedItem, setSelectedItem] = useState<{
@@ -68,8 +71,8 @@ const MachineMechanics: React.FC = () => {
 
   return (
     <div className="machine-mechanics-container">
-      <div className="machine-mechanics-header">Selected Object</div>
-      <div className="process-list-container">
+      <div className="machine-mechanics-header">{selectedActionSphere.path.modelName}</div>
+      {/* <div className="process-list-container">
         <div className="label">Process:</div>
         <RegularDropDown
           header={activeProcess || "add process ->"}
@@ -79,7 +82,7 @@ const MachineMechanics: React.FC = () => {
         <div className="add-new-process" onClick={handleAddProcess}>
           <AddIcon />
         </div>
-      </div>
+      </div> */}
       <div className="machine-mechanics-content-container">
         <div className="actions">
           <div className="header">
@@ -97,12 +100,11 @@ const MachineMechanics: React.FC = () => {
               {actionList.map((action, index) => (
                 <div
                   key={index}
-                  className={`list-item ${
-                    selectedItem?.type === "action" &&
+                  className={`list-item ${selectedItem?.type === "action" &&
                     selectedItem.name === action
-                      ? "active"
-                      : ""
-                  }`}
+                    ? "active"
+                    : ""
+                    }`}
                 >
                   <div
                     className="value"
@@ -144,12 +146,11 @@ const MachineMechanics: React.FC = () => {
               {triggerList.map((trigger, index) => (
                 <div
                   key={index}
-                  className={`list-item ${
-                    selectedItem?.type === "trigger" &&
+                  className={`list-item ${selectedItem?.type === "trigger" &&
                     selectedItem.name === trigger
-                      ? "active"
-                      : ""
-                  }`}
+                    ? "active"
+                    : ""
+                    }`}
                 >
                   <div
                     className="value"
@@ -187,7 +188,7 @@ const MachineMechanics: React.FC = () => {
                 label="Speed"
                 value=""
                 activeOption=".mm"
-                onChange={() => {}}
+                onChange={() => { }}
               />
               <EyeDropInput />
             </>