refactor(self-trigger): Split native filters state

superset-frontend/package.json

@@ -65,34 +65,34 @@
     "@babel/runtime-corejs3": "^7.12.5",
     "@data-ui/sparkline": "^0.0.84",
     "@emotion/core": "^10.0.35",
-    "@superset-ui/chart-controls": "^0.17.12",
-    "@superset-ui/core": "^0.17.11",
-    "@superset-ui/legacy-plugin-chart-calendar": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-chord": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-country-map": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-event-flow": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-force-directed": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-heatmap": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-histogram": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-horizon": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-map-box": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-partition": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-rose": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-sankey": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-sunburst": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-treemap": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-world-map": "^0.17.12",
-    "@superset-ui/legacy-preset-chart-big-number": "^0.17.12",
+    "@superset-ui/chart-controls": "^0.17.13",
+    "@superset-ui/core": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-calendar": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-chord": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-country-map": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-event-flow": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-force-directed": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-heatmap": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-histogram": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-horizon": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-map-box": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-partition": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-rose": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-sankey": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-sunburst": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-treemap": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-world-map": "^0.17.13",
+    "@superset-ui/legacy-preset-chart-big-number": "^0.17.13",
     "@superset-ui/legacy-preset-chart-deckgl": "^0.4.6",
-    "@superset-ui/legacy-preset-chart-nvd3": "^0.17.12",
-    "@superset-ui/plugin-chart-echarts": "^0.17.12",
-    "@superset-ui/plugin-chart-table": "^0.17.12",
-    "@superset-ui/plugin-chart-word-cloud": "^0.17.12",
-    "@superset-ui/preset-chart-xy": "^0.17.12",
+    "@superset-ui/legacy-preset-chart-nvd3": "^0.17.13",
+    "@superset-ui/plugin-chart-echarts": "^0.17.13",
+    "@superset-ui/plugin-chart-table": "^0.17.13",
+    "@superset-ui/plugin-chart-word-cloud": "^0.17.13",
+    "@superset-ui/preset-chart-xy": "^0.17.13",
     "@vx/responsive": "^0.0.195",
     "abortcontroller-polyfill": "^1.1.9",
     "antd": "^4.9.4",

superset-frontend/spec/fixtures/mockNativeFilters.ts

