GUI -- Link selection showing link details implemented.

- note: basic link data shown for now. will need enhancing.

Change-Id: I067edec6f336b5ea5c83c610622346d5fcedce38

@@ -432,9 +432,15 @@
     opacity: .9;
     opacity: .9;
 }
 }
 
 
+#ov-topo svg .link.selected,
+#ov-topo svg .link.enhanced {
+    stroke-width: 4.5px;
+}
+.light #ov-topo svg .link.selected,
 .light #ov-topo svg .link.enhanced {
 .light #ov-topo svg .link.enhanced {
     filter: url(#blue-glow);
     filter: url(#blue-glow);
 }
 }
+.dark #ov-topo svg .link.selected,
 .dark #ov-topo svg .link.enhanced {
 .dark #ov-topo svg .link.enhanced {
     filter: url(#yellow-glow);
     filter: url(#yellow-glow);
 }
 }

@@ -29,7 +29,7 @@
 
 
     // references to injected services etc.
     // references to injected services etc.
     var $log, fs, ks, zs, gs, ms, sus, flash, wss,
     var $log, fs, ks, zs, gs, ms, sus, flash, wss,
-        tes, tfs, tps, tis, tss, tts, tos, ttbs;
+        tes, tfs, tps, tis, tss, tls, tts, tos, ttbs;
 
 
     // DOM elements
     // DOM elements
     var ovtopo, svg, defs, zoomLayer, mapG, forceG, noDevsLayer;
     var ovtopo, svg, defs, zoomLayer, mapG, forceG, noDevsLayer;
@@ -45,7 +45,7 @@
         actionMap = {
         actionMap = {
             I: [toggleInstances, 'Toggle ONOS instances pane'],
             I: [toggleInstances, 'Toggle ONOS instances pane'],
             O: [tps.toggleSummary, 'Toggle ONOS summary pane'],
             O: [tps.toggleSummary, 'Toggle ONOS summary pane'],
-            D: [tss.toggleDetails, 'Disable / enable details pane'],
+            D: [tps.toggleDetails, 'Disable / enable details pane'],
 
 
             H: [tfs.toggleHosts, 'Toggle host visibility'],
             H: [tfs.toggleHosts, 'Toggle host visibility'],
             M: [tfs.toggleOffline, 'Toggle offline visibility'],
             M: [tfs.toggleOffline, 'Toggle offline visibility'],
@@ -117,9 +117,13 @@
             // if an instance is selected, cancel the affinity mapping
             // if an instance is selected, cancel the affinity mapping
             tis.cancelAffinity()
             tis.cancelAffinity()
 
 
-        } else if (tss.haveDetails()) {
+        } else if (tss.deselectAll()) {
             // else if we have node selections, deselect them all
             // else if we have node selections, deselect them all
-            tss.deselectAll();
+            // (work already done)
+
+        } else if (tls.deselectLink()) {
+            // else if we have a link selected, deselect it
+            // (work already done)
 
 
         } else if (tis.isVisible()) {
         } else if (tis.isVisible()) {
             // else if the Instance Panel is visible, hide it
             // else if the Instance Panel is visible, hide it
@@ -238,12 +242,12 @@
             'GlyphService', 'MapService', 'SvgUtilService', 'FlashService',
             'GlyphService', 'MapService', 'SvgUtilService', 'FlashService',
             'WebSocketService',
             'WebSocketService',
             'TopoEventService', 'TopoForceService', 'TopoPanelService',
             'TopoEventService', 'TopoForceService', 'TopoPanelService',
-            'TopoInstService', 'TopoSelectService', 'TopoTrafficService',
-            'TopoObliqueService', 'TopoToolbarService',
+            'TopoInstService', 'TopoSelectService', 'TopoLinkService',
+            'TopoTrafficService', 'TopoObliqueService', 'TopoToolbarService',
 
 
-        function ($scope, _$log_, $loc, $timeout, _fs_, mast,
-                  _ks_, _zs_, _gs_, _ms_, _sus_, _flash_, _wss_,
-                  _tes_, _tfs_, _tps_, _tis_, _tss_, _tts_, _tos_, _ttbs_) {
+        function ($scope, _$log_, $loc, $timeout, _fs_, mast, _ks_, _zs_,
+                  _gs_, _ms_, _sus_, _flash_, _wss_, _tes_, _tfs_, _tps_,
+                  _tis_, _tss_, _tls_, _tts_, _tos_, _ttbs_) {
             var self = this,
             var self = this,
                 projection,
                 projection,
                 dim,
                 dim,
@@ -273,6 +277,7 @@
             tps = _tps_;
             tps = _tps_;
             tis = _tis_;
             tis = _tis_;
             tss = _tss_;
             tss = _tss_;
+            tls = _tls_;
             tts = _tts_;
             tts = _tts_;
             tos = _tos_;
             tos = _tos_;
             ttbs = _ttbs_;
             ttbs = _ttbs_;

@@ -615,6 +615,7 @@
         d.fixed = true;
         d.fixed = true;
         d3.select(this).classed('fixed', true);
         d3.select(this).classed('fixed', true);
         sendUpdateMeta(d);
         sendUpdateMeta(d);
+        tss.clickConsumed(true);
     }
     }
 
 
     // predicate that indicates when dragging is active
     // predicate that indicates when dragging is active
@@ -692,7 +693,8 @@
         return {
         return {
             node: function () { return node; },
             node: function () { return node; },
             zoomingOrPanning: zoomingOrPanning,
             zoomingOrPanning: zoomingOrPanning,
-            updateDeviceColors: td3.updateDeviceColors
+            updateDeviceColors: td3.updateDeviceColors,
+            deselectLink: tls.deselectLink
         };
         };
     }
     }
 
 

