Refresh Button for Map Positions with Notification Pop-Ups

[ZackLyon]

• Refresh button on maps

  • Added a reusable RefreshButton in packages/react-ui that matches existing map control styling.
  • Button shows loading state and an optional tooltip with “last reload” and “next auto-refresh” text.
  • Map component accepts new props (onRequestRefresh, refreshLoading, refreshLastRefreshed, etc.) and renders the refresh button next to the existing buttons not the map

• useRefreshPositions hook

  • New hook in apps/lrauv-dash2/lib/useRefreshPositions.tsx that:
    • Refetches vehicle position queries (via React Query) for the given vehicle names.
    • Tracks loading and lastRefreshed, and exposes markInitialLoadDone so the “next refresh” countdown can start after the first position load.
    • Shows toast notifications (bottom-left) after refresh with per-vehicle counts: GPS fixes, Argo, RWP, and emergencies (emergencies in red; emergency toasts do not auto-dismiss).
    • Throttles refresh so repeated clicks within ~3 seconds are ignored.
    • Optional 10-minute auto-refresh.
  • Uses existing vehiclePos query keys so refresh updates the same data the map/paths use.

• formatElapsedTime helper

  • New utility in packages/utils to format a duration in ms as a short string (e.g. 45s, 23m, 5h:30m, 2d:12h, 6M, 2y).
  • Used in the refresh button tooltip and in the vehicle path tooltip for “time since latest fix”.

• Deployment map and overview map

  • Both DeploymentMap and the overview map on the index page use useRefreshPositions and pass refreshAll, refreshLoading, lastRefreshed, and related props into the shared Map component so the new refresh button appears and works on both maps.
  • Deployment map uses a single-vehicle list when a vehicle is selected; overview map uses all tracked vehicles.
  • Optional preferredParams (e.g. deployment time range) can be passed so the hook aligns with the map’s time window.

• VehiclePath and “first load” timing

  • VehiclePath now accepts an onPositionDataLoaded callback and calls it once when position data (e.g. GPS fixes) is first available.
  • Deployment and overview maps pass markInitialLoadDone so the refresh tooltip’s “last reload” / “next auto-refresh” countdown starts when the path data has loaded (with a 30s fallback if no path ever loads).

• Default “from” for position queries

  • When deployment start/last-event time is missing, position queries now use a default from of 24 hours ago instead of 0.
  • Applied in both VehicleList and VehiclePath so the map can show recent positions even without deployment bounds.

• Vehicle path tooltip

  • The path tooltip that shows the time of the current indicator and “time since latest fix” now uses formatElapsedTime for the “time since” part so it matches the refresh button’s compact format.

• Styling

  • packages/react-ui/src/css/base.css updated with styles for the refresh button and the refresh-position toast.

• Exports

  • formatElapsedTime is exported from @mbari/utils.

Refresh button

NOTE: In dash4, the map only shows the positions of the vehicle for the last 24 hours, whereas, dash5 shows either the positions since the beginning of an active deployment or it shows the entirety of the vehicle path for a recent previous deployment. The notifications for each reflect what is shown on the map (ie the number of GPS fixes will be much higher on dash5 since it is showing more positions).

[ZackLyon]

@jimjeffers - This is ready for your review. Please read the note to make sure you don't disagree with how this was implemented (follows current deployment map implementation).

[carueda]

Re:

In dash4, the map only shows the positions of the vehicle for the last 24 hours, ...

Just to clarify that this is actually user configurable in dash4: there's a maximum number of GPS positions to display setting as well as the length of the time window.

cc @heavyB @ksalamy