GUI -- Refactoring updateNodes() to make the code more readable.

Change-Id: Ib375b5573a4670a67dd94a6532caf078be33beb0

@@ -164,11 +164,6 @@
     }
     }
 
 
 
 
-    function updateNodes() {
-        $log.debug('TODO updateNodes()...');
-        // TODO...
-    }
-
     function fStart() {
     function fStart() {
         $log.debug('TODO fStart()...');
         $log.debug('TODO fStart()...');
         // TODO...
         // TODO...
@@ -428,8 +423,8 @@
             s = d.el.classed('selected'),
             s = d.el.classed('selected'),
             c = devBaseColor(d),
             c = devBaseColor(d),
             a = instColor(d.master, o),
             a = instColor(d.master, o),
-            g, r,
-            icon = d.el.select('g.deviceIcon');
+            icon = d.el.select('g.deviceIcon'),
+            g, r;
 
 
         if (s) {
         if (s) {
             g = c.glyph;
             g = c.glyph;
@@ -442,10 +437,8 @@
             r = c.rect;
             r = c.rect;
         }
         }
 
 
-        icon.select('use')
-            .style('fill', g);
-        icon.select('rect')
-            .style('fill', r);
+        icon.select('use').style('fill', g);
+        icon.select('rect').style('fill', r);
     }
     }
 
 
     function instColor(id, online) {
     function instColor(id, online) {
@@ -459,17 +452,8 @@
             .data(network.nodes, function (d) { return d.id; });
             .data(network.nodes, function (d) { return d.id; });
 
 
         // operate on existing nodes...
         // operate on existing nodes...
-        node.filter('.device').each(function (d) {
-            var node = d.el;
-            node.classed('online', d.online);
-            updateDeviceLabel(d);
-            positionNode(d, true);
-        });
-
-        node.filter('.host').each(function (d) {
-            updateHostLabel(d);
-            positionNode(d, true);
-        });
+        node.filter('.device').each(deviceExisting);
+        node.filter('.host').each(hostExisting);
 
 
         // operate on entering nodes:
         // operate on entering nodes:
         var entering = node.enter()
         var entering = node.enter()
@@ -486,15 +470,53 @@
             .transition()
             .transition()
             .attr('opacity', 1);
             .attr('opacity', 1);
 
 
-        // augment device nodes...
-        entering.filter('.device').each(function (d) {
+        // augment nodes...
+        entering.filter('.device').each(deviceEnter);
+        entering.filter('.host').each(hostEnter);
+
+        // operate on both existing and new nodes:
+        updateDeviceColors();
+
+        // operate on exiting nodes:
+        // Note that the node is removed after 2 seconds.
+        // Sub element animations should be shorter than 2 seconds.
+        var exiting = node.exit()
+            .transition()
+            .duration(2000)
+            .style('opacity', 0)
+            .remove();
+
+        // node specific....
+        exiting.filter('.host').each(hostExit);
+        exiting.filter('.device').each(deviceExit);
+
+        // finally, resume the force layout
+        fResume();
+    }
+
+    // ==========================
+    // updateNodes - subfunctions
+
+    function deviceExisting(d) {
+        var node = d.el;
+        node.classed('online', d.online);
+        updateDeviceLabel(d);
+        positionNode(d, true);
+    }
+
+    function hostExisting(d) {
+        updateHostLabel(d);
+        positionNode(d, true);
+    }
+
+    function deviceEnter(d) {
         var node = d3.select(this),
         var node = d3.select(this),
             glyphId = d.type || 'unknown',
             glyphId = d.type || 'unknown',
             label = trimLabel(deviceLabel(d)),
             label = trimLabel(deviceLabel(d)),
+            devCfg = deviceIconConfig,
             noLabel = !label,
             noLabel = !label,
             box, dx, dy, icon;
             box, dx, dy, icon;
 
 
-            // provide ref to element from backing data....
         d.el = node;
         d.el = node;
 
 
         node.append('rect').attr({ rx: 5, ry: 5 });
         node.append('rect').attr({ rx: 5, ry: 5 });
@@ -503,58 +525,43 @@
         node.select('rect').attr(box);
         node.select('rect').attr(box);
 
 
         icon = is.addDeviceIcon(node, glyphId);
         icon = is.addDeviceIcon(node, glyphId);
-            d.iconDim = icon.dim;
 
 
         if (noLabel) {
         if (noLabel) {
             dx = -icon.dim/2;
             dx = -icon.dim/2;
             dy = -icon.dim/2;
             dy = -icon.dim/2;
         } else {
         } else {
             box = adjustRectToFitText(node);
             box = adjustRectToFitText(node);
-                dx = box.x + iconConfig.xoff;
-                dy = box.y + iconConfig.yoff;
+            dx = box.x + devCfg.xoff;
+            dy = box.y + devCfg.yoff;
         }
         }
 
 
         icon.attr('transform', sus.translate(dx, dy));
         icon.attr('transform', sus.translate(dx, dy));
-        });
+    }
 
 
-        // augment host nodes...
-        entering.filter('.host').each(function (d) {
-            var node = d3.select(this),
-                cfg = config.icons.host,
-                r = cfg.radius[d.type] || cfg.defaultRadius,
-                textDy = r + 10,
+    function hostEnter(d) {
+        var node = d3.select(this);
+
+            //cfg = config.icons.host,
+            //r = cfg.radius[d.type] || cfg.defaultRadius,
+            //textDy = r + 10,
         //TODO:     iid = iconGlyphUrl(d),
         //TODO:     iid = iconGlyphUrl(d),
-                _dummy;
+        //    _dummy;
 
 
-            // provide ref to element from backing data....
         d.el = node;
         d.el = node;
 
 
         //TODO: showHostVis(node);
         //TODO: showHostVis(node);
 
 
         node.append('circle').attr('r', r);
         node.append('circle').attr('r', r);
-            if (iid) {
+        //if (iid) {
             //TODO: addHostIcon(node, r, iid);
             //TODO: addHostIcon(node, r, iid);
-            }
+        //}
         node.append('text')
         node.append('text')
             .text(hostLabel)
             .text(hostLabel)
-                .attr('dy', textDy)
+            //.attr('dy', textDy)
             .attr('text-anchor', 'middle');
             .attr('text-anchor', 'middle');
-        });
-
-        // operate on both existing and new nodes, if necessary
-        updateDeviceColors();
-
-        // operate on exiting nodes:
-        // Note that the node is removed after 2 seconds.
-        // Sub element animations should be shorter than 2 seconds.
-        var exiting = node.exit()
-            .transition()
-            .duration(2000)
-            .style('opacity', 0)
-            .remove();
+    }
 
 
-        // host node exits....
-        exiting.filter('.host').each(function (d) {
+    function hostExit(d) {
         var node = d.el;
         var node = d.el;
         node.select('use')
         node.select('use')
             .style('opacity', 0.5)
             .style('opacity', 0.5)
@@ -575,10 +582,9 @@
             .transition()
             .transition()
             .duration(1500)
             .duration(1500)
             .attr('r', 0);
             .attr('r', 0);
-        });
+    }
 
 
-        // device node exits....
-        exiting.filter('.device').each(function (d) {
+    function deviceExit(d) {
         var node = d.el;
         var node = d.el;
         node.select('use')
         node.select('use')
             .style('opacity', 0.5)
             .style('opacity', 0.5)
@@ -590,8 +596,6 @@
             .style('stroke-fill', '#555')
             .style('stroke-fill', '#555')
             .style('fill', '#888')
             .style('fill', '#888')
             .style('opacity', 0.5);
             .style('opacity', 0.5);
-        });
-        fResume();
     }
     }