Improved rendering/handling of relation members #11701

tyrasd · 2025-12-17T22:52:06Z

Several improvements related to how one can interact with relation members:

(For the screenshots below: on the left is new UI, right is the previous one.)

more space for member label by putting buttons next to role input and add a "grab handle pattern" to indicate drag&drop functionality

add a button to download all members of a relation also from the relation members list (previously this was only available from the relation membership list of the relation's members)

if members are connecting ways, the white space between the consecutive members is collapsed and the grab icon is replaced with arrows indicating the connection:

this can make gaps in a route more easily visible

The icons indicate the connectivity in the respective direction for members with forward/backward roles in more complex relations

allow merging additional members onto a selected relation (works on a multiselection of one relation and 1+ other features: first select the relation, then shift-select the members to add)

add operation to remove members from a relation (see above, but only works on a multiselection that contains only the relations and features that are already its members)

slightly more descriptive tooltip texts for the "merge" operation depending on what is going to be merged.

todo:

unit tests for the connectivity-checking code

* more space for member label by putting buttons next to role input * remove whitespace between connected members * show connected/looping members by icons * add grab handles to indicate drag&drop functionality

todo: translatable

1. select relation 2. shift-select any number of features to be added as additional members to the relation 3. right-click on any of the features and select the "merge" operation (or press the hotkey `C`) 4. the features are added as new members to the relation (either automagically sorted into a reasonable order, trying to keep members connected, or otherwise appended at the end) with an empty role

offered when a selection contains: * one relation * one or more features that are a member of the relation

similar to how this is already implemented in the raw membership editor

1ec5

The redesign of the member/membership list adds important functionality, but I’m concerned that non-expert users will experience some difficulty learning how it works on their own. Additionally, consider some additions to the Relations section of the help documentation.

So far, this PR focuses on the sidebar, but the map is still underutilized. The map could highlight the endpoints of each gap and any locations where the member ways’ directions collide.

1ec5 · 2025-12-18T00:30:48Z

svg/iD-sprite/icons/icon-grab-connects-both.svg

It took me a bunch of squinting at your examples before realizing that the pattern consists of down arrows on one side and up arrows on the other side. I thought this was just a grippy pattern, similar to icon-grab.svg.

1ec5 · 2025-12-18T00:38:22Z

modules/ui/sections/raw_member_editor.js

+                    .each(function(d) {
+                        if (d.connections.prev && d.connections.next || d.connections.loops) {
+                            d3_select(this).call(svgIcon('#iD-icon-grab-connects-both'));
+                        } else if (d.connections.prev) {
+                            d3_select(this).call(svgIcon('#iD-icon-grab-connects-prev'));
+                        } else if (d.connections.next) {
+                            d3_select(this).call(svgIcon('#iD-icon-grab-connects-next'));
+                        } else {
+                            d3_select(this).call(svgIcon('#iD-icon-grab'));
+                        }
+                    });


Showing the connections is a good idea, but I really don’t find the backwards/forwards distinction intuitive at all. It isn’t clear enough to me that the grippies are supposed to connect, probably because the labels get in the way.

In case the grippy patterns don’t work out, here are some alternative ideas:

Keep the gap between each member. Insert the arrows in the gap. Increase the gap and insert some obvious indicator wherever there are discontinuities.

Keep the arrow indicators where they are, but remove the handles. Make it more like JOSM’s “model railroad” schematic, with lines running continuously up and down the section, but ideally without the gaps that JOSM has.

Combine all the handles for the connected members into a single handle. Dragging that handle moves all the members together, sort of like in a jigsaw puzzle.

Give each row a jigsaw puzzle piece shape. The pieces fit together when they’re connected on the map. They don’t fit if there’s a gap or the roles conflict.

If we do make the rows look like jigsaw puzzle pieces, they could make a subtle but satisfying click when you snap together pieces that had been disconnected: #5821. 😏

1ec5 · 2025-12-18T01:05:15Z

modules/actions/merge_members.js

+        const relationCount = entityIDs.filter(entityID =>
+            graph.entity(entityID).type === 'relation')
+            .length;
+        if (relationCount !== 1) return 'not_eligible';


The Merge action remains enabled even when the Remove Members action is enabled, so the context menu starts out with ➖ followed by ➕. Do we need to have both actions enabled at the same time? Users shouldn’t need to add redundant memberships very often, but when they do have to, they can still add it the old-fashioned way with the way selected.

1ec5 · 2025-12-18T01:06:39Z

data/core.yaml

      paths_intersect: These features can't be merged because the resulting path would intersect itself.
      too_many_vertices: These features can't be merged because the resulting path would have too many points.
+    members_remove:
+      title: Remove Members


Remove Members doesn’t look like an operation that undoes what Merge does. How about Unmerge? Or maybe make it look like a version of the Detach operation.

1ec5 · 2025-12-18T01:08:15Z

modules/actions/members_remove.js

+            }
+        }
+
+        graph = actionDeleteMembers(relation.id, memberIndices)(graph);


