Skip to content
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

Add dags search widget to navbar for quick search #45198

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add dags search widget to navbar for quick search #45198

wants to merge 3 commits into from
+160 −7

Conversation

tirkarthi
Copy link
Contributor

@tirkarthi tirkarthi commented Dec 24, 2024 •
edited
Loading

Closes #33210

There are workflows where users need to quickly switch between dags. Returning to home page to search takes time and also loads dags list data and makes other queries which are not needed. Add a search widget in the top navbar so that users can search and results are returned like legacy home page search. Then users can click on the result to switch to the relevant dag page. The component uses AsyncSelect to fetch options on type and uses debounce to limit queries. The results are limited to 10 so that the queries are faster and uses existing dags endpoint used by home page search without recent runs data.

Notes to reviewer and self

  • debounce-promise is needed since use-debounce doesn't work with promises . Ref : Async Debounce for Select 2.0 not behaving as expected JedWatson/react-select#3075 (comment)
  • staleTime is set as zero so that queries are not cached and results are live to search for dags added recently after a search for the term.
  • There are autocomplete components for Chakra but they are not compatible with Chakra 3 . Ref : Support for chakra v3 anubra266/choc-autocomplete#272
  • There could be a custom endpoint with just dag_id and dag_display_name but with 10 entries the size is low at 2kB compressed and 8-9kB uncompressed and doesn't seem to be worth it to have a separate endpoint. Probably if needed can be taken as an enhancement in another PR.

image

@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Dec 24, 2024
@tirkarthi tirkarthi mentioned this pull request Dec 24, 2024
Open
2 tasks
shubhamraj-git
shubhamraj-git reviewed Dec 25, 2024
View reviewed changes
Copy link
Contributor

@shubhamraj-git shubhamraj-git left a comment

Choose a reason for hiding this comment

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

Overall looks good.

@tirkarthi
Copy link
Contributor Author

@shubhamraj-git The search is substring search like the legacy view. Legacy view has limit of 10 entries and I am fine with increasing the limit here. Thanks.

airflow/airflow/www/views.py

Line 5522 in b13ed89

for row in session.execute(dag_ids_query.union(owners_query).order_by("name").limit(10))

@shubhamraj-git
Copy link
Contributor

@shubhamraj-git The search is substring search like the legacy view. Legacy view has limit of 10 entries and I am fine with increasing the limit here. Thanks.

airflow/airflow/www/views.py

Line 5522 in b13ed89

for row in session.execute(dag_ids_query.union(owners_query).order_by("name").limit(10))

Actually yes, I saw in the legacy. Hence removed the comment, since i got my answer. Yes, maybe increasing to 10 will be good.

@tirkarthi
Copy link
Contributor Author

Thanks, increased it to 10 and also increased width to view longer names.

@jscheffl
Copy link
Contributor

jscheffl commented Jan 1, 2025

Note: As PR #45312 has been merged, the code formatting rules have changed for new UI. Please rebase and re-run pre-commit checks to ensure that formatting in folder airflow/ui is adjusted.

@bbovenzi
Copy link
Contributor

bbovenzi commented Jan 3, 2025

I think we should style this as a universal search like how the Chakra 3 docs work:

Screenshot 2025-01-03 at 10 04 54 AM

@tirkarthi
Copy link
Contributor Author

@bbovenzi I don't find any docs in Chakra for search. Is it just making the dropdown component display in modal and make the modal open on clicking on search?

@Kysluss
Copy link

Kysluss commented Jan 5, 2025 •
edited
Loading

Hello,

choc-autocomplete just put out an alpha release that adds v3 support. Feel free to use it and submit any feedback, issues, and PRs. I'm one of the maintainers of the project and we're trying to get it stable as quick as possible.

Edit Official v6 is out and stable that adds support for Chakra v3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@shubhamraj-git shubhamraj-git shubhamraj-git left review comments

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

@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 jscheffl is a code owner

At least 1 approving review is required to merge this pull request.

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.

Enhanced DAG Navigation with Search Bar on Dag View Page
5 participants
@tirkarthi @shubhamraj-git @jscheffl @bbovenzi @Kysluss