This is an automated email from the ASF dual-hosted git repository. nwang pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-heron.git
The following commit(s) were added to refs/heads/master by this push: new a25b087 Show an arrow head in logical plan (#3367) a25b087 is described below commit a25b087773d5348ecc9e42e7d69403056f61b45f Author: Ning Wang <wangnin...@gmail.com> AuthorDate: Mon Oct 21 10:44:36 2019 -0700 Show an arrow head in logical plan (#3367) --- heron/tools/ui/resources/static/js/logical-plan.js | 36 ++++++++++++++++++++-- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/heron/tools/ui/resources/static/js/logical-plan.js b/heron/tools/ui/resources/static/js/logical-plan.js index ac300c9..d74651a 100644 --- a/heron/tools/ui/resources/static/js/logical-plan.js +++ b/heron/tools/ui/resources/static/js/logical-plan.js @@ -250,6 +250,24 @@ var svg = outerSvg.append("g") .attr("tranform", "translate(" + padding.left + "," + padding.top + ")"); + var defs = svg.append("defs") + + // Arrow head + defs.append("marker") + .attr({ + "id": "arrow", + "viewBox": "0 -5 10 10", + "refX": 5, + "refY": 0, + "markerWidth": 2, + "markerHeight": 2, + "orient": "auto" + }) + .append("path") + .attr("d", "M0,-5L10,0L0,5") + .attr("class","arrowHead") + .style("fill", linestyle.color); + spoutsArr = []; boltsArr = []; @@ -363,6 +381,8 @@ .attr("class", "topnode") .style("fill", "black"); + var compCircleRadius = 17; + // Links node.each(function (n) { d3.select(this) @@ -371,6 +391,7 @@ .enter() .append("path") .attr('class', 'link') + .attr("marker-end", "url(#arrow)") .attr("stroke-width", linestyle.boldwidth) .attr("stroke", linestyle.color) .attr("fill", "none") @@ -378,7 +399,16 @@ var p0 = edge.source; var p3 = edge.target; var m = (p0.x + p3.x) / 2; - var p = [p0, {x: m, y: p0.y}, {x: m, y: p3.y}, p3]; + var p0x = p0.x + compCircleRadius; + var p0y = p0.y; + var p3x = p3.x - compCircleRadius; + var p3y = p3.y; + var p = [ + {x: p0x, y: p0y}, + {x: m, y: p0y}, + {x: m, y: p3y}, + {x: p3x, y: p3.y} + ]; return "M" + p[0].x + " " + p[0].y + "C" + p[1].x + " " + p[1].y + " " + p[2].x + " " + p[2].y + @@ -400,7 +430,7 @@ .attr('class', 'background') .attr("r", function (d) { if (d.isReal) { - return d.r = 17; + return d.r = compCircleRadius; } return d.r = 0; }) @@ -410,7 +440,7 @@ .attr("class", "node") .attr("r", function (d) { if (d.isReal) { - return d.r = 15; + return d.r = compCircleRadius - 2; } return d.r = 0; })