Merge pull request 'Clickable links in AllTagsPanel' (#2362) from feature/tag2link into develop

Reviewed-on: MapComplete/MapComplete#2362
Reviewed-by: Pieter Vander Vennet <pietervdvn@posteo.net>

package-lock.json

@@ -82,6 +82,7 @@
         "showdown": "^2.1.0",
         "svelte": "^3.59.2",
         "svg-path-parser": "^1.1.0",
+        "tag2link": "^2025.3.21",
         "tailwind-merge": "^1.14.0",
         "tailwindcss": "^3.4.17",
         "ts-node": "^10.9.2",
@@ -26392,6 +26393,12 @@
       "version": "3.2.4",
       "license": "MIT"
     },
+    "node_modules/tag2link": {
+      "version": "2025.3.21",
+      "resolved": "https://registry.npmjs.org/tag2link/-/tag2link-2025.3.21.tgz",
+      "integrity": "sha512-JvRTQdY/z0vAEFUzL7rhLndNiDnStlurW+1jgXL5FW+GppR2T/dq2lXMEppbFNxJ9C4h5b+ykjcMPH791YeLdA==",
+      "license": "ISC"
+    },
     "node_modules/tailwind-merge": {
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
@@ -48535,6 +48542,11 @@
     "symbol-tree": {
       "version": "3.2.4"
     },
+    "tag2link": {
+      "version": "2025.3.21",
+      "resolved": "https://registry.npmjs.org/tag2link/-/tag2link-2025.3.21.tgz",
+      "integrity": "sha512-JvRTQdY/z0vAEFUzL7rhLndNiDnStlurW+1jgXL5FW+GppR2T/dq2lXMEppbFNxJ9C4h5b+ykjcMPH791YeLdA=="
+    },
     "tailwind-merge": {
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",

package.json

@@ -244,6 +244,7 @@
     "showdown": "^2.1.0",
     "svelte": "^3.59.2",
     "svg-path-parser": "^1.1.0",
+    "tag2link": "^2025.3.21",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.4.17",
     "ts-node": "^10.9.2",

src/UI/Popup/AllTagsPanel/AllTagsPanel.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { Store, UIEventSource } from "../../Logic/UIEventSource"
-  import SimpleMetaTaggers from "../../Logic/SimpleMetaTagger"
-  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
-  import Searchbar from "../Base/Searchbar.svelte"
-  import Translations from "../i18n/Translations"
-  import { Utils } from "../../Utils"
+  import { Store, UIEventSource } from "../../../Logic/UIEventSource"
+  import SimpleMetaTaggers from "../../../Logic/SimpleMetaTagger"
+  import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
+  import Searchbar from "../../Base/Searchbar.svelte"
+  import Translations from "../../i18n/Translations"
+  import { Utils } from "../../../Utils"
+  import TagLink from "./TagLink.svelte"
+  import Tag from "@rgossiaux/svelte-heroicons/solid/Tag"
 
   export let tags: UIEventSource<Record<string, any>>
   export let tagKeys = tags.map((tgs) => (tgs === undefined ? [] : Object.keys(tgs)))
@@ -69,7 +71,7 @@
             {:else if typeof $tags[key] === "object"}
               <div class="literal-code">{JSON.stringify($tags[key])}</div>
             {:else}
-              {$tags[key]}
+              <TagLink {tags} {key} />
             {/if}
           </td>
         </tr>
@@ -95,7 +97,7 @@
             <span class="literal-code">{JSON.stringify($tags[key])}</span>
             <i>{typeof $tags[key]}</i>
           {:else}
-            {$tags[key]}
+            <TagLink {tags} {key} />
           {/if}
         </td>
       </tr>
@@ -123,7 +125,7 @@
           {:else if $tags[key] === ""}
             <i>Empty string</i>
           {:else}
-            {$tags[key]}
+            <TagLink {tags} {key} />
           {/if}
         </td>
       </tr>

src/UI/Popup/AllTagsPanel/TagLink.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { UIEventSource } from "../../../Logic/UIEventSource"
+  import tag2link from "tag2link/index.json"
+
+  export let tags: UIEventSource<Record<string, any>>
+  export let key: string
+
+  const tag2linkData = tag2link as Tag2LinkElement[]
+
+  interface Tag2LinkElement {
+    /**
+     * OSM tag key
+     */
+    key: string
+
+    /**
+     * URL template or formatter URL: replace `$1` with the tag value
+     */
+    url: string
+
+    /**
+     * Source of this formatter URL
+     */
+    source?: string
+
+    /**
+     * Rank or relative importance of this formatter URL.
+     */
+    rank?: "preferred" | "normal" | "deprecated"
+  }
+
+  const url = tag2linkData.find((item) => item.key === `Key:${key}`)?.url
+</script>
+
+{#if url}
+  <a
+    href={url.replace("$1", $tags[key])}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="tag-link"
+  >
+    {$tags[key]}
+  </a>
+{:else}
+  {$tags[key]}
+{/if}

src/UI/SpecialVisualisations/SettingsVisualisations.ts

@@ -6,7 +6,7 @@ import LogoutButton from "../Base/LogoutButton.svelte"
 import LoginButton from "../Base/LoginButton.svelte"
 import ThemeViewState from "../../Models/ThemeViewState"
 import OrientationDebugPanel from "../Debug/OrientationDebugPanel.svelte"
-import AllTagsPanel from "../Popup/AllTagsPanel.svelte"
+import AllTagsPanel from "../Popup/AllTagsPanel/AllTagsPanel.svelte"
 import { ImmutableStore, UIEventSource } from "../../Logic/UIEventSource"
 import ClearCaches from "../Popup/ClearCaches.svelte"
 import Locale from "../i18n/Locale"

src/UI/SpecialVisualizations.ts

@@ -10,7 +10,7 @@ import { HistogramViz } from "./Popup/HistogramViz"
 import { UploadToOsmViz } from "./Popup/UploadToOsmViz"
 import { MultiApplyViz } from "./Popup/MultiApplyViz"
 import { UIEventSource } from "../Logic/UIEventSource"
-import AllTagsPanel from "./Popup/AllTagsPanel.svelte"
+import AllTagsPanel from "./Popup/AllTagsPanel/AllTagsPanel.svelte"
 import { VariableUiElement } from "./Base/VariableUIElement"
 import { Translation } from "./i18n/Translation"
 import Translations from "./i18n/Translations"

src/UI/Studio/EditLayer.svelte

@@ -13,7 +13,7 @@
   import SchemaBasedInput from "./SchemaBasedInput.svelte"
   import FloatOver from "../Base/FloatOver.svelte"
   import TagRenderingInput from "./TagRenderingInput.svelte"
-  import AllTagsPanel from "../Popup/AllTagsPanel.svelte"
+  import AllTagsPanel from "../Popup/AllTagsPanel/AllTagsPanel.svelte"
   import QuestionPreview from "./QuestionPreview.svelte"
   import ShowConversionMessages from "./ShowConversionMessages.svelte"
   import RawEditor from "./RawEditor.svelte"