From f738fec057fbd65f325886b7fb0bf933c9652bf1 Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Fri, 4 Apr 2025 15:31:16 +0530
Subject: [PATCH] widget hide panel

---
 .../components/ui/componets/AddButtons.tsx    | 51 +++++++------
 .../ui/componets/DraggableWidget.tsx          |  3 +-
 .../ui/componets/DroppedFloatingWidgets.tsx   | 73 ++++++++++---------
 app/src/styles/pages/realTimeViz.scss         |  5 +-
 4 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx
index d5bfb29..80a88df 100644
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -59,7 +59,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
   setHiddenPanels,
   hiddenPanels,
 }) => {
-
   const { visualizationSocket } = useSocketStore();
 
   // Local state to track hidden panels
@@ -129,25 +128,27 @@ const AddButtons: React.FC<ButtonsProps> = ({
       let deletePanel = {
         organization: organization,
         panelName: side,
-        zoneId: selectedZone.zoneId
-      }
+        zoneId: selectedZone.zoneId,
+      };
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-panel:delete", deletePanel)
+        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 {
+      setHiddenPanels(hiddenPanels.filter((panel) => panel !== side));
+
       // Panel does not exist: Create panel
       try {
         // Get email and organization safely with a default fallback
@@ -167,27 +168,24 @@ const AddButtons: React.FC<ButtonsProps> = ({
         let addPanel = {
           organization: organization,
           zoneId: selectedZone.zoneId,
-          panelOrder: newActiveSides
-        }
+          panelOrder: newActiveSides,
+        };
         if (visualizationSocket) {
-          visualizationSocket.emit("v2:viz-panel:add", addPanel)
+          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) {
-
-      }
+      } catch (error) {}
     }
   };
 
-
   return (
     <>
       <div>
@@ -195,8 +193,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
           <div key={side} className={`side-button-container ${side}`}>
             {/* "+" Button */}
             <button
-              className={`side-button ${side}${selectedZone.activeSides.includes(side) ? " active" : ""
-                }`}
+              className={`side-button ${side}${
+                selectedZone.activeSides.includes(side) ? " active" : ""
+              }`}
               onClick={() => handlePlusButtonClick(side)}
               title={
                 selectedZone.activeSides.includes(side)
@@ -214,15 +213,20 @@ const AddButtons: React.FC<ButtonsProps> = ({
               <div className="extra-Bs">
                 {/* Hide Panel */}
                 <div
-                  className={`icon ${hiddenPanels.includes(side) ? "active" : ""
-                    }`}
+                  className={`icon ${
+                    hiddenPanels.includes(side) ? "active" : ""
+                  }`}
                   title={
                     hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
                   }
                   onClick={() => toggleVisibility(side)}
                 >
                   <EyeIcon
-                    fill={hiddenPanels.includes(side) ? "var(--primary-color)" : "var(--text-color)"}
+                    fill={
+                      hiddenPanels.includes(side)
+                        ? "var(--primary-color)"
+                        : "var(--text-color)"
+                    }
                   />
                 </div>
 
@@ -237,8 +241,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
                 {/* Lock/Unlock Panel */}
                 <div
-                  className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
-                    }`}
+                  className={`icon ${
+                    selectedZone.lockedPanels.includes(side) ? "active" : ""
+                  }`}
                   title={
                     selectedZone.lockedPanels.includes(side)
                       ? "Unlock Panel"
diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
index 41727db..7b667c8 100644
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -260,7 +260,8 @@ export const DraggableWidget = ({
         onDragOver={handleDragOver}
         onDrop={handleDrop}
         style={{
-          pointerEvents: isPanelHidden ? "none" : "auto",
+          // pointerEvents: isPanelHidden ? "none" : "auto",
+          // opacity: isPanelHidden ? "0.1" : "0",
         }}
         ref={chartWidget}
         onClick={() => setSelectedChartId(widget)}
diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
index 8cf1f86..593df04 100644
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -65,6 +65,7 @@ const DroppedObjects: React.FC = () => {
   );
   const [offset, setOffset] = useState<[number, number] | null>(null);
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
+
   const [activeEdges, setActiveEdges] = useState<{
     vertical: "top" | "bottom";
     horizontal: "left" | "right";
@@ -84,7 +85,6 @@ const DroppedObjects: React.FC = () => {
   // });
   const kebabRef = useRef<HTMLDivElement>(null);
 
-
   // Clean up animation frame on unmount
   useEffect(() => {
     return () => {
@@ -95,7 +95,10 @@ const DroppedObjects: React.FC = () => {
   }, []);
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (kebabRef.current && !kebabRef.current.contains(event.target as Node)) {
+      if (
+        kebabRef.current &&
+        !kebabRef.current.contains(event.target as Node)
+      ) {
         setOpenKebabId(null);
       }
     };
@@ -112,7 +115,6 @@ const DroppedObjects: React.FC = () => {
   const zoneEntries = Object.entries(zones);
   if (zoneEntries.length === 0) return null;
   const [zoneName, zone] = zoneEntries[0];
-  
 
   function handleDuplicate(zoneName: string, index: number) {
     setOpenKebabId(null);
@@ -123,16 +125,15 @@ const DroppedObjects: React.FC = () => {
     try {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-      
-      
+
       let deleteFloatingWidget = {
         floatWidgetID: id,
         organization: organization,
-        zoneId: zone.zoneId
-      }
-      
+        zoneId: zone.zoneId,
+      };
+
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget)
+        visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget);
       }
       deleteObject(zoneName, id);
 
@@ -142,13 +143,14 @@ const DroppedObjects: React.FC = () => {
       // if (res.message === "FloatingWidget deleted successfully") {
       //   deleteObject(zoneName, id, index); // Call the deleteObject method from the store
       // }
-    } catch (error) {
-      
-    }
+    } catch (error) {}
   }
 
   const handlePointerDown = (event: React.PointerEvent, index: number) => {
-    if ((event.target as HTMLElement).closest(".kebab-options") || (event.target as HTMLElement).closest(".kebab")) {
+    if (
+      (event.target as HTMLElement).closest(".kebab-options") ||
+      (event.target as HTMLElement).closest(".kebab")
+    ) {
       return; // Prevent dragging when clicking on the kebab menu or its options
     }
     const obj = zone.objects[index];
@@ -448,7 +450,6 @@ const DroppedObjects: React.FC = () => {
       //   ...zone.objects[draggingIndex.index],
       //   position: boundedPosition,
       // });
-      
 
       let updateFloatingWidget = {
         organization: organization,
@@ -456,16 +457,16 @@ const DroppedObjects: React.FC = () => {
           ...zone.objects[draggingIndex.index],
           position: boundedPosition,
         },
-        index:draggingIndex.index,
-        zoneId: zone.zoneId
-      }
+        index: draggingIndex.index,
+        zoneId: zone.zoneId,
+      };
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget)
+        visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget);
       }
 
       // if (response.message === "Widget updated successfully") {
-        
-      console.log('boundedPosition: ', boundedPosition);
+
+      console.log("boundedPosition: ", boundedPosition);
       updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
       // }
 
@@ -479,7 +480,6 @@ const DroppedObjects: React.FC = () => {
       //   animationRef.current = null;
       // }
     } catch (error) {
-      
     } finally {
       // Clean up regardless of success or failure
       setDraggingIndex(null);
@@ -510,7 +510,7 @@ const DroppedObjects: React.FC = () => {
         <div
           key={`${zoneName}-${index}`}
           className={`${obj.className} ${
-            selectedChartId?.id === obj.id && "activeChart"
+            selectedChartId?.id === obj.id && !isPlaying && "activeChart"
           }`}
           ref={chartWidget}
           style={{
@@ -559,7 +559,7 @@ const DroppedObjects: React.FC = () => {
             </>
           ) : obj.className === "warehouseThroughput floating" ? (
             <>
-              <WarehouseThroughputComponent object={obj}/>
+              <WarehouseThroughputComponent object={obj} />
             </>
           ) : obj.className === "fleetEfficiency floating" ? (
             <>
@@ -571,26 +571,32 @@ const DroppedObjects: React.FC = () => {
             ref={kebabRef}
             onClick={(event) => {
               event.stopPropagation();
-              handleKebabClick(obj.id, event)
+              handleKebabClick(obj.id, event);
             }}
           >
             <KebabIcon />
           </div>
           {openKebabId === obj.id && (
             <div className="kebab-options" ref={kebabRef}>
-              <div className="dublicate btn" onClick={(event) => {
-                event.stopPropagation();
-                handleDuplicate(zoneName, index); // Call the duplicate handler
-              }}>
+              <div
+                className="dublicate btn"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  handleDuplicate(zoneName, index); // Call the duplicate handler
+                }}
+              >
                 <div className="icon">
                   <DublicateIcon />
                 </div>
                 <div className="label">Duplicate</div>
               </div>
-              <div className="edit btn" onClick={(event) => {
-                event.stopPropagation();
-                handleDelete(zoneName, obj.id); // Call the delete handler
-              }}>
+              <div
+                className="edit btn"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  handleDelete(zoneName, obj.id); // Call the delete handler
+                }}
+              >
                 <div className="icon">
                   <DeleteIcon />
                 </div>
@@ -598,7 +604,6 @@ const DroppedObjects: React.FC = () => {
               </div>
             </div>
           )}
-
         </div>
       ))}
 
@@ -636,5 +641,3 @@ const DroppedObjects: React.FC = () => {
 };
 
 export default DroppedObjects;
-
-
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index dd24a14..ecc58ce 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -62,6 +62,7 @@
     max-width: 80%;
     overflow: auto;
     max-width: calc(100% - 500px);
+    z-index: 3;
 
     &::-webkit-scrollbar {
       display: none;
@@ -173,9 +174,11 @@
     overflow: auto;
     z-index: $z-index-tools;
     overflow: auto;
+
     &::-webkit-scrollbar {
       display: none;
     }
+
     .panel-content {
       position: relative;
       height: 100%;
@@ -326,7 +329,7 @@
   }
 
   .panel.hidePanel {
-    opacity: 0;
+    opacity: 0.1;
   }
 }