antonio-mello-ai opened a new pull request, #62835: URL: https://github.com/apache/airflow/pull/62835
## Summary Closes #54786 This PR improves the Duration Chart on the DAG Overview page with two changes: - **Shorten x-axis tick labels**: Labels now adapt based on the time span of displayed entries. When all runs are within 24 hours, labels show `HH:mm:ss`. For longer ranges, they show `MMM DD HH:mm`. Full datetime is still available in tooltips. Labels also respect the user's selected timezone via `formatDate`. - **Disable animation during auto-refresh**: When the DAG has pending runs and the chart is auto-refreshing, chart animation is disabled to reduce visual noise. ### Before X-axis labels use the full `YYYY-MM-DD HH:mm:ss` format, taking significant space and shrinking the graph area. Animation replays on every auto-refresh cycle. ### After X-axis labels are compact and timezone-aware. Animation only plays on initial render, not during auto-refresh. ## Details **Label format logic** (`getTickLabelFormat`, defined outside the component per review feedback on #55339): - `< 2 entries` → `HH:mm:ss` - `< 1 day span` → `HH:mm:ss` - `≥ 1 day span` → `MMM DD HH:mm` **Auto-refresh detection** (in `Overview.tsx`): - Uses existing `useAutoRefresh` hook + `isStatePending` to determine if the chart is actively refreshing - Passes `isAutoRefreshing` prop to `DurationChart` - When `true`, `animation` is set to `false` ## Files Changed - `airflow-core/src/airflow/ui/src/components/DurationChart.tsx` — tick label formatting + animation control - `airflow-core/src/airflow/ui/src/pages/Dag/Overview/Overview.tsx` — pass `isAutoRefreshing` prop ## Test Plan - [ ] Verify x-axis labels show `HH:mm:ss` when runs span less than 24 hours - [ ] Verify x-axis labels show `MMM DD HH:mm` when runs span more than 1 day - [ ] Verify tooltip still shows full datetime on hover - [ ] Verify labels respect timezone selection - [ ] Verify animation plays on initial page load - [ ] Verify animation is disabled during auto-refresh with pending runs - [ ] Verify no animation flicker when auto-refresh updates data -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
