[superset] 12/17: fix(explore): only refresh data panel on relevant changes (#16699)

[vi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

villebro pushed a commit to branch 1.3
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 693b428228432a0a2bd80558ea89dd0560429a7f
Author: Ville Brofeldt <33...@users.noreply.github.com>
AuthorDate: Tue Sep 14 15:58:05 2021 +0300

    fix(explore): only refresh data panel on relevant changes (#16699)
    
    * fix(explore): only refresh data panel on relevant changes
    
    * add comment and supress warning
    
    (cherry picked from commit c99cacbdd2e73044a2f55b957bd85aada8b7c775)
---
 .../src/explore/components/DataTablesPane/index.tsx   |  2 +-
 .../src/explore/components/ExploreChartPanel.jsx      | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/explore/components/DataTablesPane/index.tsx b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
index 98792c8..0cb68d3 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/index.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
@@ -221,7 +221,7 @@ export const DataTablesPane = ({
       ...prevState,
       [RESULT_TYPES.samples]: true,
     }));
-  }, [queryFormData.adhoc_filters, queryFormData.datasource]);
+  }, [queryFormData?.adhoc_filters, queryFormData?.datasource]);
 
   useEffect(() => {
     if (queriesResponse && chartStatus === 'success') {
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
index c22285f..6ef3c93 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -152,6 +152,7 @@ const ExploreChartPanel = props => {
     },
     [slice],
   );
+
   useEffect(() => {
     updateQueryContext();
   }, [updateQueryContext]);
@@ -257,6 +258,22 @@ const ExploreChartPanel = props => {
     [chartPanelRef, renderChart],
   );
 
+  const [queryFormData, setQueryFormData] = useState(
+    props.chart.latestQueryFormData,
+  );
+
+  useEffect(() => {
+    // only update when `latestQueryFormData` changes AND `triggerRender`
+    // is false. No update should be done when only `triggerRender` changes,
+    // as this can trigger a query downstream based on incomplete form data.
+    // (`latestQueryFormData` is only updated when a a valid request has been
+    // triggered).
+    if (!props.triggerRender) {
+      setQueryFormData(props.chart.latestQueryFormData);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.chart.latestQueryFormData]);
+
   if (props.standalone) {
     // dom manipulation hack to get rid of the boostrap theme's body background
     const standaloneClass = 'background-transparent';
@@ -309,7 +326,7 @@ const ExploreChartPanel = props => {
           {panelBody}
           <DataTablesPane
             ownState={props.ownState}
-            queryFormData={props.chart.latestQueryFormData}
+            queryFormData={queryFormData}
             tableSectionHeight={tableSectionHeight}
             onCollapseChange={onCollapseChange}
             chartStatus={props.chart.chartStatus}