Graph UI: Add Filter Downstream & Filter DownStream & Upstream

[r-richmond]

Description

Currently Airflow has a Filter Upstream View/option inside the graph view. (As documented here under Filter Upstream)

It would be great if there were also the options

1. Filter Downstream &
2. Filter Downstream & Upstream

Use case/motivation

Sometimes it is useful to view downstream tasks & down & upstream tasks when reviewing dags. This feature would make it as easy to view those as it is to view upstream today.

Related issues

I found nothing with a quick search

Are you willing to submit a PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct

[yxiao1996]

looks like an interesting idea, may I take a shot at this?

[potiuk]

Feel free.

[yxiao1996]

Took a look at the code, seems to me this should be a rather small change as we have the capacity to query downstreams of a task in a dag already defined in the dag data model class(code).

Think that we need to make changes in the following places:

• Update UI to include new filtering method in template(code)
• Update callModal.js to attach handlers for new filtering options.
• Need to extend query string of the graph view function to support new filtering options. Currently its assuming we are only filtering upstream.
• Need to extend this updateQueryStringParameter function to support new filtering options.

I'm thinking about how should we update the UI. The straightforward way is to add 2 more buttons, but I also feel there's already a bunch of buttons. The other way I could think of is to make the current "Filter upstream" button a dropdown with 3 options. What do you guys think? @r-richmond @potiuk

[yxiao1996]

probably unrelated, breeze start-airflow --dev-mode looks broken for me with error message saying asset compilation fail. Without the --dev-mode flag it runs alright.

admin already exist in the db

The asset compilation failed. Exiting.

[yxiao1996]

coded the filter downstream functionality, looks like this:

original graph

update the filter upstream button to filter tasks downdrop with 2 options:

After filtering downstream for one of the tasks

[potiuk]

probably unrelated, breeze start-airflow --dev-mode looks broken for me with error message saying asset compilation fail. Without the --dev-mode flag it runs alright.

Fix to this problem in #29225 (thanks for commenting that it does not work - I broke --dev-mode accidentally when fixing regular asset compilation few days ago)

[yxiao1996]

thanks for fixing.

[yxiao1996]

put up a PR: #29226

[r-richmond]

Hey @yxiao1996 this looks great. 2 questions for you

1. For your example After filtering downstream for one of the tasks which task_id did you click on & which option did you select?
2. If you select either option and navigate to the grid view dues the filter on tasks remain? (It does this currently).

Then lastly as a weak suggestion that can be disregarded due to my tardiness in getting back to you. Would it be worth keeping the same style of interface as the Task Actions? See my rough mockup below (note: the additional functionality provided with the recursive option)