You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by bo...@apache.org on 2016/06/29 09:01:16 UTC
incubator-airflow git commit: [AIRFLOW-189] Highlighting of
Parent/Child nodes in Graphs
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 <wi...@users.noreply.github.com>
Authored: Wed Jun 29 11:01:11 2016 +0200
Committer: Bolke de Bruin <bo...@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) {