Replace virtualized lists with search, filter, and progressive loading in sidebar panels
- Dominant language
- TypeScript
- Stars
- 481
- Forks
- 108
- Avg merge
- 6d 8h
- Merged PRs (30d)
- 5
Description
## Summary
The sidebar panels for node/edge styling and entity filters currently use virtualized scrolling. This causes two UX issues:
1. An initial flash when the panel first opens (the virtualizer needs a measurement pass)
2. Visible row pop-in during fast scrolling
Based on anecdotal user feedback, the typical count of node/edge types is 10–50. Extreme cases with thousands exist but are rare and usually caused by unbounded writes. Users with hundreds of types (e.g. multiple graphs in one database) would benefit from filtering to find what they need.
## Proposed Approach
- Add a local search/filter input at the top of the list to quickly narrow results
- Remove the virtualized list implementation
- Render up to 200 items by default
- Add infinite scroll logic to automatically load more items when the user scrolls to the bottom
## Affected Areas
- Node type styling list (sidebar)
- Edge type styling list (sidebar)
- Entity filter lists (sidebar)
- Node type list in Connections
## Acceptance Criteria
- [ ] Each affected list has a search/filter input that filters locally
- [ ] Lists render without the initial flash or visible row pop-in
- [ ] Only 200 items are rendered initially
- [ ] Scrolling to the bottom progressively loads more items
- [ ] Performance is acceptable with 1,000+ items when filtering is used
## Related Issues
- #895
- #601
- #886
Contributor guide
Research direction
Start by locating the sidebar lists for node and edge styling, entity filters, and Connections, then inspect how their current virtualized scrolling is implemented. Implement local filtering, an initial 200-item limit, and progressive loading as specified, and verify every affected list against the acceptance criteria, including behavior with 1,000+ items.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100