diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx index 1ac1fb3a5..91908823b 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx @@ -22,8 +22,10 @@ import Icon from 'src/components/Icon'; import FilterControl from 'src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl'; import { CascadeFilter } from 'src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/types'; import { Filter } from 'src/dashboard/components/nativeFilters/types'; +import { DataMaskStateWithId } from 'src/dataMask/types'; export interface CascadeFilterControlProps { + dataMaskSelected?: DataMaskStateWithId; filter: CascadeFilter; directPathToChild?: string[]; onFilterSelectionChange: (filter: Filter, dataMask: DataMask) => void; @@ -45,6 +47,7 @@ const StyledCaretIcon = styled(Icon)` `; const CascadeFilterControl: React.FC = ({ + dataMaskSelected, filter, directPathToChild, onFilterSelectionChange, @@ -53,6 +56,7 @@ const CascadeFilterControl: React.FC = ({ = ({ {filter.cascadeChildren?.map(childFilter => (
  • = ({ + dataMaskSelected, filter, visible, onVisibleChange, @@ -83,9 +82,7 @@ const CascadePopover: React.FC = ({ directPathToChild, }) => { const [currentPathToChild, setCurrentPathToChild] = useState(); - const dataMask = useSelector( - state => state.dataMask[filter.id] ?? getInitialDataMask(filter.id), - ); + const dataMask = dataMaskSelected[filter.id]; useEffect(() => { setCurrentPathToChild(directPathToChild); @@ -98,7 +95,7 @@ const CascadePopover: React.FC = ({ const getActiveChildren = useCallback( (filter: CascadeFilter): CascadeFilter[] | null => { const children = filter.cascadeChildren || []; - const currentValue = dataMask.filterState?.value; + const currentValue = dataMask?.filterState?.value; const activeChildren = children.flatMap( childFilter => getActiveChildren(childFilter) || [], @@ -147,6 +144,7 @@ const CascadePopover: React.FC = ({ if (!filter.cascadeChildren?.length) { return ( = ({ const content = ( = ({
    {activeFilters.map(activeFilter => ( = ({ + dataMaskSelected, filter, icon, onFilterSelectionChange, @@ -57,6 +58,7 @@ const FilterControl: React.FC = ({
    {icon}
    void; }; @@ -101,6 +101,7 @@ const FilterControls: FC = ({ setVisiblePopoverId(visible ? cascadeFilters[index].id : null) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx index d6e146b8b..495f50f43 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx @@ -53,13 +53,14 @@ const FilterItem = styled.div` `; const FilterValue: React.FC = ({ + dataMaskSelected, filter, directPathToChild, onFilterSelectionChange, }) => { const { id, targets, filterType, adhoc_filters, time_range } = filter; const metadata = getChartMetadataRegistry().get(filterType); - const cascadingFilters = useCascadingFilters(id); + const cascadingFilters = useCascadingFilters(id, dataMaskSelected); const [state, setState] = useState([]); const [error, setError] = useState(''); const [formData, setFormData] = useState>({}); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts index 7be583578..1aaf77272 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/state.ts @@ -18,22 +18,27 @@ */ import { useSelector } from 'react-redux'; import { NativeFiltersState } from 'src/dashboard/reducers/types'; +import { DataMaskStateWithId } from 'src/dataMask/types'; +import { ExtraFormData } from '@superset-ui/core'; import { mergeExtraFormData } from '../../utils'; -import { useNativeFiltersDataMask } from '../state'; // eslint-disable-next-line import/prefer-default-export -export function useCascadingFilters(id: string) { +export function useCascadingFilters( + id: string, + dataMaskSelected?: DataMaskStateWithId, +): ExtraFormData { const { filters } = useSelector( state => state.nativeFilters, ); const filter = filters[id]; const cascadeParentIds: string[] = filter?.cascadeParentIds ?? []; let cascadedFilters = {}; - const nativeFiltersDataMask = useNativeFiltersDataMask(); cascadeParentIds.forEach(parentId => { - const parentState = nativeFiltersDataMask[parentId] || {}; - const { extraFormData: parentExtra = {} } = parentState; - cascadedFilters = mergeExtraFormData(cascadedFilters, parentExtra); + const parentState = dataMaskSelected?.[parentId]; + cascadedFilters = mergeExtraFormData( + cascadedFilters, + parentState?.extraFormData, + ); }); return cascadedFilters; } diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts index 0b39dd210..93bf76d8c 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts @@ -18,9 +18,11 @@ */ import React from 'react'; import { DataMask } from '@superset-ui/core'; +import { DataMaskStateWithId } from 'src/dataMask/types'; import { Filter } from '../../types'; export interface FilterProps { + dataMaskSelected?: DataMaskStateWithId; filter: Filter & { dataMask?: DataMask; }; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx index 50c16e950..44a4f82ae 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx @@ -19,7 +19,7 @@ /* eslint-disable no-param-reassign */ import { HandlerFunction, styled, t } from '@superset-ui/core'; -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; import cx from 'classnames'; import Icon from 'src/components/Icon'; @@ -37,11 +37,7 @@ import { testWithId } from 'src/utils/testUtils'; import { Filter } from 'src/dashboard/components/nativeFilters/types'; import Loading from 'src/components/Loading'; import { getInitialDataMask } from 'src/dataMask/reducer'; -import { - getOnlyExtraFormData, - mapParentFiltersToChildren, - TabIds, -} from './utils'; +import { getOnlyExtraFormData, TabIds } from './utils'; import FilterSets from './FilterSets'; import { useNativeFiltersDataMask, @@ -175,10 +171,6 @@ const FilterBar: React.FC = ({ const filterValues = Object.values(filters); const dataMaskApplied: DataMaskStateWithId = useNativeFiltersDataMask(); const [isFilterSetChanged, setIsFilterSetChanged] = useState(false); - const cascadeChildren = useMemo( - () => mapParentFiltersToChildren(filterValues), - [filterValues], - ); useEffect(() => { setDataMaskSelected(() => dataMaskApplied); @@ -190,15 +182,6 @@ const FilterBar: React.FC = ({ ) => { setIsFilterSetChanged(tab !== TabIds.AllFilters); setDataMaskSelected(draft => { - const children = cascadeChildren[filter.id] || []; - // force instant updating on initialization or for parent filters when dataMaskSelected has filter - if ( - dataMaskSelected[filter.id] && - (filter.isInstant || children.length > 0) - ) { - dispatch(updateDataMask(filter.id, dataMask)); - } - draft[filter.id] = { ...(getInitialDataMask(filter.id) as DataMaskWithId), ...dataMask,