aws / aws/graph-explorer

Virtualize UI components that render all node types

Open
#1,680 0 comments 0 reactions 0 assignees View on GitHub
enhancement performance usability
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.