pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(native-filters): improve inverse selection indicators (#14873)

This commit is contained in:
Ville Brofeldt 2021-05-28 07:45:37 +03:00 committed by GitHub
parent acbbced20b
commit b72e5e0aae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts
View File

@ -226,7 +226,10 @@ export const selectNativeIndicatorsForChart = (
)
.map(nativeFilter => {
const column = nativeFilter.targets[0]?.column?.name;
let value = dataMask[nativeFilter.id]?.filterState?.value ?? null;
let value =
dataMask[nativeFilter.id]?.filterState?.label ??
dataMask[nativeFilter.id]?.filterState?.value ??
null;
if (!Array.isArray(value) && value !== null) {
value = [value];
}
@ -252,7 +255,10 @@ export const selectNativeIndicatorsForChart = (
),
)
.map(chartConfig => {
let value = dataMask[chartConfig.id]?.filterState?.value ?? null;
let value =
dataMask[chartConfig.id]?.filterState?.label ??
dataMask[chartConfig.id]?.filterState?.value ??
null;
if (!Array.isArray(value) && value !== null) {
value = [value];
}

9
superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
View File

@ -38,6 +38,7 @@ import React, {
import { Select } from 'src/common/components';
import debounce from 'lodash/debounce';
import { SLOW_DEBOUNCE } from 'src/constants';
import { CheckOutlined, StopOutlined } from '@ant-design/icons';
import { PluginFilterSelectProps, SelectValue } from './types';
import { StyledSelect, Styles } from '../common';
import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
@ -49,7 +50,7 @@ type DataMaskAction =
| {
type: 'filterState';
extraFormData: ExtraFormData;
filterState: { value: SelectValue };
filterState: { value: SelectValue; label?: string };
};
function reducer(state: DataMask, action: DataMaskAction): DataMask {
@ -135,6 +136,8 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
const updateDataMask = (values: SelectValue) => {
const emptyFilter =
enableEmptyFilter && !inverseSelection && !values?.length;
const suffix =
inverseSelection && values?.length ? ` (${t('excluded')})` : '';
dispatchDataMask({
type: 'filterState',
@ -146,6 +149,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
),
filterState: {
value: values,
label: `${(values || []).join(', ')}${suffix}`,
},
});
};
@ -260,6 +264,9 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
ref={inputRef}
loading={isRefreshing}
maxTagCount={5}
menuItemSelectedIcon={
inverseSelection ? <StopOutlined /> : <CheckOutlined />
}
>
{sortedData.map(row => {
const [value] = groupby.map(col => row[col]);