UX: improve text and handling of external data, fix #1911

langs/de.json

@@ -49,7 +49,6 @@
     },
     "external": {
         "allAreApplied": "Alle fehlenden, externen Werte wurden in OpenStreetMap kopiert",
-        "allIncluded": "Die externen Daten und die OpenStreetMap-Daten sind identisch",
         "apply": "Übernehmen",
         "applyAll": "Alle fehlenden Werte übernehmen",
         "conflicting": {

langs/en.json

@@ -49,7 +49,7 @@
     },
     "external": {
         "allAreApplied": "All missing, external values have been copied into OpenStreetMap",
-        "allIncluded": "The external data and OpenStreetMap-data are the same",
+        "allIncluded": "Data loaded from {source} is contained in OpenStreetMap",
         "apply": "Apply",
         "applyAll": "Apply all missing values",
         "conflicting": {

src/Logic/State/UserSettingsMetaTagging.ts

@@ -3,40 +3,12 @@ import { Utils } from "../../Utils"
 export class ThemeMetaTagging {
    public static readonly themeName = "usersettings"
 
-    public metaTaggging_for_usersettings(feat: { properties: Record<string, string> }) {
+   public metaTaggging_for_usersettings(feat: {properties: Record<string, string>}) {
-        Utils.AddLazyProperty(feat.properties, "_mastodon_candidate_md", () =>
+      Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_md', () => feat.properties._description.match(/\[[^\]]*\]\((.*(mastodon|en.osm.town).*)\).*/)?.at(1) ) 
-            feat.properties._description
+      Utils.AddLazyProperty(feat.properties, '_d', () => feat.properties._description?.replace(/&lt;/g,'<')?.replace(/&gt;/g,'>') ?? '' ) 
-                .match(/\[[^\]]*\]\((.*(mastodon|en.osm.town).*)\).*/)
+      Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_a', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.href.match(/mastodon|en.osm.town/) !== null)[0]?.href   }) (feat)  ) 
-                ?.at(1)
+      Utils.AddLazyProperty(feat.properties, '_mastodon_link', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.getAttribute("rel")?.indexOf('me') >= 0)[0]?.href})(feat)  ) 
-        )
+      Utils.AddLazyProperty(feat.properties, '_mastodon_candidate', () => feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a ) 
-        Utils.AddLazyProperty(
+      feat.properties['__current_backgroun'] = 'initial_value'
-            feat.properties,
-            "_d",
-            () => feat.properties._description?.replace(/&lt;/g, "<")?.replace(/&gt;/g, ">") ?? ""
-        )
-        Utils.AddLazyProperty(feat.properties, "_mastodon_candidate_a", () =>
-            ((feat) => {
-                const e = document.createElement("div")
-                e.innerHTML = feat.properties._d
-                return Array.from(e.getElementsByTagName("a")).filter(
-                    (a) => a.href.match(/mastodon|en.osm.town/) !== null
-                )[0]?.href
-            })(feat)
-        )
-        Utils.AddLazyProperty(feat.properties, "_mastodon_link", () =>
-            ((feat) => {
-                const e = document.createElement("div")
-                e.innerHTML = feat.properties._d
-                return Array.from(e.getElementsByTagName("a")).filter(
-                    (a) => a.getAttribute("rel")?.indexOf("me") >= 0
-                )[0]?.href
-            })(feat)
-        )
-        Utils.AddLazyProperty(
-            feat.properties,
-            "_mastodon_candidate",
-            () => feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a
-        )
-        feat.properties["__current_backgroun"] = "initial_value"
    }
 }

src/Logic/Web/LinkedDataLoader.ts

@@ -194,6 +194,9 @@ export default class LinkedDataLoader {
             )
             delete compacted["openingHours"]
         }
+        if(compacted["opening_hours"] === undefined){
+            delete compacted["opening_hours"]
+        }
         if (compacted["geo"]) {
             compacted["geo"] = <any>await LinkedDataLoader.geoToGeometry(compacted["geo"])
         }

src/UI/Comparison/ComparisonTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import LinkableImage from "../Image/LinkableImage.svelte"
-  import { UIEventSource } from "../../Logic/UIEventSource"
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
   import type { OsmTags } from "../../Models/OsmFeature"
   import type { SpecialVisualizationState } from "../SpecialVisualization"
   import type { Feature } from "geojson"
@@ -15,8 +15,10 @@
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
 
-  export let osmProperties: Record<string, string>
+
   export let externalProperties: Record<string, string>
+  delete externalProperties["@context"]
+  console.log("External properties are", externalProperties)
   export let sourceUrl: string
 
   export let tags: UIEventSource<OsmTags>
@@ -31,25 +33,26 @@
   let externalKeys: string[] = Object.keys(externalProperties).sort()
 
   const imageKeyRegex = /image|image:[0-9]+/
-  let knownImages = new Set(
+  let knownImages: Store<Set<string>> = tags.map(osmProperties => new Set(
     Object.keys(osmProperties)
       .filter((k) => k.match(imageKeyRegex))
       .map((k) => osmProperties[k])
-  )
+  ))
-  let unknownImages = externalKeys
+  let unknownImages: Store<string[]> = knownImages.map(images => externalKeys
     .filter((k) => k.match(imageKeyRegex))
     .map((k) => externalProperties[k])
-    .filter((i) => !knownImages.has(i))
+    .filter((i) => !images.has(i)))
+
 
   let propertyKeysExternal = externalKeys.filter((k) => k.match(imageKeyRegex) === null)
