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

app/src/styles/pages/realTimeViz.scss

@@ -117,6 +117,7 @@
 
   .zone-wrapper.bottom {
     bottom: calc(var(--realTimeViz-container-height) * 0.27);
+    bottom: 200px;
   }
 
   .content-container {
@@ -306,7 +307,7 @@
 
         .chart-container {
 
-          min-width: 150px;
+          min-width: 160px;
         }
       }
     }
@@ -346,11 +347,8 @@
 
         .chart-container {
           width: 100%;
-
-
-          min-height: 150px;
+          min-height: 160px;
           max-height: 100%;
-          // border: 1px dashed var(--background-color-gray);
           border-radius: 8px;
           box-shadow: var(--box-shadow-medium);
           padding: 6px 0;
@@ -370,7 +368,8 @@
 
 .playingFlase {
   .zone-wrapper.bottom {
-    bottom: calc(var(--realTimeViz-container-height) * 0.25);
+    bottom: calc(var(--realTimeViz-container-height) * 0.3);
+    bottom: 210px;
   }
 }