ONOS-2186 - GUI Topo Overlay - (WIP)
- Showing traffic on selected intent now subdues other elements.
- Augmented Highlights to allow for retrieval by ID.
- Reparented HostHighlight and DeviceHighlight to NodeHighlight.
- Added a few extra highlight unit tests.

Change-Id: I0de1cefdcfda58a6fec6e90be5fe898d35aa1b37
diff --git a/web/gui/src/main/webapp/app/view/topo/topoForce.js b/web/gui/src/main/webapp/app/view/topo/topoForce.js
index 555fa50..dbe8f9f 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoForce.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoForce.js
@@ -242,6 +242,10 @@
 
     // ========================
 
+    function nodeById(id) {
+        return lu[id];
+    }
+
     function makeNodeKey(node1, node2) {
         return node1 + '-' + node2;
     }
@@ -515,10 +519,10 @@
         });
     }
 
-    function unsuppressLink(id, less) {
+    function unsuppressLink(key, less) {
         var cls = supAmt(less);
         link.each(function (n) {
-            if (n.id === id) {
+            if (n.key === key) {
                 n.el.classed(cls, false);
             }
         });
@@ -922,6 +926,7 @@
             clearLinkTrafficStyle: clearLinkTrafficStyle,
             removeLinkLabels: removeLinkLabels,
             findLinkById: tms.findLinkById,
+            findNodeById: nodeById,
             updateLinks: updateLinks,
             updateNodes: updateNodes,
             supLayers: suppressLayers,
diff --git a/web/gui/src/main/webapp/app/view/topo/topoOverlay.js b/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
index 4a432e0..6bd7762 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
@@ -301,11 +301,12 @@
              clearLinkTrafficStyle()
              removeLinkLabels()
              findLinkById( id )
+             findNodeById( id )
              updateLinks()
              updateNodes()
              supLayers( bool, [less] )
              unsupNode( id, [less] )
-             unsupLink( id, [less] )
+             unsupLink( key, [less] )
          */
 
         // TODO: clear node highlighting
@@ -322,16 +323,30 @@
             api.supLayers(false, true);
         }
 
-        // TODO: device and host highlights
+        data.hosts.forEach(function (host) {
+            var hdata = api.findNodeById(host.id);
+            if (hdata && !hdata.el.empty()) {
+                api.unsupNode(hdata.id, less);
+                // TODO: further highlighting?
+            }
+        });
 
-        data.links.forEach(function (lnk) {
-            var ldata = api.findLinkById(lnk.id),
-                lab = lnk.label,
+        data.devices.forEach(function (device) {
+            var ddata = api.findNodeById(device.id);
+            if (ddata && !ddata.el.empty()) {
+                api.unsupNode(ddata.id, less);
+                // TODO: further highlighting?
+            }
+        });
+
+        data.links.forEach(function (link) {
+            var ldata = api.findLinkById(link.id),
+                lab = link.label,
                 units, portcls, magnitude;
 
             if (ldata && !ldata.el.empty()) {
-                api.unsupLink(ldata.id, less);
-                ldata.el.classed(lnk.css, true);
+                api.unsupLink(ldata.key, less);
+                ldata.el.classed(link.css, true);
                 ldata.label = lab;
 
                 // inject additional styling for port-based traffic