[AIRFLOW-5543] Fix tooltip disappears in tree and graph view (#6174)

when page scrolls

Author: pingzh

airflow/www/static/css/main.css

@@ -105,6 +105,16 @@ span.skipped{
     text-align:left !important;
     font-size: 12px;
 }
+
+.d3-tip {
+  background: black;
+  color: white;
+  border: solid;
+  border-width: 1px;
+  border-radius: 5px;
+  padding: 10px;
+}
+
 input#execution_date {
     margin-bottom: 0px;
 }

airflow/www/static/js/graph.js

@@ -29,8 +29,7 @@ function update_nodes_states(task_instances) {
       .parent().parent().parent().parent()
       .attr("class", "node enter " + (ti.state ? ti.state : "no_status"))
       .attr("data-toggle", "tooltip")
-      .attr("data-original-title", function (d) {
-        // Tooltip
+      .on("mouseover", function (d) {
         const task = tasks[task_id];
         let tt = "";
         if(ti.task_id != undefined) {
@@ -44,8 +43,9 @@ function update_nodes_states(task_instances) {
         tt += "Duration: " + escapeHtml(convertSecsToHumanReadable(ti.duration)) + "<br>";
         tt += "Started: " + escapeHtml(ti.start_date) + "<br>";
         tt += generateTooltipDateTime(ti.start_date, ti.end_date, dagTZ); // dagTZ has been defined in dag.html
-        return tt;
-      });
+        taskTip.show(tt, this); // taskTip is defined in graph.html
+      })
+      .on('mouseout', taskTip.hide);
   });
 }
 

airflow/www/templates/airflow/graph.html

@@ -97,6 +97,7 @@
 
 <script src="{{ url_for_asset('d3.min.js') }}"></script>
 <script src="{{ url_for_asset('dagre-d3.min.js') }}"></script>
+<script src="{{ url_for_asset('d3-tip.js') }}"></script>
 <script>
 
     var highlight_color = "#000000";
@@ -128,6 +129,11 @@
         'queued': false,
         'no_status': false
     };
+    const taskTip = d3.tip()
+      .attr('class', 'tooltip d3-tip')
+      .html(function(toolTipHtml) {
+        return toolTipHtml;
+      });
 
     // Preparation of DagreD3 data structures
     var g = new dagreD3.graphlib.Graph().setGraph({
@@ -152,6 +158,7 @@
       innerSvg = d3.select("svg g");
 
     innerSvg.call(render, g);
+    innerSvg.call(taskTip);
 
     function setUpZoomSupport() {
       // Set up zoom support for Graph
@@ -207,11 +214,6 @@
     d3.selectAll("text").attr("class", "blur");
     {% endif %}
 
-    $("g.node").tooltip({
-      html: true,
-      container: "body",
-    });
-
     d3.selectAll("div.legend_item.state")
         .style("cursor", "pointer")
         .on("mouseover", function(){

airflow/www/templates/airflow/tree.html

@@ -79,6 +79,7 @@
 {% block tail %}
 {{ super() }}
 <script src="{{ url_for_asset('d3.min.js') }}"></script>
+<script src="{{ url_for_asset('d3-tip.js') }}"></script>
 <script>
 $('span.status_square').tooltip({html: true});
 
@@ -108,6 +109,12 @@
 var diagonal = d3.svg.diagonal()
     .projection(function(d) { return [d.y, d.x]; });
 
+const taskTip = d3.tip()
+  .attr('class', 'tooltip d3-tip')
+  .html(function(toolTipHtml) {
+    return toolTipHtml;
+});
+
 var svg = d3.select("svg")
     //.attr("width", width + margin.left + margin.right)
   .append("g")
@@ -145,7 +152,7 @@
   )
   .selectAll("text")
   .attr("transform", "rotate(-30)")
-  .style("text-anchor", "start");
+  .style("text-anchor", "start").call(taskTip);
 
   function node_class(d) {
         var sclass = "node";
@@ -199,7 +206,7 @@
       .attr("r", (barHeight / 3))
       .attr("class", "task")
       .attr("data-toggle", "tooltip")
-      .attr("title", function(d){
+      .on("mouseover", function(d) {
         var tt = "";
         if (d.operator != undefined) {
           if (d.operator != undefined) {
@@ -212,7 +219,15 @@
           tt += "start_date: " + escapeHtml(d.start_date) + "<br/>";
           tt += "end_date: " + escapeHtml(d.end_date) + "<br/>";
         }
-        return tt;
+        taskTip.direction('e')
+        taskTip.show(tt, this)
+        d3.select(this).transition()
+         .style('stroke-width', 3)
+      })
+      .on('mouseout', function(d, i) {
+        taskTip.hide(d)
+        d3.select(this).transition()
+         .style("stroke-width", function(d) {return (d.run_id != undefined)? "2": "1"})
       })
       .attr("height", barHeight)
       .attr("width", function(d, i) {return barWidth - d.y;})
@@ -251,7 +266,7 @@
       .style("shape-rendering", function(d) {return (d.run_id != undefined)? "auto": "crispEdges"})
       .style("stroke-width", function(d) {return (d.run_id != undefined)? "2": "1"})
       .style("stroke-opacity", function(d) {return d.external_trigger ? "0": "1"})
-      .attr("title", function(d){
+      .on("mouseover", function(d){
         var s = "";
         if (d.task_id != undefined ) {
           s += "Task_id: " + escapeHtml(d.task_id) + "<br>";
@@ -271,20 +286,20 @@
           }
           s += "State: " + escapeHtml(d.state) + "<br>";
         }
-        return s;
+        taskTip.direction('n')
+        taskTip.show(s, this)
+        d3.select(this).transition()
+         .style('stroke-width', 3)
+      })
+      .on('mouseout', function(d,i) {
+        taskTip.hide(d)
+        d3.select(this).transition()
+         .style("stroke-width", function(d) {return (d.run_id != undefined)? "2": "1"})
       })
       .attr('x', function(d, i) {return (i*(square_size+square_spacing));})
       .attr('y', -square_size/2)
       .attr('width', 10)
-      .attr('height', 10)
-      .on('mouseover', function(d,i) {
-        d3.select(this).transition()
-          .style('stroke-width', 3)
-       })
-      .on('mouseout', function(d,i) {
-        d3.select(this).transition()
-          .style("stroke-width", function(d) {return (d.run_id != undefined)? "2": "1"})
-       }) ;
+      .attr('height', 10);
 
 
   // Transition nodes to their new position.
@@ -344,17 +359,6 @@
   $('#loading').remove()
 }
 
-function set_tooltip(){
-  $("rect.state").tooltip({
-    html: true,
-    container: "body",
-  });
-  $("circle.task").tooltip({
-    html: true,
-    container: "body",
-  });
-
-}
 function toggles(clicked_d) {
     // Collapse nodes with the same task id
     d3.selectAll("[task_id='" + clicked_d.name + "']").each(function(d){
@@ -374,7 +378,6 @@
         clicked_d.children = null;
     }
     update(clicked_d);
-    set_tooltip();
 }
 // Toggle children on click.
 function click(d) {
@@ -387,10 +390,8 @@
       d._children = null;
     }
     update(d);
-    set_tooltip();
   }
 }
-set_tooltip();
 
 </script>
 {% endblock %}