Use fuzzy exercise matching

Author: MohamedKiouaz

app/components/presentation/workout-editor/exercise-filterer.tsx

@@ -1,3 +1,4 @@
+import { fuzzyMatchScore } from '@/components/presentation/workout-editor/exercise-fuzzy-match';
 import ExerciseSearchAndFilters from '@/components/presentation/workout-editor/exercise-search-and-filters';
 import { ExerciseDescriptor } from '@/models/exercise-models';
 import { useAppSelector } from '@/store';
@@ -19,35 +20,39 @@ export default function ExerciseFilterer(props: {
 
   const search = useDebouncedCallback(() => {
     const trimmed = searchText.trim();
-    const escaped = escapeRegExp(trimmed);
-    const searchRegex = new RegExp(escaped, 'i');
-    const startsWithRegex = new RegExp('^' + escaped, 'i');
-    const fullMatchRegex = new RegExp('^' + escaped + '$', 'i');
+    const trimmedSearchText = escapeRegExp(trimmed);
+    const fullMatchRegex = new RegExp('^' + trimmedSearchText + '$', 'i');
     let hasExactMatch = false;
     const newFilteredExercises = Enumerable.from(Object.entries(exercises))
+      .select((x) => ({
+        entry: { id: x[0], exercise: x[1] },
+        score: trimmedSearchText
+          ? fuzzyMatchScore(trimmedSearchText, x[1].name)
+          : 0,
+      }))
       .where(
         (x) =>
           (!muscleFilters.length ||
-            x[1].muscles.some((exerciseMuscle) =>
+            x.entry.exercise.muscles.some((exerciseMuscle) =>
               muscleFilters.includes(exerciseMuscle),
             )) &&
-          (!trimmed || searchRegex.test(x[1].name)),
+          (!trimmedSearchText || x.score !== null),
       )
+      .orderByDescending((x) => x.score ?? 0)
+      .thenBy((x) => x.entry.exercise.name)
       .doAction((x) => {
-        if (!hasExactMatch && trimmed && fullMatchRegex.test(x[1].name)) {
+        if (
+          !hasExactMatch &&
+          trimmedSearchText &&
+          fullMatchRegex.test(x.entry.exercise.name)
+        ) {
           hasExactMatch = true;
         }
       })
-      // If the exercise starts with the search term, then it is a good match and should be brought to the top
-      .orderByDescending(
-        (x) =>
-          (startsWithRegex.test(x[1].name) ? 1 : 0) +
-          (fullMatchRegex.test(x[1].name) ? 1 : 0),
-      )
-      .select((x) => x[0])
+      .select((x) => x.entry.id)
       .toArray();
     onFilteredExerciseIdsChange(newFilteredExercises);
-    if (!hasExactMatch && searchText) {
+    if (!hasExactMatch && trimmedSearchText) {
       onSuggestedNewExercise({
         name: trimmed,
         category: '',

app/components/presentation/workout-editor/exercise-fuzzy-match.spec.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { fuzzyMatchScore } from './exercise-fuzzy-match';
+
+describe('fuzzyMatchScore', () => {
+  it('matches subsequences even when the letters are not contiguous', () => {
+    expect(fuzzyMatchScore('bpr', 'Bench Press Rows')).not.toBeNull();
+  });
+
+  it('prefers exact matches over fuzzy ones', () => {
+    const exact = fuzzyMatchScore('press', 'press');
+    const fuzzy = fuzzyMatchScore('press', 'Bench Press');
+
+    expect(exact).not.toBeNull();
+    expect(fuzzy).not.toBeNull();
+    expect(exact!).toBeGreaterThan(fuzzy!);
+  });
+
+  it('prefers prefix matches over fuzzy ones', () => {
+    const inner = fuzzyMatchScore('press', 'Bench press');
+    const prefix = fuzzyMatchScore('bench', 'Bench Press');
+
+    expect(prefix!).toBeGreaterThan(inner!);
+  });
+
+  it('rejects strings that do not contain the query letters in order', () => {
+    expect(fuzzyMatchScore('abc', 'cab')).toBeNull();
+  });
+
+  it('ignores accents when matching', () => {
+    expect(fuzzyMatchScore('epee', 'Épée')).not.toBeNull();
+  });
+});

app/components/presentation/workout-editor/exercise-fuzzy-match.ts

@@ -0,0 +1,56 @@
+const diacriticRegex = /[\u0300-\u036f]/g;
+
+export function normalizeFuzzyText(value: string) {
+  return value
+    .normalize('NFD')
+    .replace(diacriticRegex, '')
+    .toLowerCase()
+    .trim();
+}
+
+export function fuzzyMatchScore(query: string, candidate: string) {
+  const normalizedQuery = normalizeFuzzyText(query);
+  const normalizedCandidate = normalizeFuzzyText(candidate);
+
+  if (!normalizedQuery) {
+    return null;
+  }
+
+  let queryIndex = 0;
+  let firstMatch = -1;
+  let lastMatch = -1;
+  let gapCount = 0;
+
+  for (
+    let candidateIndex = 0;
+    candidateIndex < normalizedCandidate.length &&
+    queryIndex < normalizedQuery.length;
+    candidateIndex++
+  ) {
+    if (normalizedCandidate[candidateIndex] !== normalizedQuery[queryIndex]) {
+      continue;
+    }
+
+    if (firstMatch === -1) {
+      firstMatch = candidateIndex;
+    }
+    if (lastMatch !== -1) {
+      gapCount += candidateIndex - lastMatch - 1;
+    }
+    lastMatch = candidateIndex;
+    queryIndex++;
+  }
+
+  if (queryIndex !== normalizedQuery.length || firstMatch === -1 || lastMatch === -1) {
+    return null;
+  }
+
+  const span = lastMatch - firstMatch + 1;
+  const compactness = normalizedQuery.length / span;
+  const coverage = normalizedQuery.length / normalizedCandidate.length;
+  const exactBonus = normalizedCandidate === normalizedQuery ? 3 : 0;
+  const prefixBonus = normalizedCandidate.startsWith(normalizedQuery) ? 1.5 : 0;
+
+  return exactBonus + prefixBonus + compactness * 5 + coverage * 2 - gapCount * 0.1;
+}
+