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

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

@@ -98,14 +98,14 @@ export const DraggableWidget = ({
         widgetID: widget.id,
         organization: organization,
       };
-      console.log("deleteWidget: ", deleteWidget);
+
       if (visualizationSocket) {
         visualizationSocket.emit("v2:viz-widget:delete", deleteWidget);
       }
       const updatedWidgets = selectedZone.widgets.filter(
         (w: Widget) => w.id !== widget.id
       );
-      console.log("updatedWidgets: ", updatedWidgets);
+
       setSelectedZone((prevZone: any) => ({
         ...prevZone,
         widgets: updatedWidgets,
@@ -250,55 +250,30 @@ export const DraggableWidget = ({
     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();
+// Current: Two identical useEffect hooks for canvas dimensions
+// Remove the duplicate and keep only one
+useEffect(() => {
+  const canvas = document.getElementById("real-time-vis-canvas");
+  if (!canvas) return;
 
-    // Set up ResizeObserver to track changes
-    const resizeObserver = new ResizeObserver(updateCanvasDimensions);
-    resizeObserver.observe(canvas);
+  const updateCanvasDimensions = () => {
+    const rect = canvas.getBoundingClientRect();
+    setCanvasDimensions({
+      width: rect.width,
+      height: rect.height,
+    });
+  };
 
-    return () => {
-      resizeObserver.unobserve(canvas);
-    };
-  }, []);
+  updateCanvasDimensions();
+  const resizeObserver = new ResizeObserver(updateCanvasDimensions);
+  resizeObserver.observe(canvas);
 
-  useEffect(() => {
-    const canvas = document.getElementById("real-time-vis-canvas");
-    if (!canvas) return;
+  return () => resizeObserver.unobserve(canvas);
+}, []);
 
-    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);
-    };
-  }, []);
-
-  console.log("selectedChartId: ", widget);
   return (
     <>
       <style>
@@ -418,4 +393,4 @@ export const DraggableWidget = ({
   );
 };
 
-// in style if widget .panel is top or bottom set width if left or right set height
+// while resize calculate  --realTimeViz-container-height pprperly