From b11a8b834ac6dc9c4ca108399bcac4f98def2c23 Mon Sep 17 00:00:00 2001 From: Steven Burrows Date: Fri, 10 Mar 2017 16:00:31 +0000 Subject: [PATCH] Topo2: unpin nodes when a node is hovered and 'U' us pressed Change-Id: I5f25243073ea7e32354c4777576ad402e6124296 --- .../webapp/app/view/topo2/topo2-theme.css | 6 +++- .../main/webapp/app/view/topo2/topo2Device.js | 1 + .../main/webapp/app/view/topo2/topo2Force.js | 7 +++-- .../main/webapp/app/view/topo2/topo2Host.js | 1 + .../main/webapp/app/view/topo2/topo2Layout.js | 15 ++++------ .../webapp/app/view/topo2/topo2NodeModel.js | 12 ++++++-- .../app/view/topo2/topo2NodePosition.js | 6 ++-- .../main/webapp/app/view/topo2/topo2Region.js | 28 +++++++++---------- .../main/webapp/app/view/topo2/topo2Select.js | 6 +++- .../webapp/app/view/topo2/topo2SubRegion.js | 2 ++ 10 files changed, 49 insertions(+), 35 deletions(-) diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css b/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css index a90bae5c79..7ce65adb35 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css +++ b/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 { diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js b/web/gui/src/main/webapp/app/view/topo2/topo2Device.js index ddb9b55682..823387c5a9 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js +++ b/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) { diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js index d034b7a023..78f37a327c 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js +++ b/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.el.classed('fixed', false); + model.fix(false); }); + + t2ls.start(); } angular.module('ovTopo2') diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Host.js b/web/gui/src/main/webapp/app/view/topo2/topo2Host.js index 40755fe254..787819b9b9 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2Host.js +++ b/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) { diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js b/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js index c3bfd58169..36a5cedf6d 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js +++ b/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; - d3.select(this).classed('fixed', true); + d.fix(true); instance.sendUpdateMeta(d); t2ss.clickConsumed(true); }, diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js b/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js index c713dc0196..94ab15f4f3 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js +++ b/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') } ); }, diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2NodePosition.js b/web/gui/src/main/webapp/app/view/topo2/topo2NodePosition.js index f30401f108..2c78a0007d 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2NodePosition.js +++ b/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]; 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 54c88c755d..5895871d9f 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js +++ b/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); diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Select.js b/web/gui/src/main/webapp/app/view/topo2/topo2Select.js index ad99749744..242d55a0c8 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2Select.js +++ b/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; diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js b/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js index b3259d4a62..02c8b73706 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js +++ b/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) {