fixed bug and added functionality to duplicate with iot data selection

app/.env

@@ -2,10 +2,10 @@
 PORT=8200 
 
 # Base URL for the server socket API, used for real-time communication (e.g., WebSockets).
-REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
+REACT_APP_SERVER_SOCKET_API_BASE_URL=192.168.0.111:8000
 
 # Base URL for the server REST API, used for HTTP requests to the backend server.
-REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
+REACT_APP_SERVER_REST_API_BASE_URL=192.168.0.111:5000
 
 # Base URL for the server marketplace, used for market place model blob.
 REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011

app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx

@@ -61,11 +61,20 @@ const BarChartInput = (props: Props) => {
 
   }, [selectedChartId.id]);
 
+  useEffect(() => {
+    setMeasurements(selections);
+    updateDuration(duration);
+    updateName(widgetName);
+    console.log('Initial set state');
+  }, []);
+
   // Sync Zustand state when component mounts
   useEffect(() => {
     setMeasurements(selections);
     updateDuration(duration);
     updateName(widgetName);
+    console.log('change set state');
+    
   }, [selections, duration, widgetName]);
 
 

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

@@ -1,5 +1,6 @@
 import { useWidgetStore } from "../../../store/useWidgetStore";
 import ProgressCard from "../realTimeVis/charts/ProgressCard";
+import useChartStore from "../../../store/useChartStore";
 import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
 import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
 import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
