Skip to content

Feature(UI) : Add upstream/downstream task filtering in Graph & Grid views (#53458) #54722

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
Prasanth345 wants to merge 6 commits into from
Closed

Feature(UI) : Add upstream/downstream task filtering in Graph & Grid views (#53458) #54722

Prasanth345 wants to merge 6 commits into from

Conversation

@Prasanth345
Copy link
Contributor

@Prasanth345 Prasanth345 commented Aug 20, 2025 •
edited
Loading

Summary

This PR addresses #53458 by introducing task filtering options in both Graph and Grid views to improve task visualization and debugging.

Users can now filter the DAG to display:

  • Only upstream tasks
  • Only downstream tasks
  • Both upstream & downstream tasks
  • All tasks (default)

Implementation Details

  • Graph View
    • Added support for filtering visible nodes and edges based on selected task.
    • Users can toggle upstream, downstream, or both via a dropdown.
  • Grid View
    • Built adjacency maps (upstreamMap and downstreamMap) from DAG structure data.
    • Implemented DFS traversal to collect upstream and downstream task chains.
    • Introduced visibleIds logic to selectively show tasks based on filter selection.
    • Ensured group nodes remain visible to preserve layout.
  • UI Enhancements
    • Added a Filter dropdown with options:
      • Filter Dag by task (label for "all")
      • Only upstream
      • Only downstream
      • Both upstream & downstream
    • Improved ActionButton so display text (buttonLabel) can differ from dropdown item label.

Testing

  • Verified filtering in both Graph and Grid views.
  • Confirmed correct upstream/downstream traversal.
  • Checked that "all" restores full DAG display with button label as "Filter Dag by task".

Why

This improves DAG observability by letting users focus on relevant upstream/downstream chains. It is especially useful for large DAGs where visual noise makes debugging difficult.

Related Issue

Closes #53458

Below find the screenshots

Before filter added

Screenshot from 2025-08-20 15-42-32 Screenshot from 2025-08-20 15-42-12

After filter added

Screenshot from 2025-08-20 15-47-20 Screenshot from 2025-08-20 15-47-34 Screenshot from 2025-08-20 15-47-52 Screenshot from 2025-08-20 15-48-12 Screenshot from 2025-08-20 15-48-20 Screenshot from 2025-08-20 15-48-45 Screenshot from 2025-08-20 15-48-52 Screenshot from 2025-08-20 15-49-11 Screenshot from 2025-08-20 15-49-16 Screenshot from 2025-08-20 15-49-37 Screenshot from 2025-08-20 15-49-43

@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Aug 20, 2025
@Prasanth345 Prasanth345 force-pushed the feature-53458-task-filter-dropdown branch from 392fc8d to d211557 Compare August 20, 2025 12:31
@bbovenzi
Copy link
Contributor

bbovenzi commented Aug 26, 2025

Thanks for adding this!

I think we need to make it more obvious when the grid+graph are filtered. Especially if I filter on one task but then click on a different task. Perhaps the filter button should be moved next to the "Options" dropdown?

Also, we should probably filter the Tasks list while we're at it: #54163

bbovenzi
bbovenzi requested changes Aug 26, 2025
View reviewed changes
@r-richmond
Copy link
Contributor

r-richmond commented Aug 28, 2025

I'm very excited to see this, thank you for adding it. I'm not a front end person so I'll leave the review to Brent

@r-richmond
Copy link
Contributor

r-richmond commented Sep 11, 2025

Just FYI 3.1 is in the process of being prepared. If this PR isn't merged/completed by the end of the week it will miss 3.1 and we will have to wait for the next release.

@Prasanth345 Prasanth345 force-pushed the feature-53458-task-filter-dropdown branch from cbd1654 to 7a6e1f7 Compare September 11, 2025 18:09
bbovenzi
bbovenzi reviewed Sep 11, 2025
View reviewed changes
airflow-core/src/airflow/ui/src/components/FilterTaskButton.tsx
/>
{isActiveForThisTask ? (
<Box
bg="blue.500"
Copy link
Contributor

@bbovenzi bbovenzi Sep 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should use a semantic token here instead of hard coding blue.500

airflow-core/src/airflow/ui/public/i18n/locales/en/components.json
Comment on lines +97 to +104
"taskFilter": {
"action_prefix": "Filter",
"all": "All",
"both": "Both upstream & downstream",
"button_all": "Filter DAG by task",
"downstream": "Only downstream",
"upstream": "Only upstream"
},
Copy link
Contributor

@bbovenzi bbovenzi Sep 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is after translation freeze. You should post this PR in the i18n channel of the Airflow Slack.

airflow-core/src/airflow/ui/src/pages/TaskInstance/Header.tsx
taskInstance={taskInstance}
withText={containerWidth > 700}
/>
<FilterTaskButton withText={containerWidth > 700} />
Copy link
Contributor

@bbovenzi bbovenzi Sep 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should change this hardcode value now that there are so many buttons. Do you mind making it const HEADER_BREAKPOINT = 1000;?

Lee-W
Lee-W reviewed Sep 11, 2025
View reviewed changes
airflow-core/src/airflow/ui/public/i18n/locales/en/components.json
"action_prefix": "Filter",
"all": "All",
"both": "Both upstream & downstream",
"button_all": "Filter DAG by task",
Copy link
Member

@Lee-W Lee-W Sep 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"button_all": "Filter DAG by task",
"button_all": "Filter Dag by task",

@bbovenzi
Copy link
Contributor

bbovenzi commented Oct 8, 2025

@Prasanth345 Can you rebase this so we can get this PR for 3.2?

@pierrejeambrun
Copy link
Member

pierrejeambrun commented Oct 24, 2025

@Prasanth345 are you still working on this?

@bbovenzi
Copy link
Contributor

bbovenzi commented Nov 20, 2025

Closing now that #57237 was merged

@bbovenzi bbovenzi closed this Nov 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bbovenzi bbovenzi bbovenzi requested changes

@Lee-W Lee-W Lee-W left review comments

@pierrejeambrun pierrejeambrun Awaiting requested review from pierrejeambrun pierrejeambrun is a code owner

@ryanahamilton ryanahamilton Awaiting requested review from ryanahamilton ryanahamilton is a code owner

@jscheffl jscheffl Awaiting requested review from jscheffl

@shubhamraj-git shubhamraj-git Awaiting requested review from shubhamraj-git shubhamraj-git is a code owner

Assignees

No one assigned

Labels

area:UI Related to UI/UX. For Frontend Developers.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Reimplement #29226 for Airflow 3 UI | Filter tasks to Upstream and/or Downstream

5 participants

@Prasanth345 @bbovenzi @r-richmond @pierrejeambrun @Lee-W