@@ -23,34 +23,35 @@
     'use strict';
     'use strict';
 
 
     // injected refs
     // injected refs
-    var $log, fs, sus, ts, flash;
+    var $log, fs, sus, ts, flash, tss, tps;
 
 
+    // internal state
     var api,
     var api,
         td3,
         td3,
         network,
         network,
-        enhancedLink = null;    // the link which the mouse is hovering over
+        showPorts = true,       // enable port highlighting by default
+        enhancedLink = null,    // the link over which the mouse is hovering
+        selectedLink = null;    // the link which is currently selected
 
 
     // SVG elements;
     // SVG elements;
     var svg;
     var svg;
 
 
-    // internal state
-    var showPorts = true;       // enable port highlighting by default
-
 
 
     // ======== ALGORITHM TO FIND LINK CLOSEST TO MOUSE ========
     // ======== ALGORITHM TO FIND LINK CLOSEST TO MOUSE ========
 
 
-    function mouseMoveHandler() {
-        var m = d3.mouse(this),
+    function getLogicalMousePosition(container) {
+        var m = d3.mouse(container),
             sc = api.zoomer.scale(),
             sc = api.zoomer.scale(),
             tr = api.zoomer.translate(),
             tr = api.zoomer.translate(),
             mx = (m[0] - tr[0]) / sc,
             mx = (m[0] - tr[0]) / sc,
             my = (m[1] - tr[1]) / sc;
             my = (m[1] - tr[1]) / sc;
-        computeNearestLink({x: mx, y: my});
+        return {x: mx, y: my};
     }
     }
 
 
     function computeNearestLink(mouse) {
     function computeNearestLink(mouse) {
         var proximity = 30 / api.zoomer.scale(),
         var proximity = 30 / api.zoomer.scale(),
-            nearest, minDist;
+            nearest = null,
+            minDist;
 
 
         function sq(x) { return x * x; }
         function sq(x) { return x * x; }
 
 
@@ -91,7 +92,6 @@
         }
         }
 
 
         if (network.links.length) {
         if (network.links.length) {
-            nearest = null;
             minDist = proximity * 2;
             minDist = proximity * 2;
 
 
             network.links.forEach(function (d) {
             network.links.forEach(function (d) {
@@ -112,13 +112,11 @@
                     }
                     }
                 }
                 }
             });
             });
-
-            enhanceNearestLink(nearest);
         }
         }
