Topo2: Hide Breadcrumbs if there are no subregions configured in root

Change-Id: Ifa62e60b92271b263be6689522e0ccd2205a06c7
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.css b/web/gui/src/main/webapp/app/view/topo2/topo2.css
index cda26af..5e05ff3 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.css
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.css
@@ -19,6 +19,11 @@
  ONOS GUI -- Topology View (layout) -- CSS file
  */
 
+#mast {
+    position: relative;
+    z-index: 1000;
+}
+
 /* --- Base SVG Layer --- */
 
 #ov-topo2 svg {
@@ -93,6 +98,9 @@
     top: 104px;
 }
 
+.breadcrumb--hidden #topo2-p-instance.floatpanel {
+    top: 64px;
+}
 
 /* -- Base Device Styles -- */
 #ov-topo2 svg .node {
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js b/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
index 3f7cb0e..78e486c 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
@@ -32,13 +32,16 @@
     function init() {
         $log.debug("Topo2BreadcrumbService Initiated");
         breadcrumbs = [];
-        breadcrumbContainer = d3.select('#breadcrumbs').append('span')
+        breadcrumbContainer = d3.select('#breadcrumbs');
+
+        breadcrumbContainer
+            .append('span')
             .text('Regions: ');
+
         render();
     }
 
     function addBreadcrumb(crumbs) {
-
         breadcrumbContainer.selectAll('.breadcrumb').remove();
         breadcrumbs = crumbs.reverse();
         render();
@@ -82,6 +85,25 @@
             .remove();
     }
 
+    function hide() {
+
+        var view = d3.select('body');
+        view.classed('breadcrumb--hidden', true);
+
+        var startTranslateState = 'translate(0px,0%)',
+            endTranslateState = 'translate(0px,-100%)',
+            translateInterpolator = d3.interpolateString(startTranslateState, endTranslateState);
+
+        breadcrumbContainer
+            .transition()
+            .duration(600)
+            .style('opacity', 0)
+            .styleTween('transform', function (d) {
+                return translateInterpolator;
+            });
+
+    }
+
     angular.module('ovTopo2')
     .factory('Topo2BreadcrumbService',
         ['$log', 'WebSocketService',
@@ -93,7 +115,8 @@
 
             return {
                 init: init,
-                addBreadcrumb: addBreadcrumb
+                addBreadcrumb: addBreadcrumb,
+                hide: hide
             };
         }]);
 
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
index 8df63d6..b40eff7 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
@@ -23,12 +23,15 @@
     'use strict';
 
     // Injected Services
-    var $log, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps;
+    var $log, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps, t2bcs;
     var Model;
 
     // Internal
     var region
 
+    // 'static' vars
+    var ROOT = '(root)';
+
     function init() {}
 
     function addRegion(data) {
@@ -54,7 +57,6 @@
             link.createLink();
         });
 
-
         // TODO: replace with an algorithm that computes appropriate transition
         //        based on the location of the "region node" on the parent map
 
@@ -83,6 +85,11 @@
         };
 
 
+        // Hide Breadcrumbs if there are no subregions configured in the root region
+        if (isRootRegion() && !region.get('subregions').models.length) {
+            t2bcs.hide();
+        }
+
         setTimeout(function () {
             var regionPZ = regionPanZooms[region.get('id')];
             t2zs.panAndZoom(regionPZ.translate, regionPZ.scale);
@@ -143,8 +150,6 @@
             return true;
         }
 
-        // TODO: close details panel
-
         return false;
     }
 
@@ -167,13 +172,18 @@
         return false;
     }
 
+    function isRootRegion() {
+        return region.get('id') === ROOT;
+    }
+
     angular.module('ovTopo2')
     .factory('Topo2RegionService',
         ['$log', 'Topo2Model',
         'Topo2SubRegionService', 'Topo2DeviceService',
         'Topo2HostService', 'Topo2LinkService', 'Topo2ZoomService', 'Topo2DetailsPanelService',
+        'Topo2BreadcrumbService',
 
-        function (_$log_, _Model_, _t2sr_, _t2ds_, _t2hs_, _t2ls_, _t2zs_, _t2dps_) {
+        function (_$log_, _Model_, _t2sr_, _t2ds_, _t2hs_, _t2ls_, _t2zs_, _t2dps_, _t2bcs_) {
 
             $log = _$log_;
             Model = _Model_;
@@ -183,6 +193,7 @@
             t2ls = _t2ls_;
             t2zs = _t2zs_;
             t2dps = _t2dps_;
+            t2bcs = _t2bcs_;
 
             return {
                 init: init,
@@ -194,8 +205,6 @@
 
                 deselectAllNodes: deselectAllNodes,
                 deselectLink: deselectLink,
-
-                getSubRegions: t2sr.getSubRegions
             };
         }]);