@@ -73,27 +73,31 @@ export const nativeFilters: NativeFiltersState = {
     },
   },
   filtersState: {
-    'NATIVE_FILTER-e7Q8zKixx': {
-      id: 'NATIVE_FILTER-e7Q8zKixx',
-      currentState: {
-        value: ['East Asia & Pacific'],
-      },
-      extraFormData: {
-        append_form_data: {
-          filters: [
-            {
-              col: 'region',
-              op: 'IN',
-              val: ['East Asia & Pacific'],
-            },
-          ],
+    crossFilters: {},
+    ownFilters: {},
+    nativeFilters: {
+      'NATIVE_FILTER-e7Q8zKixx': {
+        id: 'NATIVE_FILTER-e7Q8zKixx',
+        extraFormData: {
+          append_form_data: {
+            filters: [
+              {
+                col: 'region',
+                op: 'IN',
+                val: ['East Asia & Pacific'],
+              },
+            ],
+          },
+        },
+        currentState: {
+          value: ['East Asia & Pacific'],
         },
       },
-    },
-    'NATIVE_FILTER-x9QPw0so1': {
-      id: 'NATIVE_FILTER-x9QPw0so1',
-      extraFormData: {},
-      currentState: {},
+      'NATIVE_FILTER-x9QPw0so1': {
+        id: 'NATIVE_FILTER-x9QPw0so1',
+        extraFormData: {},
+        currentState: {},
+      },
     },
   },
 };

superset-frontend/spec/javascripts/dashboard/util/getFormDataWithExtraFilters_spec.ts

@@ -62,10 +62,14 @@ describe('getFormDataWithExtraFilters', () => {
         } as unknown) as Filter,
       },
       filtersState: {
-        [filterId]: {
-          id: filterId,
-          extraFormData: {},
-          currentState: {},
+        crossFilters: {},
+        ownFilters: {},
+        nativeFilters: {
+          [filterId]: {
+            id: filterId,
+            extraFormData: {},
+            currentState: {},
+          },
         },
       },
     },

superset-frontend/src/chart/ChartContainer.jsx

@@ -22,14 +22,14 @@ import { bindActionCreators } from 'redux';
 import * as actions from './chartAction';
 import { logEvent } from '../logger/actions';
 import Chart from './Chart';
-import { setExtraFormData } from '../dashboard/actions/nativeFilters';
+import { updateExtraFormData } from '../dashboard/actions/nativeFilters';
 
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(
       {
         ...actions,
-        setExtraFormData,
+        updateExtraFormData,
         logEvent,
       },
       dispatch,

superset-frontend/src/chart/ChartRenderer.jsx

@@ -19,7 +19,7 @@
 import { snakeCase } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { SuperChart, logging } from '@superset-ui/core';
+import { SuperChart, logging, Behavior } from '@superset-ui/core';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from '../logger/LogUtils';
 
 const propTypes = {
@@ -42,9 +42,10 @@ const propTypes = {
   refreshOverlayVisible: PropTypes.bool,
   // dashboard callbacks
   addFilter: PropTypes.func,
-  setExtraFormData: PropTypes.func,
+  setDataMask: PropTypes.func,
   onFilterMenuOpen: PropTypes.func,
   onFilterMenuClose: PropTypes.func,
+  ownCurrentState: PropTypes.object,
 };
 
 const BLANK = {};
@@ -74,12 +75,12 @@ class ChartRenderer extends React.Component {
       setControlValue: this.handleSetControlValue,
       onFilterMenuOpen: this.props.onFilterMenuOpen,
       onFilterMenuClose: this.props.onFilterMenuClose,
-      setExtraFormData: ({ extraFormData, currentState }) =>
-        this.props.actions?.setExtraFormData(
+      setDataMask: filtersState => {
+        this.props.actions?.updateExtraFormData(
           this.props.chartId,
-          extraFormData,
-          currentState,
-        ),
+          filtersState,
+        );
+      },
     };
   }
 
@@ -185,6 +186,7 @@ class ChartRenderer extends React.Component {
       annotationData,
       datasource,
       initialValues,
+      ownCurrentState,
       formData,
       queriesResponse,
     } = this.props;
@@ -224,7 +226,9 @@ class ChartRenderer extends React.Component {
         datasource={datasource}
         initialValues={initialValues}
         formData={formData}
+        ownCurrentState={ownCurrentState}
         hooks={this.hooks}
+        behaviors={[Behavior.CROSS_FILTER]}
         queriesData={queriesResponse}
         onRenderSuccess={this.handleRenderSuccess}
         onRenderFailure={this.handleRenderFailure}

superset-frontend/src/dashboard/actions/nativeFilters.ts

@@ -17,14 +17,15 @@
  * under the License.
  */
 
-import { ExtraFormData, makeApi } from '@superset-ui/core';
+import { makeApi, DataMask } from '@superset-ui/core';
 import { Dispatch } from 'redux';
 import { FilterConfiguration } from 'src/dashboard/components/nativeFilters/types';
 import { dashboardInfoChanged } from './dashboardInfo';
 import {
-  CurrentFilterState,
+  FiltersState,
+  FilterState,
   FiltersSet,
-  NativeFilterState,
+  FilterStateType,
 } from '../reducers/types';
 
 export const SET_FILTER_CONFIG_BEGIN = 'SET_FILTER_CONFIG_BEGIN';
@@ -142,51 +143,49 @@ export const setFilterSetsConfiguration = (
   }
 };
 
-export const SET_EXTRA_FORM_DATA = 'SET_EXTRA_FORM_DATA';
-export interface SetExtraFormData {
-  type: typeof SET_EXTRA_FORM_DATA;
+export const UPDATE_EXTRA_FORM_DATA = 'UPDATE_EXTRA_FORM_DATA';
+export interface UpdateExtraFormData {
+  type: typeof UPDATE_EXTRA_FORM_DATA;
   filterId: string;
-  extraFormData: ExtraFormData;
-  currentState: CurrentFilterState;
+  nativeFilters?: Omit<FilterState, 'id'>;
+  crossFilters?: Omit<FilterState, 'id'>;
+  ownFilters?: Omit<FilterState, 'id'>;
 }
 
 export const SAVE_FILTER_SETS = 'SAVE_FILTER_SETS';
 export interface SaveFilterSets {
   type: typeof SAVE_FILTER_SETS;
   name: string;
-  filtersState: NativeFilterState;
+  filtersState: Pick<FiltersState, FilterStateType.NativeFilters>;
   filtersSetId: string;
 }
 
 export const SET_FILTERS_STATE = 'SET_FILTERS_STATE';
 export interface SetFiltersState {
   type: typeof SET_FILTERS_STATE;
-  filtersState: NativeFilterState;
+  filtersState: FiltersState;
 }
 
 /**
  * Sets the selected option(s) for a given filter
- * @param filterId the id of the native filter
- * @param extraFormData the selection translated into extra form data
- * @param currentState
+ * @param filterId the id of the nativeFilters filter
+ * @param filterState
  */
-export function setExtraFormData(
+export function updateExtraFormData(
   filterId: string,
-  extraFormData: ExtraFormData,
-  currentState: CurrentFilterState,
-): SetExtraFormData {
+  filterState: DataMask,
+): UpdateExtraFormData {
   return {
-    type: SET_EXTRA_FORM_DATA,
+    type: UPDATE_EXTRA_FORM_DATA,
     filterId,
-    extraFormData,
-    currentState,
+    ...filterState,
   };
 }
 
 export function saveFilterSets(
   name: string,
   filtersSetId: string,
-  filtersState: NativeFilterState,
+  filtersState: Pick<FiltersState, FilterStateType.NativeFilters>,
 ): SaveFilterSets {
   return {
     type: SAVE_FILTER_SETS,
@@ -196,9 +195,7 @@ export function saveFilterSets(
   };
 }
 
-export function setFiltersState(
-  filtersState: NativeFilterState,
-): SetFiltersState {
+export function setFiltersState(filtersState: FiltersState): SetFiltersState {
   return {
     type: SET_FILTERS_STATE,
     filtersState,
@@ -213,5 +210,5 @@ export type AnyFilterAction =
   | SetFilterSetsConfigComplete
   | SetFilterSetsConfigFail
   | SetFiltersState
-  | SetExtraFormData
-  | SaveFilterSets;
+  | SaveFilterSets
+  | UpdateExtraFormData;

superset-frontend/src/dashboard/components/Dashboard.jsx

@@ -42,6 +42,7 @@ import { areObjectsEqual } from '../../reduxUtils';
 import '../stylesheets/index.less';
 import getLocationHash from '../util/getLocationHash';
 import isDashboardEmpty from '../util/isDashboardEmpty';
+import { getAffectedOwnDataCharts } from '../util/charts/getOwnDataCharts';
 
 const propTypes = {
   actions: PropTypes.shape({
@@ -56,6 +57,7 @@ const propTypes = {
   slices: PropTypes.objectOf(slicePropShape).isRequired,
   activeFilters: PropTypes.object.isRequired,
   datasources: PropTypes.object.isRequired,
+  ownDataCharts: PropTypes.object.isRequired,
   layout: PropTypes.object.isRequired,
   impressionId: PropTypes.string.isRequired,
   initMessages: PropTypes.array,
@@ -88,7 +90,8 @@ class Dashboard extends React.PureComponent {
 
   constructor(props) {
     super(props);
-    this.appliedFilters = props.activeFilters || {};
+    this.appliedFilters = props.activeFilters ?? {};
+    this.appliedOwnDataCharts = props.ownDataCharts ?? {};
     this.onVisibilityChange = this.onVisibilityChange.bind(this);
   }
 
@@ -147,9 +150,13 @@ class Dashboard extends React.PureComponent {
   componentDidUpdate() {
     const { hasUnsavedChanges, editMode } = this.props.dashboardState;
 
-    const { appliedFilters } = this;
-    const { activeFilters } = this.props;
-    if (!editMode && !areObjectsEqual(appliedFilters, activeFilters)) {
+    const { appliedFilters, appliedOwnDataCharts } = this;
+    const { activeFilters, ownDataCharts } = this.props;
+    if (
+      !editMode &&
+      (!areObjectsEqual(appliedOwnDataCharts, ownDataCharts) ||
+        !areObjectsEqual(appliedFilters, activeFilters))
+    ) {
       this.applyFilters();
     }
 
@@ -188,14 +195,17 @@ class Dashboard extends React.PureComponent {
 
   applyFilters() {
     const { appliedFilters } = this;
-    const { activeFilters } = this.props;
+    const { activeFilters, ownDataCharts } = this.props;
 
     // refresh charts if a filter was removed, added, or changed
     const currFilterKeys = Object.keys(activeFilters);
     const appliedFilterKeys = Object.keys(appliedFilters);
 
     const allKeys = new Set(currFilterKeys.concat(appliedFilterKeys));
-    const affectedChartIds = [];
+    const affectedChartIds = getAffectedOwnDataCharts(
+      ownDataCharts,
+      this.appliedOwnDataCharts,
+    );
     [...allKeys].forEach(filterKey => {
       if (!currFilterKeys.includes(filterKey)) {
         // filterKey is removed?
@@ -234,6 +244,7 @@ class Dashboard extends React.PureComponent {
     // remove dup in affectedChartIds
     this.refreshCharts([...new Set(affectedChartIds)]);
     this.appliedFilters = activeFilters;
+    this.appliedOwnDataCharts = ownDataCharts;
   }
 
   refreshCharts(ids) {

superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts

@@ -210,7 +210,8 @@ export const selectNativeIndicatorsForChart = (
       layoutItem => dashboardLayout[layoutItem]?.meta?.chartId === chartId,
     );
     const column = nativeFilter.targets[0]?.column?.name;
-    const filterState = nativeFilters.filtersState[nativeFilter.id];
+    const filterState =
+      nativeFilters.filtersState.nativeFilters?.[nativeFilter.id];
     let value = filterState?.currentState?.value ?? [];
     if (!Array.isArray(value)) {
       value = [value];