Merge master

src/UI/BigComponents/MapillaryLink.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <a class="flex items-center" href={mapillaryLink} target="_blank">
-  <Mapillary_black class={twMerge("shrink-0", large ? "m-2 mr-4 h-12 w-12" : "h-6 w-6 pr-2")} />
+  <Mapillary_black class={twMerge("shrink-0", large ? "m-2 mr-4 h-12 w-12" : "h-5 w-5 pr-1")} />
   {#if large}
     <div class="flex flex-col">
       <Tr t={Translations.t.general.attribution.openMapillary} />

src/UI/Image/NearbyImages.svelte

@@ -3,10 +3,9 @@
    * Show nearby images which can be clicked
    */
   import type { OsmTags } from "../../Models/OsmFeature"
-  import { Store, UIEventSource } from "../../Logic/UIEventSource"
+  import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
   import type { SpecialVisualizationState } from "../SpecialVisualization"
   import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
-  import NearbyImagesSearch from "../../Logic/Web/NearbyImagesSearch"
   import LinkableImage from "./LinkableImage.svelte"
   import type { Feature } from "geojson"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
@@ -14,7 +13,7 @@
   import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
-  import LoginToggle from "../Base/LoginToggle.svelte"
+  import MapillaryLink from "../BigComponents/MapillaryLink.svelte"
 
   export let tags: UIEventSource<OsmTags>
   export let state: SpecialVisualizationState
@@ -25,36 +24,49 @@
   export let linkable: boolean = true
   export let layer: LayerConfig
 
-  let imagesProvider = new NearbyImagesSearch(
-    {
-      lon,
-      lat,
-      allowSpherical: new UIEventSource<boolean>(false),
-      blacklist: AllImageProviders.LoadImagesFor(tags),
-    },
-    state.indexedFeatures
-  )
+  let imagesProvider = state.nearbyImageSearcher
+
+  let loadedImages = AllImageProviders.LoadImagesFor(tags).mapD(loaded => new Set(loaded.map(img => img.url)))
+  let imageState = imagesProvider.getImagesAround(lon, lat)
+  let result: Store<P4CPicture[]> = imageState.images.mapD((pics: P4CPicture[]) => pics.filter((p: P4CPicture) =>
+    !loadedImages.data.has(p.pictureUrl)  // We don't show any image which is already linked
+    && !p.details.isSpherical,
+  ).slice(0, 25), [loadedImages])
+
+  let someLoading = imageState.state.mapD(stateRecord => Object.values(stateRecord).some(v => v === "loading"))
+  let errors = imageState.state.mapD(stateRecord => Object.keys(stateRecord).filter(k => stateRecord[k] === "error"))
 
-  let images: Store<P4CPicture[]> = imagesProvider.store.map((images) => images.slice(0, 20))
-  let allDone = imagesProvider.allDone
 </script>
 
-<div class="flex justify-between">
-  <h4>
-    <Tr t={Translations.t.image.nearby.title} />
-  </h4>
-  <slot name="corner" />
-</div>
-{#if !$allDone}
-  <Loading />
-{:else if $images.length === 0}
-  <Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert" />
-{:else}
-  <div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
-    {#each $images as image (image.pictureUrl)}
+<div class="flex flex-col">
+
+  {#if $result.length === 0}
+    {#if $someLoading}
+      <div class="flex justify-center m-4">
+        <Loading />
+      </div>
+    {:else }
+      <Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert" />
+    {/if}
+  {:else}
+    <div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
+      {#each $result as image (image.pictureUrl)}
       <span class="w-fit shrink-0" style="scroll-snap-align: start">
         <LinkableImage {tags} {image} {state} {feature} {layer} {linkable} />
       </span>
-    {/each}
+      {/each}
+    </div>
+  {/if}
+  <div class="flex justify-between my-2">
+    <div>
+      {#if $someLoading && $result.length > 0}
+        <Loading />
+      {/if}
+      {#if $errors.length > 0}
+        <Tr cls="alert font-sm block" t={Translations.t.image.nearby.failed.Subs({service: $errors.join(", ")}) } />
+      {/if}
+    </div>
+    <MapillaryLink large={false}
+                   mapProperties={{zoom: new ImmutableStore(16), location: new ImmutableStore({lon, lat})}} />
   </div>
-{/if}
+</div>

src/UI/Map/MaplibreMap.svelte

@@ -97,6 +97,7 @@
 
 
   onDestroy(async () => {
+<<<<<<< HEAD
     await Utils.waitFor(100)
     requestAnimationFrame(
       () => {
@@ -109,6 +110,15 @@
         }
       }
     )
+=======
+    await Utils.waitFor(250)
+    try {
+      _map?.remove()
+      map = null
+    } catch (e) {
+      console.error("Could not destroy map")
+    }
+>>>>>>> 6093ac3ea (Refactoring: rework image fetching code, improve nearby images UI. Fix #2026, #2027)
   })
 </script>
 

src/UI/SpecialVisualization.ts

@@ -28,6 +28,7 @@ import { SummaryTileSourceRewriter } from "../Logic/FeatureSource/TiledFeatureSo
 import LayoutSource from "../Logic/FeatureSource/Sources/LayoutSource"
 import { Map as MlMap } from "maplibre-gl"
 import ShowDataLayer from "./Map/ShowDataLayer"
+import { CombinedFetcher } from "../Logic/Web/NearbyImagesSearch"
 
 /**
  * The state needed to render a special Visualisation.
@@ -92,6 +93,7 @@ export interface SpecialVisualizationState {
     readonly imageUploadManager: ImageUploadManager
 
     readonly previewedImage: UIEventSource<ProvidedImage>
+    readonly nearbyImageSearcher: CombinedFetcher
     readonly geolocation: GeoLocationHandler
 
     showCurrentLocationOn(map: Store<MlMap>): ShowDataLayer

src/UI/SpecialVisualizations.ts

@@ -59,7 +59,6 @@ import { Imgur } from "../Logic/ImageProviders/Imgur"
 import Constants from "../Models/Constants"
 import { MangroveReviews } from "mangrove-reviews-typescript"
 import Wikipedia from "../Logic/Web/Wikipedia"
-import NearbyImagesSearch from "../Logic/Web/NearbyImagesSearch"
 import AllReviews from "./Reviews/AllReviews.svelte"
 import StarsBarIcon from "./Reviews/StarsBarIcon.svelte"
 import ReviewForm from "./Reviews/ReviewForm.svelte"
@@ -98,6 +97,7 @@ import MarkdownUtils from "../Utils/MarkdownUtils"
 import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
 import Trash from "@babeard/svelte-heroicons/mini/Trash"
 import NothingKnown from "./Popup/NothingKnown.svelte"
+import { CombinedFetcher } from "../Logic/Web/NearbyImagesSearch"
 
 class NearbyImageVis implements SpecialVisualization {
     // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@@ -116,7 +116,7 @@ class NearbyImageVis implements SpecialVisualization {
     docs =
         "A component showing nearby images loaded from various online services such as Mapillary. In edit mode and when used on a feature, the user can select an image to add to the feature"
     funcName = "nearby_images"
-    needsUrls = NearbyImagesSearch.apiUrls
+    needsUrls = CombinedFetcher.apiUrls
     svelteBased = true
 
     constr(