From 81feb1cd990993cc432ef13dea5ec74805a6ab75 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Wed, 24 Oct 2018 22:17:28 -0700
Subject: [PATCH] Adds hover-highlighting for relations in the raw membership
 list Moves hover-highlighting behavior to its own function Hover-highlighting
 now correctly highlights all members of the target relation

---
 modules/ui/entity_highlight.js      | 17 +++++++++++++++++
 modules/ui/raw_member_editor.js     | 10 ++++------
 modules/ui/raw_membership_editor.js | 10 ++++++++++
 modules/ui/selection_list.js        |  8 ++++----
 4 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 modules/ui/entity_highlight.js

diff --git a/modules/ui/entity_highlight.js b/modules/ui/entity_highlight.js
new file mode 100644
index 000000000..a9f222c1c
--- /dev/null
+++ b/modules/ui/entity_highlight.js
@@ -0,0 +1,17 @@
+import _forEach from 'lodash-es/forEach';
+
+export function highlightEntity(context, entity, highlighted) {
+
+    // highlight the member feature in the map while hovering on the list item
+    var selectorPrefix = entity.type === 'node' ? 'g.' : 'path.';
+    context.surface().selectAll(selectorPrefix+entity.id).classed('highlighted', highlighted);
+    if (entity.members) {
+        // recursively highlight members so that relations will appear highlighted
+        _forEach(entity.members, function(member){
+            if (member.id && context.hasEntity(member.id)) {
+                highlightEntity(context, context.entity(member.id), highlighted);
+            }
+        });
+    }
+
+}
diff --git a/modules/ui/raw_member_editor.js b/modules/ui/raw_member_editor.js
index a37153464..bf820776a 100644
--- a/modules/ui/raw_member_editor.js
+++ b/modules/ui/raw_member_editor.js
@@ -7,6 +7,7 @@ import { d3combobox as d3_combobox } from '../lib/d3.combobox.js';
 
 import { t } from '../util/locale';
 import { actionChangeMember, actionDeleteMember } from '../actions';
+import { highlightEntity } from './entity_highlight';
 import { modeBrowse, modeSelect } from '../modes';
 import { osmEntity } from '../osm';
 import { svgIcon } from '../svg';
@@ -37,8 +38,7 @@ export function uiRawMemberEditor(context) {
         context.map().zoomTo(entity);
 
         // highlight the feature in case it wasn't previously on-screen
-        var selectorPrefix = d.type === 'node' ? 'g.' : 'path.';
-        context.surface().selectAll(selectorPrefix+d.id).classed('highlighted', true);
+        highlightEntity(context, d.member, true);
     }
 
 
@@ -134,13 +134,11 @@ export function uiRawMemberEditor(context) {
                 .each(function(d) {
                     if (d.member) {
 
-                        // highlight the member feature in the map while hovering on the list item
-                        var selectorPrefix = d.type === 'node' ? 'g.' : 'path.';
                         d3_select(this).on('mouseover', function() {
-                            context.surface().selectAll(selectorPrefix+d.id).classed('highlighted', true);
+                            highlightEntity(context, d.member, true);
                         });
                         d3_select(this).on('mouseout', function() {
-                            context.surface().selectAll(selectorPrefix+d.id).classed('highlighted', false);
+                            highlightEntity(context, d.member, false);
                         });
 
                         var label = d3_select(this).append('label')
diff --git a/modules/ui/raw_membership_editor.js b/modules/ui/raw_membership_editor.js
index 0fadc1b7b..1c71eeb2c 100644
--- a/modules/ui/raw_membership_editor.js
+++ b/modules/ui/raw_membership_editor.js
@@ -19,6 +19,7 @@ import {
     actionDeleteMember
 } from '../actions';
 
+import { highlightEntity } from './entity_highlight';
 import { modeSelect } from '../modes';
 import { osmEntity, osmRelation } from '../osm';
 import { services } from '../services';
@@ -173,6 +174,15 @@ export function uiRawMembershipEditor(context) {
                 .append('li')
                 .attr('class', 'member-row member-row-normal form-field');
 
+            enter.each(function(d){
+                d3_select(this).on('mouseover', function() {
+                    highlightEntity(context, d.relation, true);
+                });
+                d3_select(this).on('mouseout', function() {
+                    highlightEntity(context, d.relation, false);
+                });
+            });
+
             var label = enter
                 .append('label')
                 .attr('class', 'form-label')
diff --git a/modules/ui/selection_list.js b/modules/ui/selection_list.js
index 6362a7cea..0345943bf 100644
--- a/modules/ui/selection_list.js
+++ b/modules/ui/selection_list.js
@@ -4,6 +4,7 @@ import {
 } from 'd3-selection';
 
 import { t } from '../util/locale';
+import { highlightEntity } from './entity_highlight';
 import { modeSelect } from '../modes';
 import { osmEntity } from '../osm';
 import { svgIcon } from '../svg';
@@ -69,13 +70,12 @@ export function uiSelectionList(context, selectedIDs) {
 
             enter
                 .each(function(d) {
-                // highlight the feature in the map while hovering on the list item
-                var selectorPrefix = d.type === 'node' ? 'g.' : 'path.';
+
                 d3_select(this).on('mouseover', function() {
-                    context.surface().selectAll(selectorPrefix+d.id).classed('highlighted', true);
+                    highlightEntity(context, d, true);
                 });
                 d3_select(this).on('mouseout', function() {
-                    context.surface().selectAll(selectorPrefix+d.id).classed('highlighted', false);
+                    highlightEntity(context, d, false);
                 });
             });