fix: Fix switching viz type to and from Filter box (#13094)

* Fix switching viz_type to and from filter_box

* Remove RESET_FIELDS action

* Restore removed log

* Refactor reducer logic

superset-frontend/src/explore/components/ExploreChartPanel.jsx

@@ -211,12 +211,8 @@ const ExploreChartPanel = props => {
   }, [calcSectionHeight, chartWidth, props, splitSizes]);
 
   const panelBody = useMemo(
-    () => (
-      <div className="panel-body" ref={chartRef}>
-        {renderChart()}
-      </div>
-    ),
-    [chartRef, renderChart],
+    () => <div className="panel-body">{renderChart()}</div>,
+    [renderChart],
   );
 
   const standaloneChartBody = useMemo(
@@ -256,7 +252,7 @@ const ExploreChartPanel = props => {
   });
 
   return (
-    <Styles className="panel panel-default chart-container">
+    <Styles className="panel panel-default chart-container" ref={chartRef}>
       <div className="panel-heading" ref={headerRef}>
         {header}
       </div>

superset-frontend/src/explore/components/ExploreViewContainer.jsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 /* eslint camelcase: 0 */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -165,7 +165,6 @@ function ExploreViewContainer(props) {
   const windowSize = useWindowSize();
 
   const [showingModal, setShowingModal] = useState(false);
-  const [chartIsStale, setChartIsStale] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   const width = `${windowSize.width}px`;
@@ -226,7 +225,6 @@ function ExploreViewContainer(props) {
     props.actions.removeControlPanelAlert();
     props.actions.triggerQuery(true, props.chart.id);
 
-    setChartIsStale(false);
     addHistory();
   }
 
@@ -301,9 +299,6 @@ function ExploreViewContainer(props) {
   // effect to run when controls change
   useEffect(() => {
     if (previousControls) {
-      if (props.controls.viz_type.value !== previousControls.viz_type.value) {
-        props.actions.resetControls();
-      }
       if (
         props.controls.datasource &&
         (previousControls.datasource == null ||
@@ -334,19 +329,32 @@ function ExploreViewContainer(props) {
         props.actions.renderTriggered(new Date().getTime(), props.chart.id);
         addHistory();
       }
+    }
+  }, [props.controls]);
 
-      // this should be handled inside actions too
-      const hasQueryControlChanged = changedControlKeys.some(
+  const chartIsStale = useMemo(() => {
+    if (previousControls) {
+      const changedControlKeys = Object.keys(props.controls).filter(
+        key =>
+          typeof previousControls[key] !== 'undefined' &&
+          !areObjectsEqual(
+            props.controls[key].value,
+            previousControls[key].value,
+          ),
+      );
+
+      return changedControlKeys.some(
         key =>
           !props.controls[key].renderTrigger &&
           !props.controls[key].dontRefreshOnChange,
       );
-      if (hasQueryControlChanged) {
-        props.actions.logEvent(LOG_ACTIONS_CHANGE_EXPLORE_CONTROLS);
-        setChartIsStale(true);
-      }
     }
-  }, [props.controls]);
+    return false;
+  }, [previousControls, props.controls]);
+
+  if (chartIsStale) {
+    props.actions.logEvent(LOG_ACTIONS_CHANGE_EXPLORE_CONTROLS);
+  }
 
   function renderErrorMessage() {
     // Returns an error message as a node if any errors are in the store