feat(cross-filters): using verbose map in applied cross-filters

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,

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/Vertical.tsx

@@ -20,9 +20,15 @@
 import React from 'react';
 import { DataMaskStateWithId, JsonObject } from '@superset-ui/core';
 import { useSelector } from 'react-redux';
-import { DashboardLayout, RootState } from 'src/dashboard/types';
+import {
+  ChartsState,
+  DashboardLayout,
+  DatasourcesState,
+  RootState,
+} from 'src/dashboard/types';
 import crossFiltersSelector from './selectors';
 import VerticalCollapse from './VerticalCollapse';
+import { getVerboseMapsForCharts } from '../utils';
 
 const CrossFiltersVertical = () => {
   const dataMask = useSelector<RootState, DataMaskStateWithId>(
@@ -31,13 +37,19 @@ const CrossFiltersVertical = () => {
   const chartConfiguration = useSelector<RootState, JsonObject>(
     state => state.dashboardInfo.metadata?.chart_configuration,
   );
+  const datasources = useSelector<RootState, DatasourcesState>(
+    state => state.datasources,
+  );
+  const charts = useSelector<RootState, ChartsState>(state => state.charts);
   const dashboardLayout = useSelector<RootState, DashboardLayout>(
     state => state.dashboardLayout.present,
   );
+  const verboseMaps = getVerboseMapsForCharts(charts, datasources);
   const selectedCrossFilters = crossFiltersSelector({
     dataMask,
     chartConfiguration,
     dashboardLayout,
+    verboseMaps,
   });
 
   return <VerticalCollapse crossFilters={selectedCrossFilters} />;

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<string, string> };
 }): 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) &&

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

@@ -48,8 +48,10 @@ import {
   useSelectFiltersInScope,
 } from 'src/dashboard/components/nativeFilters/state';
 import {
+  ChartsState,
   DashboardLayout,
   FilterBarOrientation,
+  DatasourcesState,
   RootState,
 } from 'src/dashboard/types';
 import DropdownContainer, {
@@ -62,6 +64,7 @@ import { FiltersDropdownContent } from '../FiltersDropdownContent';
 import crossFiltersSelector from '../CrossFilters/selectors';
 import CrossFilter from '../CrossFilters/CrossFilter';
 import { useFilterOutlined } from '../useFilterOutlined';
+import { getVerboseMapsForCharts } from '../utils';
 
 type FilterControlsProps = {
   dataMaskSelected: DataMaskStateWithId;
@@ -93,6 +96,13 @@ const FilterControls: FC<FilterControlsProps> = ({
   const dashboardLayout = useSelector<RootState, DashboardLayout>(
     state => state.dashboardLayout.present,
   );
+  const datasources = useSelector<RootState, DatasourcesState>(
+    state => state.datasources,
+  );
+  const charts = useSelector<RootState, ChartsState>(state => state.charts);
+
+  const verboseMaps = getVerboseMapsForCharts(charts, datasources);
+
   const isCrossFiltersEnabled = isFeatureEnabled(
     FeatureFlag.DASHBOARD_CROSS_FILTERS,
   );
@@ -103,6 +113,7 @@ const FilterControls: FC<FilterControlsProps> = ({
             dataMask,
             chartConfiguration,
             dashboardLayout,
+            verboseMaps,
           })
         : [],
     [chartConfiguration, dashboardLayout, dataMask, isCrossFiltersEnabled],

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

@@ -28,10 +28,15 @@ import {
 } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import Loading from 'src/components/Loading';
-import { DashboardLayout, RootState } from 'src/dashboard/types';
+import {
+  ChartsState,
+  DashboardLayout,
+  DatasourcesState,
+  RootState,
+} from 'src/dashboard/types';
 import { useSelector } from 'react-redux';
 import FilterControls from './FilterControls/FilterControls';
-import { getFilterBarTestId } from './utils';
+import { getVerboseMapsForCharts, getFilterBarTestId } from './utils';
 import { HorizontalBarProps } from './types';
 import FilterBarSettings from './FilterBarSettings';
 import FilterConfigurationLink from './FilterConfigurationLink';
@@ -117,11 +122,18 @@ const HorizontalFilterBar: React.FC<HorizontalBarProps> = ({
   const isCrossFiltersEnabled = isFeatureEnabled(
     FeatureFlag.DASHBOARD_CROSS_FILTERS,
   );
+  const datasources = useSelector<RootState, DatasourcesState>(
+    state => state.datasources,
+  );
+  const charts = useSelector<RootState, ChartsState>(state => state.charts);
+  const verboseMaps = getVerboseMapsForCharts(charts, datasources);
+
   const selectedCrossFilters = isCrossFiltersEnabled
     ? crossFiltersSelector({
         dataMask,
         chartConfiguration,
         dashboardLayout,
+        verboseMaps,
       })
     : [];
   const hasFilters = filterValues.length > 0 || selectedCrossFilters.length > 0;

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

@@ -20,6 +20,7 @@
 import { areObjectsEqual } from 'src/reduxUtils';
 import { DataMaskStateWithId, Filter, FilterState } from '@superset-ui/core';
 import { testWithId } from 'src/utils/testUtils';
+import { ChartsState, DatasourcesState } from 'src/dashboard/types';
 
 export const getOnlyExtraFormData = (data: DataMaskStateWithId) =>
   Object.values(data).reduce(
@@ -62,5 +63,16 @@ export const checkIsApplyDisabled = (
   );
 };
 
+export const getVerboseMapsForCharts = (
+  charts: ChartsState,
+  datasources: DatasourcesState,
+) =>
+  Object.keys(charts).reduce((obj, chartId) => {
+    const chartDatasource = datasources[charts[chartId]?.form_data?.datasource];
+    return Object.assign(obj, {
+      [chartId]: chartDatasource ? chartDatasource.verbose_map : {},
+    });
+  }, {});
+
 export const FILTER_BAR_TEST_ID = 'filter-bar';
 export const getFilterBarTestId = testWithId(FILTER_BAR_TEST_ID);

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<string, string>;
 };
 
 type Filter = {
@@ -167,6 +168,7 @@ export const getCrossFilterIndicator = (
   chartId: number,
   dataMask: DataMask,
   dashboardLayout: DashboardLayout,
+  verboseMap: Record<string, string> = {},
 ) => {
   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<string>,
   rejectedColumns: Set<string>,
+  verboseMap?: Record<string, string>,
   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);