Skip to content

Add search operator autocomplete dropdown (#2828)#2843

Open
bendichter wants to merge 7 commits into
masterfrom
search-operators-autocomplete
Open

Add search operator autocomplete dropdown (#2828)#2843
bendichter wants to merge 7 commits into
masterfrom
search-operators-autocomplete

Conversation

@bendichter

Copy link
Copy Markdown
Member

Summary

Closes #2828.

The search bar supports GitHub-style operators (species:, approach:, created_after:, etc.), but they weren't discoverable — a user had no way to know they exist or which are available.

This adds an autocomplete dropdown beneath the search field that lists the operators and filters them as you type, similar to github.com/issues.

Behavior

  • Discoverable: focusing the field shows the full operator list with descriptions.
  • Filters as you type: typing an operator prefix (e.g. spe) narrows to matching operators (species:), matched against the token under the cursor — so operators work mid-query too (neuropixels spe…).
  • Keyboard: ↑/↓ to move the highlight, Enter or Tab to insert the highlighted operator (keeps focus so you can type the value), Esc to dismiss. While browsing the full list (empty token) nothing is pre-highlighted, so Enter still submits the search.
  • Mouse: click an operator to insert it.

Implementation notes

  • Built into the existing DandisetSearchField.vue (the search field actually in use). Suggestions are derived from the existing operatorHelp array, so the help-icon table and the dropdown share a single source of truth.
  • The dropdown is teleported to <body> and positioned manually beneath the input, because the toolbar uses overflow: hidden and would otherwise clip it; it tracks scroll/resize. Focus stays in the input (list items use mousedown.prevent) so keyboard interaction is uninterrupted.

Notes

  • The operator-parsing backend is already on master and live on the sandbox API; this is a frontend-only change.
  • Draft pending review of the UX. Lint and type-check pass.

🤖 Generated with Claude Code

Surface the available GitHub-style search operators (species:, approach:,
created_after:, etc.) in a dropdown beneath the search field to make them
discoverable, as requested in #2828.

- Suggestions are derived from the existing operatorHelp list, so the help
  table and the dropdown stay in sync.
- Filters by substring as the user types the operator token; matches the
  token under the cursor, so operators work mid-query too.
- Keyboard support: up/down to move, Enter/Tab to insert the highlighted
  operator, Esc to dismiss. When browsing the full list (empty token)
  nothing is highlighted, so Enter still submits the search.
- The list is teleported to <body> and positioned manually so the
  toolbar's overflow:hidden doesn't clip it; focus stays in the input.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@bendichter

Copy link
Copy Markdown
Member Author
image image

Display the example value (e.g. the 2024-01-01 date format for date
operators) as a muted hint after each operator key, so users can see the
expected value format. Derived from the same operatorHelp examples.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@bendichter bendichter marked this pull request as ready for review June 8, 2026 18:50
@yarikoptic

Copy link
Copy Markdown
Member

I think it begs for at least some basic tests added to e2e or frontend alone. Note -- update to master branch should address CI timeout (#2849 fixed that)

@bendichter bendichter requested a review from yarikoptic June 8, 2026 19:02
bendichter and others added 5 commits June 8, 2026 15:06
Cover the operator dropdown end-to-end on the home page search field:
full list on focus, filtering as you type, insertion via Enter/click,
mid-query insertion on the token under the cursor, Escape-to-dismiss, and
Enter-submits-while-browsing.

Also update the existing dandisets-page search test to target the field by
its combobox role, since the search input now exposes role="combobox".

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The Playwright E2E job runs the API via `manage.py runserver`, which spawns a
thread per request. With the inherited CONN_MAX_AGE of 10 minutes, each thread
holds its Postgres connection for the whole run, so the connection count grows
with the number of requests. Past Postgres's default max_connections (100) the
server starts returning 500s ("sorry, too many clients already"), which surfaced
as flaky/failed E2E tests once the suite grew.

Make CONN_MAX_AGE overridable in development settings (default unchanged, so
local dev and production are unaffected) and set DJANGO_CONN_MAX_AGE=0 for the
E2E job so connections close per-request and the count stays bounded regardless
of test count.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Vuetify renders role="combobox" on the search field's wrapper element, but the
inner <input> still exposes the implicit textbox role with the placeholder as
its accessible name. `getByRole('combobox', { name: 'Search Dandisets' })`
therefore never matched (the combobox wrapper has no accessible name), so the
dandisets-page search test timed out. Revert to matching the textbox, which is
what the field actually exposes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
`performSearch` short-circuited whenever `searchText` equaled the route's
`search` param (normalized with `|| ''`). On a dandiset landing page or the
home page the param is absent, so an empty Enter — which previously navigated
to the search results page (listing all dandisets) — became a no-op. This
regressed the `dandisetsPage` E2E test, which relies on that navigation to
reach the results page before toggling filters.

Restructure so that searching from anywhere other than the search page always
navigates there (empty query allowed), and only apply the unchanged-query
no-op guard when already on the search page.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

search operators dropdown (UX)

2 participants