Virtualize UI components that render all node types
- Dominant language
- TypeScript
- Stars
- 481
- Forks
- 108
- Avg merge
- 6d 8h
- Merged PRs (30d)
- 5
Description
## Description
Several UI components render all node types into the DOM without virtualization. With 70k+ types, opening a dropdown or viewing the schema graph creates tens of thousands of DOM nodes and freezes the browser.
## Preferred Solution
### 1. Replace Radix Select with virtualized combobox for node type dropdowns
The search sidebar node type dropdown (`FilterSearchTabContent.tsx`) and the Data Explorer type selector (`DataExplorer.tsx`) use Radix Select which renders all items to the DOM when opened.
Replace with a searchable combobox using Radix Popover + react-virtuoso that only renders visible items and supports type-ahead filtering.
### 2. Paginate or cluster the schema graph view (`useSchemaGraphData.ts`)
The schema graph creates a Cytoscape node for every vertex type in the schema. With 70k types, Cytoscape cannot lay out or render this many nodes. Consider pagination, clustering by prefix/namespace, or a search-driven exploration mode.
## Related Issues
- Part of #1677
Contributor guide
Assessment
This issue has not been assessed yet.