UI: Make duration charts readable at a glance#70142
Merged
bbovenzi merged 4 commits intoJul 21, 2026
Merged
Conversation
The Airflow 3 duration chart dropped several things the Airflow 2 version did well, and what is left is hard to read at the size it is given. Durations on the value axis are the main cost: HH:mm:ss has to be decoded tick by tick before the magnitude is apparent, and Chart.js picks decimal steps, so a busy Dag lands on ticks like 26m 40s. The two reference lines report the mean, which one stuck run drags well above where runs actually sit, and both labels are pinned to the same edge so they overlap each other and the most recent bars. Nothing names the two series. Finally the card is pinned to 350px on a page with room to spare, which is what makes the bars too small to compare in the first place. The bars were also stacked on the index axis only, so queued time was drawn behind run time rather than underneath it, and was effectively invisible.
eddiesr93
requested review from
bbovenzi,
choo121600,
guan404ming,
pierrejeambrun,
ryanahamilton,
shubhamraj-git and
vatsrahul1001
as code owners
July 20, 2026 19:14
boring-cyborg
Bot
added
area:translations
area:UI
bbovenzi
reviewed
Jul 20, 2026
bbovenzi
left a comment
bbovenzi
left a comment
Contributor
There was a problem hiding this comment.
Thanks. This looks good. Can you provide a few more screenshots?
Letting the card flex horizontally handed its height to Chart.js' default 2:1 aspect ratio, which the old fixed 350px width had been capping as a side effect. On a 1400px row the chart came out 496px tall, and on a 2560px monitor it would have passed 1000px and swallowed the page it sits on.
Contributor
Author
|
Pushed a follow-up commit after re-checking the layout against the Freeing the card width handed the chart height to Chart.js' default 2:1 aspect ratio, which the old fixed For the record, the sibling panel is unaffected — The screenshots above have been regenerated against the fixed height. Drafted-by: Claude Code (Opus 4.8) (no human review before posting) |
The two overview pages had drifted apart for no reason: one card flexed, the other sat in a single-column grid with only a max width, so the same chart answered to two different sets of rules. They now share one Box, which also gives the Task overview the cap the Dag overview needed to stop the chart spanning an ultrawide monitor. The reference line reads "Total:" rather than "Median total:", and the newsfragment is dropped as not warranted for this change.
bbovenzi
approved these changes
Jul 21, 2026
|
Awesome work, congrats on your first merged pull request! You are invited to check our Issue Tracker for additional contributions. |
Contributor
Backport successfully created: v3-3-testNote: As of Merging PRs targeted for Airflow 3.X In matter of doubt please ask in #release-management Slack channel.
|
github-actions Bot
pushed a commit
to aws-mwaa/upstream-to-airflow
that referenced
this pull request
Jul 21, 2026
* UI: Make duration charts readable at a glance The Airflow 3 duration chart dropped several things the Airflow 2 version did well, and what is left is hard to read at the size it is given. Durations on the value axis are the main cost: HH:mm:ss has to be decoded tick by tick before the magnitude is apparent, and Chart.js picks decimal steps, so a busy Dag lands on ticks like 26m 40s. The two reference lines report the mean, which one stuck run drags well above where runs actually sit, and both labels are pinned to the same edge so they overlap each other and the most recent bars. Nothing names the two series. Finally the card is pinned to 350px on a page with room to spare, which is what makes the bars too small to compare in the first place. The bars were also stacked on the index axis only, so queued time was drawn behind run time rather than underneath it, and was effectively invisible. * Add newsfragment for the duration chart changes * UI: Pin the duration chart height Letting the card flex horizontally handed its height to Chart.js' default 2:1 aspect ratio, which the old fixed 350px width had been capping as a side effect. On a 1400px row the chart came out 496px tall, and on a 2560px monitor it would have passed 1000px and swallowed the page it sits on. * UI: Apply duration chart review feedback The two overview pages had drifted apart for no reason: one card flexed, the other sat in a single-column grid with only a max width, so the same chart answered to two different sets of rules. They now share one Box, which also gives the Task overview the cap the Dag overview needed to stop the chart spanning an ultrawide monitor. The reference line reads "Total:" rather than "Median total:", and the newsfragment is dropped as not warranted for this change. (cherry picked from commit ae756a9) Co-authored-by: Eddie Roman <44783562+eddiesr93@users.noreply.github.com>
aws-airflow-bot
pushed a commit
to aws-mwaa/upstream-to-airflow
that referenced
this pull request
Jul 21, 2026
* UI: Make duration charts readable at a glance The Airflow 3 duration chart dropped several things the Airflow 2 version did well, and what is left is hard to read at the size it is given. Durations on the value axis are the main cost: HH:mm:ss has to be decoded tick by tick before the magnitude is apparent, and Chart.js picks decimal steps, so a busy Dag lands on ticks like 26m 40s. The two reference lines report the mean, which one stuck run drags well above where runs actually sit, and both labels are pinned to the same edge so they overlap each other and the most recent bars. Nothing names the two series. Finally the card is pinned to 350px on a page with room to spare, which is what makes the bars too small to compare in the first place. The bars were also stacked on the index axis only, so queued time was drawn behind run time rather than underneath it, and was effectively invisible. * Add newsfragment for the duration chart changes * UI: Pin the duration chart height Letting the card flex horizontally handed its height to Chart.js' default 2:1 aspect ratio, which the old fixed 350px width had been capping as a side effect. On a 1400px row the chart came out 496px tall, and on a 2560px monitor it would have passed 1000px and swallowed the page it sits on. * UI: Apply duration chart review feedback The two overview pages had drifted apart for no reason: one card flexed, the other sat in a single-column grid with only a max width, so the same chart answered to two different sets of rules. They now share one Box, which also gives the Task overview the cap the Dag overview needed to stop the chart spanning an ultrawide monitor. The reference line reads "Total:" rather than "Median total:", and the newsfragment is dropped as not warranted for this change. (cherry picked from commit ae756a9) Co-authored-by: Eddie Roman <44783562+eddiesr93@users.noreply.github.com>
bbovenzi
pushed a commit
that referenced
this pull request
Jul 21, 2026
…70197) * UI: Make duration charts readable at a glance The Airflow 3 duration chart dropped several things the Airflow 2 version did well, and what is left is hard to read at the size it is given. Durations on the value axis are the main cost: HH:mm:ss has to be decoded tick by tick before the magnitude is apparent, and Chart.js picks decimal steps, so a busy Dag lands on ticks like 26m 40s. The two reference lines report the mean, which one stuck run drags well above where runs actually sit, and both labels are pinned to the same edge so they overlap each other and the most recent bars. Nothing names the two series. Finally the card is pinned to 350px on a page with room to spare, which is what makes the bars too small to compare in the first place. The bars were also stacked on the index axis only, so queued time was drawn behind run time rather than underneath it, and was effectively invisible. * Add newsfragment for the duration chart changes * UI: Pin the duration chart height Letting the card flex horizontally handed its height to Chart.js' default 2:1 aspect ratio, which the old fixed 350px width had been capping as a side effect. On a 1400px row the chart came out 496px tall, and on a 2560px monitor it would have passed 1000px and swallowed the page it sits on. * UI: Apply duration chart review feedback The two overview pages had drifted apart for no reason: one card flexed, the other sat in a single-column grid with only a max width, so the same chart answered to two different sets of rules. They now share one Box, which also gives the Task overview the cap the Dag overview needed to stop the chart spanning an ultrawide monitor. The reference line reads "Total:" rather than "Median total:", and the newsfragment is dropped as not warranted for this change. (cherry picked from commit ae756a9) Co-authored-by: Eddie Roman <44783562+eddiesr93@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Redesign of the Dag Run / Task Instance duration chart on the overview pages, covering the five points raised in the issue.
5m,1h 30m,1d 4hinstead of00: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 like26m 40s/33m 20s.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.y.stackedwas never set even thoughx.stackedwas, 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.tsandgetDurationTickStep) 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
After
At the narrower width the card falls back to (when asset events share the row):
closes: #63582
Was generative AI tooling used to co-author this PR?
Generated-by: Claude Code (Opus 4.8) following the guidelines