Refactor/Cleanup Presentation of Graph Task and Path Highlighting (ap…

…ache#15257)

This is a collection of related updates to improve the overall user experience of the Graph view.

I tested these updates across varying DAG shapes/sizes including Task Groups. This testing also covered the hovering/clicking of the task status legend and the search filter functionality.

### General
- Simplifies JavaScript by removing the redundant inline styling for highlighting tasks and paths between them. This is accomplished by pairing a `data-highlight` attribute with CSS keyed off of it.
- I tried not to go overboard (but couldn't help myself in a few places) on the syntax cleanup as that will be handled in the migration to an external JavaScript file for apache#14115.
- Changes the "edge" (lines between tasks) curve to be smooth instead of angled straight lines. Single, smooth lines are easier for eyes to follow the path of than multiple jointed lines. This was accomplished by utilizing the `d3-shape` library.


- Slightly increases the vertical node separation (`nodeSep`) to make the graphs feel a little less crowded. This also reduces the amount that the task nodes overlap with the edges.

- Fixed an unreported bug when you hover or click on "no_status" in the status legend at the top, the correlating tasks would not highlight. 


- Updated the Graph UI screenshot in the docs to reflect the changes in this PR.

### Task and Path highlighting
- Removes the varying stroke (border) weights of tasks when highlighting/hovering. This interaction isn't necessary given the non-highlighted tasks fade out. It (subjectively) makes for a smoother transition for only the stroke color to change instead of the weight as well.
- Improves the styling of the "path highlighting". Instead of styling the downstream, hovered, and upstream tasks with 3 different border colors, I've given them all the same "highlighted" color and have also given the edges that connect them a similar styling. This simplifies the pattern and visually highlights the actual path between the tasks. The upstream and downstream directions can still easily be deciphered by the edge arrows.


### Fixes tooltip jank

- Prevents the jumping of the tooltip position that occurs when moving your cursor within the task node
- Positions the tooltip slightly higher so it no longer overlaps with the task node's border
- Adds a very slight opacity to the tooltip background since it can cover up relevant paths between the hovered task node

LICENSE

@@ -250,3 +250,4 @@ The following components are provided under the BSD 3-Clause license. See projec
 The text of each license is also included at licenses/LICENSE-[project].txt.
 
     (BSD 3 License) d3 v5.15.0 (https://d3js.org)
+    (BSD 3 License) d3-shape v2.1.0 (https://github.com/d3/d3-shape)

airflow/www/package.json

@@ -60,6 +60,7 @@
     "bootstrap-3-typeahead": "^4.0.2",
     "codemirror": "^5.59.1",
     "d3": "^3.4.4",
+    "d3-shape": "^2.1.0",
     "d3-tip": "^0.9.1",
     "dagre-d3": "^0.6.4",
     "datatables.net": "^1.10.23",

airflow/www/static/css/graph.css

@@ -25,6 +25,11 @@ svg {
   stroke: #51504f;
   stroke-width: 1px;
   fill: #fff;
+  transition: stroke 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+
+.node rect[data-highlight="highlight"] {
+  stroke: #017cee !important;
 }
 
 .edgeLabel rect {
@@ -34,6 +39,28 @@ svg {
 .edgePath {
   stroke: #51504f;
   stroke-width: 1px;
+  fill: none;
+  transition: stroke 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+
+.edgePath[data-highlight="fade"] {
+  opacity: 0.2 !important;
+}
+
+.edgePath[data-highlight="highlight"] {
+  stroke: #017cee;
+}
+
+.edgePath .arrowhead {
+  stroke: none !important;
+  fill: #51504f;
+  stroke-width: 0 !important;
+  transition: fill 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+
+.edgePath[data-highlight="highlight"] .arrowhead {
+  stroke: #017cee;
+  fill: #017cee;
 }
 
 g.cluster rect {
@@ -44,21 +71,30 @@ g.cluster rect {
   opacity: 0.5;
 }
 
+g.node {
+  transition: opacity 0.2s ease-in-out;
+}
+
+g.node[data-highlight="fade"] {
+  opacity: 0.2 !important;
+}
+
 g.node rect {
   stroke: #fff;
-  stroke-width: 3px;
+  stroke-width: 1.5px;
   cursor: pointer;
 }
 
 g.node circle {
   stroke: #51504f;
-  stroke-width: 3px;
+  stroke-width: 1.5px;
   cursor: pointer;
 }
 
 g.node .label {
-  font-size: inherit;
+  font-size: 0.7em;
   font-weight: normal;
+  pointer-events: none;
 }
 
 g.node text {

airflow/www/static/css/main.css

@@ -160,12 +160,12 @@ span.skipped {
 }
 
 .d3-tip {
-  background: #000;
+  background: rgba(0, 0, 0, 0.85);
   color: #fff;
-  border: solid;
-  border-width: 1px;
+  border: 0;
   border-radius: 5px;
   padding: 10px;
+  margin-top: -4px;
 }
 
 input#execution_date {
@@ -271,6 +271,10 @@ body div.panel {
   font-size: 11px;
 }
 
+.legend-item--interactive {
+  cursor: pointer;
+}
+
 .legend-item--no-border {
   border-color: transparent;
   padding: 0;