Feature: improve inspectorGui: add search, placeholder, see #2353

src/UI/InspectorGUI.svelte

@@ -8,7 +8,6 @@
   import { MapLibreAdaptor } from "./Map/MapLibreAdaptor"
   import { Map as MlMap } from "maplibre-gl"
   import ShowDataLayer from "./Map/ShowDataLayer"
-
   import StaticFeatureSource from "../Logic/FeatureSource/Sources/StaticFeatureSource"
   import type { Feature } from "geojson"
   import Loading from "./Base/Loading.svelte"
@@ -24,9 +23,16 @@
   import Page from "./Base/Page.svelte"
   import PreviouslySpiedUsers from "./History/PreviouslySpiedUsers.svelte"
   import { OsmConnection } from "../Logic/Osm/OsmConnection"
-  import MagnifyingGlassCircle from "@babeard/svelte-heroicons/outline/MagnifyingGlassCircle"
   import Translations from "./i18n/Translations"
   import Tr from "./Base/Tr.svelte"
+  import Searchbar from "../UI/Base/Searchbar.svelte"
+  import CombinedSearcher from "../Logic/Search/CombinedSearcher"
+  import CoordinateSearch from "../Logic/Search/CoordinateSearch"
+  import OpenLocationCodeSearch from "../Logic/Search/OpenLocationCodeSearch"
+  import PhotonSearch from "../Logic/Search/PhotonSearch"
+  import GeocodeResults from "./Search/GeocodeResults.svelte"
+  import MagnifyingGlassCircle from "@babeard/svelte-heroicons/mini/MagnifyingGlassCircle"
+  import type { GeocodeResult } from "../Logic/Search/GeocodingProvider"
 
   console.log("Loading inspector GUI")
   let username = QueryParameters.GetQueryParameter("user", undefined, "Inspect this user")
@@ -37,16 +43,45 @@
   let lon = UIEventSource.asFloat(QueryParameters.GetQueryParameter("lon", "0"))
   let loadingData = false
   let selectedElement = new UIEventSource<Feature>(undefined)
+  let searchvalue = new UIEventSource<string>("")
 
+  let geocoder = new CombinedSearcher(
+    new CoordinateSearch(),
+    new OpenLocationCodeSearch(),
+    new PhotonSearch(true, 2),
+    new PhotonSearch()
+  )
+  let showSearchDrawer = new UIEventSource(true)
+  let searchIsFocussed = new UIEventSource(false)
+  let searchIsRunning = new UIEventSource(false)
   let maplibremap: MapLibreAdaptor = new MapLibreAdaptor(map, {
     zoom,
-    location: new UIEventSource<{ lon: number; lat: number }>({ lat: lat.data, lon: lon.data }),
+    location: new UIEventSource<{ lon: number; lat: number }>({ lat: lat.data, lon: lon.data })
   })
   maplibremap.location.stabilized(500).addCallbackAndRunD((l) => {
     lat.set(l.lat)
     lon.set(l.lon)
   })
-
+  let searchSuggestions = searchvalue.bindD(search => {
+    searchIsRunning.set(true)
+    try {
+      return UIEventSource.FromPromise(geocoder.search(search))
+    } finally {
+      searchIsRunning.set(false)
+    }
+  })
+  let state = {
+    mapProperties: maplibremap,
+    searchState: {
+      searchTerm: searchvalue,
+      suggestions: searchSuggestions,
+      suggestionsSearchRunning: searchIsRunning,
+      showSearchDrawer,
+      applyGeocodeResult(geocodeResult: GeocodeResult) {
+        maplibremap.location.set({ lon: geocodeResult.lon, lat: geocodeResult.lat })
+      }
+    }
+  }
   let allLayers = HistoryUtils.personalTheme.layers
   let layersNoFixme = allLayers.filter((l) => l.id !== "fixme")
   let fixme = allLayers.find((l) => l.id === "fixme")
@@ -59,7 +94,7 @@
       Utils.waitFor(200).then(() => {
         selectedElement.set(f)
       })
-    },
+    }
   })
 
   let osmConnection = new OsmConnection()
@@ -91,7 +126,7 @@
         inspectedData.push({
           label: undefined,
           visitedTime: new Date().toISOString(),
-          name: user,
+          name: user
         })
       }
       inspectedContributors.ping()
@@ -101,7 +136,7 @@
     featuresStore.set([])
     const overpass = new Overpass(
       undefined,
-      user.split(";").map((user) => 'nw(user_touched:"' + user + '");'),
+      user.split(";").map((user) => "nw(user_touched:\"" + user + "\");"),
       Constants.defaultOverpassUrls[0]
     )
     if (!maplibremap.bounds.data) {
@@ -137,7 +172,7 @@
     <h1 class="m-0 mx-2 flex-shrink-0">
       <Tr t={t.title} />
     </h1>
-    <ValidatedInput type="string" value={username} on:submit={() => load()} />
+    <ValidatedInput placeholder={t.previouslySpied.username} type="string" value={username} on:submit={() => load()} />
     {#if loadingData}
       <Loading />
     {:else}
@@ -207,8 +242,16 @@
       </Drawer>
     {/if}
 
-    <div class="m-1 flex-grow overflow-hidden rounded-xl">
+
+    <div class="relative m-1 flex-grow overflow-hidden rounded-xl">
       <MaplibreMap {map} mapProperties={maplibremap} autorecovery={true} />
+      <div class="absolute right-0 top-0 w-1/4 p-4">
+        <Searchbar isFocused={searchIsFocussed} value={searchvalue}
+                   on:focus={() => state.searchState.showSearchDrawer.set(true)} />
+        {#if $searchSuggestions?.length > 0 || $searchIsFocussed}
+          <GeocodeResults {state} />
+        {/if}
+      </div>
     </div>
   {:else if mode === "table"}
     <div class="m-2 h-full overflow-y-auto">