[airflow] 39/47: UI Graph View: Focus upstream / downstream task dependencies on mouseover (#9303)

[ka...@apache.org]

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 9dcd69f2a3471496f7277c94749f53748dd25a26
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);
     });