feat: use `match-sorter` instead of just levenshtein distance

webui/package.json

@@ -15,7 +15,6 @@
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/plugin-typescript": "^8.3.0",
     "@tsconfig/svelte": "^2.0.0",
-    "@types/fast-levenshtein": "^0.0.2",
     "@types/history": "^4.7.9",
     "@types/lodash": "^4.14.178",
     "@types/lru-cache": "^5.1.1",
@@ -46,12 +45,12 @@
     "boxicons": "^2.1.1",
     "date-fns": "^2.25.0",
     "dompurify": "^2.3.4",
-    "fast-levenshtein": "^3.0.0",
     "filesize": "^8.0.6",
     "history": "^5.1.0",
     "lodash": "^4.17.21",
     "lru-cache": "^6.0.0",
     "marked": "^4.0.10",
+    "match-sorter": "^6.3.1",
     "mitt": "^3.0.0",
     "normalize.css": "^8.0.1",
     "sass": "^1.43.4",

webui/src/components/utils/Selector.svelte

@@ -8,8 +8,8 @@
   import UpObject from "../display/UpObject.svelte";
   import IconButton from "./IconButton.svelte";
   import Input from "./Input.svelte";
-  import levenshtein from "fast-levenshtein";
   const dispatch = createEventDispatcher();
+  import { matchSorter } from "match-sorter";
 
   const MAX_OPTIONS = 25;
 
@@ -122,21 +122,12 @@
             .filter((e) => e.attribute === "LBL")
             .filter((e) => !exactHits.includes(e.entity));
 
-          const distances = {};
-          validOptions.forEach((e) => {
-            distances[e.address] = levenshtein.get(
-              inputValue,
-              String(e.value.c),
-              { useCollator: true }
-            );
+          const sortedOptions = matchSorter(validOptions, inputValue, {
+            keys: ["value.c"],
           });
 
-          validOptions.sort(
-            (a, b) => distances[a.address] - distances[b.address]
-          );
-
           options.push(
-            ...validOptions.map((e) => {
+            ...sortedOptions.map((e) => {
               return {
                 value: {
                   t: "Address",

webui/yarn.lock

@@ -50,6 +50,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.12.5":
+  version: 7.18.9
+  resolution: "@babel/runtime@npm:7.18.9"
+  dependencies:
+    regenerator-runtime: ^0.13.4
+  checksum: 36dd736baba7164e82b3cc9d43e081f0cb2d05ff867ad39cac515d99546cee75b7f782018b02a3dcf5f2ef3d27f319faa68965fdfec49d4912c60c6002353a2e
+  languageName: node
+  linkType: hard
+
 "@emotion/cache@npm:^11.4.0, @emotion/cache@npm:^11.7.1":
   version: 11.7.1
   resolution: "@emotion/cache@npm:11.7.1"
@@ -438,13 +447,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/fast-levenshtein@npm:^0.0.2":
-  version: 0.0.2
-  resolution: "@types/fast-levenshtein@npm:0.0.2"
-  checksum: fb886b85c3a314948a86ad164b91217454993c88f658a529013cd0084e24996cd58637baf66e818ac6e78819e831e06a8d38d6f5f81ab36d1d4cf4c3da3c5e5b
-  languageName: node
-  linkType: hard
-
 "@types/fs-extra@npm:^8.0.1":
   version: 8.1.2
   resolution: "@types/fs-extra@npm:8.1.2"
@@ -1742,15 +1744,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-levenshtein@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "fast-levenshtein@npm:3.0.0"
-  dependencies:
-    fastest-levenshtein: ^1.0.7
-  checksum: 02732ba6c656797ca7e987c25f3e53718c8fcc39a4bfab46def78eef7a8729eb629632d4a7eca4c27a33e10deabffa9984839557e18a96e91ecf7ccaeedb9890
-  languageName: node
-  linkType: hard
-
 "fast-redact@npm:^3.0.0":
   version: 3.1.0
   resolution: "fast-redact@npm:3.1.0"
@@ -1765,13 +1758,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fastest-levenshtein@npm:^1.0.7":
-  version: 1.0.12
-  resolution: "fastest-levenshtein@npm:1.0.12"
-  checksum: e1a013698dd1d302c7a78150130c7d50bb678c2c2f8839842a796d66cc7cdf50ea6b3d7ca930b0c8e7e8c2cd84fea8ab831023b382f7aab6922c318c1451beab
-  languageName: node
-  linkType: hard
-
 "fastify-error@npm:^0.3.0":
   version: 0.3.1
   resolution: "fastify-error@npm:0.3.1"
@@ -2826,6 +2812,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"match-sorter@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "match-sorter@npm:6.3.1"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    remove-accents: 0.4.2
+  checksum: a4b02b676ac4ce64a89a091539ee4a70a802684713bcf06f2b70787927f510fe8a2adc849f9288857a90906083ad303467e530e8723b4a9756df9994fc164550
+  languageName: node
+  linkType: hard
+
 "memoize-one@npm:^5.0.0":
   version: 5.2.1
   resolution: "memoize-one@npm:5.2.1"
@@ -3619,6 +3615,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remove-accents@npm:0.4.2":
+  version: 0.4.2
+  resolution: "remove-accents@npm:0.4.2"
+  checksum: 84a6988555dea24115e2d1954db99509588d43fe55a1590f0b5894802776f7b488b3151c37ceb9e4f4b646f26b80b7325dcea2fae58bc3865df146e1fa606711
+  languageName: node
+  linkType: hard
+
 "require-from-string@npm:^2.0.2":
   version: 2.0.2
   resolution: "require-from-string@npm:2.0.2"
@@ -4302,7 +4305,6 @@ __metadata:
     "@rollup/plugin-replace": ^3.0.0
     "@rollup/plugin-typescript": ^8.3.0
     "@tsconfig/svelte": ^2.0.0
-    "@types/fast-levenshtein": ^0.0.2
     "@types/history": ^4.7.9
     "@types/lodash": ^4.14.178
     "@types/lru-cache": ^5.1.1
@@ -4317,12 +4319,12 @@ __metadata:
     dompurify: ^2.3.4
     eslint: ^8.7.0
     eslint-plugin-svelte3: ^3.4.0
-    fast-levenshtein: ^3.0.0
     filesize: ^8.0.6
     history: ^5.1.0
     lodash: ^4.17.21
     lru-cache: ^6.0.0
     marked: ^4.0.10
+    match-sorter: ^6.3.1
     mitt: ^3.0.0
     normalize.css: ^8.0.1
     postcss: ^8.3.11