+        return nearest;
     }
     }
 
 
-
-    function enhanceNearestLink(ldata) {
+    function enhanceLink(ldata) {
         // if the new link is same as old link, do nothing
         // if the new link is same as old link, do nothing
         if (enhancedLink && ldata && enhancedLink.key === ldata.key) return;
         if (enhancedLink && ldata && enhancedLink.key === ldata.key) return;
 
 
@@ -148,7 +146,6 @@
         if (!d.el) return;
         if (!d.el) return;
 
 
         d.el.classed('enhanced', true);
         d.el.classed('enhanced', true);
-        $log.debug('[' + (d.srcPort || 'H') + '] ---> [' + d.tgtPort + ']', d.key);
 
 
         // Define port label data objects.
         // Define port label data objects.
         // NOTE: src port is absent in the case of host-links.
         // NOTE: src port is absent in the case of host-links.
@@ -188,6 +185,62 @@
         return {x: k * dx + ln.x, y: k * dy + ln.y};
         return {x: k * dx + ln.x, y: k * dy + ln.y};
     }
     }
 
 
+
+    function selectLink(ldata) {
+        // if the new link is same as old link, do nothing
+        if (selectedLink && ldata && selectedLink.key === ldata.key) return;
+
+        // make sure no nodes are selected
+        tss.deselectAll();
+
+        // first, unenhance the currently enhanced link
+        if (selectedLink) {
+            unselLink(selectedLink);
+        }
+        selectedLink = ldata;
+        if (selectedLink) {
+            selLink(selectedLink);
+        }
+    }
+
+    function unselLink(d) {
+        // guard against link element not set
+        if (d.el) {
+            d.el.classed('selected', false);
+        }
+    }
+
+    function selLink(d) {
+        // guard against link element not set
+        if (!d.el) return;
+
+        d.el.classed('selected', true);
+
+        tps.displayLink(d);
+        tps.displaySomething();
+    }
+
+    // ====== MOUSE EVENT HANDLERS ======
+
+    function mouseMoveHandler() {
+        var mp = getLogicalMousePosition(this),
+            link = computeNearestLink(mp);
+        enhanceLink(link);
+    }
+
+    function mouseClickHandler() {
+        var mp, link;
+
+        if (!tss.clickConsumed()) {
+            mp = getLogicalMousePosition(this);
+            link = computeNearestLink(mp);
+            selectLink(link);
+        }
+    }
+
+
+    // ======================
+
     function togglePorts() {
     function togglePorts() {
         showPorts = !showPorts;
         showPorts = !showPorts;
 
 
@@ -195,25 +248,37 @@
             handler = showPorts ? mouseMoveHandler : null;
             handler = showPorts ? mouseMoveHandler : null;
 
 
         if (!showPorts) {
         if (!showPorts) {
-            enhanceNearestLink(null);
+            enhanceLink(null);
         }
         }
         svg.on('mousemove', handler);
         svg.on('mousemove', handler);
         flash.flash(what + ' port highlighting');
         flash.flash(what + ' port highlighting');
     }
     }
 
 
