Merge remote-tracking branch 'origin/simulation' into realTimeVisulization

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

@@ -15,7 +15,6 @@ interface DisplayZoneProps {
     [key: string]: {
       activeSides: Side[];
       panelOrder: Side[];
-
       lockedPanels: Side[];
       widgets: Widget[];
       zoneId: string;
@@ -27,7 +26,6 @@ interface DisplayZoneProps {
     zoneName: string;
     activeSides: Side[];
     panelOrder: Side[];
-
     lockedPanels: Side[];
     zoneId: string;
     zoneViewPortTarget: number[];
@@ -45,7 +43,6 @@ interface DisplayZoneProps {
       zoneName: string;
       activeSides: Side[];
       panelOrder: Side[];
-
       lockedPanels: Side[];
       zoneId: string;
       zoneViewPortTarget: number[];
@@ -66,9 +63,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   selectedZone,
   setSelectedZone,
 }) => {
-
-  // Ref for the container element
+  // Refs
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
   // State to track overflow visibility
   const [showLeftArrow, setShowLeftArrow] = useState(false);
@@ -78,8 +75,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
 
   // Function to calculate overflow state
   const updateOverflowState = useCallback(() => {
-    const container = containerRef.current;
-
+    const container = scrollContainerRef.current;
     if (container) {
       const isOverflowing = container.scrollWidth > container.clientWidth;
       const canScrollLeft = container.scrollLeft > 0;
@@ -92,59 +88,56 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   }, []);
 
   useEffect(() => {
-    const container = containerRef.current;
+    const container = scrollContainerRef.current;
+    if (!container) return;
 
-    if (container) {
-      // Initial calculation after the DOM has been rendered
-      const handleInitialRender = () => {
-        requestAnimationFrame(updateOverflowState);
-      };
+    // Initial calculation after the DOM has been rendered
+    const observer = new ResizeObserver(updateOverflowState);
+    observer.observe(container);
 
-      handleInitialRender();
+    // Update on scroll
+    const handleScroll = () => updateOverflowState();
+    container.addEventListener("scroll", handleScroll);
 
-      // Update on window resize or scroll
-      const handleResize = () => updateOverflowState();
-      const handleScroll = () => updateOverflowState();
+    // Add mouse wheel listener for horizontal scrolling
+    const handleWheel = (event: WheelEvent) => {
+      if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+        event.preventDefault();
+        container.scrollBy({
+          left: event.deltaY * 2,
+          behavior: "smooth",
+        });
+      }
+    };
 
-      // Add mouse wheel listener for horizontal scrolling
-      const handleWheel = (event: WheelEvent) => {
-        event.preventDefault(); // Prevent default vertical scrolling
-        if (container) {
-          container.scrollBy({
-            left: event.deltaY * 2, // Translate vertical scroll to horizontal scroll
-            behavior: "smooth",
-          });
-        }
-      };
+    container.addEventListener("wheel", handleWheel, { passive: false });
 
-      container.addEventListener("scroll", handleScroll);
-      window.addEventListener("resize", handleResize);
-      container.addEventListener("wheel", handleWheel, { passive: false });
+    // Initial check
+    updateOverflowState();
 
-      return () => {
-        container.removeEventListener("scroll", handleScroll);
-        window.removeEventListener("resize", handleResize);
-        container.removeEventListener("wheel", handleWheel);
-      };
-    }
+    return () => {
+      observer.disconnect();
+      container.removeEventListener("scroll", handleScroll);
+      container.removeEventListener("wheel", handleWheel);
+    };
   }, [updateOverflowState]);
 
   // Handle scrolling with navigation arrows
   const handleScrollLeft = () => {
-    const container = containerRef.current;
+    const container = scrollContainerRef.current;
     if (container) {
       container.scrollBy({
-        left: -200, // Scroll left by 200px
+        left: -200,
         behavior: "smooth",
       });
     }
   };
 
   const handleScrollRight = () => {
-    const container = containerRef.current;
+    const container = scrollContainerRef.current;
     if (container) {
       container.scrollBy({
-        left: 200, // Scroll right by 200px
+        left: 200,
         behavior: "smooth",
       });
     }
@@ -158,19 +151,18 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       setSelectedChartId(null)
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-      // Fetch data from backend
       let response = await getSelect2dZoneData(zoneId, organization);
       console.log('response: ', response);
       let res = await getFloatingZoneData(zoneId, organization);
-      setFloatingWidget(res)
-      // Set the selected zone in the store
+      setFloatingWidget(res);
+      
       useDroppedObjectsStore.getState().setZone(zoneName, zoneId);
       if (Array.isArray(res)) {
         res.forEach((val) => {
           useDroppedObjectsStore.getState().addObject(zoneName, val);
         });
       }
-      // Update selected zone state
+      
       setSelectedZone({
         zoneName,
         activeSides: response.activeSides || [],
@@ -182,17 +174,14 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
         zoneViewPortPosition: response.viewPortposition || {},
       });
     } catch (error) {
-
-
+      console.error(error);
     }
   }
 
-
   return (
     <div
       ref={containerRef}
-      className={`zone-wrapper ${selectedZone?.activeSides?.includes("bottom") && "bottom"
-        }`}
+      className={`zone-wrapper ${selectedZone?.activeSides?.includes("bottom") ? "bottom" : ""}`}
     >
       {/* Left Arrow */}
       {showLeftArrow && (
@@ -201,28 +190,31 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
         </button>
       )}
 
-      {/* Zones Wrapper */}
-      {Object.keys(zonesData).length !== 0 ? (
-        <div ref={containerRef} className="zones-wrapper">
-          {Object.keys(zonesData).map((zoneName, index) => (
-            <div
-              key={index}
-              className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
-                }`}
-              onClick={() => {
-                handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)
-              }}
-            >
-              {zoneName}
-            </div>
-          ))}
-        </div>
-      ) : (
-        <div className="no-zone">
-          <InfoIcon />
-          No zones? Create one!
-        </div>
-      )}
+      {/* Scrollable Zones Container */}
+      <div 
+        ref={scrollContainerRef} 
+        className="zones-wrapper"
+        style={{ overflowX: "auto", whiteSpace: "nowrap" }}
+      >
+        {Object.keys(zonesData).length !== 0 ? (
+          <>
+            {Object.keys(zonesData).map((zoneName, index) => (
+              <div
+                key={index}
+                className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""}`}
+                onClick={() => handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)}
+              >
+                {zoneName}
+              </div>
+            ))}
+          </>
+        ) : (
+          <div className="no-zone">
+            <InfoIcon />
+            No zones? Create one!
+          </div>
+        )}
+      </div>
 
       {/* Right Arrow */}
       {showRightArrow && (