[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

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;
 

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']>(

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>

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 {