+    function deselectLink() {
+        if (selectedLink) {
+            unselLink(selectedLink);
+            selectedLink = null;
+            return true;
+        }
+        return false;
+    }
+
     // ==========================
     // ==========================
     // Module definition
     // Module definition
 
 
     angular.module('ovTopo')
     angular.module('ovTopo')
         .factory('TopoLinkService',
         .factory('TopoLinkService',
         ['$log', 'FnService', 'SvgUtilService', 'ThemeService', 'FlashService',
         ['$log', 'FnService', 'SvgUtilService', 'ThemeService', 'FlashService',
+            'TopoSelectService', 'TopoPanelService',
 
 
-        function (_$log_, _fs_, _sus_, _ts_, _flash_) {
+        function (_$log_, _fs_, _sus_, _ts_, _flash_, _tss_, _tps_) {
             $log = _$log_;
             $log = _$log_;
             fs = _fs_;
             fs = _fs_;
             sus = _sus_;
             sus = _sus_;
             ts = _ts_;
             ts = _ts_;
             flash = _flash_;
             flash = _flash_;
+            tss = _tss_;
+            tps = _tps_;
 
 
             function initLink(_api_, _td3_) {
             function initLink(_api_, _td3_) {
                 api = _api_;
                 api = _api_;
@@ -223,17 +288,20 @@
                 if (showPorts) {
                 if (showPorts) {
                     svg.on('mousemove', mouseMoveHandler);
                     svg.on('mousemove', mouseMoveHandler);
                 }
                 }
+                svg.on('click', mouseClickHandler);
             }
             }
 
 
             function destroyLink() {
             function destroyLink() {
-                // unconditionally remove any mousemove event handler
+                // unconditionally remove any event handlers
                 svg.on('mousemove', null);
                 svg.on('mousemove', null);
+                svg.on('click', null);
             }
             }
 
 
             return {
             return {
                 initLink: initLink,
                 initLink: initLink,
                 destroyLink: destroyLink,
                 destroyLink: destroyLink,
-                togglePorts: togglePorts
+                togglePorts: togglePorts,
+                deselectLink: deselectLink
             };
             };
         }]);
         }]);
 }());
 }());

@@ -23,7 +23,7 @@
     'use strict';
     'use strict';
 
 
     // injected refs
     // injected refs
-    var $log, fs, ps, gs, wss;
+    var $log, fs, ps, gs, flash, wss;
 
 
     // constants
     // constants
     var pCls = 'topo-p',
     var pCls = 'topo-p',
@@ -37,6 +37,9 @@
     var summaryPanel,
     var summaryPanel,
         detailPanel;
         detailPanel;
 
 
+    // internal state
+    var useDetails = true,      // should we show details if we have 'em?
+        haveDetails = false;    // do we have details that we could show?
 
 
     // === -----------------------------------------------------
     // === -----------------------------------------------------
     // Utility functions
     // Utility functions
@@ -129,6 +132,42 @@
             .on('click', cb);
             .on('click', cb);
     }
     }
 
 
+    function displayLink(data) {
+        detailPanel.empty();
+
+        var svg = dpa('svg'),
+            title = dpa('h2'),
+            table = dpa('table'),
+            tbody = table.append('tbody');
+
+        gs.addGlyph(svg, 'ports', 40);
+        title.text('Link');
+        listProps(tbody, {
+            propOrder: [
+                'type', '-', 'src', 'srcPort', '-', 'tgt', 'tgtPort'
+            ],
+            props: {
+                type: data.type(),
+                src: data.source.id,
+                srcPort: data.srcPort,
+                tgt: data.target.id,
+                tgtPort: data.tgtPort
+            }
+        });
+    }
+
+    function displayNothing() {
+        haveDetails = false;
+        hideDetailPanel();
+    }
+
+    function displaySomething() {
+        haveDetails = true;
+        if (useDetails) {
+            showDetailPanel();
+        }
+    }
+
     // === -----------------------------------------------------
     // === -----------------------------------------------------
     //  Event Handlers
     //  Event Handlers
 
 
@@ -201,6 +240,19 @@
         dp.up = function (cb) { dp._move(dp.ypos.up, cb); };
         dp.up = function (cb) { dp._move(dp.ypos.up, cb); };
     }
     }
 
 
