From 666583d516820fc6f630309cc85c32ab61331eb8 Mon Sep 17 00:00:00 2001
From: Martin Raifer <martin@raifer.tech>
Date: Thu, 17 Apr 2025 12:52:32 +0200
Subject: [PATCH] add hover text for relation labels in membership editor
 (#10942)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* append relation id as hovertext in membership editor as last-resort disambiguation in case multiple relations have otherwise the exact same label (and type)
* show regular relation label also as hover text, which is useful to see the full name in case it is cut off with an ellipisis (…) for long-ish labels
---
 CHANGELOG.md                                 |  2 ++
 modules/ui/sections/raw_membership_editor.js | 31 ++++++++++++++------
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0421b75b4..80be3c79a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -38,6 +38,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 # unreleased (v2.34.0-dev)
 
 #### :sparkles: Usability & Accessibility
+* Show full relation label as hover-text in _membership editor_, disambiguate relations with duplicate labels by appending the relation id ([#10942])
 #### :scissors: Operations
 #### :camera: Street-Level
 * Keep photo viewer open when disabling Panoramax overlay ([#10966])
@@ -56,6 +57,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 
 [#9873]: https://github.com/openstreetmap/iD/issues/9873
 [#10104]: https://github.com/openstreetmap/iD/issues/10104
+[#10942]: https://github.com/openstreetmap/iD/pull/10942
 [#10943]: https://github.com/openstreetmap/iD/pull/10943
 [#10946]: https://github.com/openstreetmap/iD/issues/10946
 [#10959]: https://github.com/openstreetmap/iD/issues/10959
diff --git a/modules/ui/sections/raw_membership_editor.js b/modules/ui/sections/raw_membership_editor.js
index 6b9266b83..5052a516a 100644
--- a/modules/ui/sections/raw_membership_editor.js
+++ b/modules/ui/sections/raw_membership_editor.js
@@ -330,14 +330,10 @@ export function uiSectionRawMembershipEditor(context) {
             });
 
             // Dedupe identical names by appending relation id - see #2891
-            var dupeGroups = Object.values(utilArrayGroupBy(result, 'value'))
-                .filter(function(v) { return v.length > 1; });
-
-            dupeGroups.forEach(function(group) {
-                group.forEach(function(obj) {
-                    obj.value += ' ' + obj.relation.id;
-                });
-            });
+            Object.values(utilArrayGroupBy(result, 'value'))
+                .filter(v => v.length > 1)
+                .flat()
+                .forEach(obj => obj.value += ' ' + obj.relation.id);
         }
 
         result.forEach(function(obj) {
@@ -419,7 +415,7 @@ export function uiSectionRawMembershipEditor(context) {
             .attr('class', 'member-entity-name')
             .classed('has-colour', d => d.relation.tags.colour && isColourValid(d.relation.tags.colour))
             .style('border-color', d => d.relation.tags.colour)
-            .html(function(d) {
+            .text(function(d) {
                 const matched = presetManager.match(d.relation, context.graph());
                 // hide the network from the name if there is NSI match
                 return utilDisplayName(d.relation, matched.suggestion);
@@ -453,6 +449,23 @@ export function uiSectionRawMembershipEditor(context) {
                 return d.relation.members.every(m => graph.hasEntity(m.id));
             });
 
+        const dupeLabels = new WeakSet(Object.values(
+            utilArrayGroupBy(items.selectAll('.label-text').nodes(), 'textContent'))
+            .filter(v => v.length > 1)
+            .flat());
+
+        items.select('.label-text').each(function() {
+            const label = d3_select(this);
+            const entityName = label.select('.member-entity-name');
+            if (dupeLabels.has(this)) {
+                // Dedupe identical names in hover text by appending relation id - see #2891, #10184
+                label.attr('title', d => `${entityName.text()} ${d.relation.id}`);
+            } else {
+                // set full label also as hover text: useful if a (long) label is cut off with an … ellipsis
+                label.attr('title', () => entityName.text());
+            }
+        });
+
         var wrapEnter = itemsEnter
             .append('div')
             .attr('class', 'form-field-input-wrap form-field-input-member');