From 1cf7703f07075d33a71f742ec90f450d38093e95 Mon Sep 17 00:00:00 2001 From: gabriel Date: Thu, 10 Apr 2025 17:41:25 +0530 Subject: [PATCH] fixed bug and added functionality to duplicate with iot data selection --- app/.env | 4 +- .../IotInputCards/BarChartInput.tsx | 9 +++ .../ui/componets/DraggableWidget.tsx | 65 ++++++++++++------- app/src/components/ui/componets/Panel.tsx | 18 +++-- 4 files changed, 61 insertions(+), 35 deletions(-) diff --git a/app/.env b/app/.env index c50d174..47176f6 100644 --- a/app/.env +++ b/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 diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx index e5debde..7d55396 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx +++ b/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]); diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx index fb20169..0ebc224 100644 --- a/app/src/components/ui/componets/DraggableWidget.tsx +++ b/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_HEIGHT = 150; - const FALLBACK_HORIZONTAL_CAPACITY = 5; - const FALLBACK_VERTICAL_CAPACITY = 3; + const CHART_WIDTH = panelSize; + const CHART_HEIGHT = panelSize; const dimensions = panelDimensions[panel]; if (!dimensions) { - return panel === "top" || panel === "bottom" - ? FALLBACK_HORIZONTAL_CAPACITY - : FALLBACK_VERTICAL_CAPACITY; + return panel === "top" || panel === "bottom" ? 5 : 3; // Fallback capacities } return panel === "top" || panel === "bottom" - ? Math.floor(dimensions.width / CHART_WIDTH) - : Math.floor(dimensions.height / CHART_HEIGHT); + ? Math.max(1, Math.floor(dimensions.width / CHART_WIDTH)) + : 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 = ({
diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx index 30136e5..4d64405 100644 --- a/app/src/components/ui/componets/Panel.tsx +++ b/app/src/components/ui/componets/Panel.tsx @@ -106,9 +106,8 @@ const Panel: React.FC = ({ case "bottom": return { minWidth: "170px", - width: `calc(100% - ${ - (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0) - }px)`, + width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0) + }px)`, minHeight: "170px", height: `${panelSize}px`, left: leftActive ? `${panelSize}px` : "0", @@ -121,9 +120,8 @@ const Panel: React.FC = ({ minWidth: "170px", width: `${panelSize}px`, minHeight: "170px", - height: `calc(100% - ${ - (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0) - }px)`, + height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0) + }px)`, top: topActive ? `${panelSize}px` : "0", bottom: bottomActive ? `${panelSize}px` : "0", [side]: "0", @@ -149,6 +147,7 @@ const Panel: React.FC = ({ const currentWidgetsCount = getCurrentWidgetCount(panel); const maxCapacity = calculatePanelCapacity(panel); + if (currentWidgetsCount < maxCapacity) { addWidgetToPanel(draggedAsset, panel); } @@ -282,9 +281,8 @@ const Panel: React.FC = ({
handleDrop(e, side)} onDragOver={(e) => e.preventDefault()} @@ -301,7 +299,7 @@ const Panel: React.FC = ({ 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",