mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
fix(Explore): Clear filter value when changing columns (#16871)
* Clear filter value onChange * Clear filter value on user change action
This commit is contained in:
parent
1a38ec6c43
commit
c8db435730
@ -211,41 +211,12 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
|
|||||||
onComparatorChange,
|
onComparatorChange,
|
||||||
} = useSimpleTabFilterProps(props);
|
} = useSimpleTabFilterProps(props);
|
||||||
const [suggestions, setSuggestions] = useState<Record<string, any>>([]);
|
const [suggestions, setSuggestions] = useState<Record<string, any>>([]);
|
||||||
|
const [comparator, setComparator] = useState(props.adhocFilter.comparator);
|
||||||
const [
|
const [
|
||||||
loadingComparatorSuggestions,
|
loadingComparatorSuggestions,
|
||||||
setLoadingComparatorSuggestions,
|
setLoadingComparatorSuggestions,
|
||||||
] = useState(false);
|
] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const refreshComparatorSuggestions = () => {
|
|
||||||
const { datasource } = props;
|
|
||||||
const col = props.adhocFilter.subject;
|
|
||||||
const having = props.adhocFilter.clause === CLAUSES.HAVING;
|
|
||||||
|
|
||||||
if (col && datasource && datasource.filter_select && !having) {
|
|
||||||
const controller = new AbortController();
|
|
||||||
const { signal } = controller;
|
|
||||||
if (loadingComparatorSuggestions) {
|
|
||||||
controller.abort();
|
|
||||||
}
|
|
||||||
setLoadingComparatorSuggestions(true);
|
|
||||||
SupersetClient.get({
|
|
||||||
signal,
|
|
||||||
endpoint: `/superset/filter/${datasource.type}/${datasource.id}/${col}/`,
|
|
||||||
})
|
|
||||||
.then(({ json }) => {
|
|
||||||
setSuggestions(json);
|
|
||||||
setLoadingComparatorSuggestions(false);
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
setSuggestions([]);
|
|
||||||
setLoadingComparatorSuggestions(false);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
refreshComparatorSuggestions();
|
|
||||||
}, [props.adhocFilter.subject]);
|
|
||||||
|
|
||||||
const onInputComparatorChange = (
|
const onInputComparatorChange = (
|
||||||
event: React.ChangeEvent<HTMLInputElement>,
|
event: React.ChangeEvent<HTMLInputElement>,
|
||||||
) => {
|
) => {
|
||||||
@ -257,7 +228,6 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const getOptionsRemaining = () => {
|
const getOptionsRemaining = () => {
|
||||||
const { comparator } = props.adhocFilter;
|
|
||||||
// if select is multi/value is array, we show the options not selected
|
// if select is multi/value is array, we show the options not selected
|
||||||
const valuesFromSuggestionsLength = Array.isArray(comparator)
|
const valuesFromSuggestionsLength = Array.isArray(comparator)
|
||||||
? comparator.filter(v => suggestions.includes(v)).length
|
? comparator.filter(v => suggestions.includes(v)).length
|
||||||
@ -270,13 +240,18 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
|
|||||||
return optionsRemaining ? placeholder : '';
|
return optionsRemaining ? placeholder : '';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSubjectChange = (subject: string) => {
|
||||||
|
setComparator(undefined);
|
||||||
|
onSubjectChange(subject);
|
||||||
|
};
|
||||||
|
|
||||||
let columns = props.options;
|
let columns = props.options;
|
||||||
const { subject, operator, comparator, operatorId } = props.adhocFilter;
|
const { subject, operator, operatorId } = props.adhocFilter;
|
||||||
|
|
||||||
const subjectSelectProps = {
|
const subjectSelectProps = {
|
||||||
ariaLabel: t('Select subject'),
|
ariaLabel: t('Select subject'),
|
||||||
value: subject ?? undefined,
|
value: subject ?? undefined,
|
||||||
onChange: onSubjectChange,
|
onChange: handleSubjectChange,
|
||||||
notFoundContent: t(
|
notFoundContent: t(
|
||||||
'No such column found. To filter on a metric, try the Custom SQL tab.',
|
'No such column found. To filter on a metric, try the Custom SQL tab.',
|
||||||
),
|
),
|
||||||
@ -345,6 +320,40 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const refreshComparatorSuggestions = () => {
|
||||||
|
const { datasource } = props;
|
||||||
|
const col = props.adhocFilter.subject;
|
||||||
|
const having = props.adhocFilter.clause === CLAUSES.HAVING;
|
||||||
|
|
||||||
|
if (col && datasource && datasource.filter_select && !having) {
|
||||||
|
const controller = new AbortController();
|
||||||
|
const { signal } = controller;
|
||||||
|
if (loadingComparatorSuggestions) {
|
||||||
|
controller.abort();
|
||||||
|
}
|
||||||
|
setLoadingComparatorSuggestions(true);
|
||||||
|
SupersetClient.get({
|
||||||
|
signal,
|
||||||
|
endpoint: `/superset/filter/${datasource.type}/${datasource.id}/${col}/`,
|
||||||
|
})
|
||||||
|
.then(({ json }) => {
|
||||||
|
setSuggestions(json);
|
||||||
|
setLoadingComparatorSuggestions(false);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setSuggestions([]);
|
||||||
|
setLoadingComparatorSuggestions(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
refreshComparatorSuggestions();
|
||||||
|
}, [props.adhocFilter.subject]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setComparator(props.adhocFilter.comparator);
|
||||||
|
}, [props.adhocFilter.comparator]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Select
|
<Select
|
||||||
|
Loading…
Reference in New Issue
Block a user