You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by GitBox <gi...@apache.org> on 2021/04/07 19:07:37 UTC
[GitHub] [airflow] ryanahamilton opened a new pull request #15257: Refactor/Cleanup Presentation of Graph Task and Path Highlighting
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:
users@infra.apache.org
[GitHub] [airflow] github-actions[bot] commented on pull request #15257: Refactor/Cleanup Presentation of Graph Task and Path Highlighting
Posted by GitBox <gi...@apache.org>.
github-actions[bot] commented on pull request #15257:
URL: https://github.com/apache/airflow/pull/15257#issuecomment-815185446
The PR is likely OK to be merged with just subset of tests for default Python and Database versions without running the full matrix of tests, because it does not modify the core of Airflow. If the committers decide that the full tests matrix is needed, they will add the label 'full tests needed'. Then you should rebase to the latest master or amend the last commit of the PR, and push it with --force-with-lease.
--
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:
users@infra.apache.org
[GitHub] [airflow] kaxil commented on a change in pull request #15257: Refactor/Cleanup Presentation of Graph Task and Path Highlighting
Posted by GitBox <gi...@apache.org>.
kaxil commented on a change in pull request #15257:
URL: https://github.com/apache/airflow/pull/15257#discussion_r609026437
##########
File path: 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",
Review comment:
We need to include https://github.com/d3/d3-shape/blob/master/LICENSE license file in
https://github.com/apache/airflow/tree/master/licenses and
https://github.com/apache/airflow/blob/019241be0c839ba32361679ffecd178c0506d10d/LICENSE#L246-L252
and
https://github.com/apache/airflow/blob/019241be0c839ba32361679ffecd178c0506d10d/setup.cfg#L27-L47
--
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:
users@infra.apache.org
[GitHub] [airflow] ryanahamilton commented on a change in pull request #15257: Refactor/Cleanup Presentation of Graph Task and Path Highlighting
Posted by GitBox <gi...@apache.org>.
ryanahamilton commented on a change in pull request #15257:
URL: https://github.com/apache/airflow/pull/15257#discussion_r609041495
##########
File path: 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",
Review comment:
Done!
--
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:
users@infra.apache.org
[GitHub] [airflow] kaxil commented on a change in pull request #15257: Refactor/Cleanup Presentation of Graph Task and Path Highlighting
Posted by GitBox <gi...@apache.org>.
kaxil commented on a change in pull request #15257:
URL: https://github.com/apache/airflow/pull/15257#discussion_r609026437
##########
File path: 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",
Review comment:
We need to include https://github.com/d3/d3-shape/blob/master/LICENSE license file in
https://github.com/apache/airflow/tree/master/licenses
--
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:
users@infra.apache.org
[GitHub] [airflow] kaxil merged pull request #15257: Refactor/Cleanup Presentation of Graph Task and Path Highlighting
Posted by GitBox <gi...@apache.org>.
kaxil merged pull request #15257:
URL: https://github.com/apache/airflow/pull/15257
--
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:
users@infra.apache.org
[GitHub] [airflow] kaxil commented on a change in pull request #15257: Refactor/Cleanup Presentation of Graph Task and Path Highlighting
Posted by GitBox <gi...@apache.org>.
kaxil commented on a change in pull request #15257:
URL: https://github.com/apache/airflow/pull/15257#discussion_r609021764
##########
File path: 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",
Review comment:
This one is a BSD license: https://github.com/d3/d3-shape/blob/master/LICENSE
Let me see if we need to add a license somewhere
--
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:
users@infra.apache.org
[GitHub] [airflow] kaxil commented on a change in pull request #15257: Refactor/Cleanup Presentation of Graph Task and Path Highlighting
Posted by GitBox <gi...@apache.org>.
kaxil commented on a change in pull request #15257:
URL: https://github.com/apache/airflow/pull/15257#discussion_r609026437
##########
File path: 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",
Review comment:
We need to include https://github.com/d3/d3-shape/blob/master/LICENSE license file in
https://github.com/apache/airflow/tree/master/licenses and
https://github.com/apache/airflow/blob/master/LICENSE#L246-L252
##########
File path: 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",
Review comment:
We need to include https://github.com/d3/d3-shape/blob/master/LICENSE license file in
https://github.com/apache/airflow/tree/master/licenses and
https://github.com/apache/airflow/blob/019241be0c839ba32361679ffecd178c0506d10d/LICENSE#L246-L252
--
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:
users@infra.apache.org