Topo2: unpin nodes when a node is hovered and 'U' us pressed

Change-Id: I5f25243073ea7e32354c4777576ad402e6124296

web/gui/src/main/webapp/app/view/topo2/topo2-theme.css

@@ -187,12 +187,16 @@
     fill: #454545;
 }
 
-
 #ov-topo2 svg .node.selected .node-container {
     stroke-width: 2.0;
     stroke: #009fdb;
 }
 
+#ov-topo2 svg .node.hovered .node-container {
+    stroke-width: 2.0;
+    stroke: #454545;
+}
+
 /* Badges */
 /* (... works for bothand dark themes...) */
 #ov-topo2 svg .node .badge circle {

web/gui/src/main/webapp/app/view/topo2/topo2Device.js

@@ -74,6 +74,7 @@
                     },
                     onClick: function () {
 
+                        if (d3.event.defaultPrevented) return;
                         var selected = this.select(d3.event);
 
                         if (_.isArray(selected) && selected.length > 0) {

web/gui/src/main/webapp/app/view/topo2/topo2Force.js

@@ -84,7 +84,6 @@
     function currentRegion(data) {
         $log.debug('>> topo2CurrentRegion event:', data);
         t2rs.addRegion(data);
-        t2ls.createForceLayout();
     }
 
     function topo2PeerRegions(data) {
@@ -169,14 +168,16 @@
     }
 
     function unpin() {
+
         var hovered = t2rs.filterRegionNodes(function (model) {
             return model.get('hovered');
         });
 
         angular.forEach(hovered, function (model) {
-            model.fixed = false;
+            model.fix(false);
-            model.el.classed('fixed', false);
         });
+
+        t2ls.start();
     }
 
     angular.module('ovTopo2')

web/gui/src/main/webapp/app/view/topo2/topo2Host.js

@@ -68,6 +68,7 @@
                     }
                 },
                 onClick: function () {
+                    if (d3.event.defaultPrevented) return;
                     var selected = this.select(d3.select);
 
                     if (selected.length > 0) {

web/gui/src/main/webapp/app/view/topo2/topo2Layout.js

@@ -33,22 +33,19 @@
             // note: key is node.class
             device: -8000,
             host: -20000,
-            region: -5000,
+            region: -8000,
             _def_: -12000
         },
         linkDistance: {
             // note: key is link.type
             direct: 100,
             optical: 120,
-            UiEdgeLink: 30,
+            UiEdgeLink: 100,
             _def_: 50
         },
         linkStrength: {
             // note: key is link.type
             // range: {0.0 ... 1.0}
-            direct: 1.0,
-            optical: 1.0,
-            UiEdgeLink: 15.0,
             _def_: 1.0
         }
     };
@@ -245,7 +242,8 @@
 
                         entering.filter('.device').each(t2d3.nodeEnter);
                         entering.filter('.sub-region').each(t2d3.nodeEnter);
-                        entering.filter('.host').each(t2d3.hostEnter);
+                        entering.filter('.host').each(t2d3.nodeEnter);
+                        entering.filter('.peer-region').each(t2d3.nodeEnter);
                     },
                     updateLinks: function () {
 
@@ -267,7 +265,7 @@
                                 'stroke-width': linkConfig.inWidth
                             });
 
-                        entering.each(t2d3.linkEntering);
+                        entering.each(t2d3.nodeEnter);
 
                         // operate on exiting links:
                         this.link.exit()
@@ -333,8 +331,7 @@
                     },
                     atDragEnd: function (d) {
                         // once we've finished moving, pin the node in position
-                        d.fixed = true;
+                        d.fix(true);
-                        d3.select(this).classed('fixed', true);
                         instance.sendUpdateMeta(d);
                         t2ss.clickConsumed(true);
                     },

web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js

@@ -109,10 +109,14 @@
                     });
                 },
                 mouseoverHandler: function () {
-                    this.set('hovered', true, { silent: true });
+                    this.set('hovered', true);
                 },
                 mouseoutHandler: function () {
-                    this.set('hovered', false, { silent: true });
+                    this.set('hovered', false);
+                },
+                fix: function (fixed) {
+                    this.set({ fixed: fixed });
+                    this.fixed = fixed;
                 },
                 icon: function () {
                     return 'unknown';
@@ -195,7 +199,9 @@
                         this.get('type'),
                         {
                             online: this.get('online'),
-                            selected: this.get('selected')
+                            selected: this.get('selected'),
+                            hovered: this.get('hovered'),
+                            fixed: this.get('fixed')
                         }
                     );
                 },

