Skip to content

Commit

Permalink
feat(native-filters): add search all filter options (#14710)
Browse files Browse the repository at this point in the history 
* feat(native-filters): add search all filter options

* add tests

* fix default value

* implement ILIKE operator

* rebump packages

* fix test

* address comments

* fix state changes coming from application

* fix debouncer
  • Loading branch information
@villebro
villebro authored May 24, 2021
1 parent 8484ee6 commit e9657af
Show file tree
Hide file tree
Showing 18 changed files with 593 additions and 402 deletions.
604 changes: 302 additions & 302 deletions superset-frontend/package-lock.json
View file

Large diffs are not rendered by default.

56 changes: 28 additions & 28 deletions superset-frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,35 +67,35 @@
"@emotion/babel-preset-css-prop": "^11.2.0",
"@emotion/cache": "^11.1.3",
"@emotion/react": "^11.1.5",
"@superset-ui/chart-controls": "^0.17.48",
"@superset-ui/core": "^0.17.48",
"@superset-ui/legacy-plugin-chart-calendar": "0.17.48",
"@superset-ui/legacy-plugin-chart-chord": "0.17.48",
"@superset-ui/legacy-plugin-chart-country-map": "0.17.48",
"@superset-ui/legacy-plugin-chart-event-flow": "0.17.48",
"@superset-ui/legacy-plugin-chart-force-directed": "0.17.48",
"@superset-ui/legacy-plugin-chart-heatmap": "0.17.48",
"@superset-ui/legacy-plugin-chart-histogram": "0.17.48",
"@superset-ui/legacy-plugin-chart-horizon": "0.17.48",
"@superset-ui/legacy-plugin-chart-map-box": "0.17.48",
"@superset-ui/legacy-plugin-chart-paired-t-test": "0.17.48",
"@superset-ui/legacy-plugin-chart-parallel-coordinates": "0.17.48",
"@superset-ui/legacy-plugin-chart-partition": "0.17.48",
"@superset-ui/legacy-plugin-chart-pivot-table": "0.17.48",
"@superset-ui/legacy-plugin-chart-rose": "0.17.48",
"@superset-ui/legacy-plugin-chart-sankey": "^0.17.48",
"@superset-ui/legacy-plugin-chart-sankey-loop": "0.17.48",
"@superset-ui/legacy-plugin-chart-sunburst": "0.17.48",
"@superset-ui/legacy-plugin-chart-treemap": "0.17.48",
"@superset-ui/legacy-plugin-chart-world-map": "0.17.48",
"@superset-ui/legacy-preset-chart-big-number": "0.17.48",
"@superset-ui/chart-controls": "^0.17.50",
"@superset-ui/core": "^0.17.50",
"@superset-ui/legacy-plugin-chart-calendar": "^0.17.50",
"@superset-ui/legacy-plugin-chart-chord": "^0.17.50",
"@superset-ui/legacy-plugin-chart-country-map": "^0.17.50",
"@superset-ui/legacy-plugin-chart-event-flow": "^0.17.50",
"@superset-ui/legacy-plugin-chart-force-directed": "^0.17.50",
"@superset-ui/legacy-plugin-chart-heatmap": "^0.17.50",
"@superset-ui/legacy-plugin-chart-histogram": "^0.17.50",
"@superset-ui/legacy-plugin-chart-horizon": "^0.17.50",
"@superset-ui/legacy-plugin-chart-map-box": "^0.17.50",
"@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.50",
"@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.50",
"@superset-ui/legacy-plugin-chart-partition": "^0.17.50",
"@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.50",
"@superset-ui/legacy-plugin-chart-rose": "^0.17.50",
"@superset-ui/legacy-plugin-chart-sankey": "^0.17.50",
"@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.50",
"@superset-ui/legacy-plugin-chart-sunburst": "^0.17.50",
"@superset-ui/legacy-plugin-chart-treemap": "^0.17.50",
"@superset-ui/legacy-plugin-chart-world-map": "^0.17.50",
"@superset-ui/legacy-preset-chart-big-number": "^0.17.50",
"@superset-ui/legacy-preset-chart-deckgl": "^0.4.6",
"@superset-ui/legacy-preset-chart-nvd3": "0.17.48",
"@superset-ui/plugin-chart-echarts": "^0.17.48",
"@superset-ui/plugin-chart-pivot-table": "^0.17.48",
"@superset-ui/plugin-chart-table": "^0.17.48",
"@superset-ui/plugin-chart-word-cloud": "0.17.48",
"@superset-ui/preset-chart-xy": "0.17.48",
"@superset-ui/legacy-preset-chart-nvd3": "^0.17.50",
"@superset-ui/plugin-chart-echarts": "^0.17.50",
"@superset-ui/plugin-chart-pivot-table": "^0.17.50",
"@superset-ui/plugin-chart-table": "^0.17.50",
"@superset-ui/plugin-chart-word-cloud": "^0.17.50",
"@superset-ui/preset-chart-xy": "^0.17.50",
"@vx/responsive": "^0.0.195",
"abortcontroller-polyfill": "^1.1.9",
"antd": "^4.9.4",
Expand Down
33 changes: 25 additions & 8 deletions ...-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import {
t,
Behavior,
ChartDataResponseResult,
JsonObject,
getChartMetadataRegistry,
} from '@superset-ui/core';
import { useDispatch } from 'react-redux';
import { areObjectsEqual } from 'src/reduxUtils';
Expand Down Expand Up @@ -53,10 +55,12 @@ const FilterValue: React.FC<FilterProps> = ({
onFilterSelectionChange,
}) => {
const { id, targets, filterType, adhoc_filters, time_range } = filter;
const metadata = getChartMetadataRegistry().get(filterType);
const cascadingFilters = useCascadingFilters(id);
const [state, setState] = useState<ChartDataResponseResult[]>([]);
const [error, setError] = useState<string>('');
const [formData, setFormData] = useState<Partial<QueryFormData>>({});
const [ownState, setOwnState] = useState<JsonObject>({});
const inputRef = useRef<HTMLInputElement>(null);
const [target] = targets;
const {
Expand All @@ -65,7 +69,8 @@ const FilterValue: React.FC<FilterProps> = ({
}: Partial<{ datasetId: number; column: { name?: string } }> = target;
const { name: groupby } = column;
const hasDataSource = !!datasetId;
const [loading, setLoading] = useState<boolean>(hasDataSource);
const [isLoading, setIsLoading] = useState<boolean>(hasDataSource);
const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
const dispatch = useDispatch();
useEffect(() => {
const newFormData = getFormData({
Expand All @@ -77,41 +82,51 @@ const FilterValue: React.FC<FilterProps> = ({
adhoc_filters,
time_range,
});
if (!areObjectsEqual(formData, newFormData)) {
const filterOwnState = filter.dataMask?.ownState || {};
if (
!areObjectsEqual(formData, newFormData) ||
!areObjectsEqual(ownState, filterOwnState)
) {
setFormData(newFormData);
setOwnState(filterOwnState);
if (!hasDataSource) {
return;
}
setIsRefreshing(true);
getChartDataRequest({
formData: newFormData,
force: false,
requestParams: { dashboardId: 0 },
ownState: filter.dataMask?.ownState,
ownState: filterOwnState,
})
.then(response => {
if (isFeatureEnabled(FeatureFlag.GLOBAL_ASYNC_QUERIES)) {
// deal with getChartDataRequest transforming the response data
const result = 'result' in response ? response.result[0] : response;
waitForAsyncData(result)
.then((asyncResult: ChartDataResponseResult[]) => {
setLoading(false);
setIsRefreshing(false);
setIsLoading(false);
setState(asyncResult);
})
.catch((error: ClientErrorObject) => {
setError(
error.message || error.error || t('Check configuration'),
);
setLoading(false);
setIsRefreshing(false);
setIsLoading(false);
});
} else {
setState(response.result);
setError('');
setLoading(false);
setIsRefreshing(false);
setIsLoading(false);
}
})
.catch((error: Response) => {
setError(error.statusText);
setLoading(false);
setIsRefreshing(false);
setIsLoading(false);
});
}
}, [
Expand Down Expand Up @@ -151,7 +166,7 @@ const FilterValue: React.FC<FilterProps> = ({

return (
<FilterItem data-test="form-item-value">
{loading ? (
{isLoading ? (
<Loading position="inline-centered" />
) : (
<SuperChart
Expand All @@ -164,6 +179,8 @@ const FilterValue: React.FC<FilterProps> = ({
behaviors={[Behavior.NATIVE_FILTER]}
filterState={filter.dataMask?.filterState}
ownState={filter.dataMask?.ownState}
enableNoResults={metadata?.enableNoResults}
isRefreshing={isRefreshing}
hooks={{ setDataMask, setFocusedFilter, unsetFocusedFilter }}
/>
)}
Expand Down
3 changes: 3 additions & 0 deletions .../dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ type DefaultValueProps = {
hasDataset: boolean;
form: FormInstance<NativeFiltersForm>;
formData: ReturnType<typeof getFormData>;
enableNoResults: boolean;
};

const DefaultValue: FC<DefaultValueProps> = ({
Expand All @@ -42,6 +43,7 @@ const DefaultValue: FC<DefaultValueProps> = ({
form,
setDataMask,
formData,
enableNoResults,
}) => {
const [loading, setLoading] = useState(hasDataset);
const formFilter = (form.getFieldValue('filters') || {})[filterId];
Expand Down Expand Up @@ -70,6 +72,7 @@ const DefaultValue: FC<DefaultValueProps> = ({
}
chartType={formFilter?.filterType}
hooks={{ setDataMask }}
enableNoResults={enableNoResults}
/>
);
};
Expand Down
5 changes: 4 additions & 1 deletion ...board/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,9 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
?.datasourceCount;
const hasColumn =
hasDataset && !FILTERS_WITHOUT_COLUMN.includes(formFilter?.filterType);

// @ts-ignore
const enableNoResults = !!nativeFilterItems[formFilter?.filterType]?.value
?.enableNoResults;
const datasetId = formFilter?.dataset?.value;

useEffect(() => {
Expand Down Expand Up @@ -484,6 +486,7 @@ export const FiltersConfigForm: React.FC<FiltersConfigFormProps> = ({
hasDataset={hasDataset}
form={form}
formData={newFormData}
enableNoResults={enableNoResults}
/>
) : hasFilledDataset ? (
t('Click "Populate" to get "Default Value" ->')
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/dashboard/components/nativeFilters/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const getFormData = ({
extra_form_data: cascadingFilters,
granularity_sqla: 'ds',
metrics: ['count'],
row_limit: 10000,
row_limit: 1000,
showSearch: true,
defaultValue: defaultDataMask?.filterState?.value,
time_range,
Expand Down
1 change: 1 addition & 0 deletions superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const OPERATORS_TO_SQL = {
IN: 'IN',
'NOT IN': 'NOT IN',
LIKE: 'LIKE',
ILIKE: 'ILIKE',
REGEX: 'REGEX',
'IS NOT NULL': 'IS NOT NULL',
'IS NULL': 'IS NULL',
Expand Down
3 changes: 3 additions & 0 deletions ...xplore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,9 @@ function translateOperator(operator) {
if (operator === OPERATORS.LIKE) {
return 'LIKE';
}
if (operator === OPERATORS.ILIKE) {
return 'LIKE (case insensitive)';
}
if (operator === OPERATORS['LATEST PARTITION']) {
return 'use latest_partition template';
}
Expand Down
3 changes: 2 additions & 1 deletion superset-frontend/src/explore/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export const OPERATORS = {
'<=': '<=',
IN: 'IN',
'NOT IN': 'NOT IN',
ILIKE: 'ILIKE',
LIKE: 'LIKE',
REGEX: 'REGEX',
'IS NOT NULL': 'IS NOT NULL',
Expand All @@ -48,7 +49,7 @@ export const OPERATORS = {

export const OPERATORS_OPTIONS = Object.values(OPERATORS);

export const TABLE_ONLY_OPERATORS = [OPERATORS.LIKE];
export const TABLE_ONLY_OPERATORS = [OPERATORS.LIKE, OPERATORS.ILIKE];
export const DRUID_ONLY_OPERATORS = [OPERATORS.REGEX];
export const HAVING_OPERATORS = [
OPERATORS['=='],
Expand Down
Loading

0 comments on commit e9657af

Please sign in to comment.