#246 fuzzy search in ctrl+p+capital search

packages/tools/src/filterName.ts

@@ -1,5 +1,6 @@
 import _compact from 'lodash/compact';
 import _isString from 'lodash/isString';
+import _startCase from 'lodash/startCase';
 
 export interface FilterNameDefinition {
   childName: string;
@@ -64,16 +65,10 @@ function camelMatch(filter: string, text: string): boolean {
   if (!filter) return true;
 
   if (filter.replace(/[A-Z]/g, '').length == 0) {
-    const camelVariants = [text.replace(/[^A-Z]/g, '')];
-    let s = text,
-      s0;
-    do {
-      s0 = s;
-      s = s.replace(/([A-Z])([A-Z])([A-Z])/, '$1$3');
-    } while (s0 != s);
-    camelVariants.push(s.replace(/[^A-Z]/g, ''));
-    const camelContains = !!camelVariants.find(x => x.includes(filter.toUpperCase()));
-    return camelContains;
+    const textCapitals = _startCase(text).replace(/[^A-Z]/g, '');
+    const pattern = '.*' + filter.split('').join('.*') + '.*';
+    const re = new RegExp(pattern);
+    return re.test(textCapitals);
   } else {
     return text.toUpperCase().includes(filter.toUpperCase());
   }

packages/web/package.json

@@ -58,6 +58,7 @@
     "chartjs-plugin-zoom": "^1.2.0",
     "date-fns": "^2.28.0",
     "debug": "^4.3.4",
+    "fuzzy": "^0.1.3",
     "interval-operations": "^1.0.7",
     "leaflet": "^1.8.0",
     "wellknown": "^0.5.0"

packages/web/src/commands/CommandPalette.svelte

@@ -64,6 +64,7 @@
 
   import _ from 'lodash';
   import { onMount } from 'svelte';
+  import fuzzy from 'fuzzy';
   import { databaseObjectIcons, handleDatabaseObjectClick } from '../appobj/DatabaseObjectAppObject.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import {
@@ -106,12 +107,25 @@
   $: databaseInfo = useDatabaseInfo({ conid, database });
   $: connectionList = useConnectionList();
 
-  $: filteredItems = ($visibleCommandPalette == 'database'
-    ? extractDbItems($databaseInfo, { conid, database }, $connectionList)
-    : parentCommand
-    ? parentCommand.getSubCommands()
-    : sortedComands
-  ).filter(x => !x.isGroupCommand && filterName(filter, x.text));
+  $: filteredItems = fuzzy
+    .filter(
+      filter,
+      ($visibleCommandPalette == 'database'
+        ? extractDbItems($databaseInfo, { conid, database }, $connectionList)
+        : parentCommand
+        ? parentCommand.getSubCommands()
+        : sortedComands
+      ).filter(x => !x.isGroupCommand),
+      {
+        extract: x => x.text,
+        pre: '<b>',
+        post: '</b>',
+      }
+    )
+    .map(x => ({
+      ...x.original,
+      text: x.string,
+    }));
 
   function handleCommand(command) {
     if (command.getSubCommands) {
@@ -194,7 +208,7 @@
             {#if command.icon}
               <span class="mr-1"><FontIcon icon={command.icon} /></span>
             {/if}
-            {command.text}
+            {@html command.text}
           </div>
           {#if command.keyText}
             <div class="shortcut">{command.keyText}</div>