[v3-3-test] UI: Make duration charts readable at a glance (#70142)#70197
Merged
Conversation
* 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>
boring-cyborg
Bot
added
area:translations
area:UI
1 task
bbovenzi
marked this pull request as ready for review
July 21, 2026 17:38
bbovenzi
requested review from
bbovenzi,
choo121600,
guan404ming,
pierrejeambrun,
ryanahamilton,
shubhamraj-git and
vatsrahul1001
as code owners
July 21, 2026 17:38
bbovenzi
approved these changes
Jul 21, 2026
Contributor
Author
|
Hi maintainer, this PR was merged without a milestone set.
|
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.
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.
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