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 <[email protected]> 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); });
