UX: add unlink button, simplify unlink code

src/Logic/ImageProviders/GenericImageProvider.ts

@@ -34,6 +34,9 @@ export default class GenericImageProvider extends ImageProvider {
                 provider: this,
                 id: value,
                 isSpherical: undefined,
+                originalAttribute: {
+                    key, value
+                }
             },
         ]
     }

src/Logic/ImageProviders/ImageProvider.ts

@@ -26,6 +26,7 @@ export interface ProvidedImage {
     host?: string
     isSpherical: boolean
     license?: LicenseInfo
+    originalAttribute?: {key: string, value: string}
 }
 
 export interface PanoramaView {

src/Logic/ImageProviders/Imgur.ts

@@ -33,6 +33,7 @@ export class Imgur extends ImageProvider {
                     provider: this,
                     id: value,
                     isSpherical: false,
+                    originalAttribute: {key, value}
                 },
             ]
         }

src/Logic/ImageProviders/Mapillary.ts

@@ -170,8 +170,7 @@ export class Mapillary extends ImageProvider {
             properties: {
                 url: response.thumb_2048_url,
                 northOffset: response.computed_compass_angle,
-                provider: this,
+                provider: this
-                imageMeta: <any>image
             },
         }
     }
@@ -246,6 +245,7 @@ export class Mapillary extends ImageProvider {
                 response.camera_type === "spherical" || response.camera_type === "equirectangular",
             lat: geometry.coordinates[1],
             lon: geometry.coordinates[0],
+            originalAttribute: {key, value}
         }
     }
 

src/Logic/ImageProviders/Panoramax.ts

@@ -174,6 +174,7 @@ export default class PanoramaxImageProvider extends ImageProvider {
         }
         const providedImage = await this.getInfo(value)
         providedImage.alt_id = alt_id
+        providedImage.originalAttribute = {key, value}
         return [providedImage]
     }
 

src/Logic/ImageProviders/WikidataImageProvider.ts

@@ -61,7 +61,11 @@ export class WikidataImageProvider extends ImageProvider {
             allImages.push(promises)
         }
         const resolved = await Promise.all(Utils.NoNull(allImages))
