From 71e487dc0c7b93c31a9a2638b63407d52b81a605 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Thu, 2 Nov 2023 20:32:01 +0530
Subject: [PATCH] fix: full view chart label and checkbox issue (#3879)

---
 .../GridCard/FullView/TableRender/GetLabel.tsx           | 4 ++--
 .../FullView/TableRender/GraphManagerColumns.tsx         | 4 ++--
 .../GridCardLayout/GridCard/WidgetGraphComponent.tsx     | 9 +++++----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GetLabel.tsx b/frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GetLabel.tsx
index 7fc5da2ab7..4ce97d8af2 100644
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GetLabel.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GetLabel.tsx
@@ -6,10 +6,10 @@ import Label from './Label';
 export const getLabel = (
 	labelClickedHandler: (labelIndex: number) => void,
 ): ColumnType<DataSetProps> => ({
-	render: (label: string, _, index): JSX.Element => (
+	render: (label, record): JSX.Element => (
 		<Label
 			label={label}
-			labelIndex={index}
+			labelIndex={record.index}
 			labelClickedHandler={labelClickedHandler}
 		/>
 	),
diff --git a/frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns.tsx b/frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns.tsx
index 3702a9b3e0..ab1d648d43 100644
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns.tsx
@@ -20,10 +20,10 @@ export const getGraphManagerTableColumns = ({
 		width: 50,
 		dataIndex: ColumnsKeyAndDataIndex.Index,
 		key: ColumnsKeyAndDataIndex.Index,
-		render: (_: string, __: DataSetProps, index: number): JSX.Element => (
+		render: (_: string, record: DataSetProps): JSX.Element => (
 			<CustomCheckBox
 				data={data}
-				index={index}
+				index={record.index}
 				checkBoxOnChangeHandler={checkBoxOnChangeHandler}
 				graphVisibilityState={graphVisibilityState}
 			/>
diff --git a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
index a9e669c213..6ab2bb32a2 100644
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -59,20 +59,21 @@ function WidgetGraphComponent({
 		[data, name],
 	);
 
+	const [graphsVisibilityStates, setGraphsVisibilityStates] = useState<
+		boolean[]
+	>(localStoredVisibilityStates);
+
 	useEffect(() => {
 		if (!lineChartRef.current) return;
 
 		localStoredVisibilityStates.forEach((state, index) => {
 			lineChartRef.current?.toggleGraph(index, state);
 		});
+		setGraphsVisibilityStates(localStoredVisibilityStates);
 	}, [localStoredVisibilityStates]);
 
 	const { setLayouts, selectedDashboard, setSelectedDashboard } = useDashboard();
 
-	const [graphsVisibilityStates, setGraphsVisibilityStates] = useState<
-		boolean[]
-	>(localStoredVisibilityStates);
-
 	const { featureResponse } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
 	);