mirror of https://github.com/apache/superset.git
feat(cross-filters): using verbose map in applied cross-filters (#23509)
This commit is contained in:
parent
09757dc518
commit
bc2ec044b8
|
@ -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,
|
||||
|
|
|
@ -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} />;
|
||||
|
|
|
@ -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) &&
|
||||
|
|
|
@ -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],
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue