Add Gantt chart view

[guan404ming]

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.

[guan404ming]

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!

[bbovenzi]

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

[jscheffl]

Very cool!

[guan404ming]

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

[Lee-W]

Taiwanese Mandarin translation looks good to me

[bbovenzi]

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]

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]

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]

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]

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

[bbovenzi]

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]

#protm

[potiuk]

Indeed #protm

[guan404ming]

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

[simi]

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.