From d5637784791c526fe134c89a45e5e3fa53b35435 Mon Sep 17 00:00:00 2001 From: Rajat Dabade Date: Mon, 22 Jan 2024 16:36:03 +0530 Subject: [PATCH] [Fix]: Resolve glitch in graph due to variable and time stamp change (#4406) * refactor: resolve glitch in variable and time stamp change * refactor: removed unwanted code * refactor: updated code --- .../GridCard/FullView/index.tsx | 28 +++++++++--- .../GridCardLayout/GridCard/FullView/types.ts | 9 ++-- .../GridCard/WidgetGraphComponent.tsx | 44 +++++++++---------- .../GridCardLayout/GridCard/index.tsx | 10 +---- .../GridCardLayout/GridCard/types.ts | 5 ++- 5 files changed, 52 insertions(+), 44 deletions(-) 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 {