feat(scan): ranked list search with stable bar widths#429
feat(scan): ranked list search with stable bar widths#429RajuGangitla wants to merge 3 commits intoaidenybai:mainfrom
Conversation
|
@RajuDev0 is attempting to deploy a commit to the Million Team on Vercel. A member of the Team first needs to authorize it. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| if (!refWidget.current) return; | ||
|
|
||
| const eventTarget = e.target; | ||
| if (!(eventTarget instanceof HTMLElement)) return; |
There was a problem hiding this comment.
Drag breaks when pointer target is SVG element
Medium Severity
The instanceof HTMLElement guard rejects all SVG-based targets (like SVGSVGElement, SVGPathElement, SVGUseElement), causing the handleDrag function to return early without initiating a drag. SVG elements inherit from Element, not HTMLElement. The widget uses SVG icons extensively (via the Icon component rendering <svg> with <use>, ChevronRight with <path>, etc.). While most are currently inside buttons, the check is logically too narrow — instanceof Element would correctly allow the closest() calls to function for both HTML and SVG targets.
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| if (!refWidget.current) return; | ||
|
|
||
| const eventTarget = e.target; | ||
| if (!(eventTarget instanceof HTMLElement)) return; |
There was a problem hiding this comment.
| if (!(eventTarget instanceof HTMLElement)) return; | |
| if (!(eventTarget instanceof Element)) return; |
SVG elements in the widget (like the close button icon) fail the HTMLElement instanceof check, preventing drag initialization when clicking on SVG-based UI elements
2 participants
Fixes
This pr Fixes #432
Main problem
Ranked slowdown lists are hard to use at scale: you can’t quickly find a component.
Issues Resolved
Files
render-bar-chart.tsx,details-routes.tsx,widget/index.tsx,ranked-bar-chart-search.ts,ranked-bar-chart-search.test.ts,constants.tsplease checkout video
react-scan-search.webm
Note
Low Risk
Low risk UI/UX changes with small, well-tested helper utilities; main risk is minor regressions in ranked chart rendering and widget drag interactions.
Overview
Adds search filtering to the ranked render bar list, including an empty-state message, while keeping each bar’s width scaled against the full event total (not just the filtered subset) and guarding against divide-by-zero via a shared minimum denominator constant.
Extracts ranked-bar label/search/width-denominator logic into a new
ranked-bar-chart-searchutility with Vitest coverage, tweaks the notification tab layout and forcesRenderBarChartremount per selected event (key={selectedEvent.id}), and updates widget dragging to not intercept pointer events originating from form controls (inputs/selects/labels/contenteditable) or buttons.Written by Cursor Bugbot for commit 075718c. This will update automatically on new commits. Configure here.