From d7111e20f59d907f6ee091e44060307b144e25be Mon Sep 17 00:00:00 2001
From: Martin Raifer <martin@raifer.tech>
Date: Tue, 5 Mar 2024 14:17:41 +0100
Subject: [PATCH] add button to load a feature's relations fully (if
 incomplete), fixes #5420

---
 CHANGELOG.md                                 |  4 ++-
 css/80_app.css                               |  6 +++++
 modules/ui/sections/raw_member_editor.js     |  2 +-
 modules/ui/sections/raw_membership_editor.js | 26 ++++++++++++++++++++
 4 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 916ef3601..194da841b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -38,6 +38,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 # Unreleased (2.29.0-dev)
 
 #### :tada: New Features
+* Add button to fully load incompletely downloaded relations ([#5420])
 #### :sparkles: Usability & Accessibility
 #### :scissors: Operations
 #### :camera: Street-Level
@@ -51,7 +52,8 @@ _Breaking developer changes, which may affect downstream projects or sites that
 #### :rocket: Presets
 #### :hammer: Development
 
-[#10135]: https://github.com/openstreetmap/iD/issues/10135#
+[#5420]: https://github.com/openstreetmap/iD/issues/5420
+[#10135]: https://github.com/openstreetmap/iD/issues/10135
 [@Sushil642]: https://github.com/Sushil642
 
 
diff --git a/css/80_app.css b/css/80_app.css
index efe5b4166..b4f79e722 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -504,6 +504,12 @@ button.disabled .icon.operation use,
     vertical-align: baseline;
 }
 
+button.loading .icon {
+    background-image: url(img/mini-loader.gif);
+    background-position: 0 0;
+    background-size: auto;
+}
+
 
 /* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */
diff --git a/modules/ui/sections/raw_member_editor.js b/modules/ui/sections/raw_member_editor.js
index e15712f6d..867176024 100644
--- a/modules/ui/sections/raw_member_editor.js
+++ b/modules/ui/sections/raw_member_editor.js
@@ -46,7 +46,7 @@ export function uiSectionRawMemberEditor(context) {
         d3_event.preventDefault();
 
         // display the loading indicator
-        d3_select(this.parentNode).classed('tag-reference-loading', true);
+        d3_select(this).classed('loading', true);
         context.loadEntity(d.id, function() {
             section.reRender();
         });
diff --git a/modules/ui/sections/raw_membership_editor.js b/modules/ui/sections/raw_membership_editor.js
index 3ef210d7e..a22790b7f 100644
--- a/modules/ui/sections/raw_membership_editor.js
+++ b/modules/ui/sections/raw_membership_editor.js
@@ -206,6 +206,18 @@ export function uiSectionRawMembershipEditor(context) {
     }
 
 
+    function downloadMembers(d3_event, d) {
+        d3_event.preventDefault();
+        const button = d3_select(this);
+
+        // display the loading indicator
+        button.classed('loading', true);
+        context.loadEntity(d.relation.id, function() {
+            section.reRender();
+        });
+    }
+
+
     function deleteMembership(d3_event, d) {
         this.blur();           // avoid keeping focus on the button
         if (d === 0) return;   // called on newrow (shouldn't happen)
@@ -376,6 +388,13 @@ export function uiSectionRawMembershipEditor(context) {
             .style('border-color', d => d.relation.tags.colour)
             .text(function(d) { return utilDisplayName(d.relation); });
 
+        labelEnter
+            .append('button')
+            .attr('class', 'members-download')
+            .attr('title', t('icons.download'))
+            .call(svgIcon('#iD-icon-load'))
+            .on('click', downloadMembers);
+
         labelEnter
             .append('button')
             .attr('class', 'remove member-delete')
@@ -390,6 +409,13 @@ export function uiSectionRawMembershipEditor(context) {
             .call(svgIcon('#iD-icon-framed-dot', 'monochrome'))
             .on('click', zoomToRelation);
 
+        items = items.merge(itemsEnter);
+        items.selectAll('button.members-download')
+            .classed('hide', d => {
+                const graph = context.graph();
+                return d.relation.members.every(m => graph.hasEntity(m.id));
+            });
+
         var wrapEnter = itemsEnter
             .append('div')
             .attr('class', 'form-field-input-wrap form-field-input-member');