From adb05cde5baba631b8b027e972d10f8a193aaa06 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 19 Aug 2023 15:52:46 +1000
Subject: [PATCH] feat(ui): simple partial search for nodes

---
 .../flow/panels/TopLeftPanel/AddNodeMenu.tsx  | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/AddNodeMenu.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/AddNodeMenu.tsx
index 9075ce62fc..f510247500 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/AddNodeMenu.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/AddNodeMenu.tsx
@@ -18,6 +18,23 @@ type NodeTemplate = {
   description: string;
   tags: string[];
 };
+const filter = (value: string, item: NodeTemplate) => {
+  const regex = new RegExp(
+    value
+      .toLowerCase()
+      .trim()
+      // strip out regex special characters to avoid errors
+      .replace(/[-[\]{}()*+!<=:?./\\^$|#,]/g, '')
+      .split(' ')
+      .join('.*'),
+    'g'
+  );
+  return (
+    regex.test(item.label.toLowerCase()) ||
+    regex.test(item.description.toLowerCase()) ||
+    item.tags.some((tag) => regex.test(tag))
+  );
+};
 
 const selector = createSelector(
   [stateSelector],
@@ -45,6 +62,8 @@ const selector = createSelector(
       tags: ['notes'],
     });
 
+    data.sort((a, b) => a.label.localeCompare(b.label));
+
     return { data };
   },
   defaultSelectorOptions
@@ -96,13 +115,9 @@ const AddNodeMenu = () => {
         maxDropdownHeight={400}
         nothingFound="No matching nodes"
         itemComponent={SelectItem}
-        filter={(value, item: NodeTemplate) =>
-          item.label.toLowerCase().includes(value.toLowerCase().trim()) ||
-          item.value.toLowerCase().includes(value.toLowerCase().trim()) ||
-          item.description.toLowerCase().includes(value.toLowerCase().trim()) ||
-          item.tags.includes(value.toLowerCase().trim())
-        }
+        filter={filter}
         onChange={handleChange}
+        hoverOnSearchChange={true}
         sx={{
           width: '24rem',
         }}