Merge branch 'main' into realTimeVisulization

app/src/components/ui/ModuleToggle.tsx

@@ -6,15 +6,20 @@ import {
   SimulationIcon,
   VisualizationIcon,
 } from "../icons/ExportModuleIcons";
+import useToggleStore from "../../store/useUIToggleStore";
 
 const ModuleToggle: React.FC = () => {
   const { activeModule, setActiveModule } = useModuleStore();
+  const { setToggleUI } = useToggleStore();
 
   return (
     <div className="module-toggle-container">
       <div
         className={`module-list ${activeModule === "builder" && "active"}`}
-        onClick={() => setActiveModule("builder")}
+        onClick={() => {
+          setActiveModule("builder");
+          setToggleUI(true);
+        }}
       >
         <div className="icon">
           <BuilderIcon isActive={activeModule === "builder"} />
@@ -23,7 +28,10 @@ const ModuleToggle: React.FC = () => {
       </div>
       <div
         className={`module-list ${activeModule === "simulation" && "active"}`}
-        onClick={() => setActiveModule("simulation")}
+        onClick={() => {
+          setActiveModule("simulation");
+          setToggleUI(true);
+        }}
       >
         <div className="icon">
           <SimulationIcon isActive={activeModule === "simulation"} />
@@ -34,7 +42,10 @@ const ModuleToggle: React.FC = () => {
         className={`module-list ${
           activeModule === "visualization" && "active"
         }`}
-        onClick={() => setActiveModule("visualization")}
+        onClick={() => {
+          setActiveModule("visualization");
+          setToggleUI(true);
+        }}
       >
         <div className="icon">
           <VisualizationIcon isActive={activeModule === "visualization"} />
@@ -42,10 +53,11 @@ const ModuleToggle: React.FC = () => {
         <div className="module">Visualization</div>
       </div>
       <div
-        className={`module-list ${
-          activeModule === "market" && "active"
-        }`}
-        onClick={() => setActiveModule("market")}
+        className={`module-list ${activeModule === "market" && "active"}`}
+        onClick={() => {
+          setActiveModule("market");
+          setToggleUI(false);
+        }}
       >
         <div className="icon">
           <CartIcon isActive={activeModule === "market"} />

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -5,6 +5,7 @@ import AddButtons from "./AddButtons";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
+import useModuleStore from "../../../store/useModuleStore";
 import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
 
 
@@ -38,6 +39,8 @@ const RealTimeVisulization: React.FC = () => {
   const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
   const containerRef = useRef<HTMLDivElement>(null);
   const { isPlaying } = usePlayButtonStore();
+  const { activeModule } = useModuleStore();
+
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
 
@@ -98,34 +101,44 @@ const RealTimeVisulization: React.FC = () => {
       id="real-time-vis-canvas"
       className={`realTime-viz canvas ${!isPlaying ? "playActiveFalse" : ""}`}
       style={{
-        height: isPlaying ? "100vh" : "",
-        left: isPlaying ? "0%" : "",
+        height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
+        width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
+        left: isPlaying || activeModule !== "visualization" ? "0%" : "",
       }}
     >
       <div
         className="scene-container"
-        style={{ height: "100%", width: "100%" }}
+        style={{
+          height: "100%",
+          width: "100%",
+          borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
+        }}
       >
         <Scene />
       </div>
-      {!isPlaying && (
-        <AddButtons
-          hiddenPanels={hiddenPanels}
-          setHiddenPanels={setHiddenPanels}
-          selectedZone={selectedZone}
-          setSelectedZone={setSelectedZone}
-        />
+      {activeModule === "visualization" && (
+        <>
+          <DisplayZone
+            zonesData={zonesData}
+            selectedZone={selectedZone}
+            setSelectedZone={setSelectedZone}
+          />
+
+          {!isPlaying && (
+            <AddButtons
+              hiddenPanels={hiddenPanels}
+              setHiddenPanels={setHiddenPanels}
+              selectedZone={selectedZone}
+              setSelectedZone={setSelectedZone}
+            />
+          )}
+
+          <Panel
+            selectedZone={selectedZone}
+            setSelectedZone={setSelectedZone}
+          />
+        </>
       )}
-      <DisplayZone
-        zonesData={zonesData}
-        selectedZone={selectedZone}
-        setSelectedZone={setSelectedZone}
-      />
-      <Panel
-        selectedZone={selectedZone}
-        hiddenPanels={hiddenPanels}
-        setSelectedZone={setSelectedZone}
-      />{" "}
     </div>
   );
 };