Add an interactive suggestion for filters

frontend/package.json

@@ -14,12 +14,14 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@tsconfig/svelte": "^5.0.2",
+    "prettier": "^3.3.3",
     "svelte": "^4.2.12",
     "svelte-check": "^3.6.7",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^5.4.2",
-    "prettier": "^3.3.3"
+    "vite": "^5.4.2"
   },
-  "dependencies": {}
+  "dependencies": {
+    "fuse.js": "^7.0.0"
+  }
 }

frontend/src/App.svelte

@@ -6,16 +6,28 @@
     import type {FullCrate, Indexes} from "./crate-db";
     import Filter from "./lib/Filter.svelte";
     import ForkMe from "./lib/ForkMe.svelte";
+    import TextFilter from "./lib/TextFilter.svelte";
+    import CategoryFilter from "./lib/CategoryFilter.svelte";
 
     export let BUILD_DATE: string;
 
     const t_crates = crates as FullCrate[];
     let t_indexes = indexes as Indexes;
 
+    const filters = Object.fromEntries([
+        "category",
+        "dependencies",
+        "interfaces",
+        "license",
+        "package",
+        "rust_version",
+    ].map((cat) => [cat, Object.keys(t_indexes[cat] as any)]));
+
     let selected_d: number[][] = [];
     let selected_l: number[][] = [];
     let selected_r: number[][] = [];
     let selected_i: number[][] = [];
+    let selected_f: number[][] = [];
 
     function combine_filters(crate_length: number, selected: any): number[] {
         let selected_crates = Array.from({length: crate_length}, (_, i) => i + 1);
@@ -39,7 +51,7 @@
         }
     }
 
-    $: selected_crates = combine_filters(t_crates.length, [selected_d, selected_l, selected_r, selected_i]);
+    $: selected_crates = combine_filters(t_crates.length, [selected_d, selected_l, selected_r, selected_i, selected_f]);
 
 </script>
 
@@ -49,14 +61,18 @@
 
 <h1>{selected_crates.length} awesome drivers waiting for you!</h1>
 <main>
-
     <div class="filters">
+        <TextFilter crates={t_crates} bind:selected={selected_f}/>
         <Filter name="Dependencies" values={t_indexes.dependencies} bind:selected={selected_d}/>
         <Filter name="Interfaces" values={t_indexes.interfaces} bind:selected={selected_i}/>
         <Filter name="👮 License" values={t_indexes.license} bind:selected={selected_l}/>
         <Filter name="Rust Version" values={t_indexes.rust_version} bind:selected={selected_r}/>
     </div>
 
+    <br/>
+
+    <CategoryFilter indexes={t_indexes}/>
+
     <CrateList crates={t_crates} filter={selected_crates}/>
 
     <div>Page generated at: {BUILD_DATE}</div>

frontend/src/lib/CategoryFilter.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import type {FullCrate, Indexes} from "../crate-db";
+    import Fuse, {type FuseResult} from "fuse.js";
+
+    export let indexes: Indexes;
+
+    let search: string = "";
+
+    const {
+        category,
+        has_dev_board,
+        has_kicad,
+        license,
+        interfaces,
+        rust_version,
+        dependencies,
+        package: pack,
+        ...rest
+    } = indexes;
+    const _is_exhaustive: Required<typeof rest> = {};
+
+    const items = [
+        {"value": "kicad", "filter": "has_kicad"},
+        {"value": "dev board", "filter": "has_dev_board"},
+        {"value": "rust version", "filter": "rust_version"}
+    ].concat(
+        Object.keys(category).map((k) => ({value: k, filter: "category"})),
+        Object.keys(license).map((k) => ({value: k, filter: "license"})),
+        Object.keys(interfaces).map((k) => ({value: k, filter: "interfaces"})),
+        Object.keys(dependencies).map((k) => ({value: k, filter: "dependencies"})),
+        Object.keys(pack).map((k) => ({value: k, filter: "pack"})),
+    );
+
+    const options = {
+        keys: ["value", "filter"],
+    };
+    const fuse = new Fuse(items, options)
+
+    type FuseResultList = FuseResult<{ filter: string, value: string }>[];
+
+    function onlyTop(results: FuseResultList, count: number): FuseResultList {
+        let seen: any = {};
+        return results.filter((v) => {
+            if (seen[v.item.filter] == undefined) {
+                seen[v.item.filter] = 1;
+            } else {
+                seen[v.item.filter] += 1;
+            }
+
+            return seen[v.item.filter] <= count;
+        });
+    }
+
+    $: results = fuse.search(search)
+    $: top_results = onlyTop(results, 3)
+</script>
+
+<label>
+    Search Category:
+    <input type="text" bind:value={search}>
+</label>
+
+<ul>
+    {#each top_results as res}
+        <li>{res.item.filter}: {res.item.value}</li>
+    {/each}
+</ul>

frontend/src/lib/TextFilter.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type {FullCrate} from "../crate-db";
+    import Fuse from "fuse.js";
+
+    export let crates: FullCrate[];
+    export let selected: number[][];
+
+    let search: string = "";
+
+    const options = {
+        keys: [
+            "description",
+            "manufacturer",
+            "name",
+            "names",
+            "part_numbers",
+            "resources.title",
+        ],
+        includeMatches: true,
+        includeScore: true,
+        useExtendedSearch: true,
+    };
+    const index = Fuse.createIndex(options.keys, crates)
+    const fuse = new Fuse(crates, options, index)
+
+    $: results = fuse.search(search)
+    $: selected = search === "" ? [] : [results.map((r) => r.refIndex)]
+</script>
+
+<label>
+    Search text:
+    <input type="text" bind:value={search}>
+</label>