GUI -- TopoView - Fixed dynamic repositioning of Details Panel.

- also implemented toggleDetails keystroke 'D'.

Change-Id: I99a9ee1235c8cc1174d8c2d542e6e40b7fb6b8dc

web/gui/src/main/webapp/app/view/topo/topo.js

@@ -28,7 +28,7 @@
     ];
 
     // references to injected services etc.
-    var $log, fs, ks, zs, gs, ms, sus, tes, tfs, tps, tis;
+    var $log, fs, ks, zs, gs, ms, sus, tes, tfs, tps, tis, tss;
 
     // DOM elements
     var ovtopo, svg, defs, zoomLayer, mapG, forceG, noDevsLayer;
@@ -42,9 +42,9 @@
         // key bindings need to be made after the services have been injected
         // thus, deferred to here...
         ks.keyBindings({
-            O: [toggleSummary, 'Toggle ONOS summary pane'],
+            O: [tps.toggleSummary, 'Toggle ONOS summary pane'],
             I: [toggleInstances, 'Toggle ONOS instances pane'],
-            //D: [toggleDetails, 'Disable / enable details pane'],
+            D: [tss.toggleDetails, 'Disable / enable details pane'],
 
             H: [tfs.toggleHosts, 'Toggle host visibility'],
             M: [tfs.toggleOffline, 'Toggle offline visibility'],
@@ -87,15 +87,8 @@
 
     // --- Keystroke functions -------------------------------------------
 
-    function toggleSummary() {
+    // NOTE: this really belongs in the TopoPanelService -- but how to
-        if (tps.summaryVisible()) {
+    //       cleanly link in the updateDeviceColors() call? To be fixed later.
-            tes.sendEvent("cancelSummary");
-            tps.hideSummaryPanel();
-        } else {
-            tes.sendEvent('requestSummary');
-        }
-    }
-
     function toggleInstances() {
         tis.toggle();
         tfs.updateDeviceColors();
@@ -219,10 +212,11 @@
             'FnService', 'MastService', 'KeyService', 'ZoomService',
             'GlyphService', 'MapService', 'SvgUtilService',
             'TopoEventService', 'TopoForceService', 'TopoPanelService',
-            'TopoInstService',
+            'TopoInstService', 'TopoSelectService',
 
         function ($scope, _$log_, $loc, $timeout, _fs_, mast,
-                  _ks_, _zs_, _gs_, _ms_, _sus_, _tes_, _tfs_, _tps_, _tis_) {
+                  _ks_, _zs_, _gs_, _ms_, _sus_,
+                  _tes_, _tfs_, _tps_, _tis_, _tss_) {
             var self = this,
                 projection,
                 dim,
@@ -244,6 +238,7 @@
             tfs = _tfs_;
             tps = _tps_;
             tis = _tis_;
+            tss = _tss_;
 
             self.notifyResize = function () {
                 svgResized(fs.windowSize(mast.mastHeight()));
@@ -279,7 +274,7 @@
             forceG = zoomLayer.append('g').attr('id', 'topo-force');
             tfs.initForce(forceG, uplink, dim);
             tis.initInst();
-            tps.initPanels();
+            tps.initPanels({ sendEvent: tes.sendEvent });
             tes.openSock();
 
             $log.log('OvTopoCtrl has been created');

web/gui/src/main/webapp/app/view/topo/topoPanel.js

@@ -23,7 +23,12 @@
     'use strict';
 
     // injected refs
-    var $log, ps, gs;
+    var $log, fs, ps, gs;
+
+    var api;
+    /*
+      sendEvent( event, {payload} )
+     */
 
     // constants
     var pCls = 'topo-p',
@@ -137,39 +142,83 @@
         showSummaryPanel();
     }
 
+    function toggleSummary() {
+        if (summaryPanel.isVisible()) {
+            api.sendEvent("cancelSummary");
+            hideSummaryPanel();
+        } else {
+            api.sendEvent('requestSummary');
+        }
+    }
 
     // === -----------------------------------------------------
     // === LOGIC For showing/hiding summary and detail panels...
 
     function showSummaryPanel() {
-        summaryPanel.show();
+        if (detailPanel.isVisible()) {
-        // TODO: augment, for details panel move
+            detailPanel.down(summaryPanel.show);
+        } else {
+            summaryPanel.show();
+        }
     }
 
     function hideSummaryPanel() {
-        summaryPanel.hide();
+        summaryPanel.hide(function () {
-        // TODO: augment, for details panel move
+            if (detailPanel.isVisible()) {
+                detailPanel.up();
+            }
+        });
     }
 
     function showDetailPanel() {
-        // TODO: augment with summary-accomodation-logic
+        if (summaryPanel.isVisible()) {
-        detailPanel.show();
+            detailPanel.down(detailPanel.show);
+        } else {
+            detailPanel.up(detailPanel.show);
+        }
     }
 
     function hideDetailPanel() {
         detailPanel.hide();
     }
 
+    // ==========================
 
+    function noop () {}
+
+    function augmentDetailPanel() {
+        var dp = detailPanel;
+        dp.ypos = { up: 64, down: 320, current: 320};
+
+        dp._move = function (y, cb) {
+            var endCb = fs.isF(cb) || noop,
+                yp = dp.ypos;
+            if (yp.current !== y) {
+                yp.current = y;
+                dp.el().transition().duration(300)
+                    .each('end', endCb)
+                    .style('top', yp.current + 'px');
+            } else {
+                endCb();
+            }
+        };
+
+        dp.down = function (cb) { dp._move(dp.ypos.down, cb); };
+        dp.up = function (cb) { dp._move(dp.ypos.up, cb); };
+    }
 
     // ==========================
 
-    function initPanels() {
+    function initPanels(_api_) {
+        api = _api_;
+
         summaryPanel = ps.createPanel(idSum, panelOpts);
         detailPanel = ps.createPanel(idDet, panelOpts);
 
         summaryPanel.classed(pCls, true);
         detailPanel.classed(pCls, true);
+
+        augmentDetailPanel();
     }
 
     function destroyPanels() {
@@ -182,10 +231,11 @@
 
     angular.module('ovTopo')
     .factory('TopoPanelService',
-        ['$log', 'PanelService', 'GlyphService',
+        ['$log', 'FnService', 'PanelService', 'GlyphService',
 
-        function (_$log_, _ps_, _gs_) {
+        function (_$log_, _fs_, _ps_, _gs_) {
             $log = _$log_;
+            fs = _fs_;
             ps = _ps_;
             gs = _gs_;
 
@@ -194,6 +244,7 @@
                 destroyPanels: destroyPanels,
 
                 showSummary: showSummary,
+                toggleSummary: toggleSummary,
 
                 displaySingle: displaySingle,
                 displayMulti: displayMulti,

web/gui/src/main/webapp/app/view/topo/topoSelect.js

@@ -23,7 +23,7 @@
     'use strict';
 
     // injected refs
-    var $log, fs, tps;
+    var $log, fs, flash, tps;
 
     // api to topoForce
     var api;
@@ -229,6 +229,19 @@
         }
     }
 
+    function toggleDetails() {
+        useDetails = !useDetails;
+        if (useDetails) {
+            flash.flash('Enable details panel');
+            if (haveDetails) {
+                tps.showDetailPanel();
+            }
+        } else {
+            flash.flash('Disable details panel');
+            tps.hideDetailPanel();
+        }
+    }
+
     // === -----------------------------------------------------
     //  TODO: migrate these to topoTraffic.js
 
@@ -263,31 +276,33 @@
 
     angular.module('ovTopo')
         .factory('TopoSelectService',
-        ['$log', 'FnService', 'TopoPanelService',
+        ['$log', 'FnService', 'FlashService', 'TopoPanelService',
 
-            function (_$log_, _fs_, _tps_) {
+        function (_$log_, _fs_, _flash_, _tps_) {
-                $log = _$log_;
+            $log = _$log_;
-                fs = _fs_;
+            fs = _fs_;
-                tps = _tps_;
+            flash = _flash_;
+            tps = _tps_;
 
-                function initSelect(_api_) {
+            function initSelect(_api_) {
-                    api = _api_;
+                api = _api_;
-                }
+            }
 
-                function destroySelect() { }
+            function destroySelect() { }
 
-                return {
+            return {
-                    initSelect: initSelect,
+                initSelect: initSelect,
-                    destroySelect: destroySelect,
+                destroySelect: destroySelect,
 
-                    showDetails: showDetails,
+                showDetails: showDetails,
+                toggleDetails: toggleDetails,
 
-                    nodeMouseOver: nodeMouseOver,
+                nodeMouseOver: nodeMouseOver,
-                    nodeMouseOut: nodeMouseOut,
+                nodeMouseOut: nodeMouseOut,
-                    selectObject: selectObject,
+                selectObject: selectObject,
-                    deselectObject: deselectObject,
+                deselectObject: deselectObject,
-                    deselectAll: deselectAll,
+                deselectAll: deselectAll,
-                    hovered: function () { return hovered; }
+                hovered: function () { return hovered; }
-                };
+            };
-            }]);
+        }]);
 }());

web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js

@@ -37,6 +37,7 @@ describe('factory: view/topo/topoPanel.js', function() {
             'initPanels',
             'destroyPanels',
             'showSummary',
+            'toggleSummary',
             'displaySingle',
             'displayMulti',
             'addAction',

web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js

@@ -34,7 +34,7 @@ describe('factory: view/topo/topoSelect.js', function() {
 
     it('should define api functions', function () {
         expect(fs.areFunctions(tss, [
-            'initSelect', 'destroySelect', 'showDetails',
+            'initSelect', 'destroySelect', 'showDetails', 'toggleDetails',
             'nodeMouseOver', 'nodeMouseOut', 'selectObject', 'deselectObject',
             'deselectAll', 'hovered'
         ])).toBeTruthy();