perf(native-filters): avoid unnecessary reloading of charts (#14408)

* fix:fix get permission function

* refactor: filter default value

* refactor: update default value loading

* refactor: apply defaultValues

* lint: fix lint

* lint: fix lint

* test: fix test

* refactor: use extraFormData for reload charts

* test: fix tests

* test: fix tests

* test: fix tests

superset-frontend/spec/fixtures/mockNativeFilters.ts

@@ -21,7 +21,6 @@ import { NativeFiltersState } from 'src/dashboard/reducers/types';
 import { DataMaskStateWithId } from '../../src/dataMask/types';
 
 export const nativeFilters: NativeFiltersState = {
-  isInitialized: true,
   filterSets: {},
   filters: {
     'NATIVE_FILTER-e7Q8zKixx': {
@@ -36,7 +35,11 @@ export const nativeFilters: NativeFiltersState = {
           },
         },
       ],
-      defaultValue: null,
+      defaultDataMask: {
+        filterState: {
+          value: null,
+        },
+      },
       cascadeParentIds: [],
       scope: {
         rootPath: ['ROOT_ID'],
@@ -61,7 +64,11 @@ export const nativeFilters: NativeFiltersState = {
           },
         },
       ],
-      defaultValue: null,
+      defaultDataMask: {
+        filterState: {
+          value: null,
+        },
+      },
       cascadeParentIds: [],
       scope: {
         rootPath: ['ROOT_ID'],
@@ -115,14 +122,17 @@ export const extraFormData: ExtraFormData = {
 export const NATIVE_FILTER_ID = 'NATIVE_FILTER-p4LImrSgA';
 
 export const singleNativeFiltersState = {
-  isInitialized: true,
   filters: {
     [NATIVE_FILTER_ID]: {
       id: [NATIVE_FILTER_ID],
       name: 'eth',
       type: 'text',
       targets: [{ datasetId: 13, column: { name: 'ethnic_minority' } }],
-      defaultValue: null,
+      defaultDataMask: {
+        filterState: {
+          value: null,
+        },
+      },
       cascadeParentIds: [],
       scope: { rootPath: ['ROOT_ID'], excluded: [227, 229] },
       inverseSelection: false,

superset-frontend/spec/javascripts/dashboard/components/Dashboard_spec.jsx

@@ -167,7 +167,7 @@ describe('Dashboard', () => {
         ...OVERRIDE_FILTERS,
         [NATIVE_FILTER_ID]: {
           scope: [230],
-          values: [extraFormData],
+          values: extraFormData,
         },
       });
     });

superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts

@@ -30,7 +30,6 @@ export const mockDataMaskInfo: DataMaskStateWithId = {
 };
 
 export const nativeFiltersInfo: NativeFiltersState = {
-  isInitialized: true,
   filterSets: {
     'set-id': {
       id: 'DefaultsID',
@@ -54,7 +53,11 @@ export const nativeFiltersInfo: NativeFiltersState = {
           },
         },
       ],
-      defaultValue: null,
+      defaultDataMask: {
+        filterState: {
+          value: null,
+        },
+      },
       scope: {
         rootPath: [],
         excluded: [],

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

@@ -52,7 +52,6 @@ describe('getFormDataWithExtraFilters', () => {
     },
     sliceId: chartId,
     nativeFilters: {
-      isInitialized: true,
       filterSets: {},
       filters: {
         [filterId]: ({

superset-frontend/spec/javascripts/filters/utils_spec.ts

@@ -129,21 +129,15 @@ describe('Filter utils', () => {
       );
     });
     it('getSelectExtraFormData - col: "testCol", value: [], emptyFilter: false, inverseSelection: false', () => {
-      expect(getSelectExtraFormData('testCol', [], false, false)).toEqual({
+      expect(getSelectExtraFormData('testCol', [], false, false)).toEqual({});
-        filters: [],
-      });
     });
     it('getSelectExtraFormData - col: "testCol", value: undefined, emptyFilter: false, inverseSelection: false', () => {
       expect(
         getSelectExtraFormData('testCol', undefined, false, false),
-      ).toEqual({
+      ).toEqual({});
-        filters: [],
-      });
     });
     it('getSelectExtraFormData - col: "testCol", value: null, emptyFilter: false, inverseSelection: false', () => {
-      expect(getSelectExtraFormData('testCol', null, false, false)).toEqual({
+      expect(getSelectExtraFormData('testCol', null, false, false)).toEqual({});
-        filters: [],
-      });
     });
   });
 

superset-frontend/src/chart/Chart.jsx

@@ -121,13 +121,6 @@ class Chart extends React.PureComponent {
   }
 
   runQuery() {
-    if (
-      this.props.dashboardId && // we on dashboard screen
-      isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS) &&
-      !this.props.isFiltersInitialized
-    ) {
-      return;
-    }
     if (this.props.chartId > 0 && isFeatureEnabled(FeatureFlag.CLIENT_CACHE)) {
       // Load saved chart with a GET request
       this.props.actions.getSavedChart(

superset-frontend/src/chart/ChartContainer.jsx

@@ -37,9 +37,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(Chart);
-  ({ nativeFilters }) => ({
-    isFiltersInitialized: nativeFilters?.isInitialized,
-  }),
-  mapDispatchToProps,
-)(Chart);

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

@@ -22,8 +22,8 @@ import { Dispatch } from 'redux';
 import { FilterConfiguration } from 'src/dashboard/components/nativeFilters/types';
 import { DataMaskType, DataMaskStateWithId } from 'src/dataMask/types';
 import {
-  SET_DATA_MASK_FOR_FILTER_CONFIG_COMPLETE,
   SET_DATA_MASK_FOR_FILTER_CONFIG_FAIL,
+  setDataMaskForFilterConfigComplete,
 } from 'src/dataMask/actions';
 import { HYDRATE_DASHBOARD } from './hydrate';
 import { dashboardInfoChanged } from './dashboardInfo';
@@ -65,14 +65,6 @@ export interface SetFilterSetsConfigFail {
   type: typeof SET_FILTER_SETS_CONFIG_FAIL;
   filterSetsConfig: FilterSet[];
 }
-export const SET_FILTERS_INITIALIZED = 'SET_FILTERS_INITIALIZED';
-export interface SetFiltersInitialized {
-  type: typeof SET_FILTERS_INITIALIZED;
-}
-
-export const setFiltersInitialized = (): SetFiltersInitialized => ({
-  type: SET_FILTERS_INITIALIZED,
-});
 
 export const setFilterConfiguration = (
   filterConfig: FilterConfiguration,
@@ -108,11 +100,7 @@ export const setFilterConfiguration = (
       type: SET_FILTER_CONFIG_COMPLETE,
       filterConfig,
     });
-    dispatch({
+    dispatch(setDataMaskForFilterConfigComplete(filterConfig));
-      type: SET_DATA_MASK_FOR_FILTER_CONFIG_COMPLETE,
-      unitName: DataMaskType.NativeFilters,
-      filterConfig,
-    });
   } catch (err) {
     dispatch({ type: SET_FILTER_CONFIG_FAIL, filterConfig });
     dispatch({ type: SET_DATA_MASK_FOR_FILTER_CONFIG_FAIL, filterConfig });
@@ -200,6 +188,5 @@ export type AnyFilterAction =
   | SetFilterSetsConfigBegin
   | SetFilterSetsConfigComplete
   | SetFilterSetsConfigFail
-  | SetFiltersInitialized
   | SaveFilterSets
   | SetBooststapData;

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

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { t } from '@superset-ui/core';
+import { isFeatureEnabled, t, FeatureFlag } from '@superset-ui/core';
 
 import { PluginContext } from 'src/components/DynamicPlugins';
 import Loading from 'src/components/Loading';
@@ -56,6 +56,7 @@ const propTypes = {
   charts: PropTypes.objectOf(chartPropShape).isRequired,
   slices: PropTypes.objectOf(slicePropShape).isRequired,
   activeFilters: PropTypes.object.isRequired,
+  chartConfiguration: PropTypes.object.isRequired,
   datasources: PropTypes.object.isRequired,
   ownDataCharts: PropTypes.object.isRequired,
   layout: PropTypes.object.isRequired,
@@ -120,6 +121,11 @@ class Dashboard extends React.PureComponent {
       };
     }
     window.addEventListener('visibilitychange', this.onVisibilityChange);
+    this.applyCharts();
+  }
+
+  componentDidUpdate() {
+    this.applyCharts();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -147,15 +153,28 @@ class Dashboard extends React.PureComponent {
     }
   }
 
-  componentDidUpdate() {
+  applyCharts() {
     const { hasUnsavedChanges, editMode } = this.props.dashboardState;
 
     const { appliedFilters, appliedOwnDataCharts } = this;
-    const { activeFilters, ownDataCharts } = this.props;
+    const { activeFilters, ownDataCharts, chartConfiguration } = this.props;
+    if (
+      isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) &&
+      !chartConfiguration
+    ) {
+      // For a first loading we need to wait for cross filters charts data loaded to get all active filters
+      // for correct comparing  of filters to avoid unnecessary requests
+      return;
+    }
+
     if (
       !editMode &&
-      (!areObjectsEqual(appliedOwnDataCharts, ownDataCharts) ||
+      (!areObjectsEqual(appliedOwnDataCharts, ownDataCharts, {
-        !areObjectsEqual(appliedFilters, activeFilters))
+        ignoreUndefined: true,
+      }) ||
+        !areObjectsEqual(appliedFilters, activeFilters, {
+          ignoreUndefined: true,
+        }))
     ) {
       this.applyFilters();
     }
@@ -223,6 +242,9 @@ class Dashboard extends React.PureComponent {
           !areObjectsEqual(
             appliedFilters[filterKey].values,
             activeFilters[filterKey].values,
+            {
+              ignoreUndefined: true,
+            },
           )
         ) {
           affectedChartIds.push(...activeFilters[filterKey].scope);

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx

@@ -28,6 +28,7 @@ import FilterControl from 'src/dashboard/components/nativeFilters/FilterBar/Filt
 import CascadeFilterControl from 'src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl';
 import { CascadeFilter } from 'src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/types';
 import { Filter } from 'src/dashboard/components/nativeFilters/types';
+import { RootState } from 'src/dashboard/types';
 
 interface CascadePopoverProps {
   filter: CascadeFilter;
@@ -82,7 +83,7 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
   directPathToChild,
 }) => {
   const [currentPathToChild, setCurrentPathToChild] = useState<string[]>();
-  const dataMask = useSelector<any, DataMaskWithId>(
+  const dataMask = useSelector<RootState, DataMaskWithId>(
     state => state.dataMask[filter.id] ?? getInitialDataMask(filter.id),
   );
 

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/types.ts

@@ -17,8 +17,9 @@
  * under the License.
  */
 
+import { DataMask } from '@superset-ui/core';
 import { Filter } from '../../types';
 
-export interface CascadeFilter extends Filter {
+export type CascadeFilter = Filter & { dataMask?: DataMask } & {
   cascadeChildren: CascadeFilter[];
-}
+};

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx

@@ -84,7 +84,6 @@ const addFilterFlow = () => {
 const addFilterSetFlow = async () => {
   // add filter set
   userEvent.click(screen.getByText('Filter Sets (0)'));
-  expect(screen.getByTestId(getTestId('new-filter-set-button'))).toBeDisabled();
 
   // check description
   expect(screen.getByText('Filters (1)')).toBeInTheDocument();
@@ -92,7 +91,6 @@ const addFilterSetFlow = async () => {
   expect(screen.getAllByText('Last week').length).toBe(2);
 
   // apply filters
-  userEvent.click(screen.getByTestId(getTestId('apply-button')));
   expect(screen.getByTestId(getTestId('new-filter-set-button'))).toBeEnabled();
 
   // create filter set
@@ -139,7 +137,7 @@ describe('FilterBar', () => {
               "name":"${FILTER_NAME}",
               "filterType":"filter_time",
               "targets":[{"datasetId":11,"column":{"name":"color"}}],
-              "defaultValue":null,
+              "defaultDataMask":{"filterState":{"value":null}},
               "controlValues":{},
               "cascadeParentIds":[],
               "scope":{"rootPath":["ROOT_ID"],"excluded":[]},
@@ -154,7 +152,7 @@ describe('FilterBar', () => {
                   "name":"${FILTER_NAME}",
                   "filterType":"filter_time",
                   "targets":[{}],
-                  "defaultValue":"Last week",
+                  "defaultDataMask":{"filterState":{"value":"Last week"},"extraFormData":{"time_range":"Last week"}},
                   "controlValues":{},
                   "cascadeParentIds":[],
                   "scope":{"rootPath":["ROOT_ID"],"excluded":[]},
@@ -163,7 +161,7 @@ describe('FilterBar', () => {
               },
               "dataMask":{
                 "${filterId}":{
-                  "extraFormData":{"override_form_data":{"time_range":"Last week"}},
+                  "extraFormData":{"time_range":"Last week"},
                   "filterState":{"value":"Last week"},
                   "ownState":{},
                   "id":"${filterId}"
@@ -308,10 +306,6 @@ describe('FilterBar', () => {
     addFilterFlow();
 
     await screen.findByText('All Filters (1)');
-
-    // apply filter
-    expect(screen.getByTestId(getTestId('apply-button'))).toBeEnabled();
-    userEvent.click(screen.getByTestId(getTestId('apply-button')));
     expect(screen.getByTestId(getTestId('apply-button'))).toBeDisabled();
   });
 
@@ -319,6 +313,7 @@ describe('FilterBar', () => {
   it.skip('add and apply filter set', async () => {
     // @ts-ignore
     global.featureFlags = {
+      [FeatureFlag.DASHBOARD_NATIVE_FILTERS]: true,
       [FeatureFlag.DASHBOARD_NATIVE_FILTERS_SET]: true,
     };
     renderWrapper(openedBarProps, stateWithoutNativeFilters);
@@ -326,21 +321,23 @@ describe('FilterBar', () => {
     addFilterFlow();
 
     await screen.findByText('All Filters (1)');
-    expect(screen.getByTestId(getTestId('apply-button'))).toBeEnabled();
 
     await addFilterSetFlow();
 
     // change filter
-    userEvent.click(screen.getByText('All Filters (1)'));
     expect(screen.getByTestId(getTestId('apply-button'))).toBeDisabled();
 
     await changeFilterValue();
     await waitFor(() => expect(screen.getAllByText('Last day').length).toBe(2));
 
     // apply new filter value
-    expect(screen.getByTestId(getTestId('apply-button'))).toBeEnabled();
+    await waitFor(() =>
+      expect(screen.getByTestId(getTestId('apply-button'))).toBeEnabled(),
+    );
     userEvent.click(screen.getByTestId(getTestId('apply-button')));
-    expect(screen.getByTestId(getTestId('apply-button'))).toBeDisabled();
+    await waitFor(() =>
+      expect(screen.getByTestId(getTestId('apply-button'))).toBeDisabled(),
+    );
 
     // applying filter set
     userEvent.click(screen.getByText('Filter Sets (1)'));
@@ -357,7 +354,6 @@ describe('FilterBar', () => {
     expect(screen.getByTestId(getTestId('apply-button'))).toBeDisabled();
   });
 
-  // TODO: fix flakiness and re-enable
   it.skip('add and edit filter set', async () => {
     // @ts-ignore
     global.featureFlags = {
@@ -369,7 +365,6 @@ describe('FilterBar', () => {
     addFilterFlow();
 
     await screen.findByText('All Filters (1)');
-    expect(screen.getByTestId(getTestId('apply-button'))).toBeEnabled();
 
     await addFilterSetFlow();
 

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts

@@ -19,7 +19,7 @@
 import { useSelector } from 'react-redux';
 import { NativeFiltersState } from 'src/dashboard/reducers/types';
 import { mergeExtraFormData } from '../../utils';
-import { useDataMask } from '../state';
+import { useNativeFiltersDataMask } from '../state';
 
 // eslint-disable-next-line import/prefer-default-export
 export function useCascadingFilters(id: string) {
@@ -29,7 +29,7 @@ export function useCascadingFilters(id: string) {
   const filter = filters[id];
   const cascadeParentIds: string[] = filter?.cascadeParentIds ?? [];
   let cascadedFilters = {};
-  const nativeFiltersDataMask = useDataMask();
+  const nativeFiltersDataMask = useNativeFiltersDataMask();
   cascadeParentIds.forEach(parentId => {
     const parentState = nativeFiltersDataMask[parentId] || {};
     const { extraFormData: parentExtra = {} } = parentState;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts

@@ -21,7 +21,9 @@ import { DataMask } from '@superset-ui/core';
 import { Filter } from '../../types';
 
 export interface FilterProps {
-  filter: Filter;
+  filter: Filter & {
+    dataMask?: DataMask;
+  };
   icon?: React.ReactElement;
   directPathToChild?: string[];
   onFilterSelectionChange: (filter: Filter, dataMask: DataMask) => void;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.tsx

@@ -25,7 +25,7 @@ import { setFilterSetsConfiguration } from 'src/dashboard/actions/nativeFilters'
 import { DataMaskState } from 'src/dataMask/types';
 import { WarningOutlined } from '@ant-design/icons';
 import { ActionButtons } from './Footer';
-import { useDataMask, useFilters, useFilterSets } from '../state';
+import { useNativeFiltersDataMask, useFilters, useFilterSets } from '../state';
 import { APPLY_FILTERS_HINT, findExistingFilterSet } from './utils';
 import { useFilterSetNameDuplicated } from './state';
 import { getFilterBarTestId } from '../index';
@@ -72,7 +72,7 @@ const EditSection: FC<EditSectionProps> = ({
   dataMaskSelected,
   disabled,
 }) => {
-  const dataMaskApplied = useDataMask();
+  const dataMaskApplied = useNativeFiltersDataMask();
   const dispatch = useDispatch();
   const filterSets = useFilterSets();
   const filters = useFilters();

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/index.tsx

@@ -26,7 +26,7 @@ import { Filters, FilterSet, FilterSets } from 'src/dashboard/reducers/types';
 import { areObjectsEqual } from 'src/reduxUtils';
 import { findExistingFilterSet, generateFiltersSetId } from './utils';
 import { Filter } from '../../types';
-import { useFilters, useDataMask, useFilterSets } from '../state';
+import { useFilters, useNativeFiltersDataMask, useFilterSets } from '../state';
 import Footer from './Footer';
 import FilterSetUnit from './FilterSetUnit';
 import { getFilterBarTestId } from '..';
@@ -85,7 +85,7 @@ const FilterSets: React.FC<FilterSetsProps> = ({
   const dispatch = useDispatch();
   const [filterSetName, setFilterSetName] = useState(DEFAULT_FILTER_SET_NAME);
   const [editMode, setEditMode] = useState(false);
-  const dataMaskApplied = useDataMask();
+  const dataMaskApplied = useNativeFiltersDataMask();
   const filterSets = useFilterSets();
   const filterSetFilterValues = Object.values(filterSets);
   const filters = useFilters();
@@ -111,7 +111,9 @@ const FilterSets: React.FC<FilterSetsProps> = ({
     filterSet?: FilterSet,
   ) =>
     !filterValues.find(filter => filter?.id === id) ||
-    !areObjectsEqual(filters[id], filterSet?.nativeFilters?.[id]);
+    !areObjectsEqual(filters[id], filterSet?.nativeFilters?.[id], {
+      ignoreUndefined: true,
+    });
 
   const takeFilterSet = (id: string, target?: HTMLElement) => {
     const ignoreSelectorHeader = 'ant-collapse-header';
@@ -137,13 +139,15 @@ const FilterSets: React.FC<FilterSetsProps> = ({
 
     const filterSet = filterSets[id];
 
-    Object.values(filterSet?.dataMask ?? []).forEach(dataMask => {
+    (Object.values(filterSet?.dataMask) ?? []).forEach(
-      const { extraFormData, filterState, id } = dataMask as DataMaskWithId;
+      (dataMask: DataMaskWithId) => {
-      if (isFilterMissingOrContainsInvalidMetadata(id, filterSet)) {
+        const { extraFormData, filterState, id } = dataMask;
-        return;
+        if (isFilterMissingOrContainsInvalidMetadata(id, filterSet)) {
-      }
+          return;
-      onFilterSelectionChange({ id }, { extraFormData, filterState });
+        }
-    });
+        onFilterSelectionChange({ id }, { extraFormData, filterState });
+      },
+    );
   };
 
   const handleRebuild = (id: string) => {
@@ -168,7 +172,7 @@ const FilterSets: React.FC<FilterSetsProps> = ({
       dataMask: Object.keys(newFilters).reduce(
         (prev, nextFilterId) => ({
           ...prev,
-          [nextFilterId]: filterSet.dataMask?.nativeFilters?.[nextFilterId],
+          [nextFilterId]: filterSet.dataMask?.[nextFilterId],
         }),
         {},
       ),

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx

@@ -19,31 +19,38 @@
 
 /* eslint-disable no-param-reassign */
 import { HandlerFunction, styled, t } from '@superset-ui/core';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import cx from 'classnames';
 import Icon from 'src/components/Icon';
 import { Tabs } from 'src/common/components';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import { updateDataMask } from 'src/dataMask/actions';
-import { DataMaskState } from 'src/dataMask/types';
+import {
+  DataMaskState,
+  DataMaskStateWithId,
+  DataMaskWithId,
+} from 'src/dataMask/types';
 import { useImmer } from 'use-immer';
 import { areObjectsEqual } from 'src/reduxUtils';
 import { testWithId } from 'src/utils/testUtils';
 import { Filter } from 'src/dashboard/components/nativeFilters/types';
-import { setFiltersInitialized } from 'src/dashboard/actions/nativeFilters';
+import {
-import { mapParentFiltersToChildren, TabIds } from './utils';
+  getOnlyExtraFormData,
+  mapParentFiltersToChildren,
+  TabIds,
+} from './utils';
 import FilterSets from './FilterSets';
 import {
-  useDataMask,
+  useNativeFiltersDataMask,
   useFilters,
   useFilterSets,
-  useFiltersInitialisation,
   useFilterUpdates,
 } from './state';
 import EditSection from './FilterSets/EditSection';
 import Header from './Header';
 import FilterControls from './FilterControls/FilterControls';
+import { getInitialDataMask } from '../../../../dataMask/reducer';
 
 const BAR_WIDTH = `250px`;
 
@@ -155,18 +162,16 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   directPathToChild,
 }) => {
   const [editFilterSetId, setEditFilterSetId] = useState<string | null>(null);
-  const [dataMaskSelected, setDataMaskSelected] = useImmer<DataMaskState>({});
+  const [dataMaskSelected, setDataMaskSelected] = useImmer<DataMaskStateWithId>(
-  const [
+    {},
-    lastAppliedFilterData,
+  );
-    setLastAppliedFilterData,
-  ] = useImmer<DataMaskState>({});
   const dispatch = useDispatch();
   const filterSets = useFilterSets();
   const filterSetFilterValues = Object.values(filterSets);
   const [tab, setTab] = useState(TabIds.AllFilters);
   const filters = useFilters();
   const filterValues = Object.values<Filter>(filters);
-  const dataMaskApplied = useDataMask();
+  const dataMaskApplied: DataMaskStateWithId = useNativeFiltersDataMask();
   const [isFilterSetChanged, setIsFilterSetChanged] = useState(false);
   const cascadeChildren = useMemo(
     () => mapParentFiltersToChildren(filterValues),
@@ -185,7 +190,10 @@ const FilterBar: React.FC<FiltersBarProps> = ({
         dispatch(updateDataMask(filter.id, dataMask));
       }
 
-      draft[filter.id] = dataMask;
+      draft[filter.id] = {
+        ...(getInitialDataMask(filter.id) as DataMaskWithId),
+        ...dataMask,
+      };
     });
   };
 
@@ -196,29 +204,18 @@ const FilterBar: React.FC<FiltersBarProps> = ({
         dispatch(updateDataMask(filterId, dataMaskSelected[filterId]));
       }
     });
-    setLastAppliedFilterData(() => dataMaskSelected);
   };
 
-  const { isInitialized } = useFiltersInitialisation(
+  useFilterUpdates(dataMaskSelected, setDataMaskSelected);
-    dataMaskSelected,
-    handleApply,
-  );
-
-  useEffect(() => {
-    if (isInitialized) {
-      dispatch(setFiltersInitialized());
-    }
-  }, [dispatch, isInitialized]);
-
-  useFilterUpdates(
-    dataMaskSelected,
-    setDataMaskSelected,
-    setLastAppliedFilterData,
-  );
 
+  const dataSelectedValues = Object.values(dataMaskSelected);
+  const dataAppliedValues = Object.values(dataMaskApplied);
   const isApplyDisabled =
-    !isInitialized || areObjectsEqual(dataMaskSelected, lastAppliedFilterData);
+    areObjectsEqual(
-
+      getOnlyExtraFormData(dataMaskSelected),
+      getOnlyExtraFormData(dataMaskApplied),
+      { ignoreUndefined: true },
+    ) || dataSelectedValues.length !== dataAppliedValues.length;
   return (
     <BarWrapper {...getFilterBarTestId()} className={cx({ open: filtersOpen })}>
       <CollapsedBar

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/state.ts

@@ -22,10 +22,14 @@ import {
   Filters,
   FilterSets as FilterSetsType,
 } from 'src/dashboard/reducers/types';
-import { DataMaskState, DataMaskStateWithId } from 'src/dataMask/types';
+import {
-import { useEffect, useState } from 'react';
+  DataMaskState,
-import { areObjectsEqual } from 'src/reduxUtils';
+  DataMaskStateWithId,
-import { Filter } from '../types';
+  DataMaskWithId,
+} from 'src/dataMask/types';
+import { useEffect } from 'react';
+import { RootState } from 'src/dashboard/types';
+import { NATIVE_FILTER_PREFIX } from '../FiltersConfigModal/utils';
 
 export const useFilterSets = () =>
   useSelector<any, FilterSetsType>(
@@ -35,44 +39,27 @@ export const useFilterSets = () =>
 export const useFilters = () =>
   useSelector<any, Filters>(state => state.nativeFilters.filters);
 
-export const useDataMask = () =>
+export const useNativeFiltersDataMask = () => {
-  useSelector<any, DataMaskStateWithId>(state => state.dataMask);
+  const dataMask = useSelector<RootState, DataMaskStateWithId>(
+    state => state.dataMask,
+  );
 
-export const useFiltersInitialisation = (
+  return Object.values(dataMask)
-  dataMaskSelected: DataMaskState,
+    .filter((item: DataMaskWithId) =>
-  handleApply: () => void,
+      String(item.id).startsWith(NATIVE_FILTER_PREFIX),
-) => {
+    )
-  const [isInitialized, setIsInitialized] = useState<boolean>(false);
+    .reduce(
-  const filters = useFilters();
+      (prev, next: DataMaskWithId) => ({ ...prev, [next.id]: next }),
-  const filterValues = Object.values<Filter>(filters);
+      {},
-  useEffect(() => {
+    ) as DataMaskStateWithId;
-    if (isInitialized) {
-      return;
-    }
-    const areFiltersInitialized = filterValues.every(filterValue =>
-      areObjectsEqual(
-        filterValue?.defaultValue,
-        dataMaskSelected[filterValue?.id]?.filterState?.value,
-      ),
-    );
-    if (areFiltersInitialized) {
-      handleApply();
-      setIsInitialized(true);
-    }
-  }, [filterValues, dataMaskSelected, isInitialized]);
-
-  return {
-    isInitialized,
-  };
 };
 
 export const useFilterUpdates = (
   dataMaskSelected: DataMaskState,
   setDataMaskSelected: (arg0: (arg0: DataMaskState) => void) => void,
-  setLastAppliedFilterData: (arg0: (arg0: DataMaskState) => void) => void,
 ) => {
   const filters = useFilters();
-  const dataMaskApplied = useDataMask();
+  const dataMaskApplied = useNativeFiltersDataMask();
 
   useEffect(() => {
     // Remove deleted filters from local state
@@ -83,18 +70,5 @@ export const useFilterUpdates = (
         });
       }
     });
-    Object.keys(dataMaskApplied).forEach(appliedId => {
+  }, [dataMaskApplied, dataMaskSelected, filters, setDataMaskSelected]);
-      if (!filters[appliedId]) {
-        setLastAppliedFilterData(draft => {
-          delete draft[appliedId];
-        });
-      }
-    });
-  }, [
-    dataMaskApplied,
-    dataMaskSelected,
-    filters,
-    setDataMaskSelected,
-    setLastAppliedFilterData,
-  ]);
 };

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { DataMaskStateWithId } from 'src/dataMask/types';
 import { Filter } from '../types';
 
 export enum TabIds {
@@ -39,3 +40,9 @@ export function mapParentFiltersToChildren(
   });
   return cascadeChildren;
 }
+
+export const getOnlyExtraFormData = (data: DataMaskStateWithId) =>
+  Object.values(data).reduce(
+    (prev, next) => ({ ...prev, [next.id]: next.extraFormData }),
+    {},
+  );

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ControlItems.tsx

@@ -76,7 +76,7 @@ const ControlItems: FC<ControlItemsProps> = ({
                   return;
                 }
                 setNativeFilterFieldValues(form, filterId, {
-                  defaultValue: null,
+                  defaultDataMask: null,
                 });
                 forceUpdate();
               }}

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx

@@ -126,9 +126,7 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
   const [metrics, setMetrics] = useState<Metric[]>([]);
   const forceUpdate = useForceUpdate();
   const [datasetDetails, setDatasetDetails] = useState<Record<string, any>>();
-
   const formFilter = form.getFieldValue('filters')?.[filterId] || {};
-
   const nativeFilterItems = getChartMetadataRegistry().items;
   const nativeFilterVizTypes = Object.entries(nativeFilterItems)
     // @ts-ignore
@@ -191,7 +189,6 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
     const formData = getFormData({
       datasetId: formFilter?.dataset?.value,
       groupby: formFilter?.column,
-      defaultValue: formFilter?.defaultValue,
       ...formFilter,
     });
     setNativeFilterFieldValues(form, filterId, {
@@ -242,7 +239,6 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
   const newFormData = getFormData({
     datasetId,
     groupby: hasColumn ? formFilter?.column : undefined,
-    defaultValue: formFilter?.defaultValue,
     ...formFilter,
   });
 
@@ -294,7 +290,7 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
             onChange={({ value }: { value: string }) => {
               setNativeFilterFieldValues(form, filterId, {
                 filterType: value,
-                defaultValue: null,
+                defaultDataMask: null,
               });
               forceUpdate();
             }}
@@ -324,7 +320,7 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
                 // We need reset column when dataset changed
                 if (datasetId && e?.value !== datasetId) {
                   setNativeFilterFieldValues(form, filterId, {
-                    defaultValue: null,
+                    defaultDataMask: null,
                     column: null,
                   });
                 }
@@ -346,10 +342,10 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
                 form={form}
                 filterId={filterId}
                 datasetId={datasetId}
-                onChange={e => {
+                onChange={() => {
                   // We need reset default value when when column changed
                   setNativeFilterFieldValues(form, filterId, {
-                    defaultValue: null,
+                    defaultDataMask: null,
                   });
                   forceUpdate();
                 }}
@@ -435,16 +431,16 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
           )}
         </StyledFormItem>
         <StyledFormItem
-          name={['filters', filterId, 'defaultValue']}
+          name={['filters', filterId, 'defaultDataMask']}
-          initialValue={filterToEdit?.defaultValue}
+          initialValue={filterToEdit?.defaultDataMask}
           data-test="default-input"
           label={<StyledLabel>{t('Default Value')}</StyledLabel>}
         >
           {(!hasDataset || (!isDataDirty && hasFilledDataset)) && (
             <DefaultValue
-              setDataMask={({ filterState }) => {
+              setDataMask={dataMask => {
                 setNativeFilterFieldValues(form, filterId, {
-                  defaultValue: filterState?.value,
+                  defaultDataMask: dataMask,
                 });
                 forceUpdate();
               }}

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/types.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { AdhocFilter } from '@superset-ui/core';
+import { AdhocFilter, DataMask } from '@superset-ui/core';
 import { Scope } from '../types';
 
 export interface NativeFiltersFormItem {
@@ -32,6 +32,7 @@ export interface NativeFiltersFormItem {
     [key: string]: any;
   };
   defaultValue: any;
+  defaultDataMask: DataMask;
   parentFilter: {
     value: string;
     label: string;

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts

@@ -18,6 +18,7 @@
  */
 import { FormInstance } from 'antd/lib/form';
 import shortid from 'shortid';
+import { getInitialDataMask } from 'src/dataMask/reducer';
 import { FilterRemoval, NativeFiltersForm } from './types';
 import { Filter, FilterConfiguration, Target } from '../types';
 
@@ -148,7 +149,7 @@ export const createHandleSave = (
         filterType: formInputs.filterType,
         // for now there will only ever be one target
         targets: [target],
-        defaultValue: formInputs.defaultValue || null,
+        defaultDataMask: formInputs.defaultDataMask ?? getInitialDataMask(),
         cascadeParentIds: formInputs.parentFilter
           ? [formInputs.parentFilter.value]
           : [],

superset-frontend/src/dashboard/components/nativeFilters/types.ts

@@ -41,8 +41,7 @@ export interface Target {
 
 export interface Filter {
   cascadeParentIds: string[];
-  defaultValue: any;
+  defaultDataMask: DataMask;
-  dataMask?: DataMask;
   isInstant: boolean;
   id: string; // randomly generated at filter creation
   name: string;

superset-frontend/src/dashboard/components/nativeFilters/utils.ts

@@ -35,7 +35,7 @@ export const getFormData = ({
   cascadingFilters = {},
   groupby,
   inputRef,
-  defaultValue,
+  defaultDataMask,
   controlValues,
   filterType,
   sortMetric,
@@ -73,7 +73,7 @@ export const getFormData = ({
     metrics: ['count'],
     row_limit: 10000,
     showSearch: true,
-    defaultValue,
+    defaultValue: defaultDataMask?.filterState?.value,
     time_range,
     time_range_endpoints: ['inclusive', 'exclusive'],
     url_params: {},

superset-frontend/src/dashboard/containers/Dashboard.ts

@@ -18,9 +18,7 @@
  */
 import { bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
-
 import Dashboard from '../components/Dashboard';
-
 import {
   addSliceToDashboard,
   removeSliceFromDashboard,
@@ -66,11 +64,12 @@ function mapStateToProps(state: RootState) {
         // eslint-disable-next-line camelcase
         chartConfiguration: dashboardInfo.metadata?.chart_configuration,
         nativeFilters: nativeFilters.filters,
-        dataMask: getRelevantDataMask(dataMask, 'isApplied'),
+        dataMask,
         layout: dashboardLayout.present,
       }),
     },
-    ownDataCharts: getRelevantDataMask(dataMask, 'ownState', 'ownState'),
+    chartConfiguration: dashboardInfo.metadata?.chart_configuration,
+    ownDataCharts: getRelevantDataMask(dataMask, 'ownState'),
     slices: sliceEntities.slices,
     layout: dashboardLayout.present,
     impressionId,

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

@@ -21,7 +21,6 @@ import {
   SAVE_FILTER_SETS,
   SET_FILTER_CONFIG_COMPLETE,
   SET_FILTER_SETS_CONFIG_COMPLETE,
-  SET_FILTERS_INITIALIZED,
 } from 'src/dashboard/actions/nativeFilters';
 import { FilterSet, NativeFiltersState } from './types';
 import { FilterConfiguration } from '../components/nativeFilters/types';
@@ -36,9 +35,7 @@ export function getInitialState({
   filterConfig?: FilterConfiguration;
   state?: NativeFiltersState;
 }): NativeFiltersState {
-  const state: Partial<NativeFiltersState> = {
+  const state: Partial<NativeFiltersState> = {};
-    isInitialized: prevState?.isInitialized,
-  };
 
   const filters = {};
   if (filterConfig) {
@@ -66,7 +63,6 @@ export function getInitialState({
 
 export default function nativeFilterReducer(
   state: NativeFiltersState = {
-    isInitialized: false,
     filters: {},
     filterSets: {},
   },
@@ -95,12 +91,6 @@ export default function nativeFilterReducer(
     case SET_FILTER_CONFIG_COMPLETE:
       return getInitialState({ filterConfig: action.filterConfig, state });
 
-    case SET_FILTERS_INITIALIZED:
-      return {
-        ...state,
-        isInitialized: true,
-      };
-
     case SET_FILTER_SETS_CONFIG_COMPLETE:
       return getInitialState({
         filterSetsConfig: action.filterSetsConfig,

superset-frontend/src/dashboard/reducers/types.ts

@@ -97,7 +97,6 @@ export type Filters = {
 };
 
 export type NativeFiltersState = {
-  isInitialized: boolean;
   filters: Filters;
   filterSets: FilterSets;
 };

superset-frontend/src/dashboard/types.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps, JsonObject } from '@superset-ui/core';
+import { ChartProps, ExtraFormData, JsonObject } from '@superset-ui/core';
 import { chart } from 'src/chart/chartReducer';
 import componentTypes from 'src/dashboard/util/componentTypes';
 import { DataMaskStateWithId } from '../dataMask/types';
@@ -95,7 +95,7 @@ export type LayoutItem = {
 
 type ActiveFilter = {
   scope: number[];
-  values: any[];
+  values: ExtraFormData;
 };
 
 export type ActiveFilters = {

superset-frontend/src/dashboard/util/activeAllDashboardFilters.ts

@@ -20,7 +20,7 @@ import { DataMaskStateWithId } from 'src/dataMask/types';
 import { JsonObject } from '@superset-ui/core';
 import { CHART_TYPE } from './componentTypes';
 import { Scope } from '../components/nativeFilters/types';
-import { ActiveFilters, LayoutItem } from '../types';
+import { ActiveFilters, Layout, LayoutItem } from '../types';
 import { ChartConfiguration, Filters } from '../reducers/types';
 import { DASHBOARD_ROOT_ID } from './constants';
 
@@ -51,12 +51,11 @@ export const findAffectedCharts = ({
       // eslint-disable-next-line no-param-reassign
       activeFilters[filterId] = {
         scope: [],
-        values: [],
+        values: extraFormData,
       };
     }
     // Add not excluded chart scopes(to know what charts refresh) and values(refresh only if its value changed)
     activeFilters[filterId].scope.push(chartId);
-    activeFilters[filterId].values.push(extraFormData);
     return;
   }
   // If child is not chart, recursive iterate over its children
@@ -74,11 +73,10 @@ export const findAffectedCharts = ({
 
 export const getRelevantDataMask = (
   dataMask: DataMaskStateWithId,
-  filterBy: string,
+  prop: string,
-  prop?: string,
 ): JsonObject | DataMaskStateWithId =>
   Object.values(dataMask)
-    .filter(item => item[filterBy])
+    .filter(item => item[prop])
     .reduce(
       (prev, next) => ({ ...prev, [next.id]: prop ? next[prop] : next }),
       {},
@@ -93,7 +91,7 @@ export const getAllActiveFilters = ({
   chartConfiguration: ChartConfiguration;
   dataMask: DataMaskStateWithId;
   nativeFilters: Filters;
-  layout: { [key: string]: LayoutItem };
+  layout: Layout;
 }): ActiveFilters => {
   const activeFilters = {};
 

superset-frontend/src/dataMask/actions.ts

@@ -42,7 +42,14 @@ export interface SetDataMaskForFilterConfigFail {
   type: typeof SET_DATA_MASK_FOR_FILTER_CONFIG_FAIL;
   filterConfig: FilterConfiguration;
 }
-
+export function setDataMaskForFilterConfigComplete(
+  filterConfig: FilterConfiguration,
+): SetDataMaskForFilterConfigComplete {
+  return {
+    type: SET_DATA_MASK_FOR_FILTER_CONFIG_COMPLETE,
+    filterConfig,
+  };
+}
 export function updateDataMask(
   filterId: string,
   dataMask: DataMask,

superset-frontend/src/dataMask/reducer.ts

@@ -20,23 +20,57 @@
 /* eslint-disable no-param-reassign */
 // <- When we work with Immer, we need reassign, so disabling lint
 import produce from 'immer';
+import { DataMask, FeatureFlag } from '@superset-ui/core';
+import { NATIVE_FILTER_PREFIX } from 'src/dashboard/components/nativeFilters/FiltersConfigModal/utils';
+import { HYDRATE_DASHBOARD } from 'src/dashboard/actions/hydrate';
+import { isFeatureEnabled } from 'src/featureFlags';
 import { DataMaskStateWithId, DataMaskWithId } from './types';
 import {
   AnyDataMaskAction,
   SET_DATA_MASK_FOR_FILTER_CONFIG_COMPLETE,
   UPDATE_DATA_MASK,
 } from './actions';
-import { NATIVE_FILTER_PREFIX } from '../dashboard/components/nativeFilters/FiltersConfigModal/utils';
+import {
-import { Filter } from '../dashboard/components/nativeFilters/types';
+  Filter,
+  FilterConfiguration,
+} from '../dashboard/components/nativeFilters/types';
 
+export function getInitialDataMask(id?: string): DataMask;
 export function getInitialDataMask(id: string): DataMaskWithId {
+  let otherProps = {};
+  if (id) {
+    otherProps = {
+      id,
+    };
+  }
   return {
-    id,
+    ...otherProps,
     extraFormData: {},
-    filterState: {},
+    filterState: {
+      value: null,
+    },
     ownState: {},
-    isApplied: false,
+  } as DataMaskWithId;
-  };
+}
+
+function fillNativeFilters(
+  data: FilterConfiguration,
+  cleanState: DataMaskStateWithId,
+  draft: DataMaskStateWithId,
+) {
+  data.forEach((filter: Filter) => {
+    cleanState[filter.id] = {
+      ...getInitialDataMask(filter.id), // take initial data
+      ...filter.defaultDataMask, // if something new came from BE - take it
+      ...draft[filter.id], // keep local filter data
+    };
+  });
+  // Get back all other non-native filters
+  Object.values(draft).forEach(filter => {
+    if (!String(filter?.id).startsWith(NATIVE_FILTER_PREFIX)) {
+      cleanState[filter?.id] = filter;
+    }
+  });
 }
 
 const dataMaskReducer = produce(
@@ -48,21 +82,31 @@ const dataMaskReducer = produce(
           ...getInitialDataMask(action.filterId),
           ...draft[action.filterId],
           ...action.dataMask,
-          isApplied: true,
         };
         return draft;
-
+      // TODO: update hydrate to .ts
+      // @ts-ignore
+      case HYDRATE_DASHBOARD:
+        if (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)) {
+          Object.keys(
+            // @ts-ignore
+            action.data.dashboardInfo?.metadata?.chart_configuration,
+          ).forEach(id => {
+            cleanState[id] = {
+              ...getInitialDataMask(id), // take initial data
+            };
+          });
+        }
+        fillNativeFilters(
+          // @ts-ignore
+          action.data.dashboardInfo?.metadata?.native_filter_configuration ??
+            [],
+          cleanState,
+          draft,
+        );
+        return cleanState;
       case SET_DATA_MASK_FOR_FILTER_CONFIG_COMPLETE:
-        (action.filterConfig ?? []).forEach((filter: Filter) => {
+        fillNativeFilters(action.filterConfig ?? [], cleanState, draft);
-          cleanState[filter.id] =
-            draft[filter.id] ?? getInitialDataMask(filter.id);
-        });
-        // Get back all other non-native filters
-        Object.values(draft).forEach(filter => {
-          if (!String(filter?.id).startsWith(NATIVE_FILTER_PREFIX)) {
-            cleanState[filter?.id] = filter;
-          }
-        });
         return cleanState;
 
       default:

superset-frontend/src/dataMask/types.ts

@@ -25,5 +25,5 @@ export enum DataMaskType {
 
 export type DataMaskState = { [id: string]: DataMask };
 
-export type DataMaskWithId = { id: string; isApplied?: boolean } & DataMask;
+export type DataMaskWithId = { id: string } & DataMask;
 export type DataMaskStateWithId = { [filterId: string]: DataMaskWithId };

superset-frontend/src/filters/utils.ts

@@ -41,17 +41,14 @@ export const getSelectExtraFormData = (
         sqlExpression: '1 = 0',
       },
     ];
-  } else {
+  } else if (value !== undefined && value !== null && value.length !== 0) {
-    extra.filters =
+    extra.filters = [
-      value === undefined || value === null || value.length === 0
+      {
-        ? []
+        col,
-        : [
+        op: inverseSelection ? ('NOT IN' as const) : ('IN' as const),
-            {
+        val: value,
-              col,
+      },
-              op: inverseSelection ? ('NOT IN' as const) : ('IN' as const),
+    ];
-              val: value,
-            },
-          ];
   }
   return extra;
 };
@@ -69,9 +66,11 @@ export const getRangeExtraFormData = (
     filters.push({ col, op: '<=', val: upper });
   }
 
-  return {
+  return filters.length
-    filters,
+    ? {
-  };
+        filters,
+      }
+    : {};
 };
 
 export interface DataRecordValueFormatter {