Redesign device page with timeline card view grouped by track ID #17
Description
Description
Redesign the device page to show a unified timeline view combining videos and classifications, grouped by track ID in a card-based layout.
Requirements
Card-Based Timeline Layout
- Replace current device page layout with a card-based timeline feed
- Most recent items first (reverse chronological order)
- Each card represents either:
- Detection Card: A specific track (insect detection) with its classifications and associated video
- No Detection Card: A video with no insect detections
Detection Cards (grouped by track_id)
- Each track gets its own card (even if multiple tracks from same video)
- Include table of all classifications for that track with ALL columns
- MUST include bbox image column in classification table
- Show associated video player
- Display video name/timestamp to identify related tracks from same video
No Detection Cards
- Display "No insect detected" as main message
- Include video player with play/download functionality
- Simpler layout than detection cards
Filtering and Export
- Add filtering options:
- Filter by type (videos only, classifications only, or both)
- Date range filter
- Species filter
- Confidence threshold filter
- CSV download button that exports filtered data
Technical Notes
- Cards should use full width of screen responsively
- Remove navigation to separate videos/classifications tables (all integrated now)
- Maintain pagination or implement infinite scroll for performance
- Track IDs will be UUIDs
Success Criteria
- Unified view makes it easy to see temporal relationship between videos and detections
- Each insect track is clearly grouped with its data
- Videos without detections are still accessible
- Filtering allows users to find specific data quickly
- Mobile-responsive card layout
Design Decisions
- Part of this work includes figuring out the exact visual design
- Cards should be clearly distinguishable but don't need special visual indicators beyond content differences