Add interfaces to filter

frontend/src/App.svelte

@@ -18,8 +18,6 @@
     function combine_filters(crate_length: number, selected: any): number[] {
         let selected_crates = Array.from({length: crate_length}, (_, i) => i + 1);
 
-        console.log(selected);
-
         for (const filter of selected) {
             if (filter === undefined || filter.length === 0) {
                 continue;
@@ -29,8 +27,6 @@
             selected_crates = selected_crates.filter(crate => selected_filter.includes(crate));
         }
 
-        console.log(selected_crates);
-
         return selected_crates;
     }
 

frontend/src/lib/Filter.svelte

@@ -5,17 +5,24 @@
     export let selected: number[][];
 
     let filter: string = "";
+
+    let by_count: boolean;
+
+    $: sorted_values = by_count ? Object.entries(values).sort((a, b) => b[1].length - a[1].length) : Object.entries(values);
 </script>
 
 <fieldset>
     <legend>{name}</legend>
-    <input type="text" bind:value={filter}/>
+    <div>
+        <input type="text" bind:value={filter} placeholder="Filter"/>
+        <label><input type="checkbox" bind:checked={by_count}> Sort by count</label>
+    </div>
     <div class="list">
-        {#each Object.entries(values) as [key, value]}
+        {#each sorted_values as [key, value]}
             {#if key.toLowerCase().includes(filter.toLowerCase())}
                 <label>
                     <input type="checkbox" bind:group="{selected}" value={value}>
-                    {key}
+                    {key} ({value.length})
                 </label>
             {/if}
         {/each}
@@ -26,7 +33,7 @@
     fieldset {
         border: 1px solid;
         padding: 10px;
-        max-height: 200px; /* Adjust this value as needed */
+        max-height: 300px; /* Adjust this value as needed */
         text-align: left;
     }