[PR] UI: Make duration charts readable at a glance [airflow]

[via GitHub]

eddiesr93 opened a new pull request, #70142:
URL: https://github.com/apache/airflow/pull/70142

   Redesign of the Dag Run / Task Instance duration chart on the overview 
pages, covering the five points raised in the issue.
   
   - **Axis units** — durations render as `5m`, `1h 30m`, `1d 4h` instead of 
`00:05:00`, and ticks snap to steps people actually count in (30s, 1m, 5m, 15m, 
1h, …) rather than Chart.js' decimal steps, which produced ticks like `26m 40s` 
/ `33m 20s`.
   - **Reference line** — the two mean lines are replaced by one dashed 
median-of-total line labelled `Median total: 4m 15s`. A single stuck run drags 
the mean well above where runs actually land, and the two old labels were both 
pinned to the same edge, so they overlapped each other and the most recent bars.
   - **Legend** — enabled, so the queued and run series are named.
   - **Chart size** — the card was pinned to 350px. It now flexes on the Dag 
overview and fills its row on the Task overview, which is what makes the bars 
comparable in the first place.
   - **Stacking** — `y.stacked` was never set even though `x.stacked` was, so 
queued time was drawn *behind* run time rather than underneath it and was 
effectively invisible. It now sits at the base of each bar.
   
   Median and tick-step selection are pure helpers (`src/utils/median.ts` and 
`getDurationTickStep`) with unit tests. Full UI suite passes: 88 files / 706 
tests.
   
   Screenshots below are the same 12 Dag Runs rendered through the real theme, 
one run deliberately stuck at ~32m so the median and the mean it replaces land 
in visibly different places.
   
   **Before**
   
   <img width="640" alt="Duration chart before: HH:mm:ss axis, no legend, two 
overlapping mean labels, queued time hidden" 
src="https://raw.githubusercontent.com/eddiesr93/airflow/pr-63582-screenshots/duration-chart-before-640px.png";>
   
   **After**
   
   <img width="640" alt="Duration chart after: compact time axis on human 
steps, legend, single dashed median line, queued time stacked at the base" 
src="https://raw.githubusercontent.com/eddiesr93/airflow/pr-63582-screenshots/duration-chart-after-640px.png";>
   
   At the narrower width the card falls back to (when asset events share the 
row):
   
   <img width="350" alt="Duration chart after at 350px" 
src="https://raw.githubusercontent.com/eddiesr93/airflow/pr-63582-screenshots/duration-chart-after-350px.png";>
   
   closes: #63582
   
   ---
   
   ##### Was generative AI tooling used to co-author this PR?
   
   - [X] Yes — Claude Code (Opus 4.8)
   
   Generated-by: Claude Code (Opus 4.8) following [the 
guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#gen-ai-assisted-contributions)
   


-- 
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: commits-unsubscr...@airflow.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org