airflow-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bo...@apache.org
Subject incubator-airflow git commit: [AIRFLOW-189] Highlighting of Parent/Child nodes in Graphs
Date Wed, 29 Jun 2016 09:01:16 GMT
Repository: incubator-airflow
Updated Branches:
  refs/heads/master 5b5c3a116 -> 0923356a5


[AIRFLOW-189] Highlighting of Parent/Child nodes in Graphs

Closes #1554 from withnale/graph_highlight


Project: http://git-wip-us.apache.org/repos/asf/incubator-airflow/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-airflow/commit/0923356a
Tree: http://git-wip-us.apache.org/repos/asf/incubator-airflow/tree/0923356a
Diff: http://git-wip-us.apache.org/repos/asf/incubator-airflow/diff/0923356a

Branch: refs/heads/master
Commit: 0923356a5e18f9767aceccaa02c29144552bf849
Parents: 5b5c3a1
Author: withnale <withnale@users.noreply.github.com>
Authored: Wed Jun 29 11:01:11 2016 +0200
Committer: Bolke de Bruin <bolke@xs4all.nl>
Committed: Wed Jun 29 11:01:11 2016 +0200

----------------------------------------------------------------------
 airflow/www/templates/airflow/graph.html | 41 +++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-airflow/blob/0923356a/airflow/www/templates/airflow/graph.html
----------------------------------------------------------------------
diff --git a/airflow/www/templates/airflow/graph.html b/airflow/www/templates/airflow/graph.html
index 8ddf494..24fc508 100644
--- a/airflow/www/templates/airflow/graph.html
+++ b/airflow/www/templates/airflow/graph.html
@@ -98,6 +98,11 @@
     <script src="{{ url_for('static', filename='d3.v3.min.js') }}"></script>
     <script src="{{ url_for('static', filename='dagre-d3.js') }}"></script>
     <script>
+
+    var highlight_color = "#000000";
+    var upstream_color = "#2020A0";
+    var downstream_color = "#0000FF";
+
     var nodes = {{ nodes|safe }};
     var edges = {{ edges|safe }};
     var tasks = {{ tasks|safe }};
@@ -114,6 +119,7 @@
     var layout = dagreD3.layout().rankDir(arrange).nodeSep(15).rankSep(15);
     var renderer = new dagreD3.Renderer();
     renderer.layout(layout).run(g, d3.select("#dig"));
+    inject_node_ids(tasks);
     update_nodes_states(task_instances);
 
     d3.selectAll("g.node").on("click", function(d){
@@ -124,6 +130,28 @@
             call_modal(d, execution_date);
     });
 
+
+    function highlight_nodes(nodes, color) {
+        nodes.forEach (function (nodeid) {
+            my_node = d3.select('#' + nodeid + ' rect');
+            my_node.style("stroke", color) ;
+        })
+    }
+
+    d3.selectAll("g.node").on("mouseover", function(d){
+        d3.select(this).selectAll("rect").style("stroke", highlight_color) ;
+        highlight_nodes(g.predecessors(d), upstream_color)
+        highlight_nodes(g.successors(d), downstream_color)
+
+    });
+
+    d3.selectAll("g.node").on("mouseout", function(d){
+        d3.select(this).selectAll("rect").style("stroke", null) ;
+        highlight_nodes(g.predecessors(d), null)
+        highlight_nodes(g.successors(d), null)
+    });
+
+
     {% if blur %}
     d3.selectAll("text").attr("class", "blur");
     {% endif %}
@@ -221,6 +249,19 @@
         }
     });
 
+
+    // Injecting ids to be used for parent/child highlighting
+    // Separated from update_node_states since it must work even
+    // when there is no valid task instance available
+    function inject_node_ids(tasks) {
+        $.each(tasks, function(task_id, task) {
+            $('tspan').filter(function(index) { return $(this).text() === task_id; })
+                    .parent().parent().parent()
+                    .attr("id", task_id);
+        });
+    }
+
+
     // Assigning css classes based on state to nodes
     function update_nodes_states(task_instances) {
         $.each(task_instances, function(task_id, ti) {


Mime
View raw message