@@ -80,6 +81,16 @@ export const DraggableWidget = ({
   const [panelDimensions, setPanelDimensions] = useState<{
     [side in Side]?: { width: number; height: number };
   }>({});
+  const { measurements, duration, name } = useChartStore();
+  const { isPlaying } = usePlayButtonStore();
+
+  const [canvasDimensions, setCanvasDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  useEffect(() => {
+    console.log("changes loggggg", measurements, duration, name);
+  }, [measurements, duration, name])
   const handlePointerDown = () => {
     if (selectedChartId?.id !== widget.id) {
       setSelectedChartId(widget);
@@ -94,6 +105,9 @@ export const DraggableWidget = ({
       "floating",
       "sidebar-right-wrapper",
       "card",
+      "dropdown-menu",
+      "sidebar-right-content-container",
+      "dropdown-options"
     ],
     setMenuVisible: () => setSelectedChartId(null),
   });
@@ -137,40 +151,50 @@ export const DraggableWidget = ({
     }
   };
 
+  // Calculate panel size
+  const panelSize = Math.max(
+    Math.min(canvasDimensions.width * 0.25, canvasDimensions.height * 0.25),
+    170 // Min 170px
+  );
+
   const getCurrentWidgetCount = (panel: Side) =>
     selectedZone.widgets.filter((w) => w.panel === panel).length;
-
+  // Calculate panel capacity
+  
   const calculatePanelCapacity = (panel: Side) => {
-    const CHART_WIDTH = 150;
+    const CHART_WIDTH = panelSize;
-    const CHART_HEIGHT = 150;
+    const CHART_HEIGHT = panelSize;
-    const FALLBACK_HORIZONTAL_CAPACITY = 5;
-    const FALLBACK_VERTICAL_CAPACITY = 3;
 
     const dimensions = panelDimensions[panel];
     if (!dimensions) {
-      return panel === "top" || panel === "bottom"
+      return panel === "top" || panel === "bottom" ? 5 : 3; // Fallback capacities
-        ? FALLBACK_HORIZONTAL_CAPACITY
-        : FALLBACK_VERTICAL_CAPACITY;
     }
 
     return panel === "top" || panel === "bottom"
-      ? Math.floor(dimensions.width / CHART_WIDTH)
+      ? Math.max(1, Math.floor(dimensions.width / CHART_WIDTH))
-      : Math.floor(dimensions.height / CHART_HEIGHT);
+      : Math.max(1, Math.floor(dimensions.height / CHART_HEIGHT));
   };
 
   const isPanelFull = (panel: Side) => {
     const currentWidgetCount = getCurrentWidgetCount(panel);
     const panelCapacity = calculatePanelCapacity(panel);
-    return currentWidgetCount >= panelCapacity;
+
+    return currentWidgetCount >  panelCapacity;
   };
 
   const duplicateWidget = async () => {
     try {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
+      console.log("widget data sent", widget);
+
 
       const duplicatedWidget: Widget = {
         ...widget,
+        Data: {
+          duration: duration,
+          measurements: { ...measurements }
+        },
         id: `${widget.id}-copy-${Date.now()}`,
       };
 
@@ -180,6 +204,8 @@ export const DraggableWidget = ({
         widget: duplicatedWidget,
       };
       if (visualizationSocket) {
+        console.log("duplecate widget", duplicateWidget);
+
         visualizationSocket.emit("v2:viz-widget:add", duplicateWidget);
       }
       setSelectedZone((prevZone: any) => ({
@@ -252,12 +278,7 @@ export const DraggableWidget = ({
   // useClickOutside(chartWidget, () => {
   //   setSelectedChartId(null);
   // });
-  const { isPlaying } = usePlayButtonStore();
 
-  const [canvasDimensions, setCanvasDimensions] = useState({
-    width: 0,
-    height: 0,
-  });
   // Track canvas dimensions
 
   // Current: Two identical useEffect hooks for canvas dimensions
@@ -295,9 +316,8 @@ export const DraggableWidget = ({
       <div
         draggable
         key={widget.id}
-        className={`chart-container ${
+        className={`chart-container ${selectedChartId?.id === widget.id && !isPlaying && "activeChart"
-          selectedChartId?.id === widget.id && !isPlaying && "activeChart"
+          }`}
-        }`}
         onPointerDown={handlePointerDown}
         onDragStart={handleDragStart}
         onDragEnter={handleDragEnter}
@@ -323,10 +343,9 @@ export const DraggableWidget = ({
         {openKebabId === widget.id && (
           <div className="kebab-options" ref={widgetRef}>
             <div
-              className={`edit btn ${
+              className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
-                isPanelFull(widget.panel) ? "btn-blur" : ""
+                }`}
-              }`}
+              onClick={duplicateWidget}
-              onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
             >
               <div className="icon">
                 <DublicateIcon />

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

@@ -106,9 +106,8 @@ const Panel: React.FC<PanelProps> = ({
         case "bottom":
           return {
             minWidth: "170px",
-            width: `calc(100% - ${
+            width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
-              (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+              }px)`,
-            }px)`,
             minHeight: "170px",
             height: `${panelSize}px`,
             left: leftActive ? `${panelSize}px` : "0",
@@ -121,9 +120,8 @@ const Panel: React.FC<PanelProps> = ({
             minWidth: "170px",
             width: `${panelSize}px`,
             minHeight: "170px",
-            height: `calc(100% - ${
+            height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
-              (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+              }px)`,
-            }px)`,
             top: topActive ? `${panelSize}px` : "0",
             bottom: bottomActive ? `${panelSize}px` : "0",
             [side]: "0",
@@ -149,6 +147,7 @@ const Panel: React.FC<PanelProps> = ({
     const currentWidgetsCount = getCurrentWidgetCount(panel);
     const maxCapacity = calculatePanelCapacity(panel);
 
+
     if (currentWidgetsCount < maxCapacity) {
       addWidgetToPanel(draggedAsset, panel);
     }
@@ -282,9 +281,8 @@ const Panel: React.FC<PanelProps> = ({
         <div
           key={side}
           id="panel-wrapper"
-          className={`panel ${side}-panel absolute ${
+          className={`panel ${side}-panel absolute ${hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
-            hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
+            }`}
-          }`}
           style={getPanelStyle(side)}
           onDrop={(e) => handleDrop(e, side)}
           onDragOver={(e) => e.preventDefault()}
@@ -301,7 +299,7 @@ const Panel: React.FC<PanelProps> = ({
             style={{
               pointerEvents:
                 selectedZone.lockedPanels.includes(side) ||
-                hiddenPanels[selectedZone.zoneId]?.includes(side)
+                  hiddenPanels[selectedZone.zoneId]?.includes(side)
                   ? "none"
                   : "auto",
               opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",