diff --git a/superset-frontend/src/explore/actions/exploreActions.ts b/superset-frontend/src/explore/actions/exploreActions.ts index 9d53f7506d5..4923ae3174d 100644 --- a/superset-frontend/src/explore/actions/exploreActions.ts +++ b/superset-frontend/src/explore/actions/exploreActions.ts @@ -61,11 +61,6 @@ export function fetchDatasourcesSucceeded() { return { type: FETCH_DATASOURCES_SUCCEEDED }; } -export const RESET_FIELDS = 'RESET_FIELDS'; -export function resetControls() { - return { type: RESET_FIELDS }; -} - export const TOGGLE_FAVE_STAR = 'TOGGLE_FAVE_STAR'; export function toggleFaveStar(isStarred: boolean) { return { type: TOGGLE_FAVE_STAR, isStarred }; @@ -154,7 +149,6 @@ export const exploreActions = { setDatasources, fetchDatasourcesStarted, fetchDatasourcesSucceeded, - resetControls, toggleFaveStar, fetchFaveStar, saveFaveStar, diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx index 6b86b305d2b..6962dfa2861 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx +++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx @@ -211,12 +211,8 @@ const ExploreChartPanel = props => { }, [calcSectionHeight, chartWidth, props, splitSizes]); const panelBody = useMemo( - () => ( -
- {renderChart()} -
- ), - [chartRef, renderChart], + () =>
{renderChart()}
, + [renderChart], ); const standaloneChartBody = useMemo( @@ -256,7 +252,7 @@ const ExploreChartPanel = props => { }); return ( - +
{header}
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index 9c605d43032..bb508121e54 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/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 diff --git a/superset-frontend/src/explore/reducers/exploreReducer.js b/superset-frontend/src/explore/reducers/exploreReducer.js index e8167f956c1..30767273897 100644 --- a/superset-frontend/src/explore/reducers/exploreReducer.js +++ b/superset-frontend/src/explore/reducers/exploreReducer.js @@ -121,12 +121,25 @@ export default function exploreReducer(state = {}, action) { }); const hasErrors = errors && errors.length > 0; + const currentControlsState = + action.controlName === 'viz_type' && + action.value !== state.controls.viz_type.value + ? // rebuild the full control state if switching viz type + getControlsState( + state, + getFormDataFromControls({ + ...state.controls, + viz_type: control, + }), + ) + : state.controls; + return { ...state, form_data: new_form_data, triggerRender: control.renderTrigger && !hasErrors, controls: { - ...state.controls, + ...currentControlsState, [action.controlName]: { ...control, validationErrors: errors, @@ -146,15 +159,6 @@ export default function exploreReducer(state = {}, action) { sliceName: action.sliceName, }; }, - [actions.RESET_FIELDS]() { - return { - ...state, - controls: getControlsState( - state, - getFormDataFromControls(state.controls), - ), - }; - }, [actions.CREATE_NEW_SLICE]() { return { ...state,