GUI -- TopoView - Port numbers now appear when hovering over a link.

- (but they are centered on the node -- still need to move them away from the node).

Change-Id: I491851ef2f4d31b85db0dbc2b3145218a4913844

@@ -484,6 +484,8 @@
     stroke: #7352CD;
 }
 
+/* Link Labels */
+
 #ov-topo svg .linkLabel rect {
     stroke: none;
 }
@@ -506,6 +508,32 @@
     fill: #eee;
 }
 
+/* Port Labels */
+
+#ov-topo svg .portLabel rect {
+    stroke: none;
+}
+.light #ov-topo svg .portLabel rect {
+    fill: #eee;
+}
+.dark #ov-topo svg .portLabel rect {
+    fill: #555;
+}
+
+#ov-topo svg .portLabel text {
+    text-anchor: middle;
+    stroke-width: 0.1;
+    font-size: 9pt;
+}
+.light #ov-topo svg .portLabel text {
+    fill: #444;
+}
+.dark #ov-topo svg .portLabel text {
+    fill: #eee;
+}
+
+
+
 
 /* radio buttons injected into masthead */
 

@@ -413,6 +413,27 @@
         return sus.translate(xMid, yMid);
     }
 
+    function applyPortLabels(data, portLabelG) {
+        var entering = portLabelG.selectAll('.portLabel')
+            .data(data).enter().append('g')
+            .classed('portLabel', true)
+            .attr('id', function (d) { return d.id; });
+
+        entering.each(function (d) {
+            var el = d3.select(this),
+                rect = el.append('rect'),
+                text = el.append('text').text(d.num);
+
+            rect.attr(rectAroundText(el));
+            text.attr('dy', linkLabelOffset);
+            el.attr('transform', transformPort(d));
+        });
+    }
+
+    function transformPort(d) {
+        // TODO: offset along the link, away from the node
+        return sus.translate(d.baseX, d.baseY);
+    }
 
     // ==========================
     // Module definition
@@ -459,8 +480,8 @@
 
                 linkEntering: linkEntering,
                 applyLinkLabels: applyLinkLabels,
-
-                transformLabel: transformLabel
+                transformLabel: transformLabel,
+                applyPortLabels: applyPortLabels
             };
         }]);
 }());

@@ -60,7 +60,7 @@
         dim;                    // the dimensions of the force layout [w,h]
 
     // SVG elements;
-    var linkG, linkLabelG, nodeG;
+    var linkG, linkLabelG, portLabelG, nodeG;
 
     // D3 selections;
     var link, linkLabel, node;
@@ -741,6 +741,7 @@
             forceG: forceG,
             zoomer: uplink.zoomer(),
             network: network,
+            portLabelG: function () { return portLabelG; },
             showHosts: function () { return showHosts; }
         };
     }
@@ -792,13 +793,14 @@
                 tts.initTraffic(mkTrafficApi(uplink));
                 tos.initOblique(mkObliqueApi(uplink, fltr));
                 fltr.initFilter(mkFilterApi(uplink), d3.select('#mast-right'));
-                tls.initLink(mkLinkApi(svg, forceG, uplink));
+                tls.initLink(mkLinkApi(svg, forceG, uplink), td3);
 
                 settings = angular.extend({}, defaultSettings, opts);
 
                 linkG = forceG.append('g').attr('id', 'topo-links');
                 linkLabelG = forceG.append('g').attr('id', 'topo-linkLabels');
                 nodeG = forceG.append('g').attr('id', 'topo-nodes');
+                portLabelG = forceG.append('g').attr('id', 'topo-portLabels');
 
                 link = linkG.selectAll('.link');
                 linkLabel = linkLabelG.selectAll('.linkLabel');

@@ -26,6 +26,7 @@
     var $log, fs, sus, ts;
 
     var api,
+        td3,
         network,
         enhancedLink = null;    // the link which the mouse is hovering over
 
@@ -190,14 +191,31 @@
 
     function unenhance(d) {
         d.el.classed('enhanced', false);
+        api.portLabelG().selectAll('.portLabel').remove();
     }
 
     function enhance(d) {
         d.el.classed('enhanced', true);
         $log.debug('[' + (d.srcPort || 'H') + '] ---> [' + d.tgtPort + ']', d.key);
-    }
 
+        // define port label data objects
+        var data = [
+            {
+                id: 'topo-port-src',
+                num: d.srcPort,
+                baseX: d.source.x,
+                baseY: d.source.y
+            },
+            {
+                id: 'topo-port-tgt',
+                num: d.tgtPort,
+                baseX: d.target.x,
+                baseY: d.target.y
+            }
+        ];
 
+        td3.applyPortLabels(data, api.portLabelG());
+    }
 
 
     // ==========================
@@ -213,8 +231,9 @@
                 sus = _sus_;
                 ts = _ts_;
 
-                function initLink(_api_) {
+                function initLink(_api_, _td3_) {
                     api = _api_;
+                    td3 = _td3_;
                     svg = api.svg;
                     network = api.network;
                     setupMouse(api.forceG, api.zoomer);