Skip to content

feat: virtualise Findings, Scans, Reports#488

Open
khat190 wants to merge 1 commit into
utksh1:mainfrom
khat190:feat/virtualized-tables-v2
Open

feat: virtualise Findings, Scans, Reports#488
khat190 wants to merge 1 commit into
utksh1:mainfrom
khat190:feat/virtualized-tables-v2

Conversation

@khat190
Copy link
Copy Markdown
Contributor

@khat190 khat190 commented Jun 4, 2026

Description of changes

This PR virtualizes the Findings, Scans, and Reports pages using @tanstack/react-virtual so we no longer render every item in large lists.

Changes made

  • Findings.tsx

    • Replaced the existing findings list with a virtualized list
    • Added severity headers inside the virtualized view
    • Preserved keyboard navigation (ArrowUp / ArrowDown)
    • Added scroll-to-selected behavior
  • Scans.tsx

    • Replaced the full task list rendering with a virtualized list
    • Supports different heights for collapsed and expanded scan cards
  • Reports.tsx

    • Replaced the reports grid with a virtualized two-column layout
    • Each virtual row renders two report cards
  • src/hooks/useVirtualList.ts

    • Added a reusable wrapper around useVirtualizer for future pages

Why

The Findings and Scans pages become noticeably slow when there are hundreds of records because every item is rendered at once. With larger datasets this leads to unnecessary DOM nodes and poor scrolling performance.

Virtualization keeps only the visible rows mounted, which significantly improves responsiveness and memory usage on large datasets.

Fixes #234.

How to test

  1. Install dependencies:
cd frontend
npm install
  1. Start the frontend:
npm run dev
  1. Open the Findings, Scans, and Reports pages and verify:

    • Lists render correctly
    • Scrolling remains smooth with large datasets
    • Keyboard navigation still works on Findings
    • Expanding/collapsing scan cards behaves normally
  2. Run the tests:

npx vitest run testing/unit/pages/Findings.test.tsx testing/unit/pages/Reports.test.tsx testing/unit/pages/Scans.test.tsx

Expected result: all 32 tests pass.

Trade-offs

  • Removed row-level Framer Motion enter/exit animations from virtualized lists
  • Row heights are estimated before being measured, which may cause minor adjustments while scrolling
  • The expandable animation inside Scan cards remains unchanged

Related issue

Closes #234

@utksh1 utksh1 added level:advanced 55 pts difficulty label for advanced contributor PRs type:performance Performance work category bonus label type:feature Feature work category bonus label area:frontend Frontend React/UI work labels Jun 4, 2026
Copy link
Copy Markdown
Owner

@utksh1 utksh1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the performance work. This PR currently has merge conflicts (DIRTY / conflicting), so I cannot do a reliable code review or merge it yet.

Please rebase/update the branch against current main, resolve the conflicts in Findings/Scans/Reports and package files, then make sure the frontend checks pass. After that I will review the virtualization behavior and merge if it is clean.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:frontend Frontend React/UI work level:advanced 55 pts difficulty label for advanced contributor PRs type:feature Feature work category bonus label type:performance Performance work category bonus label

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FRONTEND] Add virtualized tables for large scans, findings, and reports

2 participants