feat: auto refresh dashboard

[richardfogaca]

Summary

Implements real-time dashboard auto-refresh with visual status feedback, pause controls, and flicker-free updates.

Key Features

1. Auto-Refresh Status Indicator

• Colored dot in the dashboard header shows current refresh state:
  • 🟢 Green: Refreshed successfully on schedule
  • 🔵 Blue: Fetching data or waiting for first refresh
  • 🟡 Yellow: Delayed or 1 consecutive error
  • 🔴 Red: 2+ consecutive errors
  • ⚪ White: Paused (manually or by tab visibility)
• Tooltip on hover shows last refresh time, configured interval, and error counts

2. Pause/Resume Controls

• Play/pause button next to the status indicator
• Immediate refresh when resuming before timer restarts
• Pause state is independent of tab visibility pause

3. Tab Visibility Auto-Pause (Opt-in)

• Automatically pauses auto-refresh when browser tab becomes inactive
• Immediately fetches data when user returns, then restarts timer
• Respects manual pause state - won't auto-resume if manually paused

4. Flicker Prevention

• Loading spinner suppression: Charts maintain previous data during refresh
• FiltersBadge preservation: Filter indicators remain visible during refresh
• Stable series ordering: Secondary sort prevents legend reordering in ECharts
• Tree chart animation control: Disabled animations during refresh
• Status dot debouncing: Smooth color transitions

Before/After

Before: Auto-refresh showed toast notifications on each cycle, charts flickered with loading spinners, no status indicator, no pause control.

After:

• Clean status indicator dot with informative tooltip
• Pause/play controls for manual control
• Smooth refresh without flickering or loading spinners
• Optional tab visibility pause with immediate refresh on return

Testing Instructions

Basic Auto-Refresh Status:

1. Open a dashboard and set an auto-refresh interval (e.g., 10 seconds)
2. Observe the status indicator dot appears next to the refresh controls
3. Watch the dot turn blue during fetch, then green on success
4. Hover over the indicator to see tooltip with last refresh time and interval

Pause/Resume:

1. With auto-refresh enabled, click the pause button
2. Observe the dot turns white (paused state)
3. Click play to resume - charts should refresh immediately
4. Verify the timer restarts after resuming

Tab Visibility Pause:

1. Enable the "Pause on inactive tab" option in refresh settings
2. Switch to another browser tab for longer than the refresh interval
3. Return to the dashboard tab
4. Verify data refreshes immediately and timer restarts

Flickering Prevention:

1. Set a short refresh interval (e.g., 10 seconds)
2. Observe that charts don't show loading spinners during auto-refresh
3. Verify filter badges remain visible during refresh
4. Check that chart legends don't flicker or reorder

Error Handling:

1. Simulate network issues or chart errors
2. Verify the status dot turns yellow on first error, red on 2+ errors
3. Verify tooltip shows error information and count

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[msyavuz]

@richardfogaca Can't you use the new async task framework to track these dashboard refreshes?

The connection would be:

• Dashboard refresh operations could be tracked as async tasks in the GTF
• Users could monitor refresh status, progress, and errors in the unified task list UI
• Failed refreshes could be retried/cancelled through the task management interface
• The GTF's deduplication would prevent redundant refresh requests

[msyavuz]

Or do you think a new implementation using GTF would be overkill for this?

[richardfogaca]

Thanks for the detailed review, @msyavuz!

You raise a good point about GTF—it's definitely powerful for server-side task orchestration. However, auto-refresh here is a client-side feature: we're just re-querying existing dashboards on a timer. GTF's overhead (task scheduling, coordination, state management) is optimized for complex dependencies and workflows, not for repetitive client-initiated queries. That's why we kept it simple with native browser intervals.

That said, your suggestions on code quality are spot-on—I'll tidy up the sort ordering and extract that repeated buildQuery pattern into a helper. Thanks for the thorough review! 🙏