ypandey-fluidata opened a new issue, #37069:
URL: https://github.com/apache/superset/issues/37069
### Bug description
Hi I have found this issue #36882 , in which the user correct the
functionality of clear all button for native filters in Superset 5.0+ --
#Original Code:
`const handleClearAll = useCallback(() => {
const newClearAllTriggers = { ...clearAllTriggers };
// Clear all native filters, not just those in scope
// This ensures dependent filters are cleared even if parent was cleared
first
nativeFilterValues.forEach(filter => {
const { id } = filter;
if (dataMaskSelected[id]) {
setDataMaskSelected(draft => {
if (draft[id].filterState?.value !== undefined) {
draft[id].filterState!.value = undefined;
}
draft[id].extraFormData = {};
});
newClearAllTriggers[id] = true;
}
});
let hasChartCustomizationsToClear = false;
const allDataMasks = { ...dataMaskSelected, ...dataMaskApplied };
Object.keys(allDataMasks).forEach(key => {
if (key.startsWith('chart_customization_')) {
hasChartCustomizationsToClear = true;
}
});
if (!hasChartCustomizationsToClear && chartCustomizationItems.length >
0) {
chartCustomizationItems.forEach(item => {
if (item.customization?.column) {
const customizationFilterId = `chart_customization_${item.id}`;
const dataMask = {
filterState: {
value: item.customization.column,
},
ownState: {
column: item.customization.column,
},
extraFormData: {},
};
dispatch(updateDataMask(customizationFilterId, dataMask));
hasChartCustomizationsToClear = true;
}
});
}
if (hasChartCustomizationsToClear) {
dispatch(clearAllPendingChartCustomizations());
dispatch(clearAllChartCustomizationsFromMetadata());
setHasClearedChartCustomizations(true);
}
setClearAllTriggers(newClearAllTriggers);
}, [
dataMaskSelected,
nativeFilterValues,
setDataMaskSelected,
clearAllTriggers,
dataMaskApplied,
chartCustomizationItems,
dispatch,
]);
const handleClearAllComplete = useCallback((filterId: string) => {
setClearAllTriggers(prev => {
const newTriggers = { ...prev };
delete newTriggers[filterId];
return newTriggers;
});
}, []);`
#Corrected Code:
`const handleClearAll = useCallback(() => {
dispatch(logEvent(LOG_ACTIONS_CHANGE_DASHBOARD_FILTER, {}));
setUpdateKey(1);
const newClearAllTriggers = { ...clearAllTriggers };
// Clear all native filters, not just those in scope
const updates: Record<string, DataMaskWithId> = {};
nativeFilterValues.forEach(filter => {
const { id } = filter;
if (dataMaskSelected[id]) {
updates[id] = {
...dataMaskSelected[id],
filterState: {
...dataMaskSelected[id].filterState,
value: null,
},
extraFormData: {},
};
newClearAllTriggers[id] = true;
}
});
setDataMaskSelected(draft => {
Object.entries(updates).forEach(([id, mask]) => {
draft[id] = mask;
});
});
Object.entries(updates).forEach(([id, mask]) => {
dispatch(updateDataMask(id, mask));
});
let hasChartCustomizationsToClear = false;
const allDataMasks = { ...dataMaskSelected, ...dataMaskApplied };
Object.keys(allDataMasks).forEach(key => {
if (key.startsWith('chart_customization_')) {
hasChartCustomizationsToClear = true;
}
});
if (!hasChartCustomizationsToClear && chartCustomizationItems.length >
0) {
chartCustomizationItems.forEach(item => {
if (item.customization?.column) {
const customizationFilterId = `chart_customization_${item.id}`;
const dataMask = {
filterState: {
value: item.customization.column,
},
ownState: {
column: item.customization.column,
},
extraFormData: {},
};
dispatch(updateDataMask(customizationFilterId, dataMask));
hasChartCustomizationsToClear = true;
}
});
}
if (hasChartCustomizationsToClear) {
dispatch(clearAllPendingChartCustomizations());
dispatch(clearAllChartCustomizationsFromMetadata());
setHasClearedChartCustomizations(true);
const clearedChartCustomizations = chartCustomizationItems.map(item =>
({
...item,
customization: {
...item.customization,
column: null,
},
}));
dispatch(saveChartCustomization(clearedChartCustomizations));
}
setClearAllTriggers(newClearAllTriggers);
}, [
dataMaskSelected,
nativeFilterValues,
setDataMaskSelected,
clearAllTriggers,
dataMaskApplied,
chartCustomizationItems,
dispatch,
]);
const handleClearAllComplete = useCallback((filterId: string) => {
setClearAllTriggers(prev => {
const newTriggers = { ...prev };
delete newTriggers[filterId];
return newTriggers;
});
}, []);`
------------
Now as i am trying to implement the same in Superset 6.0 but it is having a
different code structure--
#Apache Superset 6.0 Native Filters:
` const handleClearAll = useCallback(() => {
const newClearAllTriggers = { ...clearAllTriggers };
filtersInScope.filter(isNativeFilter).forEach(filter => {
const { id } = filter;
if (dataMaskSelected[id]) {
setDataMaskSelected(draft => {
if (draft[id].filterState?.value !== undefined) {
draft[id].filterState!.value = undefined;
}
draft[id].extraFormData = {};
});
newClearAllTriggers[id] = true;
}
});
setClearAllTriggers(newClearAllTriggers);
}, [dataMaskSelected, filtersInScope, setDataMaskSelected,
clearAllTriggers]);
const handleClearAllComplete = useCallback((filterId: string) => {
setClearAllTriggers(prev => {
const newTriggers = { ...prev };
delete newTriggers[filterId];
return newTriggers;
});
}, []);
useFilterUpdates(dataMaskSelected, setDataMaskSelected);
const isApplyDisabled = checkIsApplyDisabled(
dataMaskSelected,
dataMaskApplied,
filtersInScope.filter(isNativeFilter),
);
const isInitialized = useInitialization();
const actions = useMemo(
() => (
<ActionButtons
filterBarOrientation={orientation}
width={verticalConfig?.width}
onApply={handleApply}
onClearAll={handleClearAll}
dataMaskSelected={dataMaskSelected}
dataMaskApplied={dataMaskApplied}
isApplyDisabled={isApplyDisabled}
/>
),
[
orientation,
verticalConfig?.width,
handleApply,
handleClearAll,
dataMaskSelected,
dataMaskAppliedText,
isApplyDisabled,
],
);
const filterBarComponent =
orientation === FilterBarOrientation.Horizontal ? (
<Horizontal
actions={actions}
canEdit={canEdit}
dashboardId={dashboardId}
dataMaskSelected={dataMaskSelected}
filterValues={filterValues}
isInitialized={isInitialized}
onSelectionChange={handleFilterSelectionChange}
clearAllTriggers={clearAllTriggers}
onClearAllComplete={handleClearAllComplete}
/>
) : verticalConfig ? (
<Vertical
actions={actions}
canEdit={canEdit}
dataMaskSelected={dataMaskSelected}
filtersOpen={verticalConfig.filtersOpen}
filterValues={filterValues}
isInitialized={isInitialized}
height={verticalConfig.height}
offset={verticalConfig.offset}
onSelectionChange={handleFilterSelectionChange}
toggleFiltersBar={verticalConfig.toggleFiltersBar}
width={verticalConfig.width}
clearAllTriggers={clearAllTriggers}
onClearAllComplete={handleClearAllComplete}
/>
) : null;
return hidden ? (
<HiddenFilterBar>{filterBarComponent}</HiddenFilterBar>
) : (
filterBarComponent
);
};
export default memo(FilterBar);`
### Screenshots/recordings
_No response_
### Superset version
master / latest-dev
### Python version
3.9
### Node version
16
### Browser
Chrome
### Additional context
_No response_
### Checklist
- [x] I have searched Superset docs and Slack and didn't find a solution to
my problem.
- [x] I have searched the GitHub issue tracker and didn't find a similar bug
report.
- [x] I have checked Superset's logs for errors and if I found a relevant
Python stacktrace, I included it here as text in the "additional context"
section.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
