diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx
index c88ed9c3ed..d6d9d75794 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx
@@ -15,18 +15,6 @@ export const Filter = memo(() => {
const isFiltering = useStore(canvasManager.filter.$isFiltering);
const isProcessing = useStore(canvasManager.filter.$isProcessing);
- const previewFilter = useCallback(() => {
- canvasManager.filter.previewFilter();
- }, [canvasManager.filter]);
-
- const applyFilter = useCallback(() => {
- canvasManager.filter.applyFilter();
- }, [canvasManager.filter]);
-
- const cancelFilter = useCallback(() => {
- canvasManager.filter.cancelFilter();
- }, [canvasManager.filter]);
-
const onChangeFilterConfig = useCallback(
(filterConfig: FilterConfig) => {
canvasManager.filter.$config.set(filterConfig);
@@ -65,24 +53,27 @@ export const Filter = memo(() => {
}
- onClick={previewFilter}
+ onClick={canvasManager.filter.previewFilter}
isLoading={isProcessing}
loadingText={t('controlLayers.filter.preview')}
>
{t('controlLayers.filter.preview')}
}
- onClick={applyFilter}
+ onClick={canvasManager.filter.applyFilter}
isLoading={isProcessing}
loadingText={t('controlLayers.filter.apply')}
>
{t('controlLayers.filter.apply')}
}
- onClick={cancelFilter}
+ onClick={canvasManager.filter.cancelFilter}
isLoading={isProcessing}
loadingText={t('controlLayers.filter.cancel')}
>