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.

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

Add dags search widget to navbar for quick search #45198

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

Conversation

tirkarthi
Copy link
Contributor

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 5 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 5 entries the size is low at 1kB compressed and 4kB 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.

search_ui

@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Dec 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:UI Related to UI/UX. For Frontend Developers.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Enhanced DAG Navigation with Search Bar on Dag View Page
1 participant