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

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

@@ -63,6 +63,59 @@ const Panel: React.FC<PanelProps> = ({
   const { isPlaying } = usePlayButtonStore();
   const { visualizationSocket } = useSocketStore();
 
+  const [canvasDimensions, setCanvasDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  // Track canvas dimensions
+  useEffect(() => {
+    const canvas = document.getElementById("real-time-vis-canvas");
+    if (!canvas) return;
+
+    const updateCanvasDimensions = () => {
+      const rect = canvas.getBoundingClientRect();
+      setCanvasDimensions({
+        width: rect.width,
+        height: rect.height,
+      });
+    };
+
+    // Initial measurement
+    updateCanvasDimensions();
+
+    // Set up ResizeObserver to track changes
+    const resizeObserver = new ResizeObserver(updateCanvasDimensions);
+    resizeObserver.observe(canvas);
+
+    return () => {
+      resizeObserver.unobserve(canvas);
+    };
+  }, []);
+
+  useEffect(() => {
+    const canvas = document.getElementById("real-time-vis-canvas");
+    if (!canvas) return;
+
+    const updateCanvasDimensions = () => {
+      const rect = canvas.getBoundingClientRect();
+      setCanvasDimensions({
+        width: rect.width,
+        height: rect.height,
+      });
+    };
+
+    // Initial measurement
+    updateCanvasDimensions();
+
+    // Set up ResizeObserver to track changes
+    const resizeObserver = new ResizeObserver(updateCanvasDimensions);
+    resizeObserver.observe(canvas);
+
+    return () => {
+      resizeObserver.unobserve(canvas);
+    };
+  }, []);
+
   const getPanelStyle = useMemo(
     () => (side: Side) => {
       const currentIndex = selectedZone.panelOrder.indexOf(side);
@@ -71,36 +124,52 @@ const Panel: React.FC<PanelProps> = ({
       const rightActive = previousPanels.includes("right");
       const topActive = previousPanels.includes("top");
       const bottomActive = previousPanels.includes("bottom");
-      const panelSize = isPlaying ? 300 : 210;
+
+      // Dynamic panel sizes based on canvas width
+      const panelSizeWidth = Math.max(canvasDimensions.width * 0.165, 200); // Ensure minimum width of 200px
+      const panelSizeHeight = Math.max(canvasDimensions.width * 0.13, 200); // Ensure minimum height of 200px
 
       switch (side) {
         case "top":
         case "bottom":
           return {
+            // minWidth: "200px", // Minimum width constraint
             width: `calc(100% - ${
-              (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+              (leftActive ? panelSizeWidth : 0) +
+              (rightActive ? panelSizeWidth : 0)
             }px)`,
-            height: `${panelSize - 2}px`,
-            left: leftActive ? `${panelSize}px` : "0",
-            right: rightActive ? `${panelSize}px` : "0",
+            minHeight: "200px", // Minimum height constraint
+            height: `${panelSizeHeight - 2}px`, // Subtracting for border or margin
+            left: leftActive ? `${panelSizeWidth}px` : "0",
+            right: rightActive ? `${panelSizeWidth}px` : "0",
             [side]: "0",
           };
+
         case "left":
         case "right":
           return {
-            width: `${panelSize - 2}px`,
+            minWidth: "200px", // Minimum width constraint
+            width: `${panelSizeWidth - 2}px`, // Subtracting for border or margin
+            // minHeight: "200px", // Minimum height constraint
             height: `calc(100% - ${
-              (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+              (topActive ? panelSizeHeight : 0) +
+              (bottomActive ? panelSizeHeight : 0)
             }px)`,
-            top: topActive ? `${panelSize}px` : "0",
-            bottom: bottomActive ? `${panelSize}px` : "0",
+            top: topActive ? `${panelSizeHeight}px` : "0",
+            bottom: bottomActive ? `${panelSizeHeight}px` : "0",
             [side]: "0",
           };
+
         default:
           return {};
       }
     },
-    [selectedZone.panelOrder, isPlaying]
+    [
+      selectedZone.panelOrder,
+      isPlaying,
+      canvasDimensions.width,
+      canvasDimensions.height,
+    ]
   );
 
   const handleDrop = (e: React.DragEvent, panel: Side) => {
@@ -152,10 +221,10 @@ const Panel: React.FC<PanelProps> = ({
     let addWidget = {
       organization: organization,
       zoneId: selectedZone.zoneId,
-      widget: newWidget
-    }
+      widget: newWidget,
+    };
     if (visualizationSocket) {
-      visualizationSocket.emit("v2:viz-widget:add", addWidget)
+      visualizationSocket.emit("v2:viz-widget:add", addWidget);
     }
     setSelectedZone((prev) => ({
       ...prev,
@@ -164,7 +233,6 @@ const Panel: React.FC<PanelProps> = ({
 
     try {
       // let response = await addingWidgets(selectedZone.zoneId, organization, newWidget);
-
       // if (response.message === "Widget created successfully") {
       //   setSelectedZone((prev) => ({
       //     ...prev,
@@ -174,7 +242,6 @@ const Panel: React.FC<PanelProps> = ({
     } catch (error) {
       console.error("Error adding widget:", error);
     }
-
   };
 
   useEffect(() => {
@@ -280,3 +347,5 @@ const Panel: React.FC<PanelProps> = ({
 };
 
 export default Panel;
+
+// canvasDimensions.width as percent