ryanahamilton opened a new pull request #15257: URL: https://github.com/apache/airflow/pull/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 #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. | Before | After | |---|---| | <img width="1164" alt="Image 2021-04-07 at 1 52 54 PM" src="https://user-images.githubusercontent.com/3267/113912148-d0e68400-97a8-11eb-9d84-b55c6966b847.png";> | <img width="1166" alt="Image 2021-04-07 at 1 54 31 PM" src="https://user-images.githubusercontent.com/3267/113912141-cf1cc080-97a8-11eb-817d-2665426ba20b.png";> | - 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. | Before | After | |---|---| | <img width="488" alt="Image 2021-04-07 at 2 11 46 PM" src="https://user-images.githubusercontent.com/3267/113914160-38053800-97ab-11eb-99d2-4ec1aa190642.png";> | <img width="386" alt="Image 2021-04-07 at 2 11 15 PM" src="https://user-images.githubusercontent.com/3267/113914177-3f2c4600-97ab-11eb-9da5-2516f369ab1a.png";> | - 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. | Before | After | |---|---| |  |  | - 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. | Before | After | |---|---| |  |  | ### 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 | Before | After | |---|---| |  |  | -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected]
![https://user-images.githubusercontent.com/3267/113912148-d0e68400-97a8-11eb-9d84-b55c6966b847.png"](https://user-images.githubusercontent.com/3267/113912148-d0e68400-97a8-11eb-9d84-b55c6966b847.png"){kind=link}
![https://user-images.githubusercontent.com/3267/113912141-cf1cc080-97a8-11eb-817d-2665426ba20b.png"](https://user-images.githubusercontent.com/3267/113912141-cf1cc080-97a8-11eb-817d-2665426ba20b.png"){kind=link}
![https://user-images.githubusercontent.com/3267/113914160-38053800-97ab-11eb-99d2-4ec1aa190642.png"](https://user-images.githubusercontent.com/3267/113914160-38053800-97ab-11eb-99d2-4ec1aa190642.png"){kind=link}
![https://user-images.githubusercontent.com/3267/113914177-3f2c4600-97ab-11eb-9da5-2516f369ab1a.png"](https://user-images.githubusercontent.com/3267/113914177-3f2c4600-97ab-11eb-9da5-2516f369ab1a.png"){kind=link}
