widget hide panel

2025-04-04 15:31:16 +05:30 · 2025-04-04 15:31:16 +05:30 · f738fec057
parent 57ad4ea8e2
commit f738fec057
4 changed files with 72 additions and 60 deletions
--- 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"
--- 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)}
--- 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;
-
-
--- 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;
  }
 }