Description
As scan results grow, the current Findings tab becomes difficult to navigate because all findings are displayed in a single flat list. Users should be able to quickly narrow results by scanner, severity, or file path, and sort findings to prioritize the most important issues.
Implement a Filter & Sort panel above the findings list to improve usability and make large scan results easier to explore.
Proposed Solution
Add a collapsible Filter & Sort panel that allows users to filter and sort findings without reloading the page.
Filter Options
-
Scanner
- All
- Semgrep
- OSV-Scanner
- Gitleaks
-
Severity
-
Search
Sort Options
-
Severity Score
- Highest → Lowest
- Lowest → Highest
-
Scanner Name
-
File Path
State Management
To avoid excessive prop drilling, filter and sort state should be managed using a shared state solution such as:
- React Context, or
- Zustand
Filter state should not be passed more than two component levels via props.
URL Synchronization
Active filters and sorting should be reflected in the URL query string so they persist across page refreshes and can be shared with others.
Example:
/findings?scanner=semgrep&severity=high&sort=severity_desc&search=auth
Empty State
If no findings match the selected filters, display a friendly empty state instead of an empty list.
Example message:
No findings match your filters.
Try adjusting your search or clearing one or more filters.
Acceptance Criteria
Expected Impact
- 🔍 Makes large scan results easier to explore.
- ⚡ Helps users quickly find relevant vulnerabilities.
- 📊 Improves overall usability and navigation.
- 🔗 Enables sharing filtered views via URL.
- 🎯 Reduces time spent locating high-priority findings.
Difficulty: Medium
Description
As scan results grow, the current Findings tab becomes difficult to navigate because all findings are displayed in a single flat list. Users should be able to quickly narrow results by scanner, severity, or file path, and sort findings to prioritize the most important issues.
Implement a Filter & Sort panel above the findings list to improve usability and make large scan results easier to explore.
Proposed Solution
Add a collapsible Filter & Sort panel that allows users to filter and sort findings without reloading the page.
Filter Options
Scanner
Severity
Search
Sort Options
Severity Score
Scanner Name
File Path
State Management
To avoid excessive prop drilling, filter and sort state should be managed using a shared state solution such as:
Filter state should not be passed more than two component levels via props.
URL Synchronization
Active filters and sorting should be reflected in the URL query string so they persist across page refreshes and can be shared with others.
Example:
Empty State
If no findings match the selected filters, display a friendly empty state instead of an empty list.
Example message:
Acceptance Criteria
Expected Impact
Difficulty: Medium