If a feature is a member of the relation multiple times, this operation completely removes all its memberships from the relation. This makes it less useful for dealing with incorrect redundant memberships, though it would make more sense if the operation were called something like Detach.

1ec5 · 2025-12-18T01:12:16Z

modules/ui/sections/raw_membership_editor.js

+        wrapEnter
+            .append('button')
+            .classed('members-download', true)
+            .classed('form-field-button', true)
+            .attr('title', t('icons.download'))
+            .call(svgIcon('#iD-icon-load'))
+            .on('click', downloadMembers);
+
+        items.selectAll('button.members-download')
+            .classed('hide', d => {
+                const graph = context.graph();
+                return d.relation.members.every(m => graph.hasEntity(m.id));
+            });


Regardless of the handle design, it’s still quite tedious to fix the order in a relation that’s all jumbled up. A button to sort the whole relation would give the user a good starting point to refine further: #7498 (comment).

1ec5 · 2025-12-18T01:13:30Z

modules/ui/sections/raw_member_editor.js

+                    .each(function(d) {
+                        if (d.connections.prev && d.connections.next || d.connections.loops) {
+                            d3_select(this).call(svgIcon('#iD-icon-grab-connects-both'));
+                        } else if (d.connections.prev) {
+                            d3_select(this).call(svgIcon('#iD-icon-grab-connects-prev'));
+                        } else if (d.connections.next) {
+                            d3_select(this).call(svgIcon('#iD-icon-grab-connects-next'));
+                        } else {
+                            d3_select(this).call(svgIcon('#iD-icon-grab'));
+                        }
+                    });


If we do make the rows look like jigsaw puzzle pieces, they could make a subtle but satisfying click when you snap together pieces that had been disconnected: #5821. 😏

tyrasd added 7 commits December 17, 2025 23:50

rework relation members/memberships listings

e25e6f0

* more space for member label by putting buttons next to role input * remove whitespace between connected members * show connected/looping members by icons * add grab handles to indicate drag&drop functionality

add "download all members" button

e69bf43

todo: translatable

more precise tooltip by which "merge" is to be performed

8539405

add operation to remove members from a relation

c910931

offered when a selection contains: * one relation * one or more features that are a member of the relation

add missing strings

003143d

deduplicate equally named relation members by their id in the hover text

aca85ed

similar to how this is already implemented in the raw membership editor

tyrasd added the operation An editing operation / edit menu item label Dec 17, 2025

github-actions bot deployed to pr-preview-11701 December 17, 2025 22:55 View deployment

tyrasd added the usability An issue with ease-of-use or design label Dec 17, 2025

1ec5 reviewed Dec 18, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improved rendering/handling of relation members #11701

Improved rendering/handling of relation members #11701

Uh oh!

tyrasd commented Dec 17, 2025 •

edited

Loading

Uh oh!

1ec5 left a comment

Uh oh!

1ec5 Dec 18, 2025

Uh oh!

1ec5 Dec 18, 2025

Uh oh!

1ec5 Dec 18, 2025

Uh oh!

1ec5 Dec 18, 2025

Uh oh!

1ec5 Dec 18, 2025

Uh oh!

1ec5 Dec 18, 2025

Uh oh!

1ec5 Dec 18, 2025

Uh oh!

1ec5 Dec 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Improved rendering/handling of relation members #11701

Are you sure you want to change the base?

Improved rendering/handling of relation members #11701

Uh oh!

Conversation

tyrasd commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

todo:

Uh oh!

1ec5 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tyrasd commented Dec 17, 2025 •

edited

Loading