-        return [].concat(...resolved)
+        const flattened = resolved.flatMap( x => x)
+        if(flattened.length === 1){
+            flattened[0].originalAttribute = {key, value}
+        }
+        return flattened
     }
 
     public DownloadAttribution(): Promise<undefined> {

src/Logic/ImageProviders/WikimediaImageProvider.ts

@@ -145,14 +145,14 @@ export class WikimediaImageProvider extends ImageProvider {
                 .map((image) => this.UrlForImage(image))
         }
         if (value.startsWith("File:")) {
-            return [this.UrlForImage(value)]
+            return [this.UrlForImage(value, key, value)]
         }
         if (value.startsWith("http")) {
             // Probably an error
             return undefined
         }
         // We do a last effort and assume this is a file
-        return [this.UrlForImage("File:" + value)]
+        return [this.UrlForImage("File:" + value, key, value)]
     }
 
     public async DownloadAttribution(img: { id: string }): Promise<LicenseInfo> {
@@ -211,9 +211,9 @@ export class WikimediaImageProvider extends ImageProvider {
         return licenseInfo
     }
 
-    private UrlForImage(image: string): ProvidedImage {
+    private UrlForImage(image: string, key?: string, value?: string): ProvidedImage {
         image = "File:" + WikimediaImageProvider.makeCanonical(image)
-        return {
+        const providedImage: ProvidedImage = {
             url: WikimediaImageProvider.PrepareUrl(image),
             url_hd: WikimediaImageProvider.PrepareUrl(image, true),
             key: undefined,
@@ -221,6 +221,10 @@ export class WikimediaImageProvider extends ImageProvider {
             id: image,
             isSpherical: false,
         }
+        if(key && value){
+            providedImage.originalAttribute = {key, value}
+        }
+        return providedImage
     }
 
     getPanoramaInfo(): Promise<Feature<Point, PanoramaView>> | undefined {

src/Logic/State/UserRelatedState.ts

@@ -200,7 +200,6 @@ export default class UserRelatedState {
     public static readonly usersettingsConfig = UserRelatedState.initUserSettingsState()
     public static readonly availableUserSettingsIds: string[] =
         UserRelatedState.usersettingsConfig?.tagRenderings?.map((tr) => tr.id) ?? []
-    public static readonly SHOW_TAGS_VALUES = ["always", "yes", "full"] as const
     /**
      The user credentials
      */
@@ -212,6 +211,7 @@ export default class UserRelatedState {
     public readonly installedUserThemes: Store<string[]>
     public readonly showAllQuestionsAtOnce: UIEventSource<boolean>
     public readonly showTags: UIEventSource<"no" | undefined | "always" | "yes" | "full">
+    public readonly showTagsB: Store<boolean>
     public readonly showCrosshair: UIEventSource<"yes" | "always" | "no" | undefined>
     public readonly translationMode: UIEventSource<"false" | "true" | "mobile" | undefined | string>
 
@@ -269,6 +269,20 @@ export default class UserRelatedState {
         )
         this.language = this.osmConnection.getPreference("language")
         this.showTags = this.osmConnection.getPreference("show_tags")
+        this.showTagsB = this.showTags.map(showTags => {
+            if (showTags === "always" || showTags === "full") {
+                return true
+            }
+            if (showTags === "no") {
+                return false
+            }
+            const userdetails = this.osmConnection.userDetails.data
+            if (!userdetails) {
+                return false
+            }
+            const csCount = userdetails.csCount
+            return csCount >= Constants.userJourney.tagsVisibleAt
+        }, [this.osmConnection.userDetails])
         this.showCrosshair = this.osmConnection.getPreference("show_crosshair")
         this.fixateNorth = this.osmConnection.getPreference("fixate-north")
         this.morePrivacy = this.osmConnection.getPreference("more_privacy", { defaultValue: "no" })

src/UI/Base/LoginToggle.svelte

@@ -22,7 +22,8 @@
    */
   export let silentFail: boolean = false
   /**
-   * If set and the OSM-api  fails, do _not_ show any error messages nor the successful state, just hide
+   * If set and the OSM-api fails, do _not_ show any error messages nor the successful state, just hide.
+   * Will still show the "not-logged-in"-slot
    */
   export let hiddenFail: boolean = false
   let loadingStatus = state?.osmConnection?.loadingStatus ?? new ImmutableStore("logged-in")

src/UI/BigComponents/Filterview.svelte

@@ -24,14 +24,7 @@
   let isDisplayed: UIEventSource<boolean> = filteredLayer.isDisplayed
 
   let isDebugging = state?.featureSwitches?.featureSwitchIsDebugging ?? new ImmutableStore(false)
-  let showTags = state?.userRelatedState?.showTags?.map(
+  let showTags = state?.userRelatedState?.showTagsB
-    (s) =>
-      (s === "yes" &&
-        state?.userRelatedState?.osmConnection?.userDetails?.data?.csCount >=
-          Constants.userJourney.tagsVisibleAt) ||
-      s === "always" ||
-      s === "full"
-  )
 
   /**
    * Gets a UIEventSource as boolean for the given option, to be used with a checkbox

src/UI/Image/AttributedImage.svelte

@@ -24,6 +24,7 @@
   import Panorama360 from "../../assets/svg/Panorama360.svelte"
   import { ExternalLinkIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { ExclamationTriangle as TriangleOutline } from "@babeard/svelte-heroicons/outline/ExclamationTriangle"
+  import LoginToggle from "../Base/LoginToggle.svelte"
 
   export let image: Partial<ProvidedImage> & { id: string; url: string }
   let fallbackImage: string = undefined
@@ -43,16 +44,39 @@
 
   let loaded = false
   let error = false
+  let notFound = false
   let ignoreHidden = false
   let isInStrictMode = new UIEventSource(false)
 
-  function onError() {
+  async function detectErrorReason() {
-    error = true
+    try {
+
+      const response = await fetch(
+        image.url,
+        {
+          headers: {
+            "Accept": "image/avif,image/webp,*/*",
+          },
+        },
+      )
+      if (response.status === 404) {
+        notFound = true
+      }
+    } catch
+      (e) {
+      console.log("Could not load image while trying to remediate", e)
+    }
+  }
+
+  async function onError() {
     Mapillary.isInStrictMode().addCallbackAndRunD(isStrict => {
       isInStrictMode.set(isStrict)
       return true // unregister
     })
+    await detectErrorReason()
+    error = true
   }
+
   let visitUrl = image.provider?.visitUrl(image)
   let showBigPreview = new UIEventSource(false)
   onDestroy(
@@ -112,15 +136,25 @@
 </Popup>
 {#if error}
   <div class="h-80 w-60 interactive flex flex-col justify-center items-center p-4 text-center">
-    <div class="alert flex items-center">
+    {#if notFound}
-      <TriangleOutline class="shrink-0 h-8 w-8" />
+      <div class="alert flex items-center">
-      <Tr t={Translations.t.image.loadingFailed}/>
+        <TriangleOutline class="shrink-0 h-8 w-8" />
-    </div>
+        Not found
-    {#if image.provider.name.toLowerCase() === "mapillary" && $isInStrictMode}
+      </div>
-      <Tr t={Translations.t.image.mapillaryTrackingProtection}/>
+      This image is probably incorrect or deleted.
-    {:else if $isInStrictMode}
+      <slot name="not-found-extra" />
-      <Tr t={Translations.t.image.strictProtectionDetected}/>
+    {:else}
-      <div class="subtle text-sm mt-8">{image.url}</div>
+      <div class="alert flex items-center">
+        <TriangleOutline class="shrink-0 h-8 w-8" />
+        <Tr t={Translations.t.image.loadingFailed} />
+      </div>
+      {#if image.provider.name.toLowerCase() === "mapillary" && $isInStrictMode}
+        <Tr t={Translations.t.image.mapillaryTrackingProtection} />
+      {:else if $isInStrictMode}
+        <Tr t={Translations.t.image.strictProtectionDetected} />
+        {image.provider.name}
+        <div class="subtle text-sm mt-8">{image.url}</div>
+      {/if}
     {/if}
   </div>
 {:else if image.status !== undefined && image.status !== "ready" && image.status !== "hidden"}

src/UI/Image/DeletableImage.svelte

@@ -39,6 +39,8 @@
   let reportFreeText = new UIEventSource<string>(undefined)
   let reported = new UIEventSource<boolean>(false)
 
+  let canBeUnlinked = image.originalAttribute !== undefined
+
   async function requestDeletion() {
     if (reportReason.data === "other" && !reportFreeText.data) {
       return
@@ -63,31 +65,20 @@
   }
 
   async function unlink() {
-    console.log("Unlinking image", image.key, image.id)
+    const {key} = image.originalAttribute
-    if (image.id.length < 10) {
+    await state?.changes?.applyAction(
-      console.error("Suspicious value, not deleting ", image.id)
+      new ChangeTagAction(tags.data.id, new Tag(key, ""), tags.data, {
-      return
+        changeType: "delete-image",
-    }
+        theme: state.theme.id,
-    // The "key" is the provider key, but not necessarely the actual key that should be reset
+      })
-    // We iterate over all tags. *Every* tag for which the value contains the id will be deleted
+    )
-    const tgs = tags.data
-    for (const key in tgs) {
-      if (typeof tgs[key] !== "string" || tgs[key].indexOf(image.id) < 0) {
-        continue
-      }
-
-      await state?.changes?.applyAction(
-        new ChangeTagAction(tgs.id, new Tag(key, ""), tgs, {
-          changeType: "delete-image",
-          theme: state.theme.id,
-        })
-      )
-    }
   }
 
   const t = Translations.t.image.panoramax
   const tu = Translations.t.image.unlink
   const placeholder = t.placeholder.current
+
+  let showTags = state.userRelatedState?.showTagsB
 </script>
 
 <Popup shown={showDeleteDialog}>
@@ -169,10 +160,24 @@
           <DownloadIcon />
           <Tr t={Translations.t.general.download.downloadImage} />
         </button>
-        <button on:click={() => showDeleteDialog.set(true)} class="flex items-center">
+        {#if canBeUnlinked}
-          <TrashIcon />
+          <button on:click={() => showDeleteDialog.set(true)} class="flex items-center">
-          <Tr t={tu.button} />
+            <TrashIcon />
-        </button>
+            <Tr t={tu.button} />
+          </button>
+        {/if}
+      </svelte:fragment>
+      <svelte:fragment slot="not-found-extra">
+        {#if canBeUnlinked}
+          <button on:click={() => unlink()}>
+            <Tr t={tu.button} />
+          </button>
+          {#if $showTags}
+            <div class="subtle line-through">
+              {image.originalAttribute.key}={image.originalAttribute.value}
+            </div>
+          {/if}
+        {/if}
       </svelte:fragment>
     </AttributedImage>
   </div>

src/UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -16,9 +16,7 @@
   import SubtleButton from "../../Base/SubtleButton.svelte"
   import TagRenderingMappingInput from "./TagRenderingMappingInput.svelte"
   import { Translation } from "../../i18n/Translation"
-  import Constants from "../../../Models/Constants"
   import { Unit } from "../../../Models/Unit"
-  import UserRelatedState from "../../../Logic/State/UserRelatedState"
   import { twJoin } from "tailwind-merge"
   import { TagUtils } from "../../../Logic/Tags/TagUtils"
 
@@ -31,8 +29,8 @@
   import { get } from "svelte/store"
   import Markdown from "../../Base/Markdown.svelte"
   import { Utils } from "../../../Utils"
-  import { TagTypes } from "../../../Logic/Tags/TagTypes"
   import type { UploadableTag } from "../../../Logic/Tags/TagTypes"
+  import { TagTypes } from "../../../Logic/Tags/TagTypes"
 
   import Popup from "../../Base/Popup.svelte"
   import If from "../../Base/If.svelte"
@@ -315,8 +313,7 @@
   let featureSwitchIsTesting = state?.featureSwitchIsTesting ?? new ImmutableStore(false)
   let featureSwitchIsDebugging =
     state?.featureSwitches?.featureSwitchIsDebugging ?? new ImmutableStore(false)
-  let showTags = state?.userRelatedState?.showTags ?? new ImmutableStore(undefined)
+  let showTags : Store<boolean> = state?.userRelatedState?.showTagsB ?? new ImmutableStore(false)
-  let numberOfCs = state?.osmConnection?.userDetails?.data?.csCount ?? 0
   let question = config.question
   let hideMappingsUnlessSearchedFor =
     config.mappings.length > 8 && config.mappings.some((m) => m.priorityIf !== undefined)
@@ -324,14 +321,6 @@
   $: hideMappingsUnlessSearchedFor =
     config.mappings.length > 8 && config.mappings.some((m) => m.priorityIf !== undefined)
 
-  if (state?.osmConnection) {
-    onDestroy(
-      state.osmConnection?.userDetails?.addCallbackAndRun((ud) => {
-        numberOfCs = ud?.csCount
-      })
-    )
-  }
-
   function clearAnswer() {
     const tagsToSet: UploadableTag[] = onMarkUnknown.data
     const change = new ChangeTagAction(tags.data.id, new And(tagsToSet), tags.data, {
@@ -577,9 +566,7 @@
             </h2>
             <Tr t={Translations.t.unknown.explanation} />
             <If
-              condition={state.userRelatedState?.showTags?.map(
+              condition={state.userRelatedState?.showTagsB}
-                (v) => v === "yes" || v === "full" || v === "always"
-              )}
             >
               <div class="subtle">
                 <Tr t={Translations.t.unknown.removedKeys} />
@@ -639,7 +626,7 @@
             </div>
           </div>
           <!-- Taghint + debug info -->
-          {#if UserRelatedState.SHOW_TAGS_VALUES.indexOf($showTags) >= 0 || ($showTags === "" && numberOfCs >= Constants.userJourney.tagsVisibleAt) || $featureSwitchIsTesting || $featureSwitchIsDebugging}
+          {#if $showTags || $featureSwitchIsTesting || $featureSwitchIsDebugging}
             <span class="flex flex-wrap justify-between">
               <TagHint tags={selectedTags} currentProperties={$tags} />
               <span class="flex flex-wrap">