now with fuse search

Author: Zulko

package-lock.json

@@ -14,6 +14,7 @@
     "vite": "^6.2.0"
   },
   "dependencies": {
+    "fuse.js": "^7.1.0",
     "latlon-geohash": "^2.0.0",
     "leaflet": "^1.9.4",
     "lokijs": "^1.5.12",

package.json

@@ -15,12 +15,13 @@
   // State for selected marker
   let selectedMarker = null;
   let mapZoom = 1;
+  let mapCenter = null;
 
   // Add a target location state
   let targetMapLocation = {
     lat: 51.508056,
     lon: -0.076111,
-    zoom: 1,
+    zoom: 3,
   };
 
   // Search state
@@ -73,7 +74,6 @@
   }
 
   function addMarkerClasses(entries, hashlevel) {
-    console.log("selectedMarker", selectedMarker);
     if (hashlevel > 7.5) {
       for (const entry of entries) {
         entry.displayClass = "full";
@@ -99,7 +99,6 @@
     }
     for (const entry of entries) {
       if (selectedMarker && entry.id == selectedMarker.id) {
-        console.log({ entry });
         entry.displayClass = "selected";
       }
     }
@@ -108,14 +107,13 @@
 
   async function handleBoundsChange(event) {
     const center = event.detail.center;
-    mapZoom = event.detail.zoom;
-
-    // Update targetMapLocation with the new center and zoom
-    const urlTargetMapLocation = {
+    mapCenter = {
       lat: center.lat,
       lon: center.lng,
-      zoom: mapZoom,
     };
+    mapZoom = event.detail.zoom;
+    // Update targetMapLocation with the new center and zoom
+    const urlTargetMapLocation = { ...mapCenter, zoom: mapZoom };
     updateURLParams(urlTargetMapLocation, selectedMarker);
 
     const bounds = {
@@ -133,7 +131,6 @@
       scoreField: "page_len",
     });
     if (uniqueEntries.length > 400) {
-      console.log("uniqueEntries", uniqueEntries.length, "so reducing");
       uniqueEntries.sort((a, b) => b.page_len - a.page_len);
       uniqueEntries = uniqueEntries.slice(0, 400);
     }
@@ -143,7 +140,6 @@
     ) {
       uniqueEntries.push(selectedMarker);
     }
-    console.log("nMarkers", uniqueEntries.length);
 
     addMarkerClasses(uniqueEntries, hashlevel);
     markers = uniqueEntries;
@@ -189,11 +185,7 @@
         on:markerclick={handleMarkerClick}
       />
       <div class="search-wrapper">
-        <SearchBar
-          entries={allEntriesInRegion}
-          bind:searchText
-          on:select={handleSearchSelect}
-        />
+        <SearchBar on:select={handleSearchSelect} />
       </div>
     </div>
   </div>

src/App.svelte

@@ -83,7 +83,7 @@
     map = L.map(mapElement, {
       zoomControl: false, // Disable default zoom control
       worldCopyJump: true,
-    }).setView([0, 0], 1);
+    }).setView([0, 0], 3);
     flyTo(targetLocation);
 
     // Add tile layer (OpenStreetMap)

src/lib/Map.svelte

@@ -1,40 +1,58 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-
-  export let entries = [];
-  export let searchText = "";
+  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  import { getEntriesfromText } from "./geodata";
+  export let searchQuery = "";
 
   const dispatch = createEventDispatcher();
 
-  let filteredEntries = [];
+  let searchResults = [];
   let isActive = false;
