diff --git a/webui/package.json b/webui/package.json index 7b2b91f..81170d8 100644 --- a/webui/package.json +++ b/webui/package.json @@ -15,6 +15,7 @@ "@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", @@ -45,6 +46,7 @@ "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", diff --git a/webui/src/components/utils/Selector.svelte b/webui/src/components/utils/Selector.svelte index d5dfbd7..c80ff36 100644 --- a/webui/src/components/utils/Selector.svelte +++ b/webui/src/components/utils/Selector.svelte @@ -8,8 +8,11 @@ import UpObject from "../display/UpObject.svelte"; import IconButton from "./IconButton.svelte"; import Input from "./Input.svelte"; + import levenshtein from "fast-levenshtein"; const dispatch = createEventDispatcher(); + const MAX_OPTIONS = 25; + export let type: "attribute" | "value"; export let attribute: string | undefined = undefined; export let value: IValue | undefined = undefined; @@ -115,19 +118,32 @@ }); } + const validOptions = searchResult.entries + .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 } + ); + }); + + validOptions.sort( + (a, b) => distances[a.address] - distances[b.address] + ); + options.push( - ...searchResult.entries - .filter((e) => e.attribute === "LBL") - .filter((e) => !exactHits.includes(e.entity)) - .slice(0, 25) - .map((e) => { - return { - value: { - t: "Address", - c: e.entity, - }, - } as SelectorOption; - }) + ...validOptions.map((e) => { + return { + value: { + t: "Address", + c: e.entity, + }, + } as SelectorOption; + }) ); } @@ -208,7 +224,7 @@ on:mouseenter={() => (hover = true)} on:mouseleave={() => (hover = false)} > - {#each options as option} + {#each options.slice(0, MAX_OPTIONS) as option}
  • set(option)}> {#if option.attribute} {option.attribute} diff --git a/webui/yarn.lock b/webui/yarn.lock index 7b0fd85..13efecf 100644 --- a/webui/yarn.lock +++ b/webui/yarn.lock @@ -438,6 +438,13 @@ __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" @@ -1735,6 +1742,15 @@ __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" @@ -1749,6 +1765,13 @@ __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" @@ -4279,6 +4302,7 @@ __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 @@ -4293,6 +4317,7 @@ __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 @@ -4669,8 +4694,8 @@ __metadata: "upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.": version: 0.0.1 - resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=ce63a9&locator=svelte-app%40workspace%3A." - checksum: d9276c2767aa3a543e1b3dfc3243e3cb9b35cc3afacba8a7daae04b63edc5fd39e7fe5befa8c5a1b6b91760cb5c851ecdc547f9cf6ae6c5342867636e5bd0b18 + resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=74ac74&locator=svelte-app%40workspace%3A." + checksum: 2b96a82af594fcb4d144ffc599e082a815b960054cf7ead001f715a101f6cbb24d6e906bfeaf641b941bf2234b2644e41ecb0921216111903042782b14d0cf35 languageName: node linkType: hard