Add Gantt chart view - #51667

Merged
bbovenzi merged 12 commits into
apache:mainfrom
guan404ming:add-gantt
Aug 20, 2025
Merged

Add Gantt chart view#51667
bbovenzi merged 12 commits into
apache:mainfrom
guan404ming:add-gantt

Conversation

@guan404ming

@guan404mingguan404ming commented Jun 12, 2025•
edited
Loading

Copy link
Copy Markdown
Member

Related Issue

#44672

cc @bbovenzi

Why

Our ui currently lack of gantt chart compared with AF2

How

Reimplement the gantt chart with chart.js

  • add chartjs-adapter-dayjs-4 to use dayjs to format time in chart.js
  • use grid data hook to fetch data and sync layout with grid view
  • add gantt tab in Run, TI and GroupTI page
Screen.Recording.2025-06-13.at.1.49.32.AM.mov

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

@boring-cyborgboring-cyborgBot added area:translations area:UI Related to UI/UX. For Frontend Developers. translation:default labels Jun 12, 2025
@guan404ming

guan404ming commented Jun 12, 2025•
edited
Loading

Copy link
Copy Markdown
MemberAuthor

Known issue: the row alignment between grid view and gantt view would break when the HeaderCard height change. I would like to know that should we fix the height of HeaderCard to some constant or is there any better to solve this issue?

Thanks in advance!

@bbovenzibbovenzi added this to the Airflow 3.1.0 milestone Jun 12, 2025
@bbovenzi

bbovenzi commented Jun 12, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

Very cool! I'll pull this down and play with it some more. But my quick thoughts:

  • Yes, let's make the header a fixed height. Ideally by using as a placeholder
  • I think we need to remove or at least speed up the animations in the gantt chart
  • Let's test this against a dag with 100+ tasks and see how the scrolling holds up

bbovenzi
bbovenzi reviewed Jun 12, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/router.tsx Outdated
@guan404ming
guan404ming marked this pull request as draft June 12, 2025 18:57
@jscheffl

jscheffl commented Jun 12, 2025

Copy link
Copy Markdown
Contributor

Very cool!

@guan404ming
guan404mingforce-pushed the add-gantt branch 3 times, most recently from b82c025 to fb91fb7CompareJune 14, 2025 08:16
@guan404ming

guan404ming commented Jun 14, 2025•
edited
Loading

Copy link
Copy Markdown
MemberAuthor

I've fixed the HeaderCard height for Gantt page and do some rwd implementation for Stat. Also, I've followed the official docs to optimize our Gantt. Current ui looks like

Screen.Recording.2025-06-14.at.4.25.38.PM.mov

@guan404ming
guan404ming marked this pull request as ready for review June 14, 2025 08:35
@guan404ming
guan404ming requested a review from Lee-W as a code ownerJune 14, 2025 08:35
Lee-W
Lee-W reviewed Jun 14, 2025
View reviewed changes

@Lee-WLee-W left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taiwanese Mandarin translation looks good to me

bbovenzi
bbovenzi reviewed Jun 14, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx Outdated
Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx Outdated
Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx Outdated
Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx Outdated
Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx Outdated
Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx Outdated
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx Outdated
Comment threadairflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx Outdated
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx Outdated
@guan404ming
guan404ming marked this pull request as draft June 16, 2025 08:46
@bbovenzi

bbovenzi commented Jun 16, 2025

Copy link
Copy Markdown
Contributor

I was thinking about the UX of this after #51764

Perhaps instead of putting the gantt in a tab on the right-hand panel, it should be an option to add onto the grid view on the left panel. Let's discuss first before you refactor everything though.

@guan404ming

guan404ming commented Jun 17, 2025

Copy link
Copy Markdown
MemberAuthor

I’m back!
I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.

The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?

@bbovenzi

bbovenzi commented Jun 17, 2025

Copy link
Copy Markdown
Contributor

I’m back! I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.

The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?

Either, the gantt chart can be a separate view on the left panel (easier)
Show/Hide Gantt , is an option on the grid view and they can live inside of the same container so the scrolling is easier to handle.

@guan404ming

guan404ming commented Jun 17, 2025

Copy link
Copy Markdown
MemberAuthor

I think the second idea is great and aligns better with the UX, especially since users will likely want to use both the grid and Gantt views at the same time. I’ll try implementing it first and see how it feels. My only concern is that it might get a bit cramped, so I might increase the min-width of the left pane to help with that. Thanks!

@bbovenzi

bbovenzi commented Jun 17, 2025

Copy link
Copy Markdown
Contributor

Yeah, when the gantt is shown we can change the minWidth!

@guan404ming
guan404mingforce-pushed the add-gantt branch 2 times, most recently from d6f2fef to b7b5ac6CompareJune 19, 2025 19:46
@guan404ming
guan404mingforce-pushed the add-gantt branch 2 times, most recently from 0e85698 to 16d7377CompareAugust 16, 2025 18:00
bbovenzi
bbovenzi reviewed Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx Outdated
bbovenzi
bbovenzi reviewed Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx Outdated
@bbovenzi

bbovenzi commented Aug 18, 2025

Copy link
Copy Markdown
Contributor

Looking really good! Let's fix some spacing issues and merge this. Then we can work on the tooltips and clicking on a gantt bar to select the task

bbovenzi
bbovenzi reviewed Aug 19, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx Outdated
@bbovenzi
bbovenzi merged commit 61b64a4 into apache:mainAug 20, 2025
53 checks passed
@bbovenzi

bbovenzi commented Aug 20, 2025

Copy link
Copy Markdown
Contributor

#protm

@potiuk

potiuk commented Aug 20, 2025

Copy link
Copy Markdown
Member

Indeed #protm

@guan404ming

guan404ming commented Aug 20, 2025

Copy link
Copy Markdown
MemberAuthor

Thanks for all reviews! I would keep working on improving the chart.

