From cfb538bdc2feeb6e7f58c5dd07d1d34a1dc8f6ea Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 11 Sep 2024 20:58:48 +1000
Subject: [PATCH] feat(ui): add filter button next to control adapter model

---
 .../ControlLayerControlAdapter.tsx            | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapter.tsx
index 83bbf33e06..8493465c50 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapter.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapter.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui-library';
+import { Flex, IconButton } from '@invoke-ai/ui-library';
 import { createMemoizedAppSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginEndStepPct';
@@ -6,6 +6,7 @@ import { Weight } from 'features/controlLayers/components/common/Weight';
 import { ControlLayerControlAdapterControlMode } from 'features/controlLayers/components/ControlLayer/ControlLayerControlAdapterControlMode';
 import { ControlLayerControlAdapterModel } from 'features/controlLayers/components/ControlLayer/ControlLayerControlAdapterModel';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { useEntityFilter } from 'features/controlLayers/hooks/useEntityFilter';
 import {
   controlLayerBeginEndStepPctChanged,
   controlLayerControlModeChanged,
@@ -15,6 +16,8 @@ import {
 import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
 import type { CanvasEntityIdentifier, ControlModeV2 } from 'features/controlLayers/store/types';
 import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiShootingStarBold } from 'react-icons/pi';
 import type { ControlNetModelConfig, T2IAdapterModelConfig } from 'services/api/types';
 
 const useControlLayerControlAdapter = (entityIdentifier: CanvasEntityIdentifier<'control_layer'>) => {
@@ -31,9 +34,11 @@ const useControlLayerControlAdapter = (entityIdentifier: CanvasEntityIdentifier<
 };
 
 export const ControlLayerControlAdapter = memo(() => {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const entityIdentifier = useEntityIdentifierContext('control_layer');
   const controlAdapter = useControlLayerControlAdapter(entityIdentifier);
+  const filter = useEntityFilter(entityIdentifier);
 
   const onChangeBeginEndStepPct = useCallback(
     (beginEndStepPct: [number, number]) => {
@@ -65,7 +70,17 @@ export const ControlLayerControlAdapter = memo(() => {
 
   return (
     <Flex flexDir="column" gap={3} position="relative" w="full">
-      <ControlLayerControlAdapterModel modelKey={controlAdapter.model?.key ?? null} onChange={onChangeModel} />
+      <Flex w="full" gap={2}>
+        <ControlLayerControlAdapterModel modelKey={controlAdapter.model?.key ?? null} onChange={onChangeModel} />
+        <IconButton
+          onClick={filter.start}
+          isDisabled={filter.isDisabled}
+          variant="ghost"
+          aria-label={t('controlLayers.filter.filter')}
+          tooltip={t('controlLayers.filter.filter')}
+          icon={<PiShootingStarBold />}
+        />
+      </Flex>
       <Weight weight={controlAdapter.weight} onChange={onChangeWeight} />
       <BeginEndStepPct beginEndStepPct={controlAdapter.beginEndStepPct} onChange={onChangeBeginEndStepPct} />
       {controlAdapter.type === 'controlnet' && (