feat: match tags based on fuzzy finding

Kobu-Labs · Aug 4, 2024 · cebc53a · cebc53a
1 parent 25ccd6e
commit cebc53a
Show file tree

Hide file tree

Showing 4 changed files with 16,463 additions and 16,447 deletions.
diff --git a/next-frontend/components/ui-providers/TagPickerUiProvider.tsx b/next-frontend/components/ui-providers/TagPickerUiProvider.tsx
@@ -25,6 +25,7 @@ import {
 } from "@/components/shadcn/popover";
 import { ScrollArea, ScrollBar } from "@/components/shadcn/scroll-area";
 import { TagBadge } from "@/components/visualizers/tags/TagBadge";
+import FuzzySearch from "fuzzy-search";
 
 export type TagPickerUiProviderProps = {
   availableTags: TagWithId[];
@@ -38,6 +39,13 @@ export type TagPickerUiProviderProps = {
   modal?: boolean;
 };
 
+
+const fuzzyFindStrategy = (tags: TagWithId, searchTerm: string): boolean => {
+  const searcher = new FuzzySearch([tags.label], []);
+  const result = searcher.search(searchTerm);
+  return result.length !== 0
+}
+
 export const TagPickerUiProvider: FC<TagPickerUiProviderProps> = (props) => {
   const queryClient = useQueryClient();
 
@@ -70,11 +78,8 @@ export const TagPickerUiProvider: FC<TagPickerUiProviderProps> = (props) => {
     );
   }
 
-  if (props.tagMatchStrategy) {
-    tagsInDisplayOrder = tagsInDisplayOrder.filter((tag) =>
-      props.tagMatchStrategy!(tag, searchTerm)
-    );
-  }
+  const matchStrategy = props.tagMatchStrategy ?? fuzzyFindStrategy
+  tagsInDisplayOrder = tagsInDisplayOrder.filter((tag) => matchStrategy(tag, searchTerm));
 
   return (
     <Popover

diff --git a/next-frontend/components/visualizers/sessions/ScheduledSessionCreationForm.tsx b/next-frontend/components/visualizers/sessions/ScheduledSessionCreationForm.tsx
@@ -219,11 +219,6 @@ export const ScheduledSessionCreationForm: FC = () => {
                   <FormLabel className="block">Tags</FormLabel>
                   <FormControl>
                     <SimpleTagPicker
-                      tagMatchStrategy={(tag, term) =>
-                        prefixBasedMatch(tag.label, term, {
-                          caseInsensitive: true,
-                        })
-                      }
                       tagsDisplayStrategy={showSelectedTagsFirst}
                       onSelectedTagsChanged={(tags) => {
                         field.onChange(tags);