updated visualization panel ui and added outer click

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

@@ -18,6 +18,7 @@ import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData
 import { useClickOutside } from "./functions/handleWidgetsOuterClick";
 import { useSocketStore } from "../../../store/store";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import OuterClick from "../../../utils/outerClick";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -89,6 +90,11 @@ export const DraggableWidget = ({
 
   const isPanelHidden = hiddenPanels.includes(widget.panel);
 
+  OuterClick({
+    contextClassName: ["chart-container", "floating", "sidebar-right-wrapper"],
+    setMenuVisible: () => setSelectedChartId(null),
+  });
+
   const deleteSelectedChart = async () => {
     try {
       const email = localStorage.getItem("email") || "";
@@ -251,36 +257,35 @@ export const DraggableWidget = ({
   });
   // Track canvas dimensions
 
-  
+  // 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;
 
-// 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;
+    const updateCanvasDimensions = () => {
+      const rect = canvas.getBoundingClientRect();
+      setCanvasDimensions({
+        width: rect.width,
+        height: rect.height,
+      });
+    };
 
-  const updateCanvasDimensions = () => {
-    const rect = canvas.getBoundingClientRect();
-    setCanvasDimensions({
-      width: rect.width,
-      height: rect.height,
-    });
-  };
+    updateCanvasDimensions();
+    const resizeObserver = new ResizeObserver(updateCanvasDimensions);
+    resizeObserver.observe(canvas);
 
-  updateCanvasDimensions();
-  const resizeObserver = new ResizeObserver(updateCanvasDimensions);
-  resizeObserver.observe(canvas);
-
-  return () => resizeObserver.unobserve(canvas);
-}, []);
+    return () => resizeObserver.unobserve(canvas);
+  }, []);
 
   return (
     <>
       <style>
         {`
     :root {
-      --realTimeViz-container-width: ${canvasDimensions.width * 0.25}px;
+      --realTimeViz-container-width: ${canvasDimensions.width}px;
       --realTimeViz-container-height: ${canvasDimensions.height}px;
+      
     }
   `}
       </style>
@@ -296,13 +301,12 @@ useEffect(() => {
         onDragOver={handleDragOver}
         onDrop={handleDrop}
         style={{
-          // Apply styles based on panel position
           width: ["top", "bottom"].includes(widget.panel)
-            ? `calc(${canvasDimensions.width * 0.16}px - 2px)` // For top/bottom panels, set width
-            : undefined, // Don't set width if it's left or right
+            ? `calc(${canvasDimensions.width}px / 6)`
+            : undefined,
           height: ["left", "right"].includes(widget.panel)
-            ? `calc(${canvasDimensions.height * 0.25}px - 2px)` // For left/right panels, set height
-            : undefined, // Don't set height if it's top or bottom
+            ? `calc(${canvasDimensions.height - 10}px / 4)`
+            : undefined,
         }}
         ref={chartWidget}
         onClick={() => setSelectedChartId(widget)}
@@ -393,4 +397,4 @@ useEffect(() => {
   );
 };
 
-// while resize calculate  --realTimeViz-container-height pprperly
+