OscarLigthart opened a new pull request, #57237:
URL: https://github.com/apache/airflow/pull/57237
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<!--
Thank you for contributing! Please make sure that your code changes
are covered with tests. And in case of new features or big changes
remember to adjust the documentation.
Feel free to ping committers for the review!
In case of an existing issue, reference it using one of the following:
closes: #ISSUE
related: #ISSUE
How to write a good git commit message:
http://chris.beams.io/posts/git-commit/
-->
## Overview
We noticed that the lineage filter was missing in the Graph layout. At our
company, the DAGs get quite complex, and this was a beloved feature by our
users. In this PR, I try to have a crack at implementing it. I did my best to
ensure that it feels similar to the old button in Airflow 2 in terms of its
behaviour. However, since this functionality only applies to the Graph, I
decided to move the control panel into the graph.
## UI addition
See image:
<img width="1029" height="538" alt="image"
src="https://github.com/user-attachments/assets/1bcc2887-5b54-47c2-a280-b342f6ec216c";
/>
When dropping down, a user can select the same options as before:
<img width="1008" height="522" alt="image"
src="https://github.com/user-attachments/assets/31ef63c5-4892-48bf-8ae0-1bc64a6b6023";
/>
When selected, it shows at the top what filter is active:
<img width="1014" height="415" alt="image"
src="https://github.com/user-attachments/assets/961013a8-110c-4e5c-a1eb-74cd970a4792";
/>
From here, the user can navigate with the active filter. When reselecting
this filter dropdown on another task focus, the user gets the ability to take
this selected task as root task for the filter:
<img width="1007" height="439" alt="image"
src="https://github.com/user-attachments/assets/799ca7b0-97fd-4c7b-9d7c-958ac4036ca7";
/>
Please feel free to mess around with it!
Some notes from me on UX:
- I tried to make it feel natural, while also mimicking behaviour I saw in
Airflow 2, but very open to hear suggestions on improving UX.
- I use LocalStorage, but made it so that when a user selects a different
task while in the Gantt view, the filter is reset. This ensures that the user
cannot select a task outside of the filter. I believe it would also feel
unnatural if the filter is not reset when this action is taken.
## Note to reviewer
I did some React back in the day, but it's a bit rusty. I'm here to
contribute, but definitely also to learn. I'm also Dutch, so please feel free
to tell me in a very direct manner which parts make no sense at all 😂 .
## Related Issues
I believe this PR can contribute to resolving the below:
- #53044
But there are more functionalities listed there, that I left out of scope
for this PR.
## Testing
I am unsure what the procedure is for testing in the UI. I spun up Breeze
(love it btw, amazing tool) and clicked around there. Please advice on any
further testing procedures or reading materials.
<!-- Please keep an empty line above the dashes. -->
---
**^ Add meaningful description above**
Read the **[Pull Request
Guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#pull-request-guidelines)**
for more information.
In case of fundamental code changes, an Airflow Improvement Proposal
([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvement+Proposals))
is needed.
In case of a new dependency, check compliance with the [ASF 3rd Party
License Policy](https://www.apache.org/legal/resolved.html#category-x).
In case of backwards incompatible changes please leave a note in a
newsfragment file, named `{pr_number}.significant.rst` or
`{issue_number}.significant.rst`, in
[airflow-core/newsfragments](https://github.com/apache/airflow/tree/main/airflow-core/newsfragments).
--
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.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
