Refactor RealTimeVisualization component and handle widget drop functionality

- Commented out the handleDrop function in RealTimeVisualization.tsx and moved its logic to a new utility function createHandleDrop for better separation of concerns. - Updated Project.tsx to utilize the new createHandleDrop function, improving readability and maintainability. - Enhanced styling for the scene container and real-time visualization components to improve layout and responsiveness. - Removed unnecessary styles and consolidated button and input styles for consistency. - Cleaned up unused imports and variables in various files to streamline the codebase.
2025-05-02 17:39:11 +05:30 · 2025-05-02 17:39:11 +05:30 · 44e3f5c207
parent db162c9ffa
commit 44e3f5c207
15 changed files with 1031 additions and 898 deletions
--- a/app/src/components/icons/SimulationIcons.tsx
+++ b/app/src/components/icons/SimulationIcons.tsx
@ -125,21 +125,21 @@ export function ResetIcon() {
    >
      <path
        d="M2.54182 4.09637C3.33333 2.73422 4.80832 1.81836 6.49721 1.81836C9.02194 1.81836 11.0686 3.86506 11.0686 6.38979C11.0686 8.91452 9.02194 10.9612 6.49721 10.9612C3.97248 10.9612 1.92578 8.91452 1.92578 6.38979"
-        stroke="var(--icon-default-color-active)"
+        stroke="var(--text-color)"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M7.64118 6.38895C7.64118 7.02013 7.12951 7.53181 6.49833 7.53181C5.86714 7.53181 5.35547 7.02013 5.35547 6.38895C5.35547 5.75777 5.86714 5.24609 6.49833 5.24609C7.12951 5.24609 7.64118 5.75777 7.64118 6.38895Z"
-        fill="var(--icon-default-color-active)"
-        stroke="var(--icon-default-color-active)"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
        strokeWidth="0.571429"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M4.78125 4.10407H2.49554V1.81836"
-        stroke="var(--icon-default-color-active)"
+        stroke="var(--text-color)"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
@ -158,7 +158,7 @@ export function PlayStopIcon() {
    >
      <path
        d="M8 2.88867V9.88867M11 2.88867V9.88867M2 3.99171V8.78562C2 9.28847 2 9.53987 2.09943 9.65627C2.1857 9.75732 2.31512 9.81092 2.44756 9.80047C2.60019 9.78847 2.77796 9.61072 3.13352 9.25517L5.5305 6.85817C5.69485 6.69382 5.777 6.61167 5.8078 6.51692C5.83485 6.43357 5.83485 6.34377 5.8078 6.26042C5.777 6.16567 5.69485 6.08352 5.5305 5.91917L3.13352 3.52219C2.77796 3.16664 2.60019 2.98886 2.44756 2.97685C2.31512 2.96643 2.1857 3.02004 2.09943 3.12105C2 3.23747 2 3.48888 2 3.99171Z"
-        stroke="var(--icon-default-color-active)"
+        stroke="var(--text-color)"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
@ -177,7 +177,7 @@ export function ExitIcon() {
    >
      <path
        d="M2.08203 6.34311L5.03647 3.38867M2.08203 6.34311L5.03647 9.29755M2.08203 6.34311H5.9228C7.22276 6.34334 9.34995 7.05241 10.7681 9.88867"
-        stroke="var(--icon-default-color-active)"
+        stroke="var(--text-color)"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@ -36,7 +36,6 @@ import {
 import useToggleStore from "../../store/useUIToggleStore";
 import {
  use3DWidget,
-  useDroppedObjectsStore,
  useFloatingWidget,
 } from "../../store/visualization/useDroppedObjectsStore";

@ -57,20 +56,18 @@ const Tools: React.FC = () => {

  const { widgets3D } = use3DWidget();

-  const zones = useDroppedObjectsStore((state) => state.zones);
-
  // wall options
  const { toggleView, setToggleView } = useToggleView();
  const { setDeleteTool } = useDeleteTool();
  const { setAddAction } = useAddAction();
  const { setSelectedWallItem } = useSelectedWallItem();

-  const { transformMode, setTransformMode } = useTransformMode();
-  const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
-  const { movePoint, setMovePoint } = useMovePoint();
-  const { toolMode, setToolMode } = useToolMode();
+  const { setTransformMode } = useTransformMode();
+  const { setDeletePointOrLine } = useDeletePointOrLine();
+  const { setMovePoint } = useMovePoint();
+  const { setToolMode } = useToolMode();
  const { activeTool, setActiveTool } = useActiveTool();
-  const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
+  const { setRefTextUpdate } = useRefTextUpdate();

  // Reset activeTool whenever activeModule changes
  useEffect(() => {
@ -209,7 +206,6 @@ const Tools: React.FC = () => {
  return (
    <>
      {!isPlaying ? (
-        <>
        <div className="tools-container">
          <div className="drop-down-icons">
            <div className="activeDropicon">
@ -464,13 +460,12 @@ const Tools: React.FC = () => {
            </>
          )}
        </div>
-        </>
      ) : (
        <>
          {activeModule !== "simulation" && (
-            <div className="exitPlay" onClick={() => setIsPlaying(false)}>
+            <button className="exitPlay" onClick={() => setIsPlaying(false)}>
              X
-            </div>
+            </button>
          )}
        </>
      )}
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@ -19,6 +19,9 @@ import {
 } from "../../icons/ExportCommonIcons";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 import { useSubModuleStore } from "../../../store/useModuleStore";
+import ProductionCapacity from "../analysis/ProductionCapacity";
+import ThroughputSummary from "../analysis/ThroughputSummary";
+import ROISummary from "../analysis/ROISummary";

 const SimulationPlayer: React.FC = () => {
  const MAX_SPEED = 8; // Maximum speed
@ -162,6 +165,7 @@ const SimulationPlayer: React.FC = () => {
  };

  return (
+    <>
      <div className="simulation-player-wrapper">
        <div className={`simulation-player-container ${expand ? "open" : ""}`}>
          <div className="controls-container">
@ -206,7 +210,10 @@ const SimulationPlayer: React.FC = () => {
                    <div className="label">Monthly ROI</div>
                  </div>
                  <div className="progress-wrapper">
-                  <div className="progress" style={{ width: monthlyROI }}></div>
+                    <div
+                      className="progress"
+                      style={{ width: monthlyROI }}
+                    ></div>
                  </div>{" "}
                </div>
              </div>
@ -380,6 +387,14 @@ const SimulationPlayer: React.FC = () => {
          )}
        </div>
      </div>
+      <div className="analysis">
+        <div className="analysis-wrapper">
+          <ProductionCapacity />
+          <ThroughputSummary />
+        </div>
+        <ROISummary />
+      </div>
+    </>
  );
 };

--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@ -143,109 +143,109 @@ const RealTimeVisulization: React.FC = () => {
    });
  }, [selectedZone]);

-  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    try {
-      const email = localStorage.getItem("email") ?? "";
-      const organization = email?.split("@")[1]?.split(".")[0];
+  // const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
+  //   event.preventDefault();
+  //   try {
+  //     const email = localStorage.getItem("email") ?? "";
+  //     const organization = email?.split("@")[1]?.split(".")[0];

-      const data = event.dataTransfer.getData("text/plain");
-      if (widgetSubOption === "3D") return;
-      if (!data || selectedZone.zoneName === "") return;
+  //     const data = event.dataTransfer.getData("text/plain");
+  //     if (widgetSubOption === "3D") return;
+  //     if (!data || selectedZone.zoneName === "") return;

-      const droppedData = JSON.parse(data);
-      const canvasElement = document.getElementById("real-time-vis-canvas");
-      if (!canvasElement) throw new Error("Canvas element not found");
+  //     const droppedData = JSON.parse(data);
+  //     const canvasElement = document.getElementById("real-time-vis-canvas");
+  //     if (!canvasElement) throw new Error("Canvas element not found");

-      const rect = canvasElement.getBoundingClientRect();
-      const relativeX = event.clientX - rect.left;
-      const relativeY = event.clientY - rect.top;
+  //     const rect = canvasElement.getBoundingClientRect();
+  //     const relativeX = event.clientX - rect.left;
+  //     const relativeY = event.clientY - rect.top;

-      // Widget dimensions
-      const widgetWidth = droppedData.width ?? 125;
-      const widgetHeight = droppedData.height ?? 100;
+  //     // Widget dimensions
+  //     const widgetWidth = droppedData.width ?? 125;
+  //     const widgetHeight = droppedData.height ?? 100;

-      // Center the widget at cursor
-      const centerOffsetX = widgetWidth / 2;
-      const centerOffsetY = widgetHeight / 2;
+  //     // Center the widget at cursor
+  //     const centerOffsetX = widgetWidth / 2;
+  //     const centerOffsetY = widgetHeight / 2;

-      const adjustedX = relativeX - centerOffsetX;
-      const adjustedY = relativeY - centerOffsetY;
+  //     const adjustedX = relativeX - centerOffsetX;
+  //     const adjustedY = relativeY - centerOffsetY;

-      const finalPosition = determinePosition(rect, adjustedX, adjustedY);
-      const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
+  //     const finalPosition = determinePosition(rect, adjustedX, adjustedY);
+  //     const [activeProp1, activeProp2] = getActiveProperties(finalPosition);

-      let finalY = 0;
-      let finalX = 0;
+  //     let finalY = 0;
+  //     let finalX = 0;

-      if (activeProp1 === "top") {
-        finalY = adjustedY;
-      } else {
-        finalY = rect.height - (adjustedY + widgetHeight);
-      }
+  //     if (activeProp1 === "top") {
+  //       finalY = adjustedY;
+  //     } else {
+  //       finalY = rect.height - (adjustedY + widgetHeight);
+  //     }

-      if (activeProp2 === "left") {
-        finalX = adjustedX;
-      } else {
-        finalX = rect.width - (adjustedX + widgetWidth);
-      }
+  //     if (activeProp2 === "left") {
+  //       finalX = adjustedX;
+  //     } else {
+  //       finalX = rect.width - (adjustedX + widgetWidth);
+  //     }

-      // Clamp to boundaries
-      finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
-      finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));
+  //     // Clamp to boundaries
+  //     finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
+  //     finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));

-      const boundedPosition = {
-        ...finalPosition,
-        [activeProp1]: finalY,
-        [activeProp2]: finalX,
-        [activeProp1 === "top" ? "bottom" : "top"]: "auto",
-        [activeProp2 === "left" ? "right" : "left"]: "auto",
-      };
+  //     const boundedPosition = {
+  //       ...finalPosition,
+  //       [activeProp1]: finalY,
+  //       [activeProp2]: finalX,
+  //       [activeProp1 === "top" ? "bottom" : "top"]: "auto",
+  //       [activeProp2 === "left" ? "right" : "left"]: "auto",
+  //     };

-      const newObject = {
-        ...droppedData,
-        id: generateUniqueId(),
-        position: boundedPosition,
-      };
+  //     const newObject = {
+  //       ...droppedData,
+  //       id: generateUniqueId(),
+  //       position: boundedPosition,
+  //     };

-      const existingZone =
-        useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
-      if (!existingZone) {
-        useDroppedObjectsStore
-          .getState()
-          .setZone(selectedZone.zoneName, selectedZone.zoneId);
-      }
+  //     const existingZone =
+  //       useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
+  //     if (!existingZone) {
+  //       useDroppedObjectsStore
+  //         .getState()
+  //         .setZone(selectedZone.zoneName, selectedZone.zoneId);
+  //     }

-      const addFloatingWidget = {
-        organization,
-        widget: newObject,
-        zoneId: selectedZone.zoneId,
-      };
+  //     const addFloatingWidget = {
+  //       organization,
+  //       widget: newObject,
+  //       zoneId: selectedZone.zoneId,
+  //     };

-      if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
-      }
+  //     if (visualizationSocket) {
+  //       visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
+  //     }

-      useDroppedObjectsStore
-        .getState()
-        .addObject(selectedZone.zoneName, newObject);
+  //     useDroppedObjectsStore
+  //       .getState()
+  //       .addObject(selectedZone.zoneName, newObject);

-      const droppedObjectsStore = useDroppedObjectsStore.getState();
-      const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
+  //     const droppedObjectsStore = useDroppedObjectsStore.getState();
+  //     const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];

-      if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
-        console.log(
-          `Objects for Zone ${selectedZone.zoneId}:`,
-          currentZone.objects
-        );
-        setFloatingWidget(currentZone.objects);
-      } else {
-        console.warn("Zone not found or zoneId mismatch");
-      }
-    } catch (error) {
-      console.error("Error in handleDrop:", error);
-    }
-  };
+  //     if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
+  //       console.log(
+  //         `Objects for Zone ${selectedZone.zoneId}:`,
+  //         currentZone.objects
+  //       );
+  //       setFloatingWidget(currentZone.objects);
+  //     } else {
+  //       console.warn("Zone not found or zoneId mismatch");
+  //     }
+  //   } catch (error) {
+  //     console.error("Error in handleDrop:", error);
+  //   }
+  // };

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
@ -302,16 +302,7 @@ const RealTimeVisulization: React.FC = () => {
    }
  `}
      </style>
-      <div
-        ref={containerRef}
-        id="real-time-vis-canvas"
-        className={`realTime-viz canvas ${isPlaying ? "playingFlase" : ""}`}
-        style={{
-          height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
-          width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
-          left: isPlaying || activeModule !== "visualization" ? "0%" : "",
-        }}
-      >
+      <div ref={containerRef} className="realTime-viz">
        <div className="realTime-viz-wrapper">
          {openConfirmationPopup && (
            <RenderOverlay>
@ -322,20 +313,6 @@ const RealTimeVisulization: React.FC = () => {
              />
            </RenderOverlay>
          )}
-          <div
-            className="scene-container"
-            style={{
-              height: "100%",
-              width: "100%",
-              borderRadius:
-                isPlaying || activeModule !== "visualization" ? "" : "6px",
-            }}
-            role="application"
-            onDrop={(event) => handleDrop(event)}
-            onDragOver={(event) => event.preventDefault()}
-          >
-            <Scene />
-          </div>
          {activeModule === "visualization" && selectedZone.zoneName !== "" && (
            <DroppedObjects />
          )}
--- a/app/src/modules/visualization/functions/handleUiDrop.ts
+++ b/app/src/modules/visualization/functions/handleUiDrop.ts
@ -0,0 +1,122 @@
+import { generateUniqueId } from "../../../functions/generateUniqueId";
+import { useDroppedObjectsStore } from "../../../store/visualization/useDroppedObjectsStore";
+import { determinePosition } from "./determinePosition";
+import { getActiveProperties } from "./getActiveProperties";
+
+interface HandleDropProps {
+    widgetSubOption: any;
+    visualizationSocket: any;
+    selectedZone: any;
+    setFloatingWidget: (value: any) => void;
+    event: React.DragEvent<HTMLDivElement>
+}
+
+export const createHandleDrop = ({
+    widgetSubOption,
+    visualizationSocket,
+    selectedZone,
+    setFloatingWidget,
+    event,
+}: HandleDropProps) => {
+    event.preventDefault();
+    try {
+        const email = localStorage.getItem("email") ?? "";
+        const organization = email?.split("@")[1]?.split(".")[0];
+
+        const data = event.dataTransfer.getData("text/plain");
+        if (widgetSubOption === "3D") return;
+        if (!data || selectedZone.zoneName === "") return;
+
+        const droppedData = JSON.parse(data);
+        const canvasElement = document.getElementById("real-time-vis-canvas");
+        if (!canvasElement) throw new Error("Canvas element not found");
+
+        const rect = canvasElement.getBoundingClientRect();
+        const relativeX = event.clientX - rect.left;
+        const relativeY = event.clientY - rect.top;
+
+        // Widget dimensions
+        const widgetWidth = droppedData.width ?? 125;
+        const widgetHeight = droppedData.height ?? 100;
+
+        // Center the widget at cursor
+        const centerOffsetX = widgetWidth / 2;
+        const centerOffsetY = widgetHeight / 2;
+
+        const adjustedX = relativeX - centerOffsetX;
+        const adjustedY = relativeY - centerOffsetY;
+
+        const finalPosition = determinePosition(rect, adjustedX, adjustedY);
+        const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
+
+        let finalY = 0;
+        let finalX = 0;
+
+        if (activeProp1 === "top") {
+            finalY = adjustedY;
+        } else {
+            finalY = rect.height - (adjustedY + widgetHeight);
+        }
+
+        if (activeProp2 === "left") {
+            finalX = adjustedX;
+        } else {
+            finalX = rect.width - (adjustedX + widgetWidth);
+        }
+
+        // Clamp to boundaries
+        finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
+        finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));
+
+        const boundedPosition = {
+            ...finalPosition,
+            [activeProp1]: finalY,
+            [activeProp2]: finalX,
+            [activeProp1 === "top" ? "bottom" : "top"]: "auto",
+            [activeProp2 === "left" ? "right" : "left"]: "auto",
+        };
+
+        const newObject = {
+            ...droppedData,
+            id: generateUniqueId(),
+            position: boundedPosition,
+        };
+
+        const existingZone =
+            useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
+        if (!existingZone) {
+            useDroppedObjectsStore
+                .getState()
+                .setZone(selectedZone.zoneName, selectedZone.zoneId);
+        }
+
+        const addFloatingWidget = {
+            organization,
+            widget: newObject,
+            zoneId: selectedZone.zoneId,
+        };
+
+        if (visualizationSocket) {
+            visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
+        }
+
+        useDroppedObjectsStore
+            .getState()
+            .addObject(selectedZone.zoneName, newObject);
+
+        const droppedObjectsStore = useDroppedObjectsStore.getState();
+        const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
+
+        if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
+            console.log(
+                `Objects for Zone ${selectedZone.zoneId}:`,
+                currentZone.objects
+            );
+            setFloatingWidget(currentZone.objects);
+        } else {
+            console.warn("Zone not found or zoneId mismatch");
+        }
+    } catch (error) {
+        console.error("Error in handleDrop:", error);
+    }
+};
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@ -13,6 +13,7 @@ import {
  useWallItems,
  useZones,
  useLoadingProgress,
+  useWidgetSubOption,
 } from "../store/store";
 import { useNavigate } from "react-router-dom";
 import { usePlayButtonStore } from "../store/usePlayButtonStore";
@ -22,9 +23,10 @@ import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
 import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
 import { useSelectedUserStore } from "../store/useCollabStore";
 import FollowPerson from "../components/templates/FollowPerson";
-import ProductionCapacity from "../components/ui/analysis/ProductionCapacity";
-import ThroughputSummary from "../components/ui/analysis/ThroughputSummary";
-import ROISummary from "../components/ui/analysis/ROISummary";
+import Scene from "../modules/scene/scene";
+import { createHandleDrop } from "../modules/visualization/functions/handleUiDrop";
+import { useSelectedZoneStore } from "../store/visualization/useZoneStore";
+import { useFloatingWidget } from "../store/visualization/useDroppedObjectsStore";

 const Project: React.FC = () => {
  let navigate = useNavigate();
@ -53,21 +55,28 @@ const Project: React.FC = () => {
    } else {
      navigate("/");
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

-  const { isPlaying } = usePlayButtonStore();
+  // global store
  const { toggleThreeD } = useThreeDStore();
+
+  // simulation store
+  const { isPlaying } = usePlayButtonStore();
+
+  // collaboration store
  const { selectedUser } = useSelectedUserStore();

+  // real-time visualization store
+  const { widgetSubOption } = useWidgetSubOption();
+  const { visualizationSocket } = useSocketStore();
+  const { selectedZone } = useSelectedZoneStore();
+  const { setFloatingWidget } = useFloatingWidget();
+
  return (
    <div className="project-main">
-      {/* <div className="analysis">
-        <div className="analysis-wrapper">
-          <ProductionCapacity />
-          <ThroughputSummary />
-        </div>
-        <ROISummary />
-      </div> */}
+      {!selectedUser && (
+        <>
          <KeyPressListener />
          {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
          {!isPlaying && (
@ -77,14 +86,36 @@ const Project: React.FC = () => {
              <SideBarRight />
            </>
          )}
-      {/* <RenderOverlay>
-        <MenuBar setOpenMenu={setOpenMenu} />
-      </RenderOverlay> */}
-      {activeModule === "market" && <MarketPlace />}
          <RealTimeVisulization />
+          {activeModule === "market" && <MarketPlace />}
          {activeModule !== "market" && <Tools />}
          {isPlaying && activeModule === "simulation" && <SimulationPlayer />}
-      {/* {<SimulationPlayer />} */}
+        </>
+      )}
+      <div
+        className="scene-container"
+        id="real-time-vis-canvas"
+        style={{
+          height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
+          width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
+          left: isPlaying || activeModule !== "visualization" ? "0%" : "",
+          borderRadius:
+            isPlaying || activeModule !== "visualization" ? "" : "6px",
+        }}
+        role="application"
+        onDrop={(event) =>
+          createHandleDrop({
+            widgetSubOption,
+            visualizationSocket,
+            selectedZone,
+            setFloatingWidget,
+            event,
+          })
+        }
+        onDragOver={(event) => event.preventDefault()}
+      >
+        <Scene />
+      </div>
      {selectedUser && <FollowPerson />}
    </div>
  );
--- a/app/src/store/visualization/useDroppedObjectsStore.ts
+++ b/app/src/store/visualization/useDroppedObjectsStore.ts
@ -1,5 +1,4 @@
 import { create } from "zustand";
-import { addingFloatingWidgets } from "../../services/visulization/zone/addFloatingWidgets";
 import { useSocketStore } from "../store";
 import useChartStore from "./useChartStore";

--- a/app/src/styles/base/global.scss
+++ b/app/src/styles/base/global.scss
@ -1,7 +1,8 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;

-section, .section{
+section,
+.section {
  padding: 4px;
  outline: 1px solid var(--border-color);
  outline-offset: -1px;
@ -9,3 +10,20 @@ section, .section{
  background: var(--background-color);
  margin: 4px 0;
 }
+
+.scene-container {
+  width: calc(100% - (320px + 270px + 90px));
+  height: calc(100% - (250px));
+  position: absolute;
+  top: 50%;
+  left: calc(270px + 45px);
+  overflow: hidden;
+  z-index: 1;
+  transform: translate(0, -50%);
+  transition: all 0.2s;
+  box-shadow: $box-shadow-medium;
+  canvas {
+    outline: none;
+    border: none;
+  }
+}
--- a/app/src/styles/base/reset.scss
+++ b/app/src/styles/base/reset.scss
@ -12,10 +12,3 @@ input[type="password"]::-webkit-clear-button, /* For Chrome/Safari clear button
 input[type="password"]::-webkit-inner-spin-button {  /* Just in case */
  display: none;
 }
-
-button{
-  border: none;
-  outline: none;
-  background: none;
-  cursor: pointer;
-}
--- a/app/src/styles/components/analysis/ROISummary.scss
+++ b/app/src/styles/components/analysis/ROISummary.scss
@ -1,3 +1,6 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins" as *;
+
 .roiSummary-container {
    .roiSummary-wrapper {
        background-color: var(--background-color);
@ -64,7 +67,7 @@
                    width: 100%;
                    border-radius: 6px;
                    border: 1px solid #00FF56;
-                    background: #436D51;
+                    background: #17eb5d65;
                    display: flex;
                    flex-direction: column;
                    padding: 4px 6px;
@ -223,12 +226,11 @@
            background: none;

            .btn {
-                background-color: var(--accent-color);
-                color: var(--background-color);
-                padding: 4px 6px;
-                border-radius: 5px;
+                color: var(--text-button-color);
+                background: var(--background-color-button);
+                padding: 4px 12px;
+                border-radius: #{$border-radius-large};
                display: inline-block;
-                font-size: 14px;
                text-align: center;
            }
        }
@ -244,7 +246,6 @@
            height: 250px;
            border-radius: 50%;
            position: relative;
-            transition: background 0.5s ease;
        }
        .progress-cover {
            position: absolute;
@ -252,7 +253,6 @@
            height: 75%;
            top: 12.5%;
            left: 12.5%;
-            background: #000000cc;
            border-radius: 50%;
        }
    }
--- a/app/src/styles/components/analysis/analysis.scss
+++ b/app/src/styles/components/analysis/analysis.scss
@ -7,29 +7,30 @@
  align-items: start;
  width: 100%;
  height: 100vh;
-    // pointer-events: none;
-    z-index: 10000;
+  pointer-events: none;
+  padding: 10px;
+  z-index: 2;

  .analysis-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
-}
-
  .analysis-card {
    min-width: 333px;
    background: var(--background-color);
    border-radius: 20px;
-
    padding: 8px;
+    backdrop-filter: blur(10px);
+    outline: 1px solid var(--border-color);
+    outline-offset: -1px;
+    pointer-events: all;

    .analysis-card-wrapper {
      width: 100%;
      background: var(--background-color);
      border-radius: 14px;
      padding: 16px;
-
      display: flex;
      flex-direction: column;
      gap: 14px;
@ -67,19 +68,18 @@

        .progress-bar {
          position: relative;
-                // width: 36px;
          width: 100%;
          height: 4px;
          border-radius: 13px;
          overflow: hidden;
-                background: #FBEBD7;
+          background: #fbebd7;

          .bar-fill {
            position: absolute;
            height: 100%;
            top: 0;
            left: 0;
-                    background: #FC9D2F;
+            background: #fc9d2f;
            border-radius: 13px;
          }

@ -114,10 +114,6 @@
        }
      }
    }
-}
-
-
-.throughoutSummary {
    .throughoutSummary-wrapper {
      .process-container {
        display: flex;
@ -209,15 +205,15 @@
                height: 5px;

                &:nth-child(1) {
-                                background: #F3C64D;
+                  background: #f3c64d;
                }

                &:nth-child(2) {
-                                background: #67B3F4;
+                  background: #67b3f4;
                }

                &:nth-child(3) {
-                                background: #7981F5;
+                  background: #7981f5;
                }
              }
            }
@ -236,22 +232,19 @@
                /* Align items vertically */
                &:nth-child(1) {
                  .indicator {
-
-                                    background: #F3C64D;
+                    background: #f3c64d;
                  }
                }

                &:nth-child(2) {
                  .indicator {
-
-                                    background: #67B3F4;
+                    background: #67b3f4;
                  }
                }

                &:nth-child(3) {
                  .indicator {
-
-                                    background: #7981F5;
+                    background: #7981f5;
                  }
                }

@ -265,15 +258,12 @@
                  width: 5px;
                  height: 5px;
                  border-radius: 50%;
-
                }
              }
            }
          }
        }
-
-        }
-
-
+      }
+    }
  }
 }
--- a/app/src/styles/components/button.scss
+++ b/app/src/styles/components/button.scss
@ -0,0 +1,24 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.labeled-button-container {
+  @include flex-space-between;
+  padding: 6px 12px;
+
+  button {
+    padding: 2px 32px;
+    border: none;
+    border-radius: #{$border-radius-large};
+    color: var(--text-button-color);
+    background: var(--background-color-button);
+    transition: all 0.2s;
+    cursor: pointer;
+  }
+}
+
+button {
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+}
--- a/app/src/styles/components/input.scss
+++ b/app/src/styles/components/input.scss
@ -639,21 +639,6 @@ input[type="number"] {
  }
 }

-.labeled-button-container {
-  @include flex-space-between;
-  padding: 6px 12px;
-
-  button {
-    padding: 2px 32px;
-    border: none;
-    border-radius: #{$border-radius-large};
-    color: var(--text-button-color);
-    background: var(--background-color-button);
-    transition: all 0.2s;
-    cursor: pointer;
-  }
-}
-
 .value-field-container {
  margin-bottom: 6px;
  padding: 6px 12px;
--- a/app/src/styles/components/tools.scss
+++ b/app/src/styles/components/tools.scss
@ -15,7 +15,7 @@
  transition: width 0.2s;
  background: var(--background-color);
  backdrop-filter: blur(8px);
-  z-index: #{$z-index-default};
+  z-index: 2;
  outline: 1px solid var(--border-color);
  outline-offset: -1px;

--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@ -3,8 +3,6 @@

 // Main Container
 .realTime-viz {
-  background: #131313;
-  box-shadow: $box-shadow-medium;
  width: calc(100% - (320px + 270px + 90px));
  height: calc(100% - (250px));
  position: absolute;
@ -12,8 +10,8 @@
  left: calc(270px + 45px);
  transform: translate(0, -50%);
  border-radius: #{$border-radius-medium};
-  transition: all 0.2s;
-  z-index: #{$z-index-default};
+  z-index: 2;
+  pointer-events: none;

  .realTime-viz-wrapper {
    width: 100%;
@ -39,10 +37,6 @@
    z-index: 1;
  }

-  .scene-container {
-    overflow: hidden;
-  }
-
  .icon {
    display: flex;
    align-items: center;
@ -74,6 +68,8 @@
    z-index: 3;
    transform: translate(-50%, -10%);
    transition: transform 0.5s linear;
+    pointer-events: all;
+
    &::-webkit-scrollbar {
      display: none;
    }
@ -367,6 +363,7 @@
  border-radius: 2px;
  transition: transform 0.3s ease;
  box-shadow: #{$box-shadow-medium};
+  pointer-events: all;

  svg {
    stroke: var(--icon-default-color) !important;
@ -428,8 +425,6 @@
        stroke: #f65648;
        stroke-width: 1.3;
      }
-
-
    }
  }

@ -778,17 +773,10 @@
  }
 }

-
-
-
 .panel-content {
  background: var(--background-color);
-
 }

-
-
-
 /* RIGHT */
 .panel-content.right-opening {
  animation: rightExpand 0.5s ease-in-out forwards;
@ -913,9 +901,6 @@
  }
 }

-
-
-
 // Add button

 .extra-Bs-addopening {
@ -926,7 +911,6 @@
  animation: slideUp 0.3s ease forwards;
 }

-
@keyframes slideDown {
  from {
    opacity: 0;