Enhanced Suggestion Review UI/UX¶

Overview¶

This feature enhancement provides power-user tools to efficiently review large volumes of AI-generated link suggestions. The improvements include filtering, sorting, batch operations, keyboard shortcuts, and a detailed preview modal.

Features¶

1. Filtering and Sorting¶

Filter Controls: - Min Score Slider: Filter suggestions by minimum similarity score (0-100%) - Algorithm Filter: Filter by suggestion algorithm (TF-IDF, Keyword, Hybrid, LLM, or All) - Sort By: Sort suggestions by Similarity Score, Date Created, or Algorithm - Sort Order: Choose High to Low (desc) or Low to High (asc) - Reset Button: Quickly reset all filters to default values

Default Behavior: - Results are sorted by similarity score in descending order (highest scores first) - All algorithms are included - No minimum score filter applied

2. Batch Selection and Actions¶

Selection: - Each suggestion card includes a checkbox for batch selection - Click checkboxes to select individual suggestions - Use keyboard shortcut A to select all visible suggestions - Use keyboard shortcut C to clear selection

Bulk Actions: - When suggestions are selected, a fixed action bar appears at the bottom of the screen - Accept Selected: Accepts all selected suggestions in one operation - Reject Selected: Rejects all selected suggestions in one operation - Clear Selection: Clears the current selection

Bulk Action Bar: - Shows count of selected suggestions - Persists at the bottom of the screen until selection is cleared - Provides quick access to batch operations

3. Keyboard Shortcuts¶

Power users can use keyboard shortcuts for faster workflow:

Note: Keyboard shortcuts are disabled when focus is inside input fields or text areas.

4. Quick Preview Modal¶

Access: - Click "Quick Preview" button on any suggestion card

Features: - Side-by-side comparison: Full details of requirement and test case displayed side-by-side - Complete information: Shows all metadata including ID, priority, type, status, and full descriptions - Suggestion details: Displays similarity score, algorithm used, and creation date - Reason display: Shows the AI's reasoning for the suggestion (if available) - Direct actions: Accept or Reject buttons in the modal for immediate action - Easy dismissal: Click outside modal or close button to return to list

5. Real-time Updates¶

• Filters are applied immediately without requiring a "Search" button
• Accepted/Rejected suggestions are removed from the list in real-time
• Bulk operations reload the list automatically upon completion
• Toast notifications confirm successful operations

Backend API Changes¶

Updated Endpoint: GET /api/v1/suggestions/pending¶

New Query Parameters:

min_score: float (0.0-1.0) - Minimum similarity score filter
max_score: float (0.0-1.0) - Maximum similarity score filter  
algorithm: string - Filter by algorithm (tfidf, keyword, hybrid, llm)
sort_by: string - Sort field (score, date, algorithm)
sort_order: string - Sort direction (asc, desc)
limit: int - Maximum results to return (default: 100, max: 500)

Example Request:

GET /api/v1/suggestions/pending?min_score=0.7&algorithm=llm&sort_by=score&sort_order=desc&limit=50

New Endpoint: POST /api/v1/suggestions/bulk-review¶

Request Body:

{
  "suggestion_ids": ["uuid1", "uuid2", "uuid3"],
  "status": "accepted",
  "feedback": "Optional feedback message",
  "reviewed_by": "user@example.com"
}

Response:

{
  "message": "Reviewed 3 suggestions",
  "count": 3,
  "status": "accepted"
}

Constraints: - Minimum 1 suggestion ID required - Maximum 100 suggestion IDs per request - Only pending suggestions can be reviewed via bulk operation

Usage Examples¶

Example 1: Review High-Confidence LLM Suggestions¶

1. Set Min Score slider to 80%
2. Select LLM from Algorithm filter
3. Review and accept all high-quality suggestions using bulk actions

Example 2: Review Oldest Pending Suggestions¶

1. Select Date Created from Sort By dropdown
2. Select Low to High from Order dropdown
3. Review suggestions starting from the oldest

Example 3: Quick Keyboard-Based Review¶

1. Press A to select all visible suggestions
2. Review the preview to confirm quality
3. Press Enter to accept all, or Shift+Delete to reject all
4. Press C to clear selection if needed

Example 4: Detailed Preview Before Decision¶

1. Click Quick Preview on any suggestion card
2. Review full requirement and test case details
3. Check suggestion reasoning and metadata
4. Click Accept or Reject directly in the modal

Performance Considerations¶

• Bulk operations are limited to 100 suggestions per request for performance
• API endpoint supports up to 500 results per query
• Frontend uses efficient state management to handle large lists
• Filters are applied server-side to reduce data transfer

Browser Compatibility¶

• Modern browsers with ES6+ support
• Keyboard shortcuts work on all major browsers
• Modal uses standard CSS and HTML elements for broad compatibility

Technical Notes¶

Frontend: - Built with React and TypeScript - Uses React hooks for state management - Tailwind CSS for styling - Responsive design for mobile and desktop

Backend: - FastAPI async endpoints - SQLAlchemy async ORM - PostgreSQL database - Filtering and sorting done at database level for efficiency

Migration Notes¶

This feature is fully backward compatible: - Existing API calls continue to work without modification - New query parameters are optional - Single-item review workflow unchanged - No database migrations required