-  let missing = propertyKeysExternal.filter((k) => {
+  let missing: Store<string[]> = tags.map(osmProperties => propertyKeysExternal.filter((k) => {
     if (k.startsWith("_")) {
       return false
     }
     return osmProperties[k] === undefined && typeof externalProperties[k] === "string"
-  })
+  }))
   // let same = propertyKeysExternal.filter((key) => osmProperties[key] === externalProperties[key])
-  let different = propertyKeysExternal.filter((key) => {
+  let different: Store<string[]> = tags.map(osmProperties => propertyKeysExternal.filter((key) => {
     if (key.startsWith("_")) {
       return false
     }
@@ -72,29 +75,35 @@
     }
 
     return true
-  })
+  }))
+
+  let hasDifferencesAtStart = (different.data.length + missing.data.length + unknownImages.data.length) > 0
 
   let currentStep: "init" | "applying_all" | "all_applied" = "init"
   let applyAllHovered = false
 
   async function applyAllMissing() {
     currentStep = "applying_all"
-    const tagsToApply = missing.map((k) => new Tag(k, externalProperties[k]))
+    const tagsToApply = missing.data.map((k) => new Tag(k, externalProperties[k]))
     const change = new ChangeTagAction(tags.data.id, new And(tagsToApply), tags.data, {
       theme: state.layout.id,
-      changeType: "import",
+      changeType: "import"
     })
     await state.changes.applyChanges(await change.CreateChangeDescriptions())
     currentStep = "all_applied"
   }
 </script>
-
+{#if propertyKeysExternal.length === 0 && $knownImages.size + $unknownImages.length === 0}
-{#if propertyKeysExternal.length === 0 && knownImages.size + unknownImages.length === 0}
   <Tr cls="subtle" t={t.noDataLoaded} />
-{:else if unknownImages.length === 0 && missing.length === 0 && different.length === 0}
+{:else if !hasDifferencesAtStart}
+  <span class="subtle text-sm">
+    <Tr t={t.allIncluded.Subs({source:sourceUrl})}/>
+  </span>
+
+{:else if $unknownImages.length === 0 && $missing.length === 0 && $different.length === 0}
   <div class="thanks m-0 flex items-center gap-x-2 px-2">
-    <Party class="h-8 w-8" />
+    <Party class="h-8 w-8 shrink-0" />
-    <Tr t={t.allIncluded} />
+    <Tr t={t.allIncluded.Subs({source: sourceUrl})} />
   </div>
 {:else}
   <div class="low-interaction border-interactive p-1">
@@ -109,8 +118,8 @@
       {#if !readonly}
         <Tr t={t.conflicting.intro} />
       {/if}
-      {#if different.length > 0}
+      {#if $different.length > 0}
-        {#each different as key}
+        {#each $different as key}
           <div class="mx-2 rounded-2xl">
             <ComparisonAction
               {key}
@@ -125,9 +134,9 @@
         {/each}
       {/if}
 
-      {#if missing.length > 0}
+      {#if $missing.length > 0}
         {#if currentStep === "init"}
-          {#each missing as key}
+          {#each $missing as key}
             <div class:glowing-shadow={applyAllHovered} class="mx-2 rounded-2xl">
               <ComparisonAction
                 {key}
@@ -140,7 +149,7 @@
               />
             </div>
           {/each}
-          {#if !readonly && missing.length > 1}
+          {#if !readonly && $missing.length > 1}
             <button
               on:click={() => applyAllMissing()}
               on:mouseover={() => (applyAllHovered = true)}
@@ -161,11 +170,11 @@
       {/if}
     </div>
 
-    {#if unknownImages.length > 0}
+    {#if $unknownImages.length > 0}
       {#if readonly}
         <div class="w-full overflow-x-auto">
           <div class="flex h-32 w-max gap-x-2">
-            {#each unknownImages as image}
+            {#each $unknownImages as image}
               <AttributedImage
                 imgClass="h-32 w-max shrink-0"
                 image={{ url: image }}
@@ -175,7 +184,7 @@
           </div>
         </div>
       {:else}
-        {#each unknownImages as image}
+        {#each $unknownImages as image}
           <LinkableImage
             {tags}
             {state}

src/UI/Comparison/ComparisonTool.svelte

@@ -39,7 +39,6 @@
 {:else if $externalData["success"] !== undefined}
   <ComparisonTable
     externalProperties={$externalData["success"]}
-    osmProperties={$tags}
     {state}
     {feature}
     {layer}

src/UI/SpecialVisualizations.ts

@@ -39,7 +39,7 @@ import FeatureReviews from "../Logic/Web/MangroveReviews"
 import Maproulette from "../Logic/Maproulette"
 import SvelteUIElement from "./Base/SvelteUIElement"
 import { BBoxFeatureSourceForLayer } from "../Logic/FeatureSource/Sources/TouchesBboxFeatureSource"
-import { Feature } from "geojson"
+import { Feature, GeoJsonProperties } from "geojson"
 import { GeoOperations } from "../Logic/GeoOperations"
 import CreateNewNote from "./Popup/Notes/CreateNewNote.svelte"
 import AddNewPoint from "./Popup/AddNewPoint/AddNewPoint.svelte"
@@ -1794,14 +1794,7 @@ export default class SpecialVisualizations {
                         })
                         .mapD((data) => JSON.parse(data))
                     const sourceUrl: Store<string | undefined> = url.mapD((url) => url.url)
-                    const externalData: Store<
+                    const externalData: Store<{ success: GeoJsonProperties } | { error: any }> = url.bindD(({ url, country }) => {
-                        | { success: { content: any } }
-                        | {
-                              error: string
-                          }
-                        | undefined
-                        | null
-                    > = url.bindD(({ url, country }) => {
                         if (url.startsWith("https://data.velopark.be/")) {
                             return Stores.FromPromiseWithErr(
                                 (async () => {