Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
withnale wants to merge 1 commit into from
Closed

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions airflow/www/templates/airflow/graph.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,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 }};
Expand All @@ -97,6 +102,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){
Expand All @@ -107,6 +113,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 %}
Expand Down Expand Up @@ -204,6 +232,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) {
Expand Down