Merge pull request #81 from tweedegolf/text-search-sorting

Text search sorting

frontend/src/App.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 
     import {crates, indexes} from './full-crate-db.json'
-    import {open_filter} from './store/FilterStore.svelte';
+    import {open_filter} from './store/FilterStore.ts';
     import CrateList from "./lib/CrateList.svelte";
     import type {FullCrate, Indexes} from "./crate-db";
     import Filter from "./lib/Filter.svelte";

frontend/src/app.css

@@ -153,6 +153,10 @@ label {
   display: flex;
   gap: 1rem;
   margin-bottom: 1rem;
+
+  input[type="text"] {
+    min-height: 54px;
+  }
 }
 
 .filter {

frontend/src/lib/CrateList.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
     import type {FullCrate} from "../crate-db";
     import Crate from "./Crate.svelte";
-    import {open_filter, sort_by} from '../store/FilterStore.svelte';
+    import {open_filter, sort_by, scores} from '../store/FilterStore.ts';
+
+    interface Score {
+      name: String;
+      score: number;
+    }
 
     export let crates: FullCrate[];
 
@@ -10,6 +15,7 @@
     let filtered_crates: FullCrate[];
 
     $ : filtered_crates = crates.filter((_, i) => filter.includes(i)).sort((a, b) => {
+
       if ($sort_by == 'all_downloads') {
         return b.downloads - a.downloads;
       }
@@ -23,8 +29,24 @@
         return b.updated_at > a.updated_at ? 1 : 0;
       }
 
+      // Sort by text search score
+      else if ($sort_by == 'score') {
+        const score_a = $scores.find((s : Score) => s.name == a.name);
+        const score_b = $scores.find((s : Score) => s.name == b.name);
+        if (score_a && score_b) {
+          return score_a.score - score_b.score;
+        } else if (score_a) {
+          return 0 - score_a.score;
+        } else if (score_b) {
+          return score_b.score;
+        } else {
+          return 0;
+        }
+      }
+
       return b.name < a.name ? 1 : 0;
     });
+
 </script>
 
 <ol>

frontend/src/lib/Filter.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 
-    import {open_filter} from '../store/FilterStore.svelte';
+    import {open_filter} from '../store/FilterStore.ts';
 
     export let name: string;
     export let values: { [key: string]: number[] };

frontend/src/lib/SortFilter.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 
-    import {open_filter, sort_by} from '../store/FilterStore.svelte';
+    import {open_filter, sort_by} from '../store/FilterStore.ts';
 
     export let name: string;
 
@@ -41,6 +41,7 @@
     $: recent_downloads_open = $sort_by == 'recent_downloads';
     $: newly_added_open = $sort_by == 'newly_added';
     $: recently_updated_open = $sort_by == 'recently_updated';
+    $: text_score = $sort_by == 'score';
 
 </script>
 
@@ -68,6 +69,9 @@
             <label>
                 <input type="checkbox" on:click={() => update_sort('recently_updated')} bind:checked={recently_updated_open}> Recently updated
             </label>
+            <label>
+                <input type="checkbox" on:click={() => update_sort('score')} bind:checked={text_score}> Text search
+            </label>
         </div>
     </div>
 </div>

frontend/src/lib/TextFilter.svelte

@@ -1,32 +1,52 @@
 <script lang="ts">
     import type {FullCrate} from "../crate-db";
+    import {sort_by, scores} from '../store/FilterStore.ts';
     import Fuse from "fuse.js";
 
     export let crates: FullCrate[];
     export let selected: number[][];
 
+    interface Score {
+      name: String;
+      score: number;
+    }
+
     let search: string = "";
 
     const options = {
         keys: [
             "description",
             "manufacturer",
-            "name",
+            {
+                name: "name",
+                weight: 10,
+            },
             "names",
             "part_numbers",
             "resources.title",
         ],
         includeMatches: true,
         includeScore: true,
-        useExtendedSearch: true,
+        useExtendedSearch: false,
     };
-    const index = Fuse.createIndex(options.keys, crates)
-    const fuse = new Fuse(crates, options, index)
+    const index = Fuse.createIndex(options.keys, crates);
+    const fuse = new Fuse(crates, options, index);
+
+    // Store the scores in the FilterStore on changes
+    // and force sorting by score
+    $ : {
+      if (search.length > 0) {
+        $sort_by = 'score';
+        $scores = (fuse.search(search).map((r) => ({ score: r.score, name: r.item.name } as Score))) as Score[];
+      } else {
+        $sort_by = 'alphanumeric';
+      }
+    }
 
-    $: results = fuse.search(search)
-    $: selected = search === "" ? [] : [results.map((r) => r.refIndex)]
+    $: results = fuse.search(search);
+    $: selected = search === "" ? [] : [results.map((r) => r.refIndex)];
 </script>
 
 <div>
-    <input type="text" bind:value={search}>
-</div>
+    <input type="text" placeholder="Search" bind:value={search}>
+</div>

frontend/src/store/FilterStore.ts

@@ -0,0 +1,15 @@
+import { writable } from "svelte/store";
+
+export interface Score {
+  name: String;
+  score: number;
+}
+
+// Which filter is currenly opened
+export let open_filter = writable("");
+
+// The results are sorted by
+export let sort_by = writable("alphanumeric");
+
+// Results of text search
+export let scores = writable<Score[]>([]);

frontend/tsconfig.json

@@ -13,7 +13,8 @@
      */
     "allowJs": true,
     "checkJs": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "allowImportingTsExtensions": true
   },
   "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
   "references": [