UX: comparision-action and comparison-table got debug information and indicator for no data loaded

langs/en.json

@@ -60,6 +60,7 @@
         "done": "Done",
         "error": "Error",
         "loadedFrom": "The following data is loaded from <a href={url}>{source}</a> using the embedded JSON-LD",
+        "noDataLoaded": "The external website has no linked data that could be loaded",
         "overwrite": "Overwrite"
     },
     "favourite": {

src/UI/Comparison/ComparisonAction.svelte

@@ -63,31 +63,31 @@
   <div class="py-1 px-2 interactive flex w-full justify-between">
     <div class="flex flex-col">
 
-    <div>
+      <div>
 
-      {#if renderingExternal}
+        {#if renderingExternal}
-        <TagRenderingAnswer tags={new UIEventSource(mockPropertiesExternal)} selectedElement={feature}
+          <TagRenderingAnswer tags={new UIEventSource(mockPropertiesExternal)} selectedElement={feature}
-                            config={renderingExternal}
+                              config={renderingExternal}
-                            {layer} {state} />
+                              {layer} {state} />
-      {:else}
+        {:else}
-        <div class="flex gap-x-1 items-center">
+          <div class="flex gap-x-1 items-center">
-          <b>{key}</b>{externalProperties[key]}
+            <b>{key}</b>{externalProperties[key]}
-        </div>
+          </div>
 
-      {/if}
+        {/if}
-    </div>
+      </div>
 
       {#if $isTesting || $isDebug || $showTags === "yes" || $showTags === "always" || $showTags === "full"}
         <div class="subtle text-sm">
-
+          {#if $tags[key] !== undefined}
           <span>
         OSM:
             {key}={$tags[key]}
-      </span>
+          </span>
+          {/if}
           <span>
-        Ext:
             {key}= {externalProperties[key]}
-      </span>
+          </span>
         </div>
       {/if}
     </div>

src/UI/Comparison/ComparisonTable.svelte

@@ -42,10 +42,18 @@
     .filter((i) => !knownImages.has(i))
 
   let propertyKeysExternal = externalKeys.filter((k) => k.match(imageKeyRegex) === null)
-  let missing = propertyKeysExternal.filter((k) => osmProperties[k] === undefined && typeof externalProperties[k] === "string")
+  let missing = 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) => {
+      if (key.startsWith("_")) {
+        return false
+      }
       if (osmProperties[key] === undefined) {
         return false
       }
@@ -56,11 +64,10 @@
         return false
       }
 
-      if (key === "website")
+      if (key === "website") {
-      {
         const osmCanon = new URL(osmProperties[key]).toString()
         const externalCanon = new URL(externalProperties[key]).toString()
-        if(osmCanon === externalCanon){
+        if (osmCanon === externalCanon) {
           return false
         }
       }
@@ -83,7 +90,9 @@
     currentStep = "all_applied"
   }
 </script>
-{#if unknownImages.length === 0 && missing.length === 0 && different.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}
   <div class="thanks m-0 flex items-center gap-x-2 px-2">
     <Party class="h-8 w-8" />
     <Tr t={t.allIncluded} />
@@ -170,6 +179,12 @@
         {/each}
       {/if}
     {/if}
+    {#if externalProperties["_last_edit_timestamp"] !== undefined}
+      <span class="subtle text-sm">
+
+      External data has been last modified on {externalProperties["_last_edit_timestamp"]}
+      </span>
+    {/if}
   </div>
 
 {/if}