add hover text for relation labels in membership editor (#10942)

* 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
This commit is contained in:
Martin Raifer
2025-04-17 12:52:32 +02:00
committed by GitHub
parent afce723b74
commit 666583d516
2 changed files with 24 additions and 9 deletions
+2
View File
@@ -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
+22 -9
View File
@@ -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');