+    function toggleDetails() {
+        useDetails = !useDetails;
+        if (useDetails) {
+            flash.flash('Enable details panel');
+            if (haveDetails) {
+                showDetailPanel();
+            }
+        } else {
+            flash.flash('Disable details panel');
+            hideDetailPanel();
+        }
+    }
+
     // ==========================
     // ==========================
 
 
     function initPanels() {
     function initPanels() {
@@ -223,13 +275,15 @@
 
 
     angular.module('ovTopo')
     angular.module('ovTopo')
     .factory('TopoPanelService',
     .factory('TopoPanelService',
-        ['$log', 'FnService', 'PanelService', 'GlyphService', 'WebSocketService',
+        ['$log', 'FnService', 'PanelService', 'GlyphService',
+            'FlashService', 'WebSocketService',
 
 
-        function (_$log_, _fs_, _ps_, _gs_, _wss_) {
+        function (_$log_, _fs_, _ps_, _gs_, _flash_, _wss_) {
             $log = _$log_;
             $log = _$log_;
             fs = _fs_;
             fs = _fs_;
             ps = _ps_;
             ps = _ps_;
             gs = _gs_;
             gs = _gs_;
+            flash = _flash_;
             wss = _wss_;
             wss = _wss_;
 
 
             return {
             return {
@@ -239,13 +293,15 @@
                 showSummary: showSummary,
                 showSummary: showSummary,
                 toggleSummary: toggleSummary,
                 toggleSummary: toggleSummary,
 
 
+                toggleDetails: toggleDetails,
                 displaySingle: displaySingle,
                 displaySingle: displaySingle,
                 displayMulti: displayMulti,
                 displayMulti: displayMulti,
                 addAction: addAction,
                 addAction: addAction,
+                displayLink: displayLink,
+                displayNothing: displayNothing,
+                displaySomething: displaySomething,
 
 
                 hideSummaryPanel: hideSummaryPanel,
                 hideSummaryPanel: hideSummaryPanel,
-                showDetailPanel: showDetailPanel,
-                hideDetailPanel: hideDetailPanel,
 
 
                 detailVisible: function () { return detailPanel.isVisible(); },
                 detailVisible: function () { return detailPanel.isVisible(); },
                 summaryVisible: function () { return summaryPanel.isVisible(); }
                 summaryVisible: function () { return summaryPanel.isVisible(); }

@@ -23,7 +23,7 @@
     'use strict';
     'use strict';
 
 
     // injected refs
     // injected refs
-    var $log, fs, flash, wss, tps, tts;
+    var $log, fs, wss, tps, tts;
 
 
     // api to topoForce
     // api to topoForce
     var api;
     var api;
@@ -31,14 +31,14 @@
        node()                         // get ref to D3 selection of nodes
        node()                         // get ref to D3 selection of nodes
        zoomingOrPanning( ev )
        zoomingOrPanning( ev )
        updateDeviceColors( [dev] )
        updateDeviceColors( [dev] )
+       deselectLink()
      */
      */
 
 
     // internal state
     // internal state
     var hovered,                // the node over which the mouse is hovering
     var hovered,                // the node over which the mouse is hovering
         selections = {},        // currently selected nodes (by id)
         selections = {},        // currently selected nodes (by id)
         selectOrder = [],       // the order in which we made selections
         selectOrder = [],       // the order in which we made selections
-        haveDetails = false,    // do we have details of one or more nodes?
-        useDetails = true;      // should we show details if we have 'em?
+        consumeClick = false;   // used to coordinate with SVG click handler
 
 
     // ==========================
     // ==========================
 
 
@@ -101,6 +101,9 @@
         }
         }
         if (!n) return;
         if (!n) return;
 
 
+        consumeClick = true;
+        api.deselectLink();
+
         if (ev.shiftKey && n.classed('selected')) {
         if (ev.shiftKey && n.classed('selected')) {
             deselectObject(obj.id);
             deselectObject(obj.id);
             updateDetail();
             updateDetail();
@@ -130,12 +133,17 @@
     }
     }
 
 
     function deselectAll() {
     function deselectAll() {
+        var something = (selectOrder.length > 0);
+
         // deselect all nodes in the network...
         // deselect all nodes in the network...
         api.node().classed('selected', false);
         api.node().classed('selected', false);
         selections = {};
         selections = {};
         selectOrder = [];
         selectOrder = [];
         api.updateDeviceColors();
         api.updateDeviceColors();
         updateDetail();
         updateDetail();
+
+        // return true if something was selected
+        return something;
     }
     }
 
 
     // === -----------------------------------------------------
     // === -----------------------------------------------------
@@ -162,9 +170,8 @@
     }
     }
 
 
     function emptySelect() {
     function emptySelect() {
-        haveDetails = false;
-        tps.hideDetailPanel();
         tts.cancelTraffic();
         tts.cancelTraffic();
+        tps.displayNothing();
     }
     }
 
 
     function singleSelect() {
     function singleSelect() {
@@ -175,8 +182,6 @@
     }
     }
 
 
     function multiSelect() {
     function multiSelect() {
-        haveDetails = true;
-
         // display the selected nodes in the detail panel
         // display the selected nodes in the detail panel
         tps.displayMulti(selectOrder);
         tps.displayMulti(selectOrder);
 
 
@@ -192,6 +197,7 @@
 
 
         tts.cancelTraffic();
         tts.cancelTraffic();
         tts.requestTrafficForMode();
         tts.requestTrafficForMode();
+        tps.displaySomething();
     }
     }
 
 
 
 
@@ -199,8 +205,6 @@
     //  Event Handlers
     //  Event Handlers
 
 
     function showDetails(data) {
     function showDetails(data) {
-        haveDetails = true;
-
         // display the data for the single selected node
         // display the data for the single selected node
         tps.displaySingle(data);
         tps.displaySingle(data);
 
 
@@ -212,23 +216,7 @@
             tps.addAction('Show Device Flows', tts.showDeviceLinkFlowsAction);
             tps.addAction('Show Device Flows', tts.showDeviceLinkFlowsAction);
         }
         }
 
 
-        // only show the details panel if the user hasn't "hidden" it
-        if (useDetails) {
-            tps.showDetailPanel();
-        }
-    }
-
-    function toggleDetails() {
-        useDetails = !useDetails;
-        if (useDetails) {
-            flash.flash('Enable details panel');
-            if (haveDetails) {
-                tps.showDetailPanel();
-            }
-        } else {
-            flash.flash('Disable details panel');
-            tps.hideDetailPanel();
-        }
+        tps.displaySomething();
     }
     }
 
 
     function validateSelectionContext() {
     function validateSelectionContext() {
@@ -239,18 +227,23 @@
         return true;
         return true;
     }
     }
 
 
+    function clickConsumed(x) {
+        var cc = consumeClick;
+        consumeClick = !!x;
+        return cc;
+    }
+
     // === -----------------------------------------------------
     // === -----------------------------------------------------
     // === MODULE DEFINITION ===
     // === MODULE DEFINITION ===
 
 
     angular.module('ovTopo')
     angular.module('ovTopo')
     .factory('TopoSelectService',
     .factory('TopoSelectService',
-        ['$log', 'FnService', 'FlashService', 'WebSocketService',
+        ['$log', 'FnService', 'WebSocketService',
             'TopoPanelService', 'TopoTrafficService',
             'TopoPanelService', 'TopoTrafficService',
 
 
-        function (_$log_, _fs_, _flash_, _wss_, _tps_, _tts_) {
+        function (_$log_, _fs_, _wss_, _tps_, _tts_) {
             $log = _$log_;
             $log = _$log_;
             fs = _fs_;
             fs = _fs_;
-            flash = _flash_;
             wss = _wss_;
             wss = _wss_;
             tps = _tps_;
             tps = _tps_;
             tts = _tts_;
             tts = _tts_;
@@ -266,7 +259,6 @@
                 destroySelect: destroySelect,
                 destroySelect: destroySelect,
 
 
                 showDetails: showDetails,
                 showDetails: showDetails,
-                toggleDetails: toggleDetails,
 
 
                 nodeMouseOver: nodeMouseOver,
                 nodeMouseOver: nodeMouseOver,
                 nodeMouseOut: nodeMouseOut,
                 nodeMouseOut: nodeMouseOut,
@@ -275,9 +267,10 @@
                 deselectAll: deselectAll,
                 deselectAll: deselectAll,
 
 
                 hovered: function () { return hovered; },
                 hovered: function () { return hovered; },
-                haveDetails: function () { return haveDetails; },
                 selectOrder: function () { return selectOrder; },
                 selectOrder: function () { return selectOrder; },
-                validateSelectionContext: validateSelectionContext
+                validateSelectionContext: validateSelectionContext,
+
+                clickConsumed: clickConsumed
             };
             };
         }]);
         }]);
 }());
 }());