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

https://github.com/user-attachments/assets/f970b6d4-29fe-43fa-a13d-7d14e6b0639e

---

^ 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 <Skeleton /> 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

https://github.com/user-attachments/assets/74681065-f6f2-4688-8929-d712c664e52c

[bbovenzi]

I was thinking about the UX of this after https://github.com/apache/airflow/pull/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!

[guan404ming]

Modification:

• move gantt to grid and revert all changes about HeaderCard
• add checkbox to determine whether to show the gantt chart
• expand minWidth when gantt chart is enabled
• extract time format func to utils

https://github.com/user-attachments/assets/5946eb07-2919-4ec0-902f-fe786df0a564

[jscheffl]

Looks cool! Need to get used to have the Gantt on the left but from perspective of layout and usage this really makes sense! I slightly worry about conflict of space/pixels but maybe the amount of runs just need to be reduced.

Two small nits/glitches: (1) It seems the calculation of the bar is not correct, I used the "integration test" DAG (Which I usually use for testing all sorts) and it seems while a task was running the start position was not correct: ("long running" is started after "my setup" as dependecy but bar starts before)

(2) The tooltips of execution duration is sometimes overlapping with the mouse, hiding the actualy bars it should provide more details to. Can these be positioned somewhere else (above/below)?

Otherwise I'd have said LGTM but these two glitches should be ironed-out.

[guan404ming]

Thanks for pulling it down and testing! I'm also getting used to the new UI, but it's starting to make sense, having the Gantt on the left definitely feels more logical in terms of layout and usability.

1. That bar rendering issue should be fixed now, it turns out formatDate needed a fallback to work properly in all cases.

2. As for the tooltips, Chart.js automatically calculates the best position to avoid them being cut off or hidden. Fixing them to a static position can sometimes create problems. For example, if a tooltip is pinned to always appear above the bar, it might get clipped if the bar is already close to the top edge of the container.

I'm currently increasing the minWidth of the tooltip to help with the visual overlap issue. It seems to help a bit, but if there are any better ideas or suggestions, I’m definitely open to them!

[jscheffl]

Also that leaves a big scroll. I don't know maybe a separate page at first would be much easier to handle all cases, and prevent enormous horizontal scroll. No strong opinion on this, you guys seemed all aligned on the "Gantt next to the Grid" so if you want to keep it like this it's fine

I acknowledge that it is hard to use the Gantt in case you display ~50 or 100 runs. Maybe we should disable the Gantt by default if you pick more than 10 runs.

Separate page makes the usage harder I believe. And we had challenges aligning it on the right panel... but I like having it then you can directly select tasks that are long-runners and check logs or details.

[bbovenzi]

• the grid axes lines in dark mode should be fixed
• selected color also should be the same as the grid view
• we need a minimum width for tasks
• We should only allow the grid view toggle button to show when the user has a dag run or task instance
• We should try to prevent the graph from completely rerendering when changing selection between tasks on the same dag run
• The spacing is off between task name, the grid and then the gap between the grid and graph views.
• The translation seems broken from my end
• We're missing the "crosshairs" hover effect
• With one task the row height is not the same as the grid view

We're close but I want to spend more time looking into the code to see if we can integrate the charting library into our view or if we'll need to go back to building our own gantt chart like in 2.x

[guan404ming]

Thanks for the suggestions. They make sense to me and I would continue to polish the chart after my vacation til Saturday. I would also check the implementation is suitable or not for our current code base and would raise discussion here if there is any problems. Let me mark this as draft temporarily.

[guan404ming]

Apologies for the delay. I have been a bit busy recently. I will be getting back to this and address the comments soon. If I encounter any issues, I will bring them up for discussion. Thank you very much for your patience and understanding.

[guan404ming]

Fixed

• the grid axes lines in dark mode should be fixed
• selected color also should be the same as the grid view
• we need a minimum width for tasks
• We should only allow the grid view toggle button to show when the user has a dag run or task instance
• The translation seems broken from my end
• With one task the row height is not the same as the grid view

Need Confirmed

• We should try to prevent the graph from completely rerendering when changing selection between tasks on the same dag run → I have updated the component to use useMemo, but switching the selection from a group task to an individual task still triggers a re-render, as these are treated as two different pages.

• The spacing between the task name, the grid, and the gap between the grid and the graph views appears inconsistent → I am not sure if the update shown in the screenshot has resolved this issue. Please let me know if I have misunderstood or overlooked anything.

• We are missing the “crosshairs” hover effect → Since the Gantt chart is rendered in a Canvas, I have not yet found an effective way to synchronize the hover state between the Grid and the Gantt. I would keep investigate about this.

[guan404ming]

Switching between dag runs is really jarring. I wonder if we can fetch the data in advanced or have the data size set so we're not rerendering everything.

The prefetch solution works well in switching between dag runs, but it can be quite slow when running multiple runs with multiple tasks. I improved it by fixing the data size (the height) using flattenNodes. The updated version, as shown in the demo below, still takes some time to fetch the data, but I think the delay is much less jarring compared to the previous version.

https://github.com/user-attachments/assets/a12749d7-30ea-4013-9d49-0027fd15a732

[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.