Merge remote-tracking branch 'origin/ui' into simulation

2025-04-09 18:41:30 +05:30
parent a07bf917c5 c953c71f3f
commit 158cd2b1b8
15 changed files with 827 additions and 647 deletions
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -1,12 +1,10 @@
-import React, { useEffect } from "react";
+import React from "react";
 import {
  CleanPannel,
  EyeIcon,
  LockIcon,
 } from "../../icons/RealTimeVisulationIcons";
-import { panelData } from "../../../services/realTimeVisulization/zoneData/panel";
 import { AddIcon } from "../../icons/ExportCommonIcons";
-import { deletePanelApi } from "../../../services/realTimeVisulization/zoneData/deletePanel";
 import { useSocketStore } from "../../../store/store";
 import { clearPanel } from "../../../services/realTimeVisulization/zoneData/clearPanel";
 import { lockPanel } from "../../../services/realTimeVisulization/zoneData/lockPanel";
@@ -14,6 +12,11 @@ import { lockPanel } from "../../../services/realTimeVisulization/zoneData/lockP
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";

+// Define the type for HiddenPanels, where keys are zone IDs and values are arrays of hidden sides
+interface HiddenPanels {
+  [zoneId: string]: Side[];
+}
+
 // Define the type for the props passed to the Buttons component
 interface ButtonsProps {
  selectedZone: {
@@ -37,7 +40,6 @@ interface ButtonsProps {
      zoneName: string;
      activeSides: Side[];
      panelOrder: Side[];
-
      lockedPanels: Side[];
      zoneId: string;
      zoneViewPortTarget: number[];
@@ -51,8 +53,8 @@ interface ButtonsProps {
      }[];
    }>
  >;
-  hiddenPanels: Side[]; // Add this prop for hidden panels
-  setHiddenPanels: React.Dispatch<React.SetStateAction<Side[]>>; // Add this prop for updating hidden panels
+  hiddenPanels: HiddenPanels; // Updated prop type
+  setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type
 }

 const AddButtons: React.FC<ButtonsProps> = ({
@@ -63,11 +65,33 @@ const AddButtons: React.FC<ButtonsProps> = ({
 }) => {
  const { visualizationSocket } = useSocketStore();

-  // Local state to track hidden panels
+  // Function to toggle visibility of a panel
+  const toggleVisibility = (side: Side) => {
+    const isHidden = hiddenPanels[selectedZone.zoneId]?.includes(side) ?? false;
+
+    if (isHidden) {
+      // If the panel is already hidden, remove it from the hiddenPanels array for this zone
+      setHiddenPanels((prevHiddenPanels) => ({
+        ...prevHiddenPanels,
+        [selectedZone.zoneId]: prevHiddenPanels[selectedZone.zoneId].filter(
+          (panel) => panel !== side
+        ),
+      }));
+    } else {
+      // If the panel is visible, add it to the hiddenPanels array for this zone
+      setHiddenPanels((prevHiddenPanels) => ({
+        ...prevHiddenPanels,
+        [selectedZone.zoneId]: [
+          ...(prevHiddenPanels[selectedZone.zoneId] || []),
+          side,
+        ],
+      }));
+    }
+  };

  // Function to toggle lock/unlock a panel
  const toggleLockPanel = async (side: Side) => {
-    console.log('side: ', side);
+    // console.log('side: ', side);
    const email = localStorage.getItem("email") || "";
    const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
    //add api
@@ -99,23 +123,10 @@ const AddButtons: React.FC<ButtonsProps> = ({

  };

-  // Function to toggle visibility of a panel
-  const toggleVisibility = (side: Side) => {
-
-    const isHidden = hiddenPanels.includes(side);
-    if (isHidden) {
-      // If the panel is already hidden, remove it from the hiddenPanels array
-      setHiddenPanels(hiddenPanels.filter((panel) => panel !== side));
-    } else {
-      // If the panel is visible, add it to the hiddenPanels array
-      setHiddenPanels([...hiddenPanels, side]);
-    }
-  };
-
  // Function to clean all widgets from a panel
  const cleanPanel = async (side: Side) => {
    //add api
-    console.log('side: ', side);
+    // console.log('side: ', side);
    const email = localStorage.getItem("email") || "";
    const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value

@@ -135,7 +146,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
      widgets: cleanedWidgets,
    };
    // Update the selectedZone state
-    console.log('updatedZone: ', updatedZone);
+    // console.log('updatedZone: ', updatedZone);
    setSelectedZone(updatedZone);

    // let response = await clearPanel(selectedZone.zoneId, organization, side)
@@ -196,8 +207,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
      //
      // }
    } else {
-      setHiddenPanels(hiddenPanels.filter((panel) => panel !== side));
-
      // Panel does not exist: Create panel
      try {
        // Get email and organization safely with a default fallback
@@ -234,7 +243,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
      } catch (error) { }
    }
  };
-
  return (
    <>
      <div>
@@ -261,16 +269,21 @@ const AddButtons: React.FC<ButtonsProps> = ({
              <div className="extra-Bs">
                {/* Hide Panel */}
                <div
-                  className={`icon ${hiddenPanels.includes(side) ? "active" : ""
-                    }`}
+                  className={`icon ${
+                    hiddenPanels[selectedZone.zoneId]?.includes(side)
+                      ? "active"
+                      : ""
+                  }`}
                  title={
-                    hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
+                    hiddenPanels[selectedZone.zoneId]?.includes(side)
+                      ? "Show Panel"
+                      : "Hide Panel"
                  }
                  onClick={() => toggleVisibility(side)}
                >
                  <EyeIcon
                    fill={
-                      hiddenPanels.includes(side)
+                      hiddenPanels[selectedZone.zoneId]?.includes(side)
                        ? "var(--primary-color)"
                        : "var(--text-color)"
                    }
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -88,12 +88,15 @@ export const DraggableWidget = ({

  const chartWidget = useRef<HTMLDivElement>(null);

-  const isPanelHidden = hiddenPanels.includes(widget.panel);
-
-  // OuterClick({
-  //   contextClassName: ["chart-container", "floating", "sidebar-right-wrapper"],
-  //   setMenuVisible: () => setSelectedChartId(null),
-  // });
+  OuterClick({
+    contextClassName: [
+      "chart-container",
+      "floating",
+      "sidebar-right-wrapper",
+      "card",
+    ],
+    setMenuVisible: () => setSelectedChartId(null),
+  });

  const deleteSelectedChart = async () => {
    try {
@@ -397,4 +400,4 @@ export const DraggableWidget = ({
  );
 };

-
+// by using canvasDimensions.height canvasDimensions.width dynamically div value insted of static 6 and 4 calculate according to canvasDimensions.width canvasDimensions.height
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -39,7 +39,7 @@ interface PanelProps {
      widgets: Widget[];
    }>
  >;
-  hiddenPanels: string[];
+  hiddenPanels: any;
  setZonesData: React.Dispatch<React.SetStateAction<any>>;
 }

@@ -139,7 +139,12 @@ const Panel: React.FC<PanelProps> = ({
  const handleDrop = (e: React.DragEvent, panel: Side) => {
    e.preventDefault();
    const { draggedAsset } = useWidgetStore.getState();
-    if (!draggedAsset || isPanelLocked(panel)) return;
+    if (
+      !draggedAsset ||
+      isPanelLocked(panel) ||
+      hiddenPanels[selectedZone.zoneId]?.includes(panel)
+    )
+      return;

    const currentWidgetsCount = getCurrentWidgetCount(panel);
    const maxCapacity = calculatePanelCapacity(panel);
@@ -261,7 +266,7 @@ const Panel: React.FC<PanelProps> = ({
        {`
          :root {
            --topWidth: ${topWidth};
-            --bottomWidth: ${bottomWidth};
+            --bottomWidth: ${bottomWidth} ;
            --leftHeight: ${leftHeight};
            --rightHeight: ${rightHeight};

@@ -278,7 +283,7 @@ const Panel: React.FC<PanelProps> = ({
          key={side}
          id="panel-wrapper"
          className={`panel ${side}-panel absolute ${
-            hiddenPanels.includes(side) ? "hidePanel" : ""
+            hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
          }`}
          style={getPanelStyle(side)}
          onDrop={(e) => handleDrop(e, side)}
@@ -294,9 +299,11 @@ const Panel: React.FC<PanelProps> = ({
          <div
            className={`panel-content ${isPlaying && "fullScreen"}`}
            style={{
-              pointerEvents: selectedZone.lockedPanels.includes(side)
-                ? "none"
-                : "auto",
+              pointerEvents:
+                selectedZone.lockedPanels.includes(side) ||
+                hiddenPanels[selectedZone.zoneId]?.includes(side)
+                  ? "none"
+                  : "auto",
              opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",
            }}
          >
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -53,8 +53,13 @@ type Widget = {
  data: any;
 };

+// Define the type for HiddenPanels, where keys are zone IDs and values are arrays of hidden sides
+interface HiddenPanels {
+  [zoneId: string]: Side[];
+}
+
 const RealTimeVisulization: React.FC = () => {
-  const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
+  const [hiddenPanels, setHiddenPanels] = React.useState<HiddenPanels>({});
  const containerRef = useRef<HTMLDivElement>(null);
  const { isPlaying } = usePlayButtonStore();
  const { activeModule } = useModuleStore();
@@ -74,7 +79,6 @@ const RealTimeVisulization: React.FC = () => {
  const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
  const { visualizationSocket } = useSocketStore();

-
  useEffect(() => {
    async function GetZoneData() {
      const email = localStorage.getItem("email") || "";
@@ -101,7 +105,7 @@ const RealTimeVisulization: React.FC = () => {
          {}
        );
        setZonesData(formattedData);
-      } catch (error) { }
+      } catch (error) {}
    }

    GetZoneData();
@@ -229,8 +233,6 @@ const RealTimeVisulization: React.FC = () => {
    };
  }, [setRightClickSelected]);

-
-
  return (
    <>
      <div
@@ -263,7 +265,6 @@ const RealTimeVisulization: React.FC = () => {
            }}
            onDrop={(event) => handleDrop(event)}
            onDragOver={(event) => event.preventDefault()}
-
          >
            <Scene />
          </div>