#775 Quick select day/month/year times

[tariqksoliman]

Summary

Implements quick select functionality for UTC calendar periods in the TimeUI
component, allowing users to rapidly navigate to specific time ranges through two
intuitive methods: a dropdown menu and timeline double-clicking.

Changes

New Features

1. Quick Select Dropdown Menu

• Added icon button in TimeUI that opens a popover with period selection dropdown
• Supports: Decade, Year, Month, Day, Hour, Minute
• Range mode: Selects full UTC calendar period (e.g., entire day, month, or year)
• Point mode: Selects start of UTC calendar period
• Dropdown auto-opens when popover is triggered and auto-closes after selection
• Automatically disables Present mode and stops playback when selecting a period

2. Double-Click Timeline Selection

• Double-clicking on timeline selects the time interval at the current zoom level
• Adapts to current zoom: clicking on decade/year/month/day/hour/minute/second
  ticks
• Visual feedback: hover highlight shows the period boundary before clicking
• Tooltip: "Double-Click to Select Period"

Enhancements

Timeline Labels

• Day labels now use ordinal suffixes (1st, 2nd, 3rd, ..., 31st) instead of plain
  numbers
• Added helper function getOrdinalSuffix() in Formulae_.js

Visual Feedback

• Added hover highlight (mmgisTimeUITimelineHover) that illuminates the hoverable
  period
• Hover highlight automatically hides during zoom operations to prevent covering
  incorrect ranges
• Pointer cursor indicates clickable timeline areas

Timezone Handling

• Fixed timezone offset bugs by consistently using .toISOString() instead of
  .toDate()
• Ensures UTC calendar periods are correctly selected regardless of local timezone

Technical Details

Special Decade Handling

• moment.js doesn't support 'decade' as a unit, so implemented manual calculation:
  const year = referenceTime.year()
  const decadeStart = Math.floor(year / 10) * 10
  periodStart = moment.utc().year(decadeStart).startOf('year')
  periodEnd = moment.utc().year(decadeStart + 10).startOf('year')

Timeline Integration

• Quick select automatically adjusts timeline window to show selected period
• Double-click respects current mode (Range vs Point)
• Hover highlight boundary clamping prevents UI overflow

Files Modified

• src/essence/Ancillary/TimeUI.js - Main implementation, quick select logic,
  double-click handler, hover effects
• src/essence/Ancillary/TimeUI.css - Styling for quick select popover, hover
  highlight, button states
• src/essence/Basics/Formulae_/Formulae_.js - Added ordinal day suffix helper
  function

Test Plan

• Test quick select dropdown in Range mode - verify full period is selected
• Test quick select dropdown in Point mode - verify period start is selected
• Test double-click on timeline at various zoom levels (decade, year, month, day,
  hour, minute, second)
• Verify hover highlight shows correct period boundaries and doesn't overflow
• Verify hover highlight hides during zoom operations
• Test in different timezones to ensure UTC periods are correctly selected
• Verify Present mode is disabled when using quick select
• Verify playback stops when using quick select
• Test that timeline window auto-adjusts to show selected periods

Screenshots/Demo

[Add screenshots showing the quick select dropdown and timeline double-click
functionality]

---

🤖 Generated with https://claude.com/claude-code

Fixes #775