You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2020/08/14 23:41:35 UTC
[airflow] 02/04: UI Graph View: Focus upstream / downstream task
dependencies on mouseover (#9303)
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
commit 12c00b640b63cfb687ba6c90c89797a36a1d8fc6
Author: dstandish <ds...@users.noreply.github.com>
AuthorDate: Thu Jul 30 01:44:13 2020 -0700
UI Graph View: Focus upstream / downstream task dependencies on mouseover (#9303)
* graph view mouseover task should increase stroke width of upstream / downstream
* mouseover should focus dependencies on mouseover in graph view
---
airflow/www_rbac/templates/airflow/graph.html | 32 +++++++++++++++++++++------
1 file changed, 25 insertions(+), 7 deletions(-)
diff --git a/airflow/www_rbac/templates/airflow/graph.html b/airflow/www_rbac/templates/airflow/graph.html
index 5fe326e..e794dc3 100644
--- a/airflow/www_rbac/templates/airflow/graph.html
+++ b/airflow/www_rbac/templates/airflow/graph.html
@@ -207,24 +207,42 @@
});
- function highlight_nodes(nodes, color) {
+ function highlight_nodes(nodes, color, stroke_width) {
nodes.forEach (function (nodeid) {
my_node = d3.select('[id="' + nodeid + '"]').node().parentNode;
- d3.select(my_node).selectAll("rect").style("stroke", color) ;
+ d3.select(my_node)
+ .selectAll("rect")
+ .style("stroke", color)
+ .style("stroke-width", stroke_width) ;
})
}
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)
-
+ highlight_nodes(g.predecessors(d), upstream_color, highlightStrokeWidth);
+ highlight_nodes(g.successors(d), downstream_color, highlightStrokeWidth)
+ adjacent_node_names = [d, ...g.predecessors(d), ...g.successors(d)]
+ d3.selectAll("g.nodes g.node")
+ .filter(x => !adjacent_node_names.includes(x))
+ .style("opacity", 0.2);
+ adjacent_edges = g.nodeEdges(d)
+ d3.selectAll("g.edgePath")[0]
+ .filter(x => !adjacent_edges.includes(x.__data__))
+ .forEach(function(x) {
+ d3.select(x).style('opacity', .2)
+ })
});
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)
+ highlight_nodes(g.predecessors(d), null, initialStrokeWidth)
+ highlight_nodes(g.successors(d), null, initialStrokeWidth)
+ d3.selectAll("g.node")
+ .style("opacity", 1);
+ d3.selectAll("g.node rect")
+ .style("stroke-width", initialStrokeWidth);
+ d3.selectAll("g.edgePath")
+ .style("opacity", 1);
});