You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@heron.apache.org by nw...@apache.org on 2019/01/14 21:36:52 UTC
[incubator-heron] branch master updated: Add tooltip for component
connections (#3155)
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 1b00029 Add tooltip for component connections (#3155)
1b00029 is described below
commit 1b00029061ecb94a0134ac6bf0a171a3a7866ab7
Author: Ning Wang <nw...@twitter.com>
AuthorDate: Mon Jan 14 13:36:46 2019 -0800
Add tooltip for component connections (#3155)
---
heron/tools/ui/resources/static/js/logical-plan.js | 34 +++++++++++++++++++---
.../tools/ui/resources/static/js/physical-plan.js | 4 ---
.../ui/resources/static/js/stat-trendlines.js | 1 -
heron/tools/ui/resources/templates/topology.html | 2 +-
4 files changed, 31 insertions(+), 10 deletions(-)
diff --git a/heron/tools/ui/resources/static/js/logical-plan.js b/heron/tools/ui/resources/static/js/logical-plan.js
index e5cb531..aa68ff2 100644
--- a/heron/tools/ui/resources/static/js/logical-plan.js
+++ b/heron/tools/ui/resources/static/js/logical-plan.js
@@ -264,7 +264,8 @@
for (var i in topology.bolts) {
boltsArr.push({
"name": i,
- "inputComponents": topology.bolts[i]["inputComponents"]
+ "inputComponents": topology.bolts[i]["inputComponents"],
+ "inputStreams": topology.bolts[i]["inputs"]
});
}
@@ -274,9 +275,18 @@
for (var b in boltsArr) {
for (w in nodes) {
if (boltsArr[b].inputComponents.indexOf(nodes[w].name) >= 0) {
+ // Found that node[w] is upstream of boltsArr[b], build a link
+ var streams = []
+ for (i in boltsArr[b].inputComponents) {
+ if (boltsArr[b].inputComponents[i] == nodes[w].name) {
+ streams.push(boltsArr[b].inputStreams[i].stream_name
+ + ":" + boltsArr[b].inputStreams[i].grouping);
+ }
+ }
links.push({
"source": nodes[w],
- "target": boltsArr[b]
+ "target": boltsArr[b],
+ "streams": streams.sort().join("<br>")
});
}
}
@@ -334,6 +344,14 @@
outerSvg.attr('height', (yRange[1] - yRange[0]) + padding.top + padding.bottom);
svg.attr('transform', 'translate(' + padding.left + ',' + (padding.top - yRange[0]) + ')')
+ var connection_tip = d3.tip()
+ .attr('class', 'd3-tip main text-center connection')
+ .offset([10, 0])
+ .direction('s')
+ .html(function (d) {
+ return d.streams;
+ });
+
var node = svg.selectAll(".topnode")
.data(nodes)
.enter()
@@ -341,6 +359,7 @@
.attr("class", "topnode")
.style("fill", "black");
+ // Links
node.each(function (n) {
d3.select(this)
.selectAll(".link")
@@ -348,7 +367,7 @@
.enter()
.append("path")
.attr('class', 'link')
- .attr("stroke-width", linestyle.width)
+ .attr("stroke-width", linestyle.boldwidth)
.attr("stroke", linestyle.color)
.attr("fill", "none")
.attr("d", function (edge) {
@@ -360,9 +379,12 @@
"C" + p[1].x + " " + p[1].y +
" " + p[2].x + " " + p[2].y +
" " + p[3].x + " " + p[3].y;
- });
+ })
+ .on('mouseover', connection_tip.show)
+ .on('mouseout', connection_tip.hide);
});
+ // Component
node.append("circle")
.attr('class', 'background')
.attr("cx", function (d) { return d.x; })
@@ -397,6 +419,7 @@
.on("mouseover", planController.logicalComponentHoverOver)
.on("mouseout", planController.logicalComponentHoverOut);
+ // Component name
node.append("text")
.attr("id", function(d) { return "text+" + d.name; })
.attr("x", function (d) { return d.cx; })
@@ -410,6 +433,9 @@
}
return "";
});
+
+
+ svg.call(connection_tip);
}
global.drawLogicalPlan = drawLogicalPlan;
diff --git a/heron/tools/ui/resources/static/js/physical-plan.js b/heron/tools/ui/resources/static/js/physical-plan.js
index 0a14216..04443fa 100644
--- a/heron/tools/ui/resources/static/js/physical-plan.js
+++ b/heron/tools/ui/resources/static/js/physical-plan.js
@@ -184,10 +184,6 @@
planController.physicalComponentClicked(d);
});
-
-
- // put tooltip on top of everything
- d3.selectAll('.d3-tip.main').remove();
svg.call(tip);
}
diff --git a/heron/tools/ui/resources/static/js/stat-trendlines.js b/heron/tools/ui/resources/static/js/stat-trendlines.js
index b9f59e8..b1569c1 100644
--- a/heron/tools/ui/resources/static/js/stat-trendlines.js
+++ b/heron/tools/ui/resources/static/js/stat-trendlines.js
@@ -47,7 +47,6 @@ function StatTrendlines(baseUrl, cluster, environ, toponame, physicalPlan, logic
var svg = outerSvg.append('g');
var svgTop = outerSvg.append('g');
- d3.selectAll('.d3-tip.instance').remove();
var tip = d3.tip()
.attr('class', 'd3-tip instance text-center')
.offset([-8, 0])
diff --git a/heron/tools/ui/resources/templates/topology.html b/heron/tools/ui/resources/templates/topology.html
index 3e39f3f..08bac44 100644
--- a/heron/tools/ui/resources/templates/topology.html
+++ b/heron/tools/ui/resources/templates/topology.html
@@ -192,7 +192,7 @@ under the License.
return hsl.toString();
});
- var linestyle = {color:'#888', width:'4px'};
+ var linestyle = {color:'#888', width:'3px', boldwidth: '6px'};
window.onload = function() {