Repository: qpid-dispatch Updated Branches: refs/heads/master ca22c9d13 -> bae8dbd81
DISPATCH-1161 Clean up arrows Project: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/repo Commit: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/commit/bae8dbd8 Tree: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/tree/bae8dbd8 Diff: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/diff/bae8dbd8 Branch: refs/heads/master Commit: bae8dbd81dc5908539e0e5ec64af9a01449c6730 Parents: ca22c9d Author: Ernest Allen <[email protected]> Authored: Sat Nov 3 14:40:09 2018 -0400 Committer: Ernest Allen <[email protected]> Committed: Sat Nov 3 14:40:09 2018 -0400 ---------------------------------------------------------------------- console/stand-alone/plugin/css/dispatch.css | 83 +++---------- console/stand-alone/plugin/js/topology/links.js | 5 + console/stand-alone/plugin/js/topology/nodes.js | 12 +- .../plugin/js/topology/qdrTopology.js | 115 ++++++++----------- 4 files changed, 79 insertions(+), 136 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/bae8dbd8/console/stand-alone/plugin/css/dispatch.css ---------------------------------------------------------------------- diff --git a/console/stand-alone/plugin/css/dispatch.css b/console/stand-alone/plugin/css/dispatch.css index dc56aa2..477b76c 100644 --- a/console/stand-alone/plugin/css/dispatch.css +++ b/console/stand-alone/plugin/css/dispatch.css @@ -37,10 +37,6 @@ ul.qdrListNodes > li > span { width: auto; } -.selectedItems { - /* margin-left: 21em; */ -} - .qdrListPane { top: 110px; } @@ -78,10 +74,6 @@ div.listAggrValue button { } } -div.listAttrName i.icon-bar-chart.active, div.hastip i.icon-bar-chart.active, li.haschart i { - /*background-color: #AAFFAA; */ -} - div#main div ul.nav li a:not(.btn) { background: initial !important; } @@ -159,13 +151,6 @@ div.chartContainer { stroke: black; } -/* the line surrounding the area chart */ -div.d3Chart path { -/* stroke: black; */ -/* stroke-width: 0; */ -/* opacity: 0.5; */ -} - /* the line above the area chart */ /* the color gets overridden */ div.d3Chart path.line { @@ -223,9 +208,6 @@ div.d3Chart .title { fill: none; stroke: steelblue; } -.focus .fo-table { - /* box-shadow: 2px 2px 3px #EEE; */ -} div.d3Chart { /* padding: 1em 0; */ @@ -240,10 +222,6 @@ div.d3Chart .axis path { display: inherit; } -.c3-circle { - /* display: none; */ -} - .fo-table { border: 1px solid darkgray; background-color: white; @@ -442,9 +420,6 @@ ul.qdrTopoModes { position: relative; top: -10px; } -.overview.section { - /* width: 35em; */ -} .overview.section .ngGrid { height: 12em !important; min-height: 12em !important; @@ -454,9 +429,6 @@ ul.qdrTopoModes { height: 16em !important; min-height: 16em !important; } -.overview.routers.section { - /*width: 15em; */ - } .grid-align-value { text-align: right; @@ -673,16 +645,9 @@ div.login.container { text-decoration: none; } -.fancytree-ico-c.router .fancytree-icon { - -} - .tabs-left .nav-tabs { float: left; } -.tabs-left .nav-tabs > li { -/* float: initial; */ -} div.modal.dlg-large { width: 53em; @@ -864,10 +829,6 @@ span:not(.fancytree-has-children).vhostStats .fancytree-icon:before { } -.ngCellText { -/* color: #333333; */ -} - .changed { color: #339933; } @@ -919,10 +880,6 @@ div.operations label { padding-top: 4px; margin-bottom: 4px; } -.qdrListActions .ngGrid { - /*min-height: 40em; - height: 100%; */ -} div.qdrListActions .ngViewport { height: initial !important; } @@ -1037,7 +994,9 @@ svg { svg:not(.active):not(.ctrl) { cursor: crosshair; } - #end-arrow-selected, #start-arrow-selected { + #end-selected-28, #start-selected-28, + #end-selected-20, #start-selected-20, + #end-selected-15, #start-selected-15 { stroke: #33F; fill: #33F; } @@ -1049,7 +1008,7 @@ svg { path.link { fill: #000; /* stroke: #000; */ - stroke-width: 4px; + stroke-width: 2.5px; cursor: default; } @@ -1059,26 +1018,29 @@ svg { svg:not(.active):not(.ctrl) path.link { cursor: pointer; } - + + path.link.hittarget { + stroke-width: 15px; + stroke: transparent; + } + path.link.small { stroke-width: 2.5; } path.link.small:not(.traffic) { - stroke: darkgray; + stroke: #000; } path.link.highlighted:not(.traffic) { stroke: #6F6 !important; } - marker#start-arrow-highlighted, - marker#end-arrow-highlighted { + marker#start-highlighted-28, marker#end-highlighted-28, + marker#start-highlighted-20, marker#end-highlighted-20, + marker#start-highlighted-15, marker#end-highlighted-15 { fill: #6F6; } - marker#start-arrow-small, - marker#end-arrow-small { - fill: darkgray; - } marker { - stroke-width: 0; + fill: #000; + stroke-width: 0; } path.link.dragline { pointer-events: none; @@ -1146,9 +1108,6 @@ svg { border-radius: 5px; } - .tiptable { - - } .tiptable tr { border-bottom: 1px solid #ccc; } @@ -1259,11 +1218,9 @@ svg { stroke-linejoin: round; fill:none; } - .arc { } .arc:hover { stroke: darkred; } - .flyer { } .flyer:hover { stroke: darkgreen; } @@ -1347,10 +1304,6 @@ svg { display: inline-block; } */ - .ui-tabs .ui-tabs-panel { - /* padding-top: 0 !important; */ - } - .ui-widget-content fieldset { float: left; padding: 0 1em 0 0; @@ -1421,7 +1374,6 @@ svg { .entity-fields label { font-weight: 600; - margin-top: 0.5em; display: inline; } @@ -1511,9 +1463,6 @@ svg { left: 600px; } - .cross-rect { - /* fill: #cfe2f3; */ - } .cross-line { stroke: black; stroke-width: 4px; http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/bae8dbd8/console/stand-alone/plugin/js/topology/links.js ---------------------------------------------------------------------- diff --git a/console/stand-alone/plugin/js/topology/links.js b/console/stand-alone/plugin/js/topology/links.js index dd722bb..377ce79 100644 --- a/console/stand-alone/plugin/js/topology/links.js +++ b/console/stand-alone/plugin/js/topology/links.js @@ -26,6 +26,11 @@ class Link { this.cls = cls; this.uid = uid; } + markerId (selected_link, node) { + let selhigh = this.highlighted ? 'highlighted' : selected_link && this.uid === selected_link.uid ? 'selected' : ''; + return `-${selhigh}-${node.radius()}`; + + } } export class Links { http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/bae8dbd8/console/stand-alone/plugin/js/topology/nodes.js ---------------------------------------------------------------------- diff --git a/console/stand-alone/plugin/js/topology/nodes.js b/console/stand-alone/plugin/js/topology/nodes.js index 4be7ff7..7f53428 100644 --- a/console/stand-alone/plugin/js/topology/nodes.js +++ b/console/stand-alone/plugin/js/topology/nodes.js @@ -121,7 +121,9 @@ export class Node { }.bind(this)); }.bind(this))); } - + radius() { + return nodeProperties[this.nodeType].radius; + } } const nodeProperties = { // router types @@ -154,6 +156,14 @@ export class Nodes { } return max; } + // return all possible values of node radii + static discrete() { + let values = {}; + for (let key in nodeProperties) { + values[nodeProperties[key].radius] = true; + } + return Object.keys(values); + } // vary the following force graph attributes based on nodeCount static forceScale (nodeCount, minmax) { let count = Math.max(Math.min(nodeCount, 80), 6); http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/bae8dbd8/console/stand-alone/plugin/js/topology/qdrTopology.js ---------------------------------------------------------------------- diff --git a/console/stand-alone/plugin/js/topology/qdrTopology.js b/console/stand-alone/plugin/js/topology/qdrTopology.js index c884522..5a91e6e 100644 --- a/console/stand-alone/plugin/js/topology/qdrTopology.js +++ b/console/stand-alone/plugin/js/topology/qdrTopology.js @@ -294,26 +294,35 @@ export class TopologyController { .start(); // This section adds in the arrows - svg.append('svg:defs').attr('class', 'marker-defs').selectAll('marker') - .data(['end-arrow', 'end-arrow-selected', 'end-arrow-small', 'end-arrow-highlighted', - 'start-arrow', 'start-arrow-selected', 'start-arrow-small', 'start-arrow-highlighted']) - .enter().append('svg:marker') - .attr('id', function (d) { return d; }) - .attr('viewBox', '0 -5 10 10') - .attr('refX', function (d) { - if (d.substr(0, 3) === 'end') { - return 24; + // Generate a marker for each combination of: + // start|end, ''|selected highlighted, and each possible node radius + { + let sten = ['start', 'end']; + let states = ['', 'selected', 'highlighted']; + let radii = Nodes.discrete(); + let defs = []; + for (let isten=0; isten<sten.length; isten++) { + for (let istate=0; istate<states.length; istate++) { + for (let iradii=0; iradii<radii.length; iradii++) { + defs.push({sten: sten[isten], state: states[istate], r: radii[iradii]}); + } } - return d !== 'start-arrow-small' ? -14 : -24;}) - .attr('markerWidth', 4) - .attr('markerHeight', 4) - .attr('orient', 'auto') - .classed('small', function (d) {return d.indexOf('small') > -1;}) - .append('svg:path') - .attr('d', function (d) { - return d.substr(0, 3) === 'end' ? 'M 0 -5 L 10 0 L 0 5 z' : 'M 10 -5 L 0 0 L 10 5 z'; - }); - + } + svg.append('svg:defs').attr('class', 'marker-defs').selectAll('marker') + .data(defs) + .enter().append('svg:marker') + .attr('id', function (d) { return [d.sten, d.state, d.r].join('-'); }) + .attr('viewBox', '0 -5 10 10') + .attr('refX', function (d) { return d.sten === 'end' ? d.r : -d.r; }) + .attr('markerWidth', 4) + .attr('markerHeight', 4) + .attr('orient', 'auto') + .classed('small', function (d) {return d.sten === 'small';}) + .append('svg:path') + .attr('d', function (d) { + return d.sten === 'end' ? 'M 0 -5 L 10 0 L 0 5 z' : 'M 10 -5 L 0 0 L 10 5 z'; + }); + } // gradient for sender/receiver client let grad = svg.append('svg:defs').append('linearGradient') .attr('id', 'half-circle') @@ -399,45 +408,19 @@ export class TopologyController { // update force layout (called automatically each iteration) function tick() { + // move the circles circle.attr('transform', function(d) { + // don't let the edges of the circle go beyond the edges of the svg let r = Nodes.radius(d.nodeType); d.x = Math.max(Math.min(d.x, width - r), r); d.y = Math.max(Math.min(d.y, height - r), r); - return `translate(${d.x},${d.y})`; }); - // draw lines with arrows with proper padding from node centers - path.attr('d', function(d) { - let sourcePadding, targetPadding; - let rT = Nodes.radius(d.target.nodeType); - let rS = Nodes.radius(d.source.nodeType); - sourcePadding = targetPadding = 0; - let dtx = Math.max(targetPadding, Math.min(width - rT, d.target.x)), - dty = Math.max(targetPadding, Math.min(height - rT, d.target.y)), - dsx = Math.max(sourcePadding, Math.min(width - rS, d.source.x)), - dsy = Math.max(sourcePadding, Math.min(height - rS, d.source.y)); - - let deltaX = dtx - dsx, - deltaY = dty - dsy, - dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY); - if (dist == 0) - dist = 0.001; - let normX = deltaX / dist, - normY = deltaY / dist; - let sourceX = dsx + (sourcePadding * normX), - sourceY = dsy + (sourcePadding * normY), - targetX = dtx - (targetPadding * normX), - targetY = dty - (targetPadding * normY); - sourceX = Math.max(0, sourceX); - sourceY = Math.max(0, sourceY); - targetX = Math.max(0, targetX); - targetY = Math.max(0, targetY); - - return `M${sourceX},${sourceY}L${targetX},${targetY}`; - }) - .attr('id', function (d) { - return ['path', d.source.index, d.target.index].join('-'); + // draw lines from node centers + path + .attr('d', function(d) { + return `M${d.source.x},${d.source.y}L${d.target.x},${d.target.y}`; }); if (!animate) { @@ -476,7 +459,10 @@ export class TopologyController { circle.call(force.drag); // path (link) group - path = path.data(links.links, function(d) {return d.uid;}); + path = path.data(links.links, function(d) {return d.uid;}) + .attr('id', function (d) { + return ['path', d.source.index, d.target.index].join('-'); + }); // update existing links path.classed('selected', function(d) { @@ -485,31 +471,24 @@ export class TopologyController { .classed('highlighted', function(d) { return d.highlighted; }); + // reset the markers based on current highlighted/selected if (!$scope.legend.status.optionsOpen || $scope.legendOptions.trafficType === 'dots') { path - .attr('marker-start', function(d) { - let sel = d === selected_link ? '-selected' : (d.cls === 'small' ? '-small' : ''); - if (d.highlighted) - sel = '-highlighted'; - return d.left ? `url(${urlPrefix}#start-arrow${sel})` : ''; - }) .attr('marker-end', function(d) { - let sel = d === selected_link ? '-selected' : (d.cls === 'small' ? '-small' : ''); - if (d.highlighted) - sel = '-highlighted'; - return d.right ? `url(${urlPrefix}#end-arrow${sel})` : ''; + return d.right ? `url(${urlPrefix}#end${d.markerId(selected_link, d.source)})` : ''; + }) + .attr('marker-start', function(d) { + return d.left ? `url(${urlPrefix}#start${d.markerId(selected_link, d.source)})` : ''; }); } // add new links. if a link with a new uid is found in the data, add a new path path.enter().append('svg:path') .attr('class', 'link') - .attr('marker-start', function(d) { - let sel = d === selected_link ? '-selected' : (d.cls === 'small' ? '-small' : ''); - return d.left ? `url(${urlPrefix}#start-arrow${sel})` : ''; - }) .attr('marker-end', function(d) { - let sel = d === selected_link ? '-selected' : (d.cls === 'small' ? '-small' : ''); - return d.right ? `url(${urlPrefix}#end-arrow${sel})` : ''; + return d.right ? `url(${urlPrefix}#end${d.markerId(selected_link, d.source)})` : null; + }) + .attr('marker-start', function(d) { + return d.left ? `url(${urlPrefix}#start${d.markerId(selected_link, d.source)})` : null; }) .classed('small', function(d) { return d.cls == 'small'; --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
