From 9618f0786ce6879ef5c221e41ee9717efa435066 Mon Sep 17 00:00:00 2001
From: Grace Guo <grace.guo@airbnb.com>
Date: Mon, 11 Jan 2021 11:37:54 -0800
Subject: [PATCH] [explore] Prevent duplicated query by data table (#12404)

---
 .../src/explore/components/DataTablesPane.tsx | 26 ++++++++++++++-----
 .../explore/components/ExploreChartPanel.jsx  |  1 +
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/explore/components/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane.tsx
index e0a7445cc3e..11536dca753 100644
--- a/superset-frontend/src/explore/components/DataTablesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane.tsx
@@ -73,16 +73,21 @@ export const DataTablesPane = ({
   queryFormData,
   tableSectionHeight,
   onCollapseChange,
+  chartStatus,
 }: {
   queryFormData: Record<string, any>;
   tableSectionHeight: number;
   onCollapseChange: (openPanelName: string) => void;
+  chartStatus: string;
 }) => {
   const [data, setData] = useState<{
     [RESULT_TYPES.results]?: Record<string, any>[];
     [RESULT_TYPES.samples]?: Record<string, any>[];
   }>(NULLISH_RESULTS_STATE);
-  const [isLoading, setIsLoading] = useState(NULLISH_RESULTS_STATE);
+  const [isLoading, setIsLoading] = useState({
+    [RESULT_TYPES.results]: true,
+    [RESULT_TYPES.samples]: true,
+  });
   const [error, setError] = useState(NULLISH_RESULTS_STATE);
   const [filterText, setFilterText] = useState('');
   const [activeTabKey, setActiveTabKey] = useState<string>(
@@ -150,11 +155,18 @@ export const DataTablesPane = ({
 
   useEffect(() => {
     if (panelOpen && isRequestPending[RESULT_TYPES.results]) {
-      setIsRequestPending(prevState => ({
-        ...prevState,
-        [RESULT_TYPES.results]: false,
-      }));
-      getData(RESULT_TYPES.results);
+      if (chartStatus === 'loading') {
+        setIsLoading(prevIsLoading => ({
+          ...prevIsLoading,
+          [RESULT_TYPES.results]: true,
+        }));
+      } else {
+        setIsRequestPending(prevState => ({
+          ...prevState,
+          [RESULT_TYPES.results]: false,
+        }));
+        getData(RESULT_TYPES.results);
+      }
     }
     if (
       panelOpen &&
@@ -167,7 +179,7 @@ export const DataTablesPane = ({
       }));
       getData(RESULT_TYPES.samples);
     }
-  }, [panelOpen, isRequestPending, getData, activeTabKey]);
+  }, [panelOpen, isRequestPending, getData, activeTabKey, chartStatus]);
 
   const filteredData = {
     [RESULT_TYPES.results]: useFilteredTableData(
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
index a1e57a8dbb3..75fde2f72db 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -248,6 +248,7 @@ const ExploreChartPanel = props => {
             queryFormData={props.chart.latestQueryFormData}
             tableSectionHeight={tableSectionHeight}
             onCollapseChange={onCollapseChange}
+            chartStatus={props.chart.chartStatus}
           />
         </Split>
       )}