/claim #1162

Summary

This PR implements a historical date picker feature that allows users to view map and site data from past dates, enabling exploration of historical coral bleaching events and temperature patterns.

Key Features

• Calendar Icon Date Picker: A floating calendar icon button positioned in the top-right corner of the map
• Modal Dialog Interface: Clean, user-friendly modal for selecting dates
• Historical Data Display: Marker colors update based on historical alert levels from the selected date
• Visual Indicator: Calendar icon highlights in blue when viewing historical data
• Easy Reset: “Clear & Show Current” button to return to present-day view

Implementation Details

Backend Changes:

• Added at parameter to FilterSiteDto for ISO 8601 date queries
• Modified getCollectionData() to query daily_data table for historical dates (not latest_data)
• The daily_data table contains pre-aggregated weeklyAlertLevel and dailyAlertLevel which determine marker colors
• Updated SitesService.find() to parse and pass the date parameter

Frontend Changes:

• Created new HistoricalDatePicker component with Material-UI dialog
• Integrated with Redux state management via sitesRequest()
• Updated API service to pass date parameter: GET /sites?at=2024-03-01
• Date picker positioned absolutely over the map for optimal UX

Why This Works (vs. Previous PR)

The previous PR #1177 attempted to use latest_data or time_series tables, but these don’t contain the aggregated alert levels needed for marker coloring. This implementation correctly uses the daily_data table which has:

• weeklyAlertLevel - determines marker color (0-5 scale)
• dailyAlertLevel - daily alert status
• satelliteTemperature - historical temperature data
• degreeHeatingDays - DHW accumulation

Testing Plan

• Select a historical date and verify marker colors change
• Verify the calendar icon highlights when a date is selected
• Click “Clear & Show Current” and verify it returns to current data
• Test with a date during a known bleaching event (e.g., March 2024 Australia)
• Verify the date picker has a reasonable max date (today)
• Test API endpoint directly: GET /api/sites?at=2024-03-01

Demo

I will provide a demo video showing:

1. Opening the date picker by clicking the calendar icon
2. Selecting a historical date
3. Map markers updating with different colors based on historical alert levels
4. Clearing the date to return to current view

(Demo video to be added once I can test with a working database)

Screenshots

The date picker appears as a floating calendar icon button:

• Inactive state: Gray background, indicating current data view
• Active state: Blue background, indicating historical data view
• Modal: Clean dialog with date picker and clear instructions

Note: This implementation addresses all feedback from PR #1177: ✅ Uses daily_data table (not latest_data)
✅ Better UI with modal calendar icon
✅ Actually works - changing dates changes marker colors
✅ Ready to extend to site detail pages