Repository navigation
Clean up Dag Version Tab UX - #75244
Merged
bbovenzi merged 2 commits intoOct 21, 2026
Merged
Conversation
The Versions tab compares two Dag versions in a table whose path, before and after cells show serialized values of up to 120 characters. These are mostly JSON or long paths with no spaces, so the browser could not wrap them. The table grew far wider than its container (2146px in a 1100px window), and since DataTable has no horizontal scroll, the rightmost After column was clipped out of view. Narrower windows made it worse. Let those cells wrap with overflow-wrap: anywhere and white-space: pre-wrap. overflow-wrap: break-word is not enough: it does not lower the cell's min-content width, so the table would still overflow. The trade-off is that short paths can break mid-word in narrow windows.
A change to a Dag version carries the serialized value on each side, and a whole task added or removed carries its entire payload. Flattened into a cell and cut at 120 characters, those values said little more than that something had changed; as a JSON preview they name the keys that differ and open in place when the rest matters. The cells were also set as code, whose surface sits on the table's own striped rows at nearly the same shade, and a path was free to break after any character, so a column squeezed by its neighbours read vertically, one glyph per line. A side the change does not have now leaves its cell empty, since a dash reads as a value the version holds. Carrying a preview on each side of a comparison asks two things of the rendered JSON field that its other callers never did. It sized itself for one payload per row, where one long entry — a dotted class path, a URL — could widen its column past the pane whatever bound it was given, since a badge sets its value on one line. And its copy button, shown outright, competes with the values for attention on every row it appears in; waiting for the pointer, or for focus so a keyboard can still reach it, keeps a list to its content. Both now hold wherever a JSON field is rendered. What the comparison says about itself was spread over three stacked rows above the table, and the warning that a bound had cut it short sat nowhere near the field that sets that bound — the one control that can lift it. The summary now heads the table's own header row, beside the columns menu, and the bound carries its own notice. The tab's components were sharing two files, which left the table, its cells and the page's query in the same place as whichever one was being read. Co-Authored-By: Claude <noreply@anthropic.com>
bbovenzi
requested review from
choo121600,
guan404ming,
pierrejeambrun,
ryanahamilton,
shubhamraj-git and
vatsrahul1001
as code owners
October 20, 2026 18:38
ephraimbuddy
approved these changes
Oct 21, 2026
ephraimbuddy
left a comment
ephraimbuddy
left a comment
Contributor
There was a problem hiding this comment.
Approving based on the screens
eladkal
approved these changes
Oct 21, 2026
eladkal
added
type:misc/internal
Contributor
Backport successfully created: v3-4-testNote: As of Merging PRs targeted for Airflow 3.X In matter of doubt please ask in #release-management Slack channel.
|
vatsrahul1001
pushed a commit
that referenced
this pull request
Oct 22, 2026
* Wrap long values in Dag version diff table so After stays visible The Versions tab compares two Dag versions in a table whose path, before and after cells show serialized values of up to 120 characters. These are mostly JSON or long paths with no spaces, so the browser could not wrap them. The table grew far wider than its container (2146px in a 1100px window), and since DataTable has no horizontal scroll, the rightmost After column was clipped out of view. Narrower windows made it worse. Let those cells wrap with overflow-wrap: anywhere and white-space: pre-wrap. overflow-wrap: break-word is not enough: it does not lower the cell's min-content width, so the table would still overflow. The trade-off is that short paths can break mid-word in narrow windows. * UI: Read a Dag version diff's values as JSON, not as a cut string A change to a Dag version carries the serialized value on each side, and a whole task added or removed carries its entire payload. Flattened into a cell and cut at 120 characters, those values said little more than that something had changed; as a JSON preview they name the keys that differ and open in place when the rest matters. The cells were also set as code, whose surface sits on the table's own striped rows at nearly the same shade, and a path was free to break after any character, so a column squeezed by its neighbours read vertically, one glyph per line. A side the change does not have now leaves its cell empty, since a dash reads as a value the version holds. Carrying a preview on each side of a comparison asks two things of the rendered JSON field that its other callers never did. It sized itself for one payload per row, where one long entry — a dotted class path, a URL — could widen its column past the pane whatever bound it was given, since a badge sets its value on one line. And its copy button, shown outright, competes with the values for attention on every row it appears in; waiting for the pointer, or for focus so a keyboard can still reach it, keeps a list to its content. Both now hold wherever a JSON field is rendered. What the comparison says about itself was spread over three stacked rows above the table, and the warning that a bound had cut it short sat nowhere near the field that sets that bound — the one control that can lift it. The summary now heads the table's own header row, beside the columns menu, and the bound carries its own notice. The tab's components were sharing two files, which left the table, its cells and the page's query in the same place as whichever one was being read. Co-Authored-By: Claude <noreply@anthropic.com> --------- (cherry picked from commit 5c021ce) Co-authored-by: Brent Bovenzi <brent@astronomer.io> Co-authored-by: jedcunningham <66968678+jedcunningham@users.noreply.github.com> Co-authored-by: Claude <noreply@anthropic.com>
bbovenzi
added a commit
that referenced
this pull request
Oct 22, 2026
* Wrap long values in Dag version diff table so After stays visible The Versions tab compares two Dag versions in a table whose path, before and after cells show serialized values of up to 120 characters. These are mostly JSON or long paths with no spaces, so the browser could not wrap them. The table grew far wider than its container (2146px in a 1100px window), and since DataTable has no horizontal scroll, the rightmost After column was clipped out of view. Narrower windows made it worse. Let those cells wrap with overflow-wrap: anywhere and white-space: pre-wrap. overflow-wrap: break-word is not enough: it does not lower the cell's min-content width, so the table would still overflow. The trade-off is that short paths can break mid-word in narrow windows. * UI: Read a Dag version diff's values as JSON, not as a cut string A change to a Dag version carries the serialized value on each side, and a whole task added or removed carries its entire payload. Flattened into a cell and cut at 120 characters, those values said little more than that something had changed; as a JSON preview they name the keys that differ and open in place when the rest matters. The cells were also set as code, whose surface sits on the table's own striped rows at nearly the same shade, and a path was free to break after any character, so a column squeezed by its neighbours read vertically, one glyph per line. A side the change does not have now leaves its cell empty, since a dash reads as a value the version holds. Carrying a preview on each side of a comparison asks two things of the rendered JSON field that its other callers never did. It sized itself for one payload per row, where one long entry — a dotted class path, a URL — could widen its column past the pane whatever bound it was given, since a badge sets its value on one line. And its copy button, shown outright, competes with the values for attention on every row it appears in; waiting for the pointer, or for focus so a keyboard can still reach it, keeps a list to its content. Both now hold wherever a JSON field is rendered. What the comparison says about itself was spread over three stacked rows above the table, and the warning that a bound had cut it short sat nowhere near the field that sets that bound — the one control that can lift it. The summary now heads the table's own header row, beside the columns menu, and the bound carries its own notice. The tab's components were sharing two files, which left the table, its cells and the page's query in the same place as whichever one was being read. --------- (cherry picked from commit 5c021ce) Co-authored-by: Brent Bovenzi <brent@astronomer.io> Co-authored-by: jedcunningham <66968678+jedcunningham@users.noreply.github.com> Co-authored-by: Claude <noreply@anthropic.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
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.
Before:
After:
Was generative AI tooling used to co-author this PR?
Claude Opus 5
{pr_number}.significant.rst, in airflow-core/newsfragments. You can add this file in a follow-up commit after the PR is created so you know the PR number.