socket added for 2d widget

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   CleanPannel,
   EyeIcon,
@@ -7,6 +7,7 @@ import {
 import { panelData } from "../../../services/realTimeVisulization/zoneData/panel";
 import { AddIcon } from "../../icons/ExportCommonIcons";
 import { deletePanelApi } from "../../../services/realTimeVisulization/zoneData/deletePanel";
+import { useSocketStore } from "../../../store/store";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -17,7 +18,6 @@ interface ButtonsProps {
     zoneName: string;
     activeSides: Side[];
     panelOrder: Side[];
-
     lockedPanels: Side[];
     zoneId: string;
     zoneViewPortTarget: number[];
@@ -59,6 +59,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
   setHiddenPanels,
   hiddenPanels,
 }) => {
+
+  const { visualizationSocket } = useSocketStore();
+
   // Local state to track hidden panels
 
   // Function to toggle lock/unlock a panel
@@ -109,65 +112,81 @@ const AddButtons: React.FC<ButtonsProps> = ({
       // Panel already exists: Remove widgets from that side and update activeSides
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
-  
+
       // Remove all widgets associated with the side and update active sides
       const cleanedWidgets = selectedZone.widgets.filter(
         (widget) => widget.panel !== side
       );
       const newActiveSides = selectedZone.activeSides.filter((s) => s !== side);
-  
+
       const updatedZone = {
         ...selectedZone,
         widgets: cleanedWidgets,
         activeSides: newActiveSides,
         panelOrder: newActiveSides,
       };
-  
-      // API call to delete the panel
-      try {
-        const response = await deletePanelApi(selectedZone.zoneId, side, organization);
-        console.log('response: ', response);
-        if (response.message === "Panel deleted successfully") {
-          setSelectedZone(updatedZone);
-        } else {
-          console.error("Unexpected response:", response);
-        }
-      } catch (error) {
-        console.error("Error deleting panel:", error);
+
+      let deletePanel = {
+        organization: organization,
+        panelName: side,
+        zoneId: selectedZone.zoneId
       }
+      if (visualizationSocket) {
+        visualizationSocket.emit("v2:viz-panel:delete", deletePanel)
+      }
+      setSelectedZone(updatedZone);
+
+      // API call to delete the panel
+      // try {
+      //   const response = await deletePanelApi(selectedZone.zoneId, side, organization);
+      //   
+      //   if (response.message === "Panel deleted successfully") {
+      //   } else {
+      //     
+      //   }
+      // } catch (error) {
+      //   
+      // }
     } else {
       // Panel does not exist: Create panel
       try {
         // Get email and organization safely with a default fallback
         const email = localStorage.getItem("email") || "";
-        const organization = email?.split("@")[1]?.split(".")[0] ;
-  
+        const organization = email?.split("@")[1]?.split(".")[0];
+
         // Prevent duplicate side entries
         const newActiveSides = selectedZone.activeSides.includes(side)
           ? [...selectedZone.activeSides]
           : [...selectedZone.activeSides, side];
-  
+
         const updatedZone = {
           ...selectedZone,
           activeSides: newActiveSides,
           panelOrder: newActiveSides,
         };
-  
-        // API call to create panels
-        const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
-        console.log('response: ', response);
-  
-        if (response.message === "Panels created successfully") {
-          setSelectedZone(updatedZone);
-        } else {
-          console.error("Unexpected response:", response);
+        let addPanel = {
+          organization: organization,
+          zoneId: selectedZone.zoneId,
+          panelOrder: newActiveSides
         }
+        if (visualizationSocket) {
+          visualizationSocket.emit("v2:viz-panel:add", addPanel)
+        }
+        setSelectedZone(updatedZone);
+        // API call to create panels
+        // const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
+        // 
+
+        // if (response.message === "Panels created successfully") {
+        // } else {
+        //   
+        // }
       } catch (error) {
-        console.error("Error creating panels:", error);
+
       }
     }
   };
-  
+
 
   return (
     <>