Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(native-filters): add search all filter options #14710

Merged
merged 12 commits into from
May 24, 2021
Merged

feat(native-filters): add search all filter options #14710

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9018ddc
feat(native-filters): add search all filter options
villebro May 18, 2021
319ad32
add tests
villebro May 20, 2021
604100f
fix default value
villebro May 21, 2021
1f6e6c2
remove redundant action
villebro May 21, 2021
112a6e4
Merge branch 'master' into villebro/select-load
villebro May 24, 2021
07a623a
implement ILIKE operator
villebro May 24, 2021
a14b1d5
rebump packages
villebro May 24, 2021
e800d8e
fix test
villebro May 24, 2021
9770ee0
address comments
villebro May 24, 2021
1116195
fix state changes coming from application
villebro May 24, 2021
d9dc6b8
Merge branch 'master' into villebro/select-load
villebro May 24, 2021
5996b58
fix debouncer
villebro May 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
604 changes: 302 additions & 302 deletions superset-frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

56 changes: 28 additions & 28 deletions superset-frontend/package.json
View file
Open in desktop
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.49",
"@superset-ui/core": "^0.17.49",
"@superset-ui/legacy-plugin-chart-calendar": "^0.17.49",
"@superset-ui/legacy-plugin-chart-chord": "^0.17.49",
"@superset-ui/legacy-plugin-chart-country-map": "^0.17.49",
"@superset-ui/legacy-plugin-chart-event-flow": "^0.17.49",
"@superset-ui/legacy-plugin-chart-force-directed": "^0.17.49",
"@superset-ui/legacy-plugin-chart-heatmap": "^0.17.49",
"@superset-ui/legacy-plugin-chart-histogram": "^0.17.49",
"@superset-ui/legacy-plugin-chart-horizon": "^0.17.49",
"@superset-ui/legacy-plugin-chart-map-box": "^0.17.49",
"@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.49",
"@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.49",
"@superset-ui/legacy-plugin-chart-partition": "^0.17.49",
"@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.49",
"@superset-ui/legacy-plugin-chart-rose": "^0.17.49",
"@superset-ui/legacy-plugin-chart-sankey": "^0.17.49",
"@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.49",
"@superset-ui/legacy-plugin-chart-sunburst": "^0.17.49",
"@superset-ui/legacy-plugin-chart-treemap": "^0.17.49",
"@superset-ui/legacy-plugin-chart-world-map": "^0.17.49",
"@superset-ui/legacy-preset-chart-big-number": "^0.17.49",
"@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.49",
"@superset-ui/plugin-chart-echarts": "^0.17.49",
"@superset-ui/plugin-chart-pivot-table": "^0.17.49",
"@superset-ui/plugin-chart-table": "^0.17.49",
"@superset-ui/plugin-chart-word-cloud": "^0.17.49",
"@superset-ui/preset-chart-xy": "^0.17.49",
"@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
Open in desktop
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
Open in desktop
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
4 changes: 4 additions & 0 deletions ...board/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,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;

Expand Down Expand Up @@ -471,6 +474,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
Open in desktop
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,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default for Filter Box is 1000 rows.

showSearch: true,
defaultValue: defaultDataMask?.filterState?.value,
time_range,
Expand Down
Loading