[airflow] branch v1-10-test updated: [AIRFLOW-4357] Fix SVG tooltip positioning with custom scripting (#8269)

[kaxilnaik]

This is an automated email from the ASF dual-hosted git repository.

kaxilnaik pushed a commit to branch v1-10-test
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/v1-10-test by this push:
     new d65053c  [AIRFLOW-4357] Fix SVG tooltip positioning with custom 
scripting (#8269)
d65053c is described below

commit d65053cc29aef562bf8f16555ded878272407870
Author: Ryan Hamilton <r...@ryanahamilton.com>
AuthorDate: Thu Apr 23 14:38:50 2020 -0400

    [AIRFLOW-4357] Fix SVG tooltip positioning with custom scripting (#8269)
    
    (cherry-picked from eb7255f)
---
 airflow/www_rbac/templates/airflow/dags.html | 46 ++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 10 deletions(-)

diff --git a/airflow/www_rbac/templates/airflow/dags.html 
b/airflow/www_rbac/templates/airflow/dags.html
index 91ac604..f93b65b 100644
--- a/airflow/www_rbac/templates/airflow/dags.html
+++ b/airflow/www_rbac/templates/airflow/dags.html
@@ -224,6 +224,10 @@
       </div>
     </div>
   </div>
+  <div id="svg-tooltip" class="tooltip top" style="position: fixed; display: 
none; opacity: 1">
+    <div class="tooltip-arrow"></div>
+    <div class="tooltip-inner"></div>
+  </div>
 {% endblock %}
 
 {% block tail %}
@@ -393,6 +397,8 @@
           .text(function(d){ return d.count > 0 ? d.count : ''; });
 
         g.append('circle')
+          .attr('id', function(d) {return 'run-' + dag_id.replace(/\./g, '_') 
+ d.state || 'none'})
+          .attr('class', 'has-svg-tooltip')
           .attr('stroke-width', function(d) {
             if (d.count > 0)
               return stroke_width;
@@ -441,11 +447,6 @@
       }
       $("#pause_header").tooltip();
       $("#statuses_info").tooltip();
-
-      $("circle").tooltip({
-        html: true,
-        container: "body",
-      });
     }
 
     function taskStatsHandler(error, json) {
@@ -473,6 +474,8 @@
           .text(function(d){ return d.count > 0 ? d.count : ''; });
 
         g.append('circle')
+          .attr('id', function(d) {return 'task-' + dag_id.replace(/\./g, '_') 
+ d.state || 'none'})
+          .attr('class', 'has-svg-tooltip')
           .attr('stroke-width', function(d) {
             if (d.count > 0)
               return stroke_width;
@@ -521,11 +524,6 @@
       }
       $("#pause_header").tooltip();
       $("#statuses_info").tooltip();
-
-      $("circle").tooltip({
-        html: true,
-        container: "body",
-      });
     }
 
     if (encoded_dag_ids.has('dag_ids')) {
@@ -548,5 +546,33 @@
       $(".loading-task-stats").remove();
       $(".loading-dag-stats").remove();
     }
+
+    function showSvgTooltip(text, circ) {
+      var tip = $('#svg-tooltip');
+      tip.children('.tooltip-inner').text(text);
+      var centeringOffset = tip.width() / 2;
+      tip.css({
+        "display": "block",
+        "left": circ.left + 12.5 - centeringOffset + 'px',// 12.5 == half of 
circle width
+        "top": circ.top - 25 + 'px'// 25 == position above circle
+      });
+    }
+
+    function hideSvgTooltip() {
+      $('#svg-tooltip').css('display', 'none');
+    }
+
+    $(window).on('load', function() {
+      $('body').on('mouseover', '.has-svg-tooltip', function(e) {
+        var elem = e.target;
+        var text = elem.getAttribute('title');
+        var circ = elem.getBoundingClientRect();
+        showSvgTooltip(text, circ);
+      });
+
+      $('body').on('mouseout', '.has-svg-tooltip', function(e) {
+        hideSvgTooltip();
+      });
+    });
   </script>
 {% endblock %}