feat: dashboard layout is updated from widgets (#1207)

frontend/src/container/GridGraphLayout/index.tsx

@@ -74,24 +74,31 @@ function GridGraph(): JSX.Element {
 				};
 			});
 		}
-		return data.layout
+
-			.filter((_, index) => widgets[index])
+		return widgets.map((widget, index) => {
-			.map((e, index) => ({
+			const allLayouts = data?.layout;
-				...e,
+			const lastLayout = (data?.layout || [])[(allLayouts?.length || 0) - 1];
-				Component: (): JSX.Element => {
+
-					if (widgets[index]) {
+			const currentLayout = (allLayouts || [])[index] || {
-						return (
+				h: lastLayout.h,
-							<Graph
+				i: (lastLayout.i + 1).toString(),
-								name={e.i + index}
+				w: lastLayout.w,
-								isDeleted={isDeleted}
+				x: (lastLayout.x % 2) * 6,
-								widget={widgets[index]}
+				y: lastLayout.y,
-								yAxisUnit={widgets[index].yAxisUnit}
+			};
-							/>
+
-						);
+			return {
-					}
+				...currentLayout,
-					return <div />;
+				Component: (): JSX.Element => (
-				},
+					<Graph
-			}));
+						name={widget.id + index}
+						isDeleted={isDeleted}
+						widget={widget}
+						yAxisUnit={widget.yAxisUnit}
+					/>
+				),
+			};
+		});
 	}, [widgets, data.layout]);
 
 	useEffect(() => {
@@ -217,6 +224,8 @@ function GridGraph(): JSX.Element {
 		return <Spinner height="40vh" size="large" tip="Loading..." />;
 	}
 
+	console.log({ layouts });
+
 	return (
 		<>
 			{saveLayout && (
@@ -255,7 +264,7 @@ function GridGraph(): JSX.Element {
 						<CardContainer
 							isQueryType={isQueryType}
 							isDarkMode={isDarkMode}
-							key={rest.i}
+							key={rest.i + JSON.stringify(widget)}
 							data-grid={rest}
 						>
 							<Card isDarkMode={isDarkMode} isQueryType={isQueryType}>