From 717c7e77a573c9036ef5a13344cd6a5ca10fe424 Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <sagar@signoz.io>
Date: Mon, 26 May 2025 06:14:50 +0530
Subject: [PATCH] feat: added graph visibilty in panel edit mode also

---
 .../WidgetGraph/WidgetGraphs.tsx              | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
index ab4e67120f46..f0007ca2e4c3 100644
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
@@ -1,4 +1,5 @@
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
+import { ToggleGraphProps } from 'components/Graph/types';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { handleGraphClick } from 'container/GridCardLayout/GridCard/utils';
@@ -19,6 +20,7 @@ import {
 	useCallback,
 	useEffect,
 	useRef,
+	useState,
 } from 'react';
 import { UseQueryResult } from 'react-query';
 import { useDispatch } from 'react-redux';
@@ -36,11 +38,35 @@ function WidgetGraph({
 	selectedGraph,
 }: WidgetGraphProps): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
+	const lineChartRef = useRef<ToggleGraphProps>();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
 	const location = useLocation();
 	const { safeNavigate } = useSafeNavigate();
 
+	// Add legend state management similar to dashboard components
+	const [graphVisibility, setGraphVisibility] = useState<boolean[]>(
+		Array(queryResponse.data?.payload?.data?.result?.length || 0).fill(true),
+	);
+
+	// Initialize graph visibility when data changes
+	useEffect(() => {
+		if (queryResponse.data?.payload?.data?.result) {
+			setGraphVisibility(
+				Array(queryResponse.data.payload.data.result.length).fill(true),
+			);
+		}
+	}, [queryResponse.data?.payload?.data?.result]);
+
+	// Apply graph visibility when lineChartRef is available
+	useEffect(() => {
+		if (!lineChartRef.current) return;
+
+		graphVisibility.forEach((state, index) => {
+			lineChartRef.current?.toggleGraph(index, state);
+		});
+	}, [graphVisibility]);
+
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
 		const startTime = searchParams.get(QueryParams.startTime);
@@ -154,6 +180,8 @@ function WidgetGraph({
 				onDragSelect={onDragSelect}
 				selectedGraph={selectedGraph}
 				onClickHandler={graphClickHandler}
+				graphVisibility={graphVisibility}
+				setGraphVisibility={setGraphVisibility}
 			/>
 		</div>
 	);