IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-12 00:25:46 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Fix refreshing the graph when data changes (#33511)

Browse Source 
* Track data structure changes in ExploreGraphNGPanel

* Use usePrevious hook

* Remove unused import
This commit is contained in:
Piotr Jamróz 2021-04-29 15:02:14 +02:00 committed by GitHub
parent 8dea72a763
commit 28ec96788c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/app/features/explore/ExploreGraphNGPanel.tsx
View File

@ -1,6 +1,8 @@
import { import {
AbsoluteTimeRange, AbsoluteTimeRange,
applyFieldOverrides, applyFieldOverrides,
compareArrayValues,
compareDataFrameStructures,
createFieldConfigRegistry, createFieldConfigRegistry,
DataFrame, DataFrame,
dateTime, dateTime,
@ -28,9 +30,10 @@ import { hideSeriesConfigFactory } from 'app/plugins/panel/timeseries/overrides/
import { ContextMenuPlugin } from 'app/plugins/panel/timeseries/plugins/ContextMenuPlugin'; import { ContextMenuPlugin } from 'app/plugins/panel/timeseries/plugins/ContextMenuPlugin';
import { ExemplarsPlugin } from 'app/plugins/panel/timeseries/plugins/ExemplarsPlugin'; import { ExemplarsPlugin } from 'app/plugins/panel/timeseries/plugins/ExemplarsPlugin';
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React, { useCallback, useMemo, useState } from 'react'; import React, { useCallback, useMemo, useState, useRef } from 'react';
import { splitOpen } from './state/main'; import { splitOpen } from './state/main';
import { getFieldLinksForExplore } from './utils/links'; import { getFieldLinksForExplore } from './utils/links';
import { usePrevious } from 'react-use';
const MAX_NUMBER_OF_TIME_SERIES = 20; const MAX_NUMBER_OF_TIME_SERIES = 20;
@ -57,7 +60,17 @@ export function ExploreGraphNGPanel({
}: Props) { }: Props) {
const theme = useTheme2(); const theme = useTheme2();
const [showAllTimeSeries, setShowAllTimeSeries] = useState(false); const [showAllTimeSeries, setShowAllTimeSeries] = useState(false);
const [structureRev, setStructureRev] = useState(1); const [baseStructureRev, setBaseStructureRev] = useState(1);
const previousData = usePrevious(data);
const structureChangesRef = useRef(0);
if (data && previousData && !compareArrayValues(previousData, data, compareDataFrameStructures)) {
structureChangesRef.current++;
}
const structureRev = baseStructureRev + structureChangesRef.current;
const [fieldConfig, setFieldConfig] = useState<FieldConfigSource>({ const [fieldConfig, setFieldConfig] = useState<FieldConfigSource>({
defaults: { defaults: {
color: { color: {
@ -96,7 +109,7 @@ export function ExploreGraphNGPanel({
const onLegendClick = useCallback( const onLegendClick = useCallback(
(event: GraphNGLegendEvent) => { (event: GraphNGLegendEvent) => {
setStructureRev((r) => r + 1); setBaseStructureRev((r) => r + 1);
setFieldConfig(hideSeriesConfigFactory(event, fieldConfig, data)); setFieldConfig(hideSeriesConfigFactory(event, fieldConfig, data));
}, },
[fieldConfig, data] [fieldConfig, data]