From bc2ec044b8076b9c6a04e726325e9d24ffc2726d Mon Sep 17 00:00:00 2001 From: Stepan <66589759+Always-prog@users.noreply.github.com> Date: Fri, 31 Mar 2023 12:31:39 +0300 Subject: [PATCH] feat(cross-filters): using verbose map in applied cross-filters (#23509) --- .../components/FiltersBadge/index.tsx | 2 ++ .../FilterBar/CrossFilters/Vertical.tsx | 3 +++ .../FilterBar/CrossFilters/selectors.ts | 4 +++- .../FilterControls/FilterControls.tsx | 4 ++++ .../nativeFilters/FilterBar/Horizontal.tsx | 5 ++++- .../nativeFilters/FilterBar/utils.ts | 18 ++++++++++++++++++ .../components/nativeFilters/selectors.ts | 8 +++++++- 7 files changed, 41 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx index 866fde94be..508933eec3 100644 --- a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx +++ b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx @@ -209,6 +209,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => { chart, present, dashboardInfo.metadata?.chart_configuration, + datasources[chart.form_data.datasource] ?? {}, ), ); } @@ -219,6 +220,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => { dashboardInfo.metadata?.chart_configuration, dataMask, nativeFilters, + datasources, nativeIndicators.length, present, prevChart?.queriesResponse, diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/Vertical.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/Vertical.tsx index 907e73c39e..ca6c36d2b3 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/Vertical.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/Vertical.tsx @@ -23,6 +23,7 @@ import { useSelector } from 'react-redux'; import { DashboardLayout, RootState } from 'src/dashboard/types'; import crossFiltersSelector from './selectors'; import VerticalCollapse from './VerticalCollapse'; +import { useChartsVerboseMaps } from '../utils'; const CrossFiltersVertical = () => { const dataMask = useSelector( @@ -34,10 +35,12 @@ const CrossFiltersVertical = () => { const dashboardLayout = useSelector( state => state.dashboardLayout.present, ); + const verboseMaps = useChartsVerboseMaps(); const selectedCrossFilters = crossFiltersSelector({ dataMask, chartConfiguration, dashboardLayout, + verboseMaps, }); return ; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/selectors.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/selectors.ts index bf19ecabf9..75e2450dd9 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/selectors.ts +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/selectors.ts @@ -25,8 +25,9 @@ export const crossFiltersSelector = (props: { dataMask: DataMaskStateWithId; chartConfiguration: JsonObject; dashboardLayout: DashboardLayout; + verboseMaps: { [key: string]: Record }; }): CrossFilterIndicator[] => { - const { dataMask, chartConfiguration, dashboardLayout } = props; + const { dataMask, chartConfiguration, dashboardLayout, verboseMaps } = props; const chartsIds = Object.keys(chartConfiguration); return chartsIds @@ -36,6 +37,7 @@ export const crossFiltersSelector = (props: { id, dataMask[id], dashboardLayout, + verboseMaps[id], ); if ( isDefined(filterIndicator.column) && diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx index 831d332c25..e3459610bd 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx @@ -62,6 +62,7 @@ import { FiltersDropdownContent } from '../FiltersDropdownContent'; import crossFiltersSelector from '../CrossFilters/selectors'; import CrossFilter from '../CrossFilters/CrossFilter'; import { useFilterOutlined } from '../useFilterOutlined'; +import { useChartsVerboseMaps } from '../utils'; type FilterControlsProps = { dataMaskSelected: DataMaskStateWithId; @@ -93,6 +94,8 @@ const FilterControls: FC = ({ const dashboardLayout = useSelector( state => state.dashboardLayout.present, ); + const verboseMaps = useChartsVerboseMaps(); + const isCrossFiltersEnabled = isFeatureEnabled( FeatureFlag.DASHBOARD_CROSS_FILTERS, ); @@ -103,6 +106,7 @@ const FilterControls: FC = ({ dataMask, chartConfiguration, dashboardLayout, + verboseMaps, }) : [], [chartConfiguration, dashboardLayout, dataMask, isCrossFiltersEnabled], diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx index 24b2caa033..47f181682f 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx @@ -31,7 +31,7 @@ import Loading from 'src/components/Loading'; import { DashboardLayout, RootState } from 'src/dashboard/types'; import { useSelector } from 'react-redux'; import FilterControls from './FilterControls/FilterControls'; -import { getFilterBarTestId } from './utils'; +import { useChartsVerboseMaps, getFilterBarTestId } from './utils'; import { HorizontalBarProps } from './types'; import FilterBarSettings from './FilterBarSettings'; import FilterConfigurationLink from './FilterConfigurationLink'; @@ -117,11 +117,14 @@ const HorizontalFilterBar: React.FC = ({ const isCrossFiltersEnabled = isFeatureEnabled( FeatureFlag.DASHBOARD_CROSS_FILTERS, ); + const verboseMaps = useChartsVerboseMaps(); + const selectedCrossFilters = isCrossFiltersEnabled ? crossFiltersSelector({ dataMask, chartConfiguration, dashboardLayout, + verboseMaps, }) : []; const hasFilters = filterValues.length > 0 || selectedCrossFilters.length > 0; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.ts index 9aaa02fc54..cdf488bc3d 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.ts +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/utils.ts @@ -20,6 +20,8 @@ import { areObjectsEqual } from 'src/reduxUtils'; import { DataMaskStateWithId, Filter, FilterState } from '@superset-ui/core'; import { testWithId } from 'src/utils/testUtils'; +import { RootState } from 'src/dashboard/types'; +import { useSelector } from 'react-redux'; export const getOnlyExtraFormData = (data: DataMaskStateWithId) => Object.values(data).reduce( @@ -62,5 +64,21 @@ export const checkIsApplyDisabled = ( ); }; +export const useChartsVerboseMaps = () => + useSelector }>( + state => { + const { charts, datasources } = state; + + return Object.keys(state.charts).reduce((chartsVerboseMaps, chartId) => { + const chartDatasource = + datasources[charts[chartId]?.form_data?.datasource]; + return { + ...chartsVerboseMaps, + [chartId]: chartDatasource ? chartDatasource.verbose_map : {}, + }; + }, {}); + }, + ); + export const FILTER_BAR_TEST_ID = 'filter-bar'; export const getFilterBarTestId = testWithId(FILTER_BAR_TEST_ID); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts b/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts index 5d4e980a40..e15f3d6c0d 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts +++ b/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts @@ -50,6 +50,7 @@ const TIME_GRANULARITY_FIELDS = new Set(Object.values(TIME_FILTER_MAP)); type Datasource = { time_grain_sqla?: [string, string][]; granularity?: [string, string][]; + verbose_map?: Record; }; type Filter = { @@ -167,6 +168,7 @@ export const getCrossFilterIndicator = ( chartId: number, dataMask: DataMask, dashboardLayout: DashboardLayout, + verboseMap: Record = {}, ) => { const filterState = dataMask?.filterState; const filters = dataMask?.extraFormData?.filters; @@ -179,7 +181,7 @@ export const getCrossFilterIndicator = ( layoutItem => layoutItem?.meta?.chartId === chartId, ); const filterObject: Indicator = { - column, + column: verboseMap[column] || column, name: dashboardLayoutItem?.meta?.sliceNameOverride || dashboardLayoutItem?.meta?.sliceName || @@ -288,6 +290,7 @@ export const selectChartCrossFilters = ( chartConfiguration: ChartConfiguration = defaultChartConfig, appliedColumns: Set, rejectedColumns: Set, + verboseMap?: Record, filterEmitter = false, ): Indicator[] | CrossFilterIndicator[] => { let crossFilterIndicators: any = []; @@ -309,6 +312,7 @@ export const selectChartCrossFilters = ( chartConfig.id, dataMask[chartConfig.id], dashboardLayout, + verboseMap, ); const filterStatus = getStatus({ label: filterIndicator.value, @@ -337,6 +341,7 @@ export const selectNativeIndicatorsForChart = ( chart: any, dashboardLayout: Layout, chartConfiguration: ChartConfiguration = defaultChartConfig, + datasource: Datasource, ): Indicator[] => { const appliedColumns = getAppliedColumns(chart); const rejectedColumns = getRejectedColumns(chart); @@ -392,6 +397,7 @@ export const selectNativeIndicatorsForChart = ( chartConfiguration, appliedColumns, rejectedColumns, + datasource.verbose_map, ); } const indicators = crossFilterIndicators.concat(nativeFilterIndicators);