add a link next to foreign keys

config/envs.mjs

@@ -16,6 +16,7 @@ const envs = {
 
   ENV__ID_TAGINFO_API_URL: JSON.stringify(process.env.ENV__ID_TAGINFO_API_URL || null),
   ENV__ID_NOMINATIM_API_URL: JSON.stringify(process.env.ENV__ID_NOMINATIM_API_URL || null),
+  ENV__ID_TAG2LINK_URL: JSON.stringify(process.env.ENV__ID_TAG2LINK_URL || null),
 };
 
 export default envs;

config/id.js

@@ -9,6 +9,8 @@ const wmfSitematrixCdnUrl = ENV__ID_WMF_SITEMATRIX_CDN_URL
   || 'https://cdn.jsdelivr.net/npm/wmf-sitematrix@{version}/';
 const nsiCdnUrl = ENV__ID_NSI_CDN_URL
   || 'https://cdn.jsdelivr.net/npm/name-suggestion-index@{version}/';
+const tag2LinkUrl = ENV__ID_TAG2LINK_URL
+  || 'https://cdn.jsdelivr.net/gh/JOSM/tag2link@master/index.json';
 
 // api urls and settings
 const defaultOsmApiConnections = {
@@ -61,4 +63,5 @@ export {
   osmApiConnections,
   taginfoApiUrl,
   nominatimApiUrl,
+  tag2LinkUrl,
 };

css/80_app.css

@@ -279,7 +279,7 @@
 
 /* Utility Classes
 ------------------------------------------------------- */
 .fillL {
     background: #fff;
     color: #333;
 }
@@ -369,7 +369,7 @@
     border-right: none;
 }
 
 .fillL .joined > * {
     border-right: 1px solid #fff;
 }
 .joined > *:first-child {
@@ -2645,7 +2645,9 @@
     width: 100%;
     position: relative;
 }
-.tag-row .key-wrap,
+.tag-row .key-wrap {
+    flex: 1 0 40%;
+}
 .tag-row .value-wrap {
     flex: 1 1 50%;
 }

modules/core/file_fetcher.js

@@ -1,5 +1,5 @@
 import parseVersion from 'vparse';
-import { presetsCdnUrl, ociCdnUrl, wmfSitematrixCdnUrl } from '../../config/id.js';
+import { presetsCdnUrl, ociCdnUrl, wmfSitematrixCdnUrl, tag2LinkUrl } from '../../config/id.js';
 
 import packageJSON from '../../package.json';
 
@@ -39,6 +39,7 @@ export function coreFileFetcher() {
     'preset_defaults': presetsCdnUrl + 'dist/preset_defaults.min.json',
     'preset_fields': presetsCdnUrl + 'dist/fields.min.json',
     'preset_presets': presetsCdnUrl + 'dist/presets.min.json',
+    'tag2link': tag2LinkUrl,
     'wmf_sitematrix': wmfSitematrixCdnUrl.replace('{version}', '0.1') + 'wikipedia.min.json'
   };
 

modules/services/tag2Link.js

@@ -0,0 +1,36 @@
+// @ts-check
+import { fileFetcher } from '../core';
+
+/**
+ * @typedef {{
+ *  key: `Key:${string}`;
+ *  url: string;
+ *  source: string;
+ *  rank: "normal" | "preferred";
+ * }} Tag2LinkItem
+ */
+
+const RANKS = ['deprecated', 'normal', 'preferred'];
+
+/** fetch the tag2link definitions from JOSM, and convert it to an object. */
+export async function loadTag2Link() {
+  /** @type {Tag2LinkItem[]} */
+  const array = await fileFetcher.get('tag2link');
+
+  /** @type {Map<string, string>} */
+  const map = new Map();
+
+  const allKeys = new Set(array.map(item => item.key));
+
+  for (const key of allKeys) {
+    // find an item with the best rank
+    const bestDefinition = array
+      .filter(item => item.key === key)
+      .sort((a, b) =>  RANKS.indexOf(b.rank) - RANKS.indexOf(a.rank))[0];
+
+    map.set(key.replace('Key:', ''), bestDefinition.url);
+  }
+
+  return map;
+}
+

modules/ui/sections/raw_tag_editor.js

@@ -13,8 +13,28 @@ import { utilGetSetValue, utilNoAuto, utilRebind, utilTagDiff } from '../../util
 import { uiTooltip } from '..';
 import { allowUpperCaseTagValues } from '../../osm/tags';
 import { fileFetcher } from '../../core';
+import { loadTag2Link } from '../../services/tag2Link';
 
 
+/** @type {Map<string, string> | undefined} */
+let tag2Link;
+
+// singleton request
+loadTag2Link()
+    .then((result) => { tag2Link = result; })
+    .catch(() => undefined); // no-op
+
+/** @param {string} key */
+export function getUrlHost(key) {
+    const url = tag2Link?.get(key);
+    if (!url) return undefined;
+    try {
+        return new URL(url).host.replace(/^www\./, '');
+    } catch {
+        return undefined;
+    }
+}
+
 export function uiSectionRawTagEditor(id, context) {
 
     var section = uiSection(id, context)
@@ -227,6 +247,13 @@ export function uiSectionRawTagEditor(id, context) {
             .on('change', valueChange)
             .on('keydown.push-more', pushMore);
 
+        innerWrap
+            .append('button')
+            .attr('class', 'form-field-button foreignKey')
+            .attr('title', d => t('icons.view_on', { domain: getUrlHost(d.key) }))
+            .style('display', d => tag2Link?.get(d.key) ? 'block' : 'none')
+            .call(svgIcon('#iD-icon-out-link'));
+
         innerWrap
             .append('button')
             .attr('class', 'form-field-button remove')
@@ -264,6 +291,7 @@ export function uiSectionRawTagEditor(id, context) {
 
                 row.call(reference.body);
 
+                row.select('button.foreignKey'); // propagate bound data
                 row.select('button.remove');   // propagate bound data
             });
 
@@ -291,6 +319,15 @@ export function uiSectionRawTagEditor(id, context) {
                 return isReadOnly(d) || null;
             });
 
+        items.selectAll('button.foreignKey')
+            .on(('PointerEvent' in window ? 'pointer' : 'mouse') + 'down', // 'click' fires too late - #5878
+                (d3_event, d) => {
+                    if (d3_event.button !== 0) return;
+                    const url = tag2Link?.get(d.key)?.replace(/\$1/g, d.value);
+                    if (!url) return; // this should be impossible
+                    window.open(url, '_blank');
+                });
+
         items.selectAll('button.remove')
             .on(('PointerEvent' in window ? 'pointer' : 'mouse') + 'down', // 'click' fires too late - #5878
                 (d3_event, d) => {