Add tooltip for component connections (#3155)

apache · Jan 14, 2019 · 1b00029 · 1b00029
1 parent 94de4fa
commit 1b00029
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git 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,21 +344,30 @@
     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()
                   .append("g")
                   .attr("class", "topnode")
                   .style("fill", "black");
 
+    // Links
     node.each(function (n) {
       d3.select(this)
         .selectAll(".link")
         .data(n.edges)
         .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
@@ -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
@@ -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
@@ -192,7 +192,7 @@ <h4 class="space-above">
     return hsl.toString();
   });
 
-  var linestyle = {color:'#888', width:'4px'};
+  var linestyle = {color:'#888', width:'3px', boldwidth: '6px'};
 
   window.onload = function() {