From 28ec96788c91062b7e5d3a503f0123e35cfceb8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Thu, 29 Apr 2021 15:02:14 +0200
Subject: [PATCH] Explore: Fix refreshing the graph when data changes (#33511)

* Track data structure changes in ExploreGraphNGPanel

* Use usePrevious hook

* Remove unused import
---
 .../features/explore/ExploreGraphNGPanel.tsx  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/public/app/features/explore/ExploreGraphNGPanel.tsx b/public/app/features/explore/ExploreGraphNGPanel.tsx
index fd746d8777d..f231930223f 100644
--- a/public/app/features/explore/ExploreGraphNGPanel.tsx
+++ b/public/app/features/explore/ExploreGraphNGPanel.tsx
@@ -1,6 +1,8 @@
 import {
   AbsoluteTimeRange,
   applyFieldOverrides,
+  compareArrayValues,
+  compareDataFrameStructures,
   createFieldConfigRegistry,
   DataFrame,
   dateTime,
@@ -28,9 +30,10 @@ import { hideSeriesConfigFactory } from 'app/plugins/panel/timeseries/overrides/
 import { ContextMenuPlugin } from 'app/plugins/panel/timeseries/plugins/ContextMenuPlugin';
 import { ExemplarsPlugin } from 'app/plugins/panel/timeseries/plugins/ExemplarsPlugin';
 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 { getFieldLinksForExplore } from './utils/links';
+import { usePrevious } from 'react-use';
 
 const MAX_NUMBER_OF_TIME_SERIES = 20;
 
@@ -57,7 +60,17 @@ export function ExploreGraphNGPanel({
 }: Props) {
   const theme = useTheme2();
   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>({
     defaults: {
       color: {
@@ -96,7 +109,7 @@ export function ExploreGraphNGPanel({
 
   const onLegendClick = useCallback(
     (event: GraphNGLegendEvent) => {
-      setStructureRev((r) => r + 1);
+      setBaseStructureRev((r) => r + 1);
       setFieldConfig(hideSeriesConfigFactory(event, fieldConfig, data));
     },
     [fieldConfig, data]