web/gui/src/main/webapp/app/view/topo2/topo2NodePosition.js

@@ -43,7 +43,7 @@
 
         // else if we have [x,y] cached in meta data, use that...
         if (x !== undefined && y !== undefined) {
-            node.fixed = true;
+            node.fix(true);
             node.px = node.x = x;
             node.py = node.y = y;
             return;
@@ -100,7 +100,7 @@
             }
 
             coord = coordFromLngLat(loc);
-            el.fixed = true;
+            el.fix(true);
             el.x = el.px = coord[0];
             el.y = el.py = coord[1];
 
@@ -114,7 +114,7 @@
             }
 
             coord = coordFromXY(loc);
-            el.fixed = true;
+            el.fix(true);
             el.x = el.px = coord[0];
             el.y = el.py = coord[1];
 

web/gui/src/main/webapp/app/view/topo2/topo2Region.js

@@ -37,7 +37,8 @@
         'Topo2HostService', 'Topo2LinkService', 'Topo2ZoomService', 'Topo2DetailsPanelService',
         'Topo2BreadcrumbService', 'Topo2ViewController', 'Topo2SpriteLayerService', 'Topo2MapService',
         'Topo2MapConfigService',
-        function ($log, _Model_, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps, t2bcs, ViewController, t2sls, t2ms, t2mcs) {
+        function ($log, _Model_, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps, t2bcs, ViewController,
+                  t2sls, t2ms, t2mcs) {
 
             Model = _Model_;
 
@@ -46,6 +47,13 @@
                     instance = this;
                     this.model = null;
                     this.bgRendered = false;
+
+                    var RegionModel = Model.extend({
+                        findNodeById: this.findNodeById,
+                        nodes: this.regionNodes.bind(this)
+                    });
+
+                    this.model = new RegionModel();
                 },
                 backgroundRendered: function () {
                     this.bgRendered = true;
@@ -64,17 +72,9 @@
                 },
                 startRegion: function () {
 
-                    var RegionModel = Model.extend({
-                        findNodeById: this.findNodeById,
-                        nodes: this.regionNodes.bind(this)
-                    });
-
-                    this.model = new RegionModel({
-                        id: this.regionData.id,
-                        layerOrder: this.regionData.layerOrder
-                    });
-
                     this.model.set({
+                        id: this.regionData.id,
+                        layerOrder: this.regionData.layerOrder,
                         subregions: t2sr.createSubRegionCollection(this.regionData.subregions, this),
                         devices: t2ds.createDeviceCollection(this.regionData.devices, this),
                         hosts: t2hs.createHostCollection(this.regionData.hosts, this),
@@ -90,7 +90,7 @@
                         t2bcs.hide();
                     }
 
-                    // this.layout.update();
+                    this.layout.createForceLayout();
                 },
                 clear: function () {
 
@@ -122,7 +122,6 @@
                         this.model.get('subregions').get(id);
                 },
                 regionNodes: function () {
-
                     if (this.model) {
                         return [].concat(
                             this.model.get('devices').models,
@@ -130,11 +129,10 @@
                             this.model.get('subregions').models
                         );
                     }
-
                     return [];
                 },
                 regionLinks: function () {
-                    return (this.model) ? this.model.get('links').models : [];
+                    return this.model.get('links').models;
                 },
                 getLink: function (linkId) {
                     return this.model.get('links').get(linkId);

web/gui/src/main/webapp/app/view/topo2/topo2Select.js

@@ -122,7 +122,11 @@
             return mdist(p, m) <= proximity;
         }
 
-        var links = t2rs.regionLinks();
+        var links = [];
+
+        if (t2rs.model.get('links')) {
+            links = (t2rs.backgroundRendered) ? t2rs.regionLinks() : [];
+        }
 
         if (links.length) {
             minDist = proximity * 2;

web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js

@@ -68,6 +68,8 @@
                     return remappedDeviceTypes[type] || type || 'm_cloud';
                 },
                 onClick: function () {
+                    if (d3.event.defaultPrevented) return;
+
                     var selected = this.select(d3.event);
 
                     if (selected.length > 0) {