From 578224bd63e7001bdb7854142be8b9c5ab7bf952 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Sat, 11 May 2013 12:49:05 -0700
Subject: [PATCH] Optimize hover behavior

Add entity IDs to the element class list, so that specific
elements can be selected by ID rather than needing `filter`.
---
 js/id/behavior/hover.js | 13 ++++++-------
 js/id/svg/areas.js      |  2 +-
 js/id/svg/lines.js      |  2 +-
 js/id/svg/points.js     |  2 +-
 js/id/svg/vertices.js   |  8 ++++----
 5 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/js/id/behavior/hover.js b/js/id/behavior/hover.js
index 3cdc08668..4fe3d2f41 100644
--- a/js/id/behavior/hover.js
+++ b/js/id/behavior/hover.js
@@ -33,17 +33,16 @@ iD.behavior.Hover = function() {
         function mouseover() {
             var datum = d3.event.target.__data__;
 
-            if (datum) {
-                var hovered = [datum.id];
+            if (datum && datum.type) {
+                var selector = '.' + datum.id;
 
                 if (datum.type === 'relation') {
-                    hovered = hovered.concat(_.pluck(datum.members, 'id'));
+                    datum.members.forEach(function(member) {
+                        selector += ', .' + member.id;
+                    });
                 }
 
-                hovered = d3.set(hovered);
-
-                selection.selectAll('*')
-                    .filter(function(d) { return d && hovered.has(d.id); })
+                selection.selectAll(selector)
                     .classed('hover', true);
             }
         }
diff --git a/js/id/svg/areas.js b/js/id/svg/areas.js
index f989c7c1b..26dc22b54 100644
--- a/js/id/svg/areas.js
+++ b/js/id/svg/areas.js
@@ -65,7 +65,7 @@ iD.svg.Areas = function(projection) {
 
             paths.enter()
                 .append('path')
-                .attr('class', function(d) { return d.type + ' area ' + klass; });
+                .attr('class', function(d) { return d.type + ' area ' + klass + ' ' + d.id; });
 
             paths
                 .order()
diff --git a/js/id/svg/lines.js b/js/id/svg/lines.js
index a81bff073..63ae8d131 100644
--- a/js/id/svg/lines.js
+++ b/js/id/svg/lines.js
@@ -50,7 +50,7 @@ iD.svg.Lines = function(projection) {
 
             paths.enter()
                 .append('path')
-                .attr('class', 'way line ' + klass);
+                .attr('class', function(d) { return 'way line ' + klass + ' ' + d.id; });
 
             paths
                 .order()
diff --git a/js/id/svg/points.js b/js/id/svg/points.js
index 91c3f2deb..f484c816e 100644
--- a/js/id/svg/points.js
+++ b/js/id/svg/points.js
@@ -32,7 +32,7 @@ iD.svg.Points = function(projection, context) {
 
         var group = groups.enter()
             .append('g')
-            .attr('class', 'node point')
+            .attr('class', function(d) { return 'node point ' + d.id; })
             .order();
 
         group.append('path')
diff --git a/js/id/svg/vertices.js b/js/id/svg/vertices.js
index 075656af1..d6e20d66d 100644
--- a/js/id/svg/vertices.js
+++ b/js/id/svg/vertices.js
@@ -57,7 +57,7 @@ iD.svg.Vertices = function(projection, context) {
     function draw(groups, graph, zoom) {
         var group = groups.enter()
             .insert('g', ':first-child')
-            .attr('class', 'node vertex');
+            .attr('class', function(d) { return 'node vertex ' + d.id; });
 
         if (zoom < 17) {
             zoom = 0;
@@ -68,10 +68,10 @@ iD.svg.Vertices = function(projection, context) {
         }
 
         group.append('circle')
-            .attr('class', 'node vertex shadow');
+            .attr('class', function(d) { return 'node vertex shadow ' + d.id; });
 
         group.append('circle')
-            .attr('class', 'node vertex stroke');
+            .attr('class', function(d) { return 'node vertex stroke ' + d.id; });
 
         groups.attr('transform', iD.svg.PointTransform(projection))
             .call(iD.svg.TagClasses())
@@ -118,7 +118,7 @@ iD.svg.Vertices = function(projection, context) {
             }, iD.Entity.key);
 
         fill.enter().append('circle')
-            .attr('class', 'node vertex fill')
+            .attr('class', function(d) { return 'node vertex fill ' + d.id; })
             .each(center)
             .attr('r', radiuses.fill[zoom]);