Linked data loader: prettier UI, some bugfixes

src/UI/Comparison/ComparisonAction.svelte

@@ -6,7 +6,10 @@
     import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
     import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
     import { Tag } from "../../Logic/Tags/Tag"
+    import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte"
     import Loading from "../Base/Loading.svelte"
+    import Tr from "../Base/Tr.svelte"
+    import Translations from "../i18n/Translations"
 
     export let key: string
     export let externalProperties: Record<string, string>
@@ -38,34 +41,77 @@
         await state.changes.applyChanges(await change.CreateChangeDescriptions())
         currentStep = "done"
     }
+
+    let _country = $tags["_country"]
+    let mockPropertiesOsm = { id: feature.properties.id, [key]: $tags[key], _country }
+    let mockPropertiesExternal = { id: feature.properties.id, [key]: externalProperties[key], _country }
+    let trsWithKeys = layer.tagRenderings.filter(tr => {
+        const keys: string[] = [].concat(...tr.usedTags().map(t => t.usedKeys()))
+        return keys.indexOf(key) >= 0
+    })
+    let renderingBoth = undefined // trsWithKeys.find(tr => tr.IsKnown(mockPropertiesOsm) && tr.IsKnown(mockPropertiesExternal))
+    let renderingExternal = undefined // renderingBoth ?? trsWithKeys.find(tr => tr.IsKnown(mockPropertiesExternal))
+    let onOverwrite = false
+    const t = Translations.t.external
 </script>
 
