aws / aws/graph-explorer

Virtualized searchable Combobox component + keyword-search node-type picker

Open
#2,087 0 comments 0 reactions 0 assignees View on GitHub
ready-for-agent
Dominant language
TypeScript
Stars
481
Forks
108
Avg merge
6d 8h
Merged PRs (30d)
5

Description

## Parent

- Part of #2086

## What to build

A reusable, virtualized, searchable **Combobox** component, wired into the keyword-search node-type picker so it works end-to-end on a large schema. Adds `@base-ui/react` and `@tanstack/react-virtual` (imported via subpath exports to preserve tree-shaking). The Combobox is single-select, controlled (`value`/`onValueChange`), takes `{label, value}` items, and supports placeholder, disabled, and a "no results" empty state. Accessibility comes from Base UI (W3C APG combobox pattern); windowing from TanStack Virtual using Base UI's virtualized pattern (`virtualized` prop + `useFilteredItems()` + `onItemHighlighted` → `scrollToIndex`). Filtering starts with the default path plus `useDeferredValue()` on the query.

On a graph with 10,000+ vertex labels, opening the keyword-search node-type picker is instant, filters as the user types, and selects with mouse or keyboard.

## Acceptance criteria

- [ ] Combobox component exists, styled to the design system, single-select and controlled
- [ ] Base UI + TanStack Virtual added via subpath imports; new deps confined behind the component
- [ ] Type-to-filter narrows the list; selection calls `onValueChange` with the correct value; placeholder, disabled, and empty state work; arrow+Enter keyboard selection works
- [ ] Component unit tests cover filter/select/keyboard and a 10,000-item interactivity guardrail (filter to a late item and select it) without asserting DOM node counts
- [ ] Keyword-search node-type select uses the Combobox, preserving its existing Jotai-atom-controlled wiring
- [ ] `pnpm checks` and `pnpm test` pass

## Blocked by

- None — can start immediately.

Contributor guide

Open the contributing guide

Research direction

Start at the keyword-search node-type picker and trace its existing Jotai-atom-controlled wiring before designing the reusable Combobox. Review the design-system patterns and run the relevant component tests first; add coverage for filtering, selection, keyboard use, empty and disabled states, and the 10,000-item guardrail. Done means the picker remains wired end-to-end, the acceptance criteria pass, and pnpm checks plus pnpm test succeed.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.