@guan404ming
guan404ming deleted the add-gantt branch August 20, 2025 18:27
@pierrejeambrunpierrejeambrun mentioned this pull request Aug 21, 2025
Closed
mangal-vairalkar pushed a commit to mangal-vairalkar/airflow that referenced this pull request Aug 30, 2025
@guan404ming@bbovenzi@mangal-vairalkar
Add Gantt chart view (apache#51667)
1abba1d
* Add Gantt chart
* Fix grid color in dark mode
* Sync selected color with Grid
* Enable showGantt button for run or TI selected
* Set minimum width for TI
* Fix spacing
* Fix single task layout
* Update auto-refresh for TI and useMemo
* Fix button visibility condition
* Update fixedHeight
* Update DetailsLayout and Grid layout
* Update airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
---------
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
@simi

simi commented Sep 19, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

I'm facing this issue on Linux/Chrome. Time rotated is not simple to read, since it is cut at the top and tooltip is streched to fit inside and cut at the bottom.

image

@guan404mingguan404ming mentioned this pull request Sep 23, 2025
Closed
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Lee-WLee-WLee-W left review comments
@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@bbovenzibbovenzibbovenzi approved these changes
@jason810496jason810496jason810496 approved these changes
@jscheffljscheffljscheffl approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees

No one assigned

Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects

None yet

Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

8 participants

@guan404ming@bbovenzi@jscheffl@potiuk@simi@Lee-W@pierrejeambrun@jason810496
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Add Gantt chart view - #51667
Merged
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Aug 20, 2025
Merged
Add Gantt chart view#51667
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Conversation
@guan404ming
@guan404mingguan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Member
Related Issue
#44672
cc @bbovenzi
Why
Our ui currently lack of gantt chart compared with AF2
How
Reimplement the gantt chart with chart.js
  • add chartjs-adapter-dayjs-4 to use dayjs to format time in chart.js
  • use grid data hook to fetch data and sync layout with grid view
  • add gantt tab in Run, TI and GroupTI page
Screen.Recording.2025-06-13.at.1.49.32.AM.mov
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:translations

area:UI
Related to UI/UX. For Frontend Developers.
translation:default

labels
Jun 12, 2025
@guan404ming
guan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Known issue: the row alignment between grid view and gantt view would break when the HeaderCard height change. I would like to know that should we fix the height of HeaderCard to some constant or is there any better to solve this issue?
Thanks in advance!
@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Jun 12, 2025
@bbovenzi
bbovenzi
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Very cool! I'll pull this down and play with it some more. But my quick thoughts:
  • Yes, let's make the header a fixed height. Ideally by using as a placeholder
  • I think we need to remove or at least speed up the animations in the gantt chart
  • Let's test this against a dag with 100+ tasks and see how the scrolling holds up
bbovenzi
bbovenzi
reviewed
Jun 12, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/router.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 12, 2025 18:57
@jscheffl
jscheffl
commented
Jun 12, 2025

Copy link


Copy Markdown

Contributor
Very cool!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
3 times, most recently
from
b82c025 to
fb91fb7CompareJune 14, 2025 08:16
@guan404ming
guan404ming
commented
Jun 14, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
I've fixed the HeaderCard height for Gantt page and do some rwd implementation for Stat. Also, I've followed the official docs to optimize our Gantt. Current ui looks like
Screen.Recording.2025-06-14.at.4.25.38.PM.mov
@guan404ming
guan404ming
marked this pull request as ready for review
June 14, 2025 08:35
@guan404ming
guan404ming
requested a review
from Lee-W
as a code ownerJune 14, 2025 08:35
Lee-W
Lee-W
reviewed
Jun 14, 2025
View reviewed changes
@Lee-WLee-W
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taiwanese Mandarin translation looks good to me
bbovenzi
bbovenzi
reviewed
Jun 14, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 16, 2025 08:46
@bbovenzi
bbovenzi
commented
Jun 16, 2025

Copy link


Copy Markdown

Contributor
I was thinking about the UX of this after #51764
Perhaps instead of putting the gantt in a tab on the right-hand panel, it should be an option to add onto the grid view on the left panel. Let's discuss first before you refactor everything though.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I’m back!

I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
I’m back! I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
Either, the gantt chart can be a separate view on the left panel (easier)

Show/Hide Gantt , is an option on the grid view and they can live inside of the same container so the scrolling is easier to handle.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I think the second idea is great and aligns better with the UX, especially since users will likely want to use both the grid and Gantt views at the same time. I’ll try implementing it first and see how it feels. My only concern is that it might get a bit cramped, so I might increase the min-width of the left pane to help with that. Thanks!
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
Yeah, when the gantt is shown we can change the minWidth!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
d6f2fef to
b7b5ac6CompareJune 19, 2025 19:46
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
0e85698 to
16d7377CompareAugust 16, 2025 18:00
bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

@bbovenzi
bbovenzi
commented
Aug 18, 2025

Copy link


Copy Markdown

Contributor
Looking really good! Let's fix some spacing issues and merge this. Then we can work on the tooltips and clicking on a gantt bar to select the task
bbovenzi
bbovenzi
reviewed
Aug 19, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@bbovenzi
bbovenzi
merged commit 61b64a4
into
apache:mainAug 20, 2025

53 checks passed

@bbovenzi
bbovenzi
commented
Aug 20, 2025

Copy link


Copy Markdown

Contributor
#protm
@potiuk
potiuk
commented
Aug 20, 2025

Copy link


Copy Markdown

Member
Indeed #protm
@guan404ming
guan404ming
commented
Aug 20, 2025

Copy link


Copy Markdown

MemberAuthor
Thanks for all reviews! I would keep working on improving the chart.
@guan404ming
guan404ming
deleted the

add-gantt

branch
August 20, 2025 18:27
@pierrejeambrunpierrejeambrun
mentioned this pull request
Aug 21, 2025

Closed

mangal-vairalkar pushed a commit
to mangal-vairalkar/airflow
that referenced
this pull request
Aug 30, 2025
@guan404ming@bbovenzi@mangal-vairalkar
Add Gantt chart view (apache#51667)
1abba1d
* Add Gantt chart
* Fix grid color in dark mode
* Sync selected color with Grid
* Enable showGantt button for run or TI selected
* Set minimum width for TI
* Fix spacing
* Fix single task layout
* Update auto-refresh for TI and useMemo
* Fix button visibility condition
* Update fixedHeight
* Update DetailsLayout and Grid layout
* Update airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
---------
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
@simi
simi
commented
Sep 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I'm facing this issue on Linux/Chrome. Time rotated is not simple to read, since it is cut at the top and tooltip is streched to fit inside and cut at the bottom.
image
@guan404mingguan404ming
mentioned this pull request
Sep 23, 2025
 Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@Lee-WLee-WLee-W left review comments
@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@bbovenzibbovenzibbovenzi approved these changes
@jason810496jason810496jason810496 approved these changes
@jscheffljscheffljscheffl approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

8 participants

@guan404ming@bbovenzi@jscheffl@potiuk@simi@Lee-W@pierrejeambrun@jason810496

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add Gantt chart view - #51667
Merged
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Aug 20, 2025
Merged
Add Gantt chart view#51667
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Conversation
@guan404ming
@guan404mingguan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Member
Related Issue
#44672
cc @bbovenzi
Why
Our ui currently lack of gantt chart compared with AF2
How
Reimplement the gantt chart with chart.js
  • add chartjs-adapter-dayjs-4 to use dayjs to format time in chart.js
  • use grid data hook to fetch data and sync layout with grid view
  • add gantt tab in Run, TI and GroupTI page
Screen.Recording.2025-06-13.at.1.49.32.AM.mov
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:translations

area:UI
Related to UI/UX. For Frontend Developers.
translation:default

labels
Jun 12, 2025
@guan404ming
guan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Known issue: the row alignment between grid view and gantt view would break when the HeaderCard height change. I would like to know that should we fix the height of HeaderCard to some constant or is there any better to solve this issue?
Thanks in advance!
@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Jun 12, 2025
@bbovenzi
bbovenzi
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Very cool! I'll pull this down and play with it some more. But my quick thoughts:
  • Yes, let's make the header a fixed height. Ideally by using as a placeholder
  • I think we need to remove or at least speed up the animations in the gantt chart
  • Let's test this against a dag with 100+ tasks and see how the scrolling holds up
bbovenzi
bbovenzi
reviewed
Jun 12, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/router.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 12, 2025 18:57
@jscheffl
jscheffl
commented
Jun 12, 2025

Copy link


Copy Markdown

Contributor
Very cool!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
3 times, most recently
from
b82c025 to
fb91fb7CompareJune 14, 2025 08:16
@guan404ming
guan404ming
commented
Jun 14, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
I've fixed the HeaderCard height for Gantt page and do some rwd implementation for Stat. Also, I've followed the official docs to optimize our Gantt. Current ui looks like
Screen.Recording.2025-06-14.at.4.25.38.PM.mov
@guan404ming
guan404ming
marked this pull request as ready for review
June 14, 2025 08:35
@guan404ming
guan404ming
requested a review
from Lee-W
as a code ownerJune 14, 2025 08:35
Lee-W
Lee-W
reviewed
Jun 14, 2025
View reviewed changes
@Lee-WLee-W
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taiwanese Mandarin translation looks good to me
bbovenzi
bbovenzi
reviewed
Jun 14, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 16, 2025 08:46
@bbovenzi
bbovenzi
commented
Jun 16, 2025

Copy link


Copy Markdown

Contributor
I was thinking about the UX of this after #51764
Perhaps instead of putting the gantt in a tab on the right-hand panel, it should be an option to add onto the grid view on the left panel. Let's discuss first before you refactor everything though.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I’m back!

I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
I’m back! I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
Either, the gantt chart can be a separate view on the left panel (easier)

Show/Hide Gantt , is an option on the grid view and they can live inside of the same container so the scrolling is easier to handle.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I think the second idea is great and aligns better with the UX, especially since users will likely want to use both the grid and Gantt views at the same time. I’ll try implementing it first and see how it feels. My only concern is that it might get a bit cramped, so I might increase the min-width of the left pane to help with that. Thanks!
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
Yeah, when the gantt is shown we can change the minWidth!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
d6f2fef to
b7b5ac6CompareJune 19, 2025 19:46
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
0e85698 to
16d7377CompareAugust 16, 2025 18:00
bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

@bbovenzi
bbovenzi
commented
Aug 18, 2025

Copy link


Copy Markdown

Contributor
Looking really good! Let's fix some spacing issues and merge this. Then we can work on the tooltips and clicking on a gantt bar to select the task
bbovenzi
bbovenzi
reviewed
Aug 19, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@bbovenzi
bbovenzi
merged commit 61b64a4
into
apache:mainAug 20, 2025

53 checks passed

@bbovenzi
bbovenzi
commented
Aug 20, 2025

Copy link


Copy Markdown

Contributor
#protm
@potiuk
potiuk
commented
Aug 20, 2025

Copy link


Copy Markdown

Member
Indeed #protm
@guan404ming
guan404ming
commented
Aug 20, 2025

Copy link


Copy Markdown

MemberAuthor
Thanks for all reviews! I would keep working on improving the chart.
@guan404ming
guan404ming
deleted the

add-gantt

branch
August 20, 2025 18:27
@pierrejeambrunpierrejeambrun
mentioned this pull request
Aug 21, 2025

Closed

mangal-vairalkar pushed a commit
to mangal-vairalkar/airflow
that referenced
this pull request
Aug 30, 2025
@guan404ming@bbovenzi@mangal-vairalkar
Add Gantt chart view (apache#51667)
1abba1d
* Add Gantt chart
* Fix grid color in dark mode
* Sync selected color with Grid
* Enable showGantt button for run or TI selected
* Set minimum width for TI
* Fix spacing
* Fix single task layout
* Update auto-refresh for TI and useMemo
* Fix button visibility condition
* Update fixedHeight
* Update DetailsLayout and Grid layout
* Update airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
---------
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
@simi
simi
commented
Sep 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I'm facing this issue on Linux/Chrome. Time rotated is not simple to read, since it is cut at the top and tooltip is streched to fit inside and cut at the bottom.
image
@guan404mingguan404ming
mentioned this pull request
Sep 23, 2025
 Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@Lee-WLee-WLee-W left review comments
@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@bbovenzibbovenzibbovenzi approved these changes
@jason810496jason810496jason810496 approved these changes
@jscheffljscheffljscheffl approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

8 participants

@guan404ming@bbovenzi@jscheffl@potiuk@simi@Lee-W@pierrejeambrun@jason810496

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add Gantt chart view - #51667
Merged
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Aug 20, 2025
Merged
Add Gantt chart view#51667
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Conversation
@guan404ming
@guan404mingguan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Member
Related Issue
#44672
cc @bbovenzi
Why
Our ui currently lack of gantt chart compared with AF2
How
Reimplement the gantt chart with chart.js
  • add chartjs-adapter-dayjs-4 to use dayjs to format time in chart.js
  • use grid data hook to fetch data and sync layout with grid view
  • add gantt tab in Run, TI and GroupTI page
Screen.Recording.2025-06-13.at.1.49.32.AM.mov
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:translations

area:UI
Related to UI/UX. For Frontend Developers.
translation:default

labels
Jun 12, 2025
@guan404ming
guan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Known issue: the row alignment between grid view and gantt view would break when the HeaderCard height change. I would like to know that should we fix the height of HeaderCard to some constant or is there any better to solve this issue?
Thanks in advance!
@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Jun 12, 2025
@bbovenzi
bbovenzi
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Very cool! I'll pull this down and play with it some more. But my quick thoughts:
  • Yes, let's make the header a fixed height. Ideally by using as a placeholder
  • I think we need to remove or at least speed up the animations in the gantt chart
  • Let's test this against a dag with 100+ tasks and see how the scrolling holds up
bbovenzi
bbovenzi
reviewed
Jun 12, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/router.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 12, 2025 18:57
@jscheffl
jscheffl
commented
Jun 12, 2025

Copy link


Copy Markdown

Contributor
Very cool!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
3 times, most recently
from
b82c025 to
fb91fb7CompareJune 14, 2025 08:16
@guan404ming
guan404ming
commented
Jun 14, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
I've fixed the HeaderCard height for Gantt page and do some rwd implementation for Stat. Also, I've followed the official docs to optimize our Gantt. Current ui looks like
Screen.Recording.2025-06-14.at.4.25.38.PM.mov
@guan404ming
guan404ming
marked this pull request as ready for review
June 14, 2025 08:35
@guan404ming
guan404ming
requested a review
from Lee-W
as a code ownerJune 14, 2025 08:35
Lee-W
Lee-W
reviewed
Jun 14, 2025
View reviewed changes
@Lee-WLee-W
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taiwanese Mandarin translation looks good to me
bbovenzi
bbovenzi
reviewed
Jun 14, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 16, 2025 08:46
@bbovenzi
bbovenzi
commented
Jun 16, 2025

Copy link


Copy Markdown

Contributor
I was thinking about the UX of this after #51764
Perhaps instead of putting the gantt in a tab on the right-hand panel, it should be an option to add onto the grid view on the left panel. Let's discuss first before you refactor everything though.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I’m back!

I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
I’m back! I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
Either, the gantt chart can be a separate view on the left panel (easier)

Show/Hide Gantt , is an option on the grid view and they can live inside of the same container so the scrolling is easier to handle.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I think the second idea is great and aligns better with the UX, especially since users will likely want to use both the grid and Gantt views at the same time. I’ll try implementing it first and see how it feels. My only concern is that it might get a bit cramped, so I might increase the min-width of the left pane to help with that. Thanks!
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
Yeah, when the gantt is shown we can change the minWidth!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
d6f2fef to
b7b5ac6CompareJune 19, 2025 19:46
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
0e85698 to
16d7377CompareAugust 16, 2025 18:00
bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

@bbovenzi
bbovenzi
commented
Aug 18, 2025

Copy link


Copy Markdown

Contributor
Looking really good! Let's fix some spacing issues and merge this. Then we can work on the tooltips and clicking on a gantt bar to select the task
bbovenzi
bbovenzi
reviewed
Aug 19, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@bbovenzi
bbovenzi
merged commit 61b64a4
into
apache:mainAug 20, 2025

53 checks passed

@bbovenzi
bbovenzi
commented
Aug 20, 2025

Copy link


Copy Markdown

Contributor
#protm
@potiuk
potiuk
commented
Aug 20, 2025

Copy link


Copy Markdown

Member
Indeed #protm
@guan404ming
guan404ming
commented
Aug 20, 2025

Copy link


Copy Markdown

MemberAuthor
Thanks for all reviews! I would keep working on improving the chart.
@guan404ming
guan404ming
deleted the

add-gantt

branch
August 20, 2025 18:27
@pierrejeambrunpierrejeambrun
mentioned this pull request
Aug 21, 2025

Closed

mangal-vairalkar pushed a commit
to mangal-vairalkar/airflow
that referenced
this pull request
Aug 30, 2025
@guan404ming@bbovenzi@mangal-vairalkar
Add Gantt chart view (apache#51667)
1abba1d
* Add Gantt chart
* Fix grid color in dark mode
* Sync selected color with Grid
* Enable showGantt button for run or TI selected
* Set minimum width for TI
* Fix spacing
* Fix single task layout
* Update auto-refresh for TI and useMemo
* Fix button visibility condition
* Update fixedHeight
* Update DetailsLayout and Grid layout
* Update airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
---------
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
@simi
simi
commented
Sep 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I'm facing this issue on Linux/Chrome. Time rotated is not simple to read, since it is cut at the top and tooltip is streched to fit inside and cut at the bottom.
image
@guan404mingguan404ming
mentioned this pull request
Sep 23, 2025
 Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@Lee-WLee-WLee-W left review comments
@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@bbovenzibbovenzibbovenzi approved these changes
@jason810496jason810496jason810496 approved these changes
@jscheffljscheffljscheffl approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

8 participants

@guan404ming@bbovenzi@jscheffl@potiuk@simi@Lee-W@pierrejeambrun@jason810496

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Add Gantt chart view - #51667
Merged
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Aug 20, 2025
Merged
Add Gantt chart view#51667
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Conversation
@guan404ming
@guan404mingguan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Member
Related Issue
#44672
cc @bbovenzi
Why
Our ui currently lack of gantt chart compared with AF2
How
Reimplement the gantt chart with chart.js
  • add chartjs-adapter-dayjs-4 to use dayjs to format time in chart.js
  • use grid data hook to fetch data and sync layout with grid view
  • add gantt tab in Run, TI and GroupTI page
Screen.Recording.2025-06-13.at.1.49.32.AM.mov
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:translations

area:UI
Related to UI/UX. For Frontend Developers.
translation:default

labels
Jun 12, 2025
@guan404ming
guan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Known issue: the row alignment between grid view and gantt view would break when the HeaderCard height change. I would like to know that should we fix the height of HeaderCard to some constant or is there any better to solve this issue?
Thanks in advance!
@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Jun 12, 2025
@bbovenzi
bbovenzi
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Very cool! I'll pull this down and play with it some more. But my quick thoughts:
  • Yes, let's make the header a fixed height. Ideally by using as a placeholder
  • I think we need to remove or at least speed up the animations in the gantt chart
  • Let's test this against a dag with 100+ tasks and see how the scrolling holds up
bbovenzi
bbovenzi
reviewed
Jun 12, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/router.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 12, 2025 18:57
@jscheffl
jscheffl
commented
Jun 12, 2025

Copy link


Copy Markdown

Contributor
Very cool!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
3 times, most recently
from
b82c025 to
fb91fb7CompareJune 14, 2025 08:16
@guan404ming
guan404ming
commented
Jun 14, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
I've fixed the HeaderCard height for Gantt page and do some rwd implementation for Stat. Also, I've followed the official docs to optimize our Gantt. Current ui looks like
Screen.Recording.2025-06-14.at.4.25.38.PM.mov
@guan404ming
guan404ming
marked this pull request as ready for review
June 14, 2025 08:35
@guan404ming
guan404ming
requested a review
from Lee-W
as a code ownerJune 14, 2025 08:35
Lee-W
Lee-W
reviewed
Jun 14, 2025
View reviewed changes
@Lee-WLee-W
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taiwanese Mandarin translation looks good to me
bbovenzi
bbovenzi
reviewed
Jun 14, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 16, 2025 08:46
@bbovenzi
bbovenzi
commented
Jun 16, 2025

Copy link


Copy Markdown

Contributor
I was thinking about the UX of this after #51764
Perhaps instead of putting the gantt in a tab on the right-hand panel, it should be an option to add onto the grid view on the left panel. Let's discuss first before you refactor everything though.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I’m back!

I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
I’m back! I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
Either, the gantt chart can be a separate view on the left panel (easier)

Show/Hide Gantt , is an option on the grid view and they can live inside of the same container so the scrolling is easier to handle.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I think the second idea is great and aligns better with the UX, especially since users will likely want to use both the grid and Gantt views at the same time. I’ll try implementing it first and see how it feels. My only concern is that it might get a bit cramped, so I might increase the min-width of the left pane to help with that. Thanks!
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
Yeah, when the gantt is shown we can change the minWidth!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
d6f2fef to
b7b5ac6CompareJune 19, 2025 19:46
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
0e85698 to
16d7377CompareAugust 16, 2025 18:00
bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

@bbovenzi
bbovenzi
commented
Aug 18, 2025

Copy link


Copy Markdown

Contributor
Looking really good! Let's fix some spacing issues and merge this. Then we can work on the tooltips and clicking on a gantt bar to select the task
bbovenzi
bbovenzi
reviewed
Aug 19, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@bbovenzi
bbovenzi
merged commit 61b64a4
into
apache:mainAug 20, 2025

53 checks passed

@bbovenzi
bbovenzi
commented
Aug 20, 2025

Copy link


Copy Markdown

Contributor
#protm
@potiuk
potiuk
commented
Aug 20, 2025

Copy link


Copy Markdown

Member
Indeed #protm
@guan404ming
guan404ming
commented
Aug 20, 2025

Copy link


Copy Markdown

MemberAuthor
Thanks for all reviews! I would keep working on improving the chart.
@guan404ming
guan404ming
deleted the

add-gantt

branch
August 20, 2025 18:27
@pierrejeambrunpierrejeambrun
mentioned this pull request
Aug 21, 2025

Closed

mangal-vairalkar pushed a commit
to mangal-vairalkar/airflow
that referenced
this pull request
Aug 30, 2025
@guan404ming@bbovenzi@mangal-vairalkar
Add Gantt chart view (apache#51667)
1abba1d
* Add Gantt chart
* Fix grid color in dark mode
* Sync selected color with Grid
* Enable showGantt button for run or TI selected
* Set minimum width for TI
* Fix spacing
* Fix single task layout
* Update auto-refresh for TI and useMemo
* Fix button visibility condition
* Update fixedHeight
* Update DetailsLayout and Grid layout
* Update airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
---------
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
@simi
simi
commented
Sep 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I'm facing this issue on Linux/Chrome. Time rotated is not simple to read, since it is cut at the top and tooltip is streched to fit inside and cut at the bottom.
image
@guan404mingguan404ming
mentioned this pull request
Sep 23, 2025
 Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@Lee-WLee-WLee-W left review comments
@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@bbovenzibbovenzibbovenzi approved these changes
@jason810496jason810496jason810496 approved these changes
@jscheffljscheffljscheffl approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

8 participants

@guan404ming@bbovenzi@jscheffl@potiuk@simi@Lee-W@pierrejeambrun@jason810496

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add Gantt chart view - #51667
Merged
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Aug 20, 2025
Merged
Add Gantt chart view#51667
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Conversation
@guan404ming
@guan404mingguan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Member
Related Issue
#44672
cc @bbovenzi
Why
Our ui currently lack of gantt chart compared with AF2
How
Reimplement the gantt chart with chart.js
  • add chartjs-adapter-dayjs-4 to use dayjs to format time in chart.js
  • use grid data hook to fetch data and sync layout with grid view
  • add gantt tab in Run, TI and GroupTI page
Screen.Recording.2025-06-13.at.1.49.32.AM.mov
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:translations

area:UI
Related to UI/UX. For Frontend Developers.
translation:default

labels
Jun 12, 2025
@guan404ming
guan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Known issue: the row alignment between grid view and gantt view would break when the HeaderCard height change. I would like to know that should we fix the height of HeaderCard to some constant or is there any better to solve this issue?
Thanks in advance!
@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Jun 12, 2025
@bbovenzi
bbovenzi
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Very cool! I'll pull this down and play with it some more. But my quick thoughts:
  • Yes, let's make the header a fixed height. Ideally by using as a placeholder
  • I think we need to remove or at least speed up the animations in the gantt chart
  • Let's test this against a dag with 100+ tasks and see how the scrolling holds up
bbovenzi
bbovenzi
reviewed
Jun 12, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/router.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 12, 2025 18:57
@jscheffl
jscheffl
commented
Jun 12, 2025

Copy link


Copy Markdown

Contributor
Very cool!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
3 times, most recently
from
b82c025 to
fb91fb7CompareJune 14, 2025 08:16
@guan404ming
guan404ming
commented
Jun 14, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
I've fixed the HeaderCard height for Gantt page and do some rwd implementation for Stat. Also, I've followed the official docs to optimize our Gantt. Current ui looks like
Screen.Recording.2025-06-14.at.4.25.38.PM.mov
@guan404ming
guan404ming
marked this pull request as ready for review
June 14, 2025 08:35
@guan404ming
guan404ming
requested a review
from Lee-W
as a code ownerJune 14, 2025 08:35
Lee-W
Lee-W
reviewed
Jun 14, 2025
View reviewed changes
@Lee-WLee-W
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taiwanese Mandarin translation looks good to me
bbovenzi
bbovenzi
reviewed
Jun 14, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 16, 2025 08:46
@bbovenzi
bbovenzi
commented
Jun 16, 2025

Copy link


Copy Markdown

Contributor
I was thinking about the UX of this after #51764
Perhaps instead of putting the gantt in a tab on the right-hand panel, it should be an option to add onto the grid view on the left panel. Let's discuss first before you refactor everything though.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I’m back!

I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
I’m back! I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
Either, the gantt chart can be a separate view on the left panel (easier)

Show/Hide Gantt , is an option on the grid view and they can live inside of the same container so the scrolling is easier to handle.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I think the second idea is great and aligns better with the UX, especially since users will likely want to use both the grid and Gantt views at the same time. I’ll try implementing it first and see how it feels. My only concern is that it might get a bit cramped, so I might increase the min-width of the left pane to help with that. Thanks!
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
Yeah, when the gantt is shown we can change the minWidth!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
d6f2fef to
b7b5ac6CompareJune 19, 2025 19:46
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
0e85698 to
16d7377CompareAugust 16, 2025 18:00
bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

@bbovenzi
bbovenzi
commented
Aug 18, 2025

Copy link


Copy Markdown

Contributor
Looking really good! Let's fix some spacing issues and merge this. Then we can work on the tooltips and clicking on a gantt bar to select the task
bbovenzi
bbovenzi
reviewed
Aug 19, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@bbovenzi
bbovenzi
merged commit 61b64a4
into
apache:mainAug 20, 2025

53 checks passed

@bbovenzi
bbovenzi
commented
Aug 20, 2025

Copy link


Copy Markdown

Contributor
#protm
@potiuk
potiuk
commented
Aug 20, 2025

Copy link


Copy Markdown

Member
Indeed #protm
@guan404ming
guan404ming
commented
Aug 20, 2025

Copy link


Copy Markdown

MemberAuthor
Thanks for all reviews! I would keep working on improving the chart.
@guan404ming
guan404ming
deleted the

add-gantt

branch
August 20, 2025 18:27
@pierrejeambrunpierrejeambrun
mentioned this pull request
Aug 21, 2025

Closed

mangal-vairalkar pushed a commit
to mangal-vairalkar/airflow
that referenced
this pull request
Aug 30, 2025
@guan404ming@bbovenzi@mangal-vairalkar
Add Gantt chart view (apache#51667)
1abba1d
* Add Gantt chart
* Fix grid color in dark mode
* Sync selected color with Grid
* Enable showGantt button for run or TI selected
* Set minimum width for TI
* Fix spacing
* Fix single task layout
* Update auto-refresh for TI and useMemo
* Fix button visibility condition
* Update fixedHeight
* Update DetailsLayout and Grid layout
* Update airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
---------
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
@simi
simi
commented
Sep 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I'm facing this issue on Linux/Chrome. Time rotated is not simple to read, since it is cut at the top and tooltip is streched to fit inside and cut at the bottom.
image
@guan404mingguan404ming
mentioned this pull request
Sep 23, 2025
 Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@Lee-WLee-WLee-W left review comments
@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@bbovenzibbovenzibbovenzi approved these changes
@jason810496jason810496jason810496 approved these changes
@jscheffljscheffljscheffl approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

8 participants

@guan404ming@bbovenzi@jscheffl@potiuk@simi@Lee-W@pierrejeambrun@jason810496

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add Gantt chart view - #51667
Merged
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Aug 20, 2025
Merged
Add Gantt chart view#51667
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Conversation
@guan404ming
@guan404mingguan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Member
Related Issue
#44672
cc @bbovenzi
Why
Our ui currently lack of gantt chart compared with AF2
How
Reimplement the gantt chart with chart.js
  • add chartjs-adapter-dayjs-4 to use dayjs to format time in chart.js
  • use grid data hook to fetch data and sync layout with grid view
  • add gantt tab in Run, TI and GroupTI page
Screen.Recording.2025-06-13.at.1.49.32.AM.mov
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:translations

area:UI
Related to UI/UX. For Frontend Developers.
translation:default

labels
Jun 12, 2025
@guan404ming
guan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Known issue: the row alignment between grid view and gantt view would break when the HeaderCard height change. I would like to know that should we fix the height of HeaderCard to some constant or is there any better to solve this issue?
Thanks in advance!
@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Jun 12, 2025
@bbovenzi
bbovenzi
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Very cool! I'll pull this down and play with it some more. But my quick thoughts:
  • Yes, let's make the header a fixed height. Ideally by using as a placeholder
  • I think we need to remove or at least speed up the animations in the gantt chart
  • Let's test this against a dag with 100+ tasks and see how the scrolling holds up
bbovenzi
bbovenzi
reviewed
Jun 12, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/router.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 12, 2025 18:57
@jscheffl
jscheffl
commented
Jun 12, 2025

Copy link


Copy Markdown

Contributor
Very cool!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
3 times, most recently
from
b82c025 to
fb91fb7CompareJune 14, 2025 08:16
@guan404ming
guan404ming
commented
Jun 14, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
I've fixed the HeaderCard height for Gantt page and do some rwd implementation for Stat. Also, I've followed the official docs to optimize our Gantt. Current ui looks like
Screen.Recording.2025-06-14.at.4.25.38.PM.mov
@guan404ming
guan404ming
marked this pull request as ready for review
June 14, 2025 08:35
@guan404ming
guan404ming
requested a review
from Lee-W
as a code ownerJune 14, 2025 08:35
Lee-W
Lee-W
reviewed
Jun 14, 2025
View reviewed changes
@Lee-WLee-W
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taiwanese Mandarin translation looks good to me
bbovenzi
bbovenzi
reviewed
Jun 14, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 16, 2025 08:46
@bbovenzi
bbovenzi
commented
Jun 16, 2025

Copy link


Copy Markdown

Contributor
I was thinking about the UX of this after #51764
Perhaps instead of putting the gantt in a tab on the right-hand panel, it should be an option to add onto the grid view on the left panel. Let's discuss first before you refactor everything though.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I’m back!

I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
I’m back! I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
Either, the gantt chart can be a separate view on the left panel (easier)

Show/Hide Gantt , is an option on the grid view and they can live inside of the same container so the scrolling is easier to handle.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I think the second idea is great and aligns better with the UX, especially since users will likely want to use both the grid and Gantt views at the same time. I’ll try implementing it first and see how it feels. My only concern is that it might get a bit cramped, so I might increase the min-width of the left pane to help with that. Thanks!
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
Yeah, when the gantt is shown we can change the minWidth!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
d6f2fef to
b7b5ac6CompareJune 19, 2025 19:46
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
0e85698 to
16d7377CompareAugust 16, 2025 18:00
bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

@bbovenzi
bbovenzi
commented
Aug 18, 2025

Copy link


Copy Markdown

Contributor
Looking really good! Let's fix some spacing issues and merge this. Then we can work on the tooltips and clicking on a gantt bar to select the task
bbovenzi
bbovenzi
reviewed
Aug 19, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@bbovenzi
bbovenzi
merged commit 61b64a4
into
apache:mainAug 20, 2025

53 checks passed

@bbovenzi
bbovenzi
commented
Aug 20, 2025

Copy link


Copy Markdown

Contributor
#protm
@potiuk
potiuk
commented
Aug 20, 2025

Copy link


Copy Markdown

Member
Indeed #protm
@guan404ming
guan404ming
commented
Aug 20, 2025

Copy link


Copy Markdown

MemberAuthor
Thanks for all reviews! I would keep working on improving the chart.
@guan404ming
guan404ming
deleted the

add-gantt

branch
August 20, 2025 18:27
@pierrejeambrunpierrejeambrun
mentioned this pull request
Aug 21, 2025

Closed

mangal-vairalkar pushed a commit
to mangal-vairalkar/airflow
that referenced
this pull request
Aug 30, 2025
@guan404ming@bbovenzi@mangal-vairalkar
Add Gantt chart view (apache#51667)
1abba1d
* Add Gantt chart
* Fix grid color in dark mode
* Sync selected color with Grid
* Enable showGantt button for run or TI selected
* Set minimum width for TI
* Fix spacing
* Fix single task layout
* Update auto-refresh for TI and useMemo
* Fix button visibility condition
* Update fixedHeight
* Update DetailsLayout and Grid layout
* Update airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
---------
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
@simi
simi
commented
Sep 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I'm facing this issue on Linux/Chrome. Time rotated is not simple to read, since it is cut at the top and tooltip is streched to fit inside and cut at the bottom.
image
@guan404mingguan404ming
mentioned this pull request
Sep 23, 2025
 Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@Lee-WLee-WLee-W left review comments
@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@bbovenzibbovenzibbovenzi approved these changes
@jason810496jason810496jason810496 approved these changes
@jscheffljscheffljscheffl approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

8 participants

@guan404ming@bbovenzi@jscheffl@potiuk@simi@Lee-W@pierrejeambrun@jason810496

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Add Gantt chart view - #51667
Merged
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Aug 20, 2025
Merged
Add Gantt chart view#51667
bbovenzi merged 12 commits into
apache:mainfrom 
guan404ming:add-gantt
Conversation
@guan404ming
@guan404mingguan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Member
Related Issue
#44672
cc @bbovenzi
Why
Our ui currently lack of gantt chart compared with AF2
How
Reimplement the gantt chart with chart.js
  • add chartjs-adapter-dayjs-4 to use dayjs to format time in chart.js
  • use grid data hook to fetch data and sync layout with grid view
  • add gantt tab in Run, TI and GroupTI page
Screen.Recording.2025-06-13.at.1.49.32.AM.mov
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:translations

area:UI
Related to UI/UX. For Frontend Developers.
translation:default

labels
Jun 12, 2025
@guan404ming
guan404ming
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Known issue: the row alignment between grid view and gantt view would break when the HeaderCard height change. I would like to know that should we fix the height of HeaderCard to some constant or is there any better to solve this issue?
Thanks in advance!
@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Jun 12, 2025
@bbovenzi
bbovenzi
commented
Jun 12, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Very cool! I'll pull this down and play with it some more. But my quick thoughts:
  • Yes, let's make the header a fixed height. Ideally by using as a placeholder
  • I think we need to remove or at least speed up the animations in the gantt chart
  • Let's test this against a dag with 100+ tasks and see how the scrolling holds up
bbovenzi
bbovenzi
reviewed
Jun 12, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/router.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 12, 2025 18:57
@jscheffl
jscheffl
commented
Jun 12, 2025

Copy link


Copy Markdown

Contributor
Very cool!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
3 times, most recently
from
b82c025 to
fb91fb7CompareJune 14, 2025 08:16
@guan404ming
guan404ming
commented
Jun 14, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
I've fixed the HeaderCard height for Gantt page and do some rwd implementation for Stat. Also, I've followed the official docs to optimize our Gantt. Current ui looks like
Screen.Recording.2025-06-14.at.4.25.38.PM.mov
@guan404ming
guan404ming
marked this pull request as ready for review
June 14, 2025 08:35
@guan404ming
guan404ming
requested a review
from Lee-W
as a code ownerJune 14, 2025 08:35
Lee-W
Lee-W
reviewed
Jun 14, 2025
View reviewed changes
@Lee-WLee-W
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taiwanese Mandarin translation looks good to me
bbovenzi
bbovenzi
reviewed
Jun 14, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/HeaderCard.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/StatsDisplay.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@guan404ming
guan404ming
marked this pull request as draft
June 16, 2025 08:46
@bbovenzi
bbovenzi
commented
Jun 16, 2025

Copy link


Copy Markdown

Contributor
I was thinking about the UX of this after #51764
Perhaps instead of putting the gantt in a tab on the right-hand panel, it should be an option to add onto the grid view on the left panel. Let's discuss first before you refactor everything though.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I’m back!

I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
I’m back! I've noticed the change to the right panel. It seems like fixing the height of HeaderCard might not be ideal now. I agree with your idea of moving the Gantt chart to the left panel, similar to how we handle the grid and graph. That might be a better way to manage the Gantt chart UX without messing up the layout.
The only trade-off I see is that we might lose the shared scroll between the grid and the Gantt. What are your thoughts on that?
Either, the gantt chart can be a separate view on the left panel (easier)

Show/Hide Gantt , is an option on the grid view and they can live inside of the same container so the scrolling is easier to handle.
@guan404ming
guan404ming
commented
Jun 17, 2025

Copy link


Copy Markdown

MemberAuthor
I think the second idea is great and aligns better with the UX, especially since users will likely want to use both the grid and Gantt views at the same time. I’ll try implementing it first and see how it feels. My only concern is that it might get a bit cramped, so I might increase the min-width of the left pane to help with that. Thanks!
@bbovenzi
bbovenzi
commented
Jun 17, 2025

Copy link


Copy Markdown

Contributor
Yeah, when the gantt is shown we can change the minWidth!
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
d6f2fef to
b7b5ac6CompareJune 19, 2025 19:46
@guan404ming
guan404mingforce-pushed
the
add-gantt
branch
2 times, most recently
from
0e85698 to
16d7377CompareAugust 16, 2025 18:00
bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Aug 18, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
Outdated

@bbovenzi
bbovenzi
commented
Aug 18, 2025

Copy link


Copy Markdown

Contributor
Looking really good! Let's fix some spacing issues and merge this. Then we can work on the tooltips and clicking on a gantt bar to select the task
bbovenzi
bbovenzi
reviewed
Aug 19, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Outdated

@bbovenzi
bbovenzi
merged commit 61b64a4
into
apache:mainAug 20, 2025

53 checks passed

@bbovenzi
bbovenzi
commented
Aug 20, 2025

Copy link


Copy Markdown

Contributor
#protm
@potiuk
potiuk
commented
Aug 20, 2025

Copy link


Copy Markdown

Member
Indeed #protm
@guan404ming
guan404ming
commented
Aug 20, 2025

Copy link


Copy Markdown

MemberAuthor
Thanks for all reviews! I would keep working on improving the chart.
@guan404ming
guan404ming
deleted the

add-gantt

branch
August 20, 2025 18:27
@pierrejeambrunpierrejeambrun
mentioned this pull request
Aug 21, 2025

Closed

mangal-vairalkar pushed a commit
to mangal-vairalkar/airflow
that referenced
this pull request
Aug 30, 2025
@guan404ming@bbovenzi@mangal-vairalkar
Add Gantt chart view (apache#51667)
1abba1d
* Add Gantt chart
* Fix grid color in dark mode
* Sync selected color with Grid
* Enable showGantt button for run or TI selected
* Set minimum width for TI
* Fix spacing
* Fix single task layout
* Update auto-refresh for TI and useMemo
* Fix button visibility condition
* Update fixedHeight
* Update DetailsLayout and Grid layout
* Update airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
---------
Co-authored-by: Brent Bovenzi <brent.bovenzi@gmail.com>
@simi
simi
commented
Sep 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I'm facing this issue on Linux/Chrome. Time rotated is not simple to read, since it is cut at the top and tooltip is streched to fit inside and cut at the bottom.
image
@guan404mingguan404ming
mentioned this pull request
Sep 23, 2025
 Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@Lee-WLee-WLee-W left review comments
@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@bbovenzibbovenzibbovenzi approved these changes
@jason810496jason810496jason810496 approved these changes
@jscheffljscheffljscheffl approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:translationsarea:UIRelated to UI/UX. For Frontend Developers.translation:default

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

8 participants

@guan404ming@bbovenzi@jscheffl@potiuk@simi@Lee-W@pierrejeambrun@jason810496