-<tr>
-  <td><b>{key}</b></td>
+<div>
+  
+<div class="py-1 px-2 interactive flex w-full justify-between">
+  {#if renderingExternal}
+    <TagRenderingAnswer tags={new UIEventSource(mockPropertiesExternal)} selectedElement={feature}
+                        config={renderingExternal}
+                        {layer} {state} />
+  {:else}
+    <div class="flex gap-x-1 items-center">
+      <b>{key}</b>{externalProperties[key]}
+    </div>
 
-  {#if $tags[key]}
-    {$tags[key]}
   {/if}
-  <td>
-    {#if externalProperties[key].startsWith("http")}
-      <a href={externalProperties[key]} target="_blank">
-        {externalProperties[key]}
-      </a>
-    {:else}
-      {externalProperties[key]}
-    {/if}
-  </td>
   {#if !readonly}
-    <td>
-      {#if currentStep === "init"}
-        <button class="small" on:click={() => apply(key)}>Apply</button>
-      {:else if currentStep === "applying"}
-        <Loading />
-      {:else if currentStep === "done"}
-        <div class="thanks">Done</div>
-      {:else}
-        <div class="alert">Error</div>
-      {/if}
-    </td>
+    {#if currentStep === "init"}
+      <button class="small" on:click={() => apply(key)}
+
+              on:mouseover={() => onOverwrite = true}
+              on:focus={() => onOverwrite = true}
+              on:blur={() => onOverwrite = false}
+              on:mouseout={() => onOverwrite = false  }
+      >
+        {#if $tags[key]}
+          <Tr t={t.overwrite}/>
+        {:else}
+          <Tr t={t.apply}/>
+          
+        {/if}
+      </button>
+    {:else if currentStep === "applying"}
+      <Loading />
+    {:else if currentStep === "done"}
+      <div class="thanks">
+      <Tr t={t.done}/>
+        
+      </div>
+    {:else}
+      <div class="alert">
+        <Tr t={t.error}/>
+      </div>
+    {/if}
   {/if}
-</tr>
+
+</div>
+{#if $tags[key]}
+  <div class:glowing-shadow={onOverwrite}>
+    <span class="subtle">
+      <Tr t={t.currentInOsmIs}/>
+    </span>
+    {#if renderingBoth}
+      <TagRenderingAnswer tags={new UIEventSource(mockPropertiesOsm)} selectedElement={feature} config={renderingBoth}
+                          {layer} {state} />
+    {:else}
+      <div class="flex gap-x-2 items-center">
+        <b>{key}</b> {$tags[key]}
+      </div>
+    {/if}
+  </div>
+{/if}
+</div>

src/UI/Comparison/ComparisonTable.svelte

@@ -1,124 +1,136 @@
 <script lang="ts">
-  import LinkableImage from "../Image/LinkableImage.svelte"
-  import { UIEventSource } from "../../Logic/UIEventSource"
-  import type { OsmTags } from "../../Models/OsmFeature"
-  import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import type { Feature } from "geojson"
-  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
-  import ComparisonAction from "./ComparisonAction.svelte"
-  import Party from "../../assets/svg/Party.svelte"
-  import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
-  import { Tag } from "../../Logic/Tags/Tag"
-  import { And } from "../../Logic/Tags/And"
-  import Loading from "../Base/Loading.svelte"
-  import AttributedImage from "../Image/AttributedImage.svelte"
+    import LinkableImage from "../Image/LinkableImage.svelte"
+    import { UIEventSource } from "../../Logic/UIEventSource"
+    import type { OsmTags } from "../../Models/OsmFeature"
+    import type { SpecialVisualizationState } from "../SpecialVisualization"
+    import type { Feature } from "geojson"
+    import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+    import ComparisonAction from "./ComparisonAction.svelte"
+    import Party from "../../assets/svg/Party.svelte"
+    import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
+    import { Tag } from "../../Logic/Tags/Tag"
+    import { And } from "../../Logic/Tags/And"
+    import Loading from "../Base/Loading.svelte"
+    import AttributedImage from "../Image/AttributedImage.svelte"
+    import Translations from "../i18n/Translations"
+    import Tr from "../Base/Tr.svelte"
 
-  export let osmProperties: Record<string, string>
-  export let externalProperties: Record<string, string>
+    export let osmProperties: Record<string, string>
+    export let externalProperties: Record<string, string>
+    export let sourceUrl: string
 
-  export let tags: UIEventSource<OsmTags>
-  export let state: SpecialVisualizationState
-  export let feature: Feature
-  export let layer: LayerConfig
+    export let tags: UIEventSource<OsmTags>
+    export let state: SpecialVisualizationState
+    export let feature: Feature
+    export let layer: LayerConfig
 
-  export let readonly = false
+    export let readonly = false
 
-  let externalKeys: string[] = Object.keys(externalProperties).sort()
+    const t = Translations.t.external
 
-  const imageKeyRegex = /image|image:[0-9]+/
-  let knownImages = new Set(
-    Object.keys(osmProperties)
-      .filter((k) => k.match(imageKeyRegex))
-      .map((k) => osmProperties[k])
-  )
-  let unknownImages = externalKeys
-    .filter((k) => k.match(imageKeyRegex))
-    .map((k) => externalProperties[k])
-    .filter((i) => !knownImages.has(i))
+    let externalKeys: string[] = Object.keys(externalProperties).sort()
 
-  let propertyKeysExternal = externalKeys.filter((k) => k.match(imageKeyRegex) === null)
-  let missing = propertyKeysExternal.filter((k) => osmProperties[k] === undefined && typeof externalProperties[k] === "string")
-  let same = propertyKeysExternal.filter((key) => osmProperties[key] === externalProperties[key])
-  let different = propertyKeysExternal.filter(
-    (key) => osmProperties[key] !== undefined && osmProperties[key] !== externalProperties[key] && typeof externalProperties[key] === "string"
-  )
+    const imageKeyRegex = /image|image:[0-9]+/
+    let knownImages = new Set(
+        Object.keys(osmProperties)
+            .filter((k) => k.match(imageKeyRegex))
+            .map((k) => osmProperties[k]),
+    )
+    let unknownImages = externalKeys
+        .filter((k) => k.match(imageKeyRegex))
+        .map((k) => externalProperties[k])
+        .filter((i) => !knownImages.has(i))
 
-  let currentStep: "init" | "applying_all" | "all_applied" = "init"
+    let propertyKeysExternal = externalKeys.filter((k) => k.match(imageKeyRegex) === null)
+    let missing = propertyKeysExternal.filter((k) => osmProperties[k] === undefined && typeof externalProperties[k] === "string")
+    let same = propertyKeysExternal.filter((key) => osmProperties[key] === externalProperties[key])
+    let different = propertyKeysExternal.filter(
+        (key) => osmProperties[key] !== undefined && osmProperties[key] !== externalProperties[key] && typeof externalProperties[key] === "string",
+    )
 
-  async function applyAllMissing() {
-    currentStep = "applying_all"
-    const tagsToApply = missing.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",
-    })
-    await state.changes.applyChanges(await change.CreateChangeDescriptions())
-    currentStep = "all_applied"
-  }
+    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 change = new ChangeTagAction(tags.data.id, new And(tagsToApply), tags.data, {
+            theme: state.layout.id,
+            changeType: "import",
+        })
+        await state.changes.applyChanges(await change.CreateChangeDescriptions())
+        currentStep = "all_applied"
+    }
 </script>
-
-{#if different.length > 0}
-  <h3>Conflicting items</h3>
-  <table>
-    <tr>
-      <th>Key</th>
-      <th>OSM</th>
-      <th>External</th>
-    </tr>
-    {#each different as key}
-      <ComparisonAction {key} {state} {tags} {externalProperties} {layer} {feature} {readonly} />
-    {/each}
-  </table>
-{/if}
-
-{#if missing.length > 0}
-  {#if currentStep === "init"}
-    <table class="w-full">
-      <tr>
-        <th>Key</th>
-        <th>External</th>
-      </tr>
-
-      {#each missing as key}
-        <ComparisonAction {key} {state} {tags} {externalProperties} {layer} {feature} {readonly} />
-      {/each}
-    </table>
-    {#if !readonly}
-      <button on:click={() => applyAllMissing()}>Apply all missing values</button>
-    {/if}
-  {:else if currentStep === "applying_all"}
-    <Loading>Applying all missing values</Loading>
-  {:else if currentStep === "all_applied"}
-    <div class="thanks">All values are applied</div>
-  {/if}
-{/if}
-
 {#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" />
-    All data from Velopark is also included into OpenStreetMap
+    <Tr t={t.allIncluded} />
   </div>
-{/if}
-
-{#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}
-          <AttributedImage
-            imgClass="h-32 w-max shrink-0"
-            image={{ url: image }}
-            previewedImage={state.previewedImage}
-          />
+{:else}
+  <div class="low-interaction p-1 border-interactive">
+    <Tr t={t.loadedFrom.Subs({url: sourceUrl, source: sourceUrl})} />
+    <h3>
+      <Tr t={t.conflicting.title} />
+    </h3>
+    <div class="flex flex-col gap-y-8">
+      <Tr t={t.conflicting.intro} />
+      {#if different.length > 0}
+        {#each different as key}
+          <div class="mx-2 rounded-2xl">
+            <ComparisonAction {key} {state} {tags} {externalProperties} {layer} {feature} {readonly} />
+          </div>
         {/each}
-      </div>
+      {/if}
+
+      {#if missing.length > 0}
+        {#if currentStep === "init"}
+
+          {#each missing as key}
+            <div class:glowing-shadow={applyAllHovered} class="mx-2 rounded-2xl">
+              <ComparisonAction {key} {state} {tags} {externalProperties} {layer} {feature} {readonly} />
+            </div>
+          {/each}
+          {#if !readonly && missing.length > 1}
+            <button on:click={() => applyAllMissing()}
+                    on:mouseover={() => applyAllHovered = true}
+                    on:focus={() => applyAllHovered = true}
+                    on:blur={() => applyAllHovered = false}
+                    on:mouseout={() => applyAllHovered = false  }
+            >
+              <Tr t={t.applyAll} />
+            </button>
+          {/if}
+        {:else if currentStep === "applying_all"}
+          <Loading/>
+        {:else if currentStep === "all_applied"}
+          <div class="thanks">
+            <Tr t={t.allAreApplied} />
+          </div>
+        {/if}
+      {/if}
+
     </div>
-  {:else}
-    {#each unknownImages as image}
-      <LinkableImage
-        {tags}
-        {state}
-        image={{
+
+    {#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}
+              <AttributedImage
+                imgClass="h-32 w-max shrink-0"
+                image={{ url: image }}
+                previewedImage={state.previewedImage}
+              />
+            {/each}
+          </div>
+        </div>
+      {:else}
+        {#each unknownImages as image}
+          <LinkableImage
+            {tags}
+            {state}
+            image={{
           pictureUrl: image,
           provider: "Velopark",
           thumbUrl: image,
@@ -126,9 +138,12 @@
           coordinates: undefined,
           osmTags: { image },
         }}
-        {feature}
-        {layer}
-      />
-    {/each}
-  {/if}
+            {feature}
+            {layer}
+          />
+        {/each}
+      {/if}
+    {/if}
+  </div>
+
 {/if}

src/UI/Comparison/ComparisonTool.svelte

@@ -10,6 +10,8 @@
     import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
     import type { Feature } from "geojson"
     import type { OsmTags } from "../../Models/OsmFeature"
+    import Translations from "../i18n/Translations"
+    import Tr from "../Base/Tr.svelte"
 
     export let externalData: Store<{ success: {content: Record<string, string> } } | { error: string } | undefined | null /* null if no URL is found, undefined if loading*/>
     export let state: SpecialVisualizationState
@@ -17,14 +19,17 @@
     export let layer: LayerConfig
     export let feature: Feature
     export let readonly = false
+    export let sourceUrl: Store<string>
+    
 </script>
-{#if $externalData === null}
+{#if !$sourceUrl}
   <!-- empty block -->
 {:else if $externalData === undefined}
-  <Loading>{$externalData}</Loading>
+  <Loading/>
 {:else if $externalData["error"] !== undefined}
-  <div class="alert">
-    Something went wrong: {$externalData["error"]}
+  <div class="alert flex">
+    <Tr t={Translations.t.general.error}/>
+    {$externalData["error"]}
   </div>
 {:else if $externalData["success"] !== undefined}
   <ComparisonTable
@@ -35,5 +40,6 @@
     {layer}
     {tags}
     {readonly}
+    sourceUrl={$sourceUrl}
   />
 {/if}

src/UI/SpecialVisualizations.ts

@@ -1743,6 +1743,7 @@ export default class SpecialVisualizations {
                         }
                         return ({ url: tags[key], country: tags._country })
                     })
+                    const sourceUrl: Store<string | undefined> = url.mapD(url => url.url)
                     const externalData: Store<{ success: { content: any } } | {
                         error: string
                     } | undefined | null> = url.bindD(({
@@ -1759,6 +1760,7 @@ export default class SpecialVisualizations {
                             tags,
                             layer,
                             externalData,
+                            sourceUrl
                         }), undefined, url.map(url => !!url),
                     )
                 },