From 46559014f753a711daec9b102d8a18f1b7930ada Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Thu, 18 Jan 2024 23:22:30 +0530
Subject: [PATCH] [feat]: persistence of graph toggle on variable change
 (#4316)

* feat: persistence of graph toggle on variable change

* fix: reverted the previous changes

* chore: full view global time selector to right
---
 .../FullViewHeader/FullViewHeader.styles.scss    |  2 +-
 .../GridCard/WidgetGraphComponent.tsx            |  5 +++++
 .../container/GridCardLayout/GridCard/index.tsx  | 16 ++++++++++++++++
 .../container/GridCardLayout/GridCard/types.ts   |  1 +
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/frontend/src/container/FullViewHeader/FullViewHeader.styles.scss b/frontend/src/container/FullViewHeader/FullViewHeader.styles.scss
index b894ea4f12..98f2897902 100644
--- a/frontend/src/container/FullViewHeader/FullViewHeader.styles.scss
+++ b/frontend/src/container/FullViewHeader/FullViewHeader.styles.scss
@@ -1,6 +1,6 @@
 .full-view-header-container {
 	display: flex;
-	justify-content: center;
+	justify-content: flex-end;
 	align-items: center;
 	padding: 24px 0;
 
diff --git a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
index 4fdbc05be7..34288a0b19 100644
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -46,6 +46,7 @@ function WidgetGraphComponent({
 	data,
 	options,
 	onDragSelect,
+	graphVisibility,
 }: WidgetGraphComponentProps): JSX.Element {
 	const [deleteModal, setDeleteModal] = useState(false);
 	const [hovered, setHovered] = useState(false);
@@ -83,6 +84,10 @@ function WidgetGraphComponent({
 		setGraphsVisibilityStates(localStoredVisibilityStates);
 	}, [localStoredVisibilityStates]);
 
+	graphVisibility?.forEach((state, index) => {
+		lineChartRef.current?.toggleGraph(index, state);
+	});
+
 	const { setLayouts, selectedDashboard, setSelectedDashboard } = useDashboard();
 
 	const featureResponse = useSelector<AppState, AppReducer['featureResponse']>(
diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx
index cf8d106224..c1c1f99c93 100644
--- a/frontend/src/container/GridCardLayout/GridCard/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/index.tsx
@@ -163,6 +163,17 @@ function GridCardGraph({
 			? headerMenuList.filter((menu) => menu !== MenuItemKeys.CreateAlerts)
 			: headerMenuList;
 
+	const [graphVisibility, setGraphVisibility] = useState<boolean[]>(
+		Array(queryResponse.data?.payload?.data.result.length || 0).fill(true),
+	);
+
+	useEffect(() => {
+		setGraphVisibility([
+			true,
+			...Array(queryResponse.data?.payload?.data.result.length).fill(true),
+		]);
+	}, [queryResponse.data?.payload?.data.result.length]);
+
 	const options = useMemo(
 		() =>
 			getUPlotChartOptions({
@@ -178,6 +189,8 @@ function GridCardGraph({
 				maxTimeScale,
 				softMax: widget.softMax === undefined ? null : widget.softMax,
 				softMin: widget.softMin === undefined ? null : widget.softMin,
+				graphsVisibilityStates: graphVisibility,
+				setGraphsVisibilityStates: setGraphVisibility,
 			}),
 		[
 			widget?.id,
@@ -192,6 +205,8 @@ function GridCardGraph({
 			onClickHandler,
 			minTimeScale,
 			maxTimeScale,
+			graphVisibility,
+			setGraphVisibility,
 		],
 	);
 
@@ -212,6 +227,7 @@ function GridCardGraph({
 					threshold={threshold}
 					headerMenuList={menuList}
 					onClickHandler={onClickHandler}
+					graphVisibility={graphVisibility}
 				/>
 			)}
 		</div>
diff --git a/frontend/src/container/GridCardLayout/GridCard/types.ts b/frontend/src/container/GridCardLayout/GridCard/types.ts
index 3674817291..2298b2b070 100644
--- a/frontend/src/container/GridCardLayout/GridCard/types.ts
+++ b/frontend/src/container/GridCardLayout/GridCard/types.ts
@@ -28,6 +28,7 @@ export interface WidgetGraphComponentProps extends UplotProps {
 	threshold?: ReactNode;
 	headerMenuList: MenuItemKeys[];
 	isWarning: boolean;
+	graphVisibility?: boolean[];
 }
 
 export interface GridCardGraphProps {