diff --git a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
index 4ee4c54e93..20f493f666 100644
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
@@ -18,13 +18,14 @@ import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariab
import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { GlobalReducer } from 'types/reducer/globalTime';
import uPlot from 'uplot';
import { getTimeRange } from 'utils/getTimeRange';
+import { getGraphVisibilityStateOnDataChange } from '../utils';
import { PANEL_TYPES_VS_FULL_VIEW_TABLE } from './contants';
import GraphManager from './GraphManager';
// import GraphManager from './GraphManager';
@@ -36,13 +37,14 @@ function FullView({
fullViewOptions = true,
onClickHandler,
name,
+ originalName,
yAxisUnit,
+ options,
onDragSelect,
isDependedDataLoaded = false,
- graphsVisibilityStates,
onToggleModelHandler,
parentChartRef,
- setGraphsVisibilityStates,
+ parentGraphVisibilityState,
}: FullViewProps): JSX.Element {
const { selectedTime: globalSelectedTime } = useSelector<
AppState,
@@ -55,6 +57,20 @@ function FullView({
const { selectedDashboard, isDashboardLocked } = useDashboard();
+ const { graphVisibilityStates: localStoredVisibilityStates } = useMemo(
+ () =>
+ getGraphVisibilityStateOnDataChange({
+ options,
+ isExpandedName: false,
+ name: originalName,
+ }),
+ [options, originalName],
+ );
+
+ const [graphsVisibilityStates, setGraphsVisibilityStates] = useState(
+ localStoredVisibilityStates,
+ );
+
const getSelectedTime = useCallback(
() =>
timeItems.find((e) => e.enum === (widget?.timePreferance || 'GLOBAL_TIME')),
@@ -144,9 +160,9 @@ function FullView({
useEffect(() => {
graphsVisibilityStates?.forEach((e, i) => {
fullViewChartRef?.current?.toggleGraph(i, e);
- parentChartRef?.current?.toggleGraph(i, e);
});
- }, [graphsVisibilityStates, parentChartRef]);
+ parentGraphVisibilityState(graphsVisibilityStates);
+ }, [graphsVisibilityStates, parentGraphVisibilityState]);
if (response.isFetching) {
return ;
@@ -206,7 +222,7 @@ function FullView({
{canModifyChart && chartOptions && !isDashboardLocked && (
void;
isDependedDataLoaded?: boolean;
- graphsVisibilityStates?: boolean[];
onToggleModelHandler?: GraphManagerProps['onToggleModelHandler'];
- setGraphsVisibilityStates: Dispatch>;
parentChartRef: GraphManagerProps['lineChartRef'];
+ parentGraphVisibilityState: Dispatch>;
}
export interface GraphManagerProps extends UplotProps {
@@ -64,8 +65,8 @@ export interface GraphManagerProps extends UplotProps {
yAxisUnit?: string;
onToggleModelHandler?: () => void;
options: uPlot.Options;
- setGraphsVisibilityStates: FullViewProps['setGraphsVisibilityStates'];
- graphsVisibilityStates: FullViewProps['graphsVisibilityStates'];
+ graphsVisibilityStates?: boolean[];
+ setGraphsVisibilityStates: Dispatch>;
lineChartRef?: MutableRefObject;
parentChartRef?: MutableRefObject;
}
diff --git a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
index 34288a0b19..f77f714b26 100644
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -17,7 +17,6 @@ import {
SetStateAction,
useCallback,
useEffect,
- useMemo,
useRef,
useState,
} from 'react';
@@ -39,14 +38,15 @@ function WidgetGraphComponent({
queryResponse,
errorMessage,
name,
- onClickHandler,
threshold,
headerMenuList,
isWarning,
data,
options,
+ graphVisibiltyState,
+ onClickHandler,
onDragSelect,
- graphVisibility,
+ setGraphVisibility,
}: WidgetGraphComponentProps): JSX.Element {
const [deleteModal, setDeleteModal] = useState(false);
const [hovered, setHovered] = useState(false);
@@ -60,33 +60,28 @@ function WidgetGraphComponent({
const lineChartRef = useRef();
const graphRef = useRef(null);
- const { graphVisibilityStates: localStoredVisibilityStates } = useMemo(
- () =>
- getGraphVisibilityStateOnDataChange({
+ useEffect(() => {
+ if (queryResponse.isSuccess) {
+ const {
+ graphVisibilityStates: localStoredVisibilityState,
+ } = getGraphVisibilityStateOnDataChange({
options,
- isExpandedName: true,
+ isExpandedName: false,
name,
- }),
- [options, name],
- );
-
- const [graphsVisibilityStates, setGraphsVisibilityStates] = useState<
- boolean[]
- >(localStoredVisibilityStates);
+ });
+ setGraphVisibility(localStoredVisibilityState);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [queryResponse.isSuccess]);
useEffect(() => {
- setGraphsVisibilityStates(localStoredVisibilityStates);
if (!lineChartRef.current) return;
- localStoredVisibilityStates.forEach((state, index) => {
+ graphVisibiltyState.forEach((state, index) => {
lineChartRef.current?.toggleGraph(index, state);
});
- setGraphsVisibilityStates(localStoredVisibilityStates);
- }, [localStoredVisibilityStates]);
-
- graphVisibility?.forEach((state, index) => {
- lineChartRef.current?.toggleGraph(index, state);
- });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
const { setLayouts, selectedDashboard, setSelectedDashboard } = useDashboard();
@@ -279,13 +274,14 @@ function WidgetGraphComponent({
>
diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx
index c1c1f99c93..c5dd100a03 100644
--- a/frontend/src/container/GridCardLayout/GridCard/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/index.tsx
@@ -167,13 +167,6 @@ function GridCardGraph({
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({
@@ -227,7 +220,8 @@ function GridCardGraph({
threshold={threshold}
headerMenuList={menuList}
onClickHandler={onClickHandler}
- graphVisibility={graphVisibility}
+ graphVisibiltyState={graphVisibility}
+ setGraphVisibility={setGraphVisibility}
/>
)}
diff --git a/frontend/src/container/GridCardLayout/GridCard/types.ts b/frontend/src/container/GridCardLayout/GridCard/types.ts
index 2298b2b070..d71b529207 100644
--- a/frontend/src/container/GridCardLayout/GridCard/types.ts
+++ b/frontend/src/container/GridCardLayout/GridCard/types.ts
@@ -1,7 +1,7 @@
import { ToggleGraphProps } from 'components/Graph/types';
import { UplotProps } from 'components/Uplot/Uplot';
import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { MutableRefObject, ReactNode } from 'react';
+import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
import { UseQueryResult } from 'react-query';
import { ErrorResponse, SuccessResponse } from 'types/api';
import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
@@ -28,7 +28,8 @@ export interface WidgetGraphComponentProps extends UplotProps {
threshold?: ReactNode;
headerMenuList: MenuItemKeys[];
isWarning: boolean;
- graphVisibility?: boolean[];
+ graphVisibiltyState: boolean[];
+ setGraphVisibility: Dispatch>;
}
export interface GridCardGraphProps {