GUI - Fixed link labels - now they update correctly.

- Fixed repositioning of icon underlay rectangle on label cycle.
- updateInstance() event handler started (WIP)

Change-Id: Icd1d4bd35369ccbe9b6a5f6e92d95016f0e475d8

@@ -12,9 +12,9 @@
           "of:0000ffffffff0007/1-0E:2A:69:30:13:89/-1/0"
           "of:0000ffffffff0007/1-0E:2A:69:30:13:89/-1/0"
         ],
         ],
         "labels": [
         "labels": [
-          "Load{rate=20, latest=20000}",
-          "Load{rate=10, latest=20000}",
-          ""
+          "123 bytes",
+          "10 bytes",
+          "0 bytes"
         ]
         ]
       }
       }
     ]
     ]

@@ -12,9 +12,9 @@
           "of:0000ffffffff0007/1-0E:2A:69:30:13:89/-1/0"
           "of:0000ffffffff0007/1-0E:2A:69:30:13:89/-1/0"
         ],
         ],
         "labels": [
         "labels": [
-          "",
-          "Load{rate=98, latest=38456}",
-          "Load{rate=98, latest=38789}"
+          "99997 bytes",
+          "200 bytes",
+          "3.1415926 bytes"
         ]
         ]
       }
       }
     ]
     ]

@@ -643,6 +643,21 @@
     }
     }
 
 
     // TODO: fold updateX(...) methods into one base method; remove duplication
     // TODO: fold updateX(...) methods into one base method; remove duplication
+
+    function updateInstance(data) {
+        evTrace(data);
+        var inst = data.payload,
+            id = inst.id,
+            instData = onosInstances[id];
+        if (instData) {
+            $.extend(instData, inst);
+            updateInstances();
+            //updateInstanceState(instData);
+        } else {
+            logicError('updateInstance lookup fail. ID = "' + id + '"');
+        }
+    }
+
     function updateDevice(data) {
     function updateDevice(data) {
         evTrace(data);
         evTrace(data);
         var device = data.payload,
         var device = data.payload,
@@ -1082,7 +1097,15 @@
         linkLabel = linkLabelG.selectAll('.linkLabel')
         linkLabel = linkLabelG.selectAll('.linkLabel')
             .data(data, function (d) { return d.id; });
             .data(data, function (d) { return d.id; });
 
 
-        linkLabel.text(function (d) { return d.label; });
+        // for elements already existing, we need to update the text
+        // and adjust the rectangle size to fit
+        linkLabel.each(function (d) {
+            var el = d3.select(this),
+                rect = el.select('rect'),
+                text = el.select('text');
+            text.text(d.label);
+            rect.attr(rectAroundText(el));
+        });
 
 
         entering = linkLabel.enter().append('g')
         entering = linkLabel.enter().append('g')
             .classed('linkLabel', true)
             .classed('linkLabel', true)
@@ -1302,10 +1325,15 @@
             .transition()
             .transition()
             .attr(box);
             .attr(box);
 
 
-        node.select('image')
+        node.select('rect.iconUnderlay')
             .transition()
             .transition()
             .attr('x', box.x + config.icons.xoff)
             .attr('x', box.x + config.icons.xoff)
             .attr('y', box.y + config.icons.yoff);
             .attr('y', box.y + config.icons.yoff);
+
+        node.select('image')
+            .transition()
+            .attr('x', box.x + config.icons.xoff + 2)
+            .attr('y', box.y + config.icons.yoff + 2);
     }
     }
 
 
     function updateHostLabel(d) {
     function updateHostLabel(d) {
@@ -1410,6 +1438,7 @@
                 var cfg = config.icons;
                 var cfg = config.icons;
                 node.append('rect')
                 node.append('rect')
                     .attr({
                     .attr({
+                        class: 'iconUnderlay',
                         x: box.x + config.icons.xoff,
                         x: box.x + config.icons.xoff,
                         y: box.y + config.icons.yoff,
                         y: box.y + config.icons.yoff,
                         width: cfg.w,
                         width: cfg.w,