-
+  let isLoading = false;
+  let debounceTimer = null;
+
+  // Debounced search function
+  function debouncedSearch() {
+    isLoading = true;
+
+    // Clear any existing timer
+    if (debounceTimer) clearTimeout(debounceTimer);
+
+    // Set a new timer
+    debounceTimer = setTimeout(async () => {
+      if (searchQuery && searchQuery.length > 1) {
+        searchResults = await getEntriesfromText(searchQuery);
+        isActive = true;
+      } else {
+        searchResults = [];
+        isActive = false;
+      }
+      isLoading = false;
+    }, 300); // 0.3 seconds debounce
+  }
+
+  // Search text reactive statement
   $: {
-    if (searchText && searchText.length > 1) {
-      const searchLower = searchText.toLowerCase();
-      filteredEntries = entries
-        .filter((entry) => entry.page_title.toLowerCase().includes(searchLower))
-        .sort((a, b) => {
-          // Sort by whether the title starts with the search text, then by length
-          const aStarts = a.page_title.toLowerCase().startsWith(searchLower);
-          const bStarts = b.page_title.toLowerCase().startsWith(searchLower);
-
-          if (aStarts && !bStarts) return -1;
-          if (!aStarts && bStarts) return 1;
-
-          return a.page_title.length - b.page_title.length;
-        })
-        .slice(0, 10); // Limit to 10 results
-      isActive = true;
+    if (searchQuery && searchQuery.length > 1) {
+      isLoading = true;
+      searchResults = [];
+      debouncedSearch();
     } else {
-      filteredEntries = [];
+      searchResults = [];
       isActive = false;
+      isLoading = false;
+      // Clear any pending search
+      if (debounceTimer) clearTimeout(debounceTimer);
     }
   }
 
+  onDestroy(() => {
+    // Clean up any pending timers when component is destroyed
+    if (debounceTimer) clearTimeout(debounceTimer);
+  });
+
   function handleSelect(entry) {
     dispatch("select", entry);
-    searchText = "";
+    searchQuery = "";
     isActive = false;
   }
 
@@ -46,7 +64,7 @@
   }
 
   function handleFocus() {
-    if (searchText && searchText.length > 1) {
+    if (searchQuery && searchQuery.length > 1) {
       isActive = true;
     }
   }
@@ -56,17 +74,17 @@
   <div class="search-input-wrapper">
     <input
       type="text"
-      placeholder="Search locations..."
-      bind:value={searchText}
+      placeholder="Search locations (regions already visited only)"
+      bind:value={searchQuery}
       on:focus={handleFocus}
       on:blur={handleBlur}
       class="search-input"
     />
-    {#if searchText}
+    {#if searchQuery}
       <button
         class="clear-button"
         on:click={() => {
-          searchText = "";
+          searchQuery = "";
           isActive = false;
         }}
       >
@@ -78,9 +96,9 @@
     </div>
   </div>
 
-  {#if isActive && filteredEntries.length > 0}
+  {#if isActive && searchResults.length > 0}
     <div class="suggestions" role="listbox">
-      {#each filteredEntries as entry}
+      {#each searchResults as entry}
         <div
           class="suggestion-item"
           on:mousedown={() => handleSelect(entry)}
@@ -96,10 +114,14 @@
         </div>
       {/each}
     </div>
-  {:else if isActive && searchText.length > 1}
+  {:else if isActive && searchQuery.length > 1}
     <div class="suggestions" role="listbox">
       <div class="no-results" role="presentation">
-        No matching locations found
+        {#if isLoading}
+          Searching...
+        {:else}
+          No matching locations found
+        {/if}
       </div>
     </div>
   {/if}

src/lib/SearchBar.svelte

@@ -37,6 +37,31 @@ export async function getGeoEntriesInBounds({minLat, maxLat, minLon, maxLon}) {
   return await queryPromise;
 }
 
+export async function getEntriesfromText(searchQuery) {
+  // Make sure worker is initialized
+  if (!window.geodataWorker) {
+    initWorker();
+  }
+
+  // Create a unique request ID
+  const requestId = `query_${Date.now()}_${Math.random()}`;
+  
+  // Create a promise that will be resolved when the worker returns results
+  const queryPromise = new Promise((resolve, reject) => {
+    window.geodataWorkerPromises[requestId] = { resolve, reject };
+  });
+
+  // Send query to worker
+  window.geodataWorker.postMessage({
+    type: 'textSearch',
+    requestId,
+    searchQuery
+  });
+
+  // Wait for worker to return results
+  return await queryPromise;
+}
+
 // Initialize the worker once
 function initWorker() {
   window.geodataWorker = new Worker(new URL('./geodataWorker.js', import.meta.url), { type: 'module' });

src/lib/geodata.js

@@ -6,6 +6,7 @@
 import pako from 'pako';
 import ngeohash from 'ngeohash';
 import Loki from 'lokijs';
+import Fuse from 'fuse.js';
 
 // Initialize the database in the worker
 const db = new Loki('geodata.db', {
@@ -34,6 +35,29 @@ const tinyGeoCollection = db.addCollection('tinygeodata', {
 // Keep track of ingested files
 const ingestedFiles = [];
 
+// Initialize Fuse instance for search
+let fuseIndex = null
+let searchableData = [];
+
+// Function to build or rebuild the search index
+function buildSearchIndex() {
+  // Collect all items from both collections for searching
+  searchableData = geoCollection.chain().data();
+  
+  // Configure Fuse options for searching
+  const fuseOptions = {
+    keys: ['page_title', 'name', 'category'],
+    threshold: 0.3,
+    ignoreLocation: false,
+    includeScore: true,
+    shouldSort: true,
+    minMatchCharLength: 2
+  };
+  
+  // Create new Fuse index
+  fuseIndex = new Fuse(searchableData, fuseOptions);
+}
+
 // Function to process a CSV file from gzipped data
 async function loadCsvGzFile(url) {
   const response = await fetch(url);
@@ -80,10 +104,30 @@ function queryGeoTable(table, minLat, maxLat, minLon, maxLon) {
 // Set up event listener for messages from the main thread
 self.addEventListener('message', async (event) => {
   try {
-    const { type, bounds, basePath } = event.data;
+    const { type, bounds, basePath, searchQuery, requestId } = event.data;
 
-    if (type === 'textSearch') {
-      console.log("bla")
+    if (type === 'textSearch') {      
+      // Perform search if we have an index
+      if (fuseIndex) {
+        
+        const results = fuseIndex.search(searchQuery, {
+          threshold: 0.2,
+          minMatchCharLength: 3,
+          distance: 10
+        })
+        self.postMessage({
+          type: 'queryResults',
+          requestId,
+          results: results.map(result => result.item)
+        });
+      } else {
+        // Return empty result if no index available
+        self.postMessage({
+          type: 'queryResults',
+          requestId,
+          results: []
+        });
+      }
     }
     else if (type === 'queryBounds') {
       // Handle bounds query
@@ -109,7 +153,6 @@ self.addEventListener('message', async (event) => {
         table.insert(rows);
         ingestedFiles.push(url);
       }
-      
       // Query the data
       const results = queryGeoTable(table, minLat, maxLat, minLon, maxLon);
 
@@ -119,6 +162,10 @@ self.addEventListener('message', async (event) => {
         requestId: event.data.requestId,
         results 
       });
+
+      if (needDownload.length > 0) {
+        buildSearchIndex();
+      }
     }
   } catch (error) {
     self.postMessage({