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

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

@@ -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<RootState, DataMaskStateWithId>(
@@ -34,10 +35,12 @@ const CrossFiltersVertical = () => {
   const dashboardLayout = useSelector<RootState, DashboardLayout>(
     state => state.dashboardLayout.present,
   );
+  const verboseMaps = useChartsVerboseMaps();
   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

@@ -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<FilterControlsProps> = ({
   const dashboardLayout = useSelector<RootState, DashboardLayout>(
     state => state.dashboardLayout.present,
   );
+  const verboseMaps = useChartsVerboseMaps();
+
   const isCrossFiltersEnabled = isFeatureEnabled(
     FeatureFlag.DASHBOARD_CROSS_FILTERS,
   );
@@ -103,6 +106,7 @@ const FilterControls: FC<FilterControlsProps> = ({
             dataMask,
             chartConfiguration,
             dashboardLayout,
+            verboseMaps,
           })
         : [],
     [chartConfiguration, dashboardLayout, dataMask, isCrossFiltersEnabled],

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<HorizontalBarProps> = ({
   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;

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<RootState, { [chartId: string]: Record<string, string> }>(
+    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);

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);