aidenybai / aidenybai/react-scan

feat(scan): search filter for Ranked list

Open
#432 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
21.8k
Forks
390
Avg merge
23m
Merged PRs (30d)
1

Description

## Summary

When working with large codebases, the Ranked section becomes difficult to search — there's no way to quickly find a specific component, leading to endless scrolling.

This PR adds a search bar below the Ranked section header to filter rows by label (case-insensitive), making it fast to locate any component.

## Problems Addressed

- **No search in Ranked list** — impossible to quickly find a component at scale
- **Inaccurate bar chart** — bar fill was calculated against only visible rows after filtering, not the full event total
- **Divide-by-zero risk** — bar width math lacked a safe guard for zero-total edge cases

## Changes

- Search input under the Ranked section header — filters rows by label, case-insensitive
- Fixed pointer/focus handling so dragging no longer interrupts user input in form controls
- Bar fill now reflects proportion vs. the full event total (not filtered subset)
- Small, tested helper functions + divide-by-zero guard for bar width calculation

## Please checkout this Video for reference
https://github.com/user-attachments/assets/1e15a498-e153-4406-9b79-db6e654e3904

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.