Add Gantt chart view #51667

guan404ming · 2025-06-12T18:02:04Z

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 · 2025-06-12T18:02:44Z

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 · 2025-06-12T18:07:29Z

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

airflow-core/src/airflow/ui/src/router.tsx

jscheffl · 2025-06-12T20:12:23Z

Very cool!

guan404ming · 2025-06-14T08:34:59Z

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 · 2025-06-14T14:38:50Z

airflow-core/src/airflow/ui/src/components/HeaderCard.tsx

+        </Flex>
+        <Stack direction={isGanttPage && containerWidth <= 380 ? "row" : "column"} mt={2} w="100%">
+          <HStack gap={1}>{actions}</HStack>
+          <StatsDisplay


Nice call on moving it to an Info tooltip on small sizes.

bbovenzi · 2025-06-14T14:40:11Z

airflow-core/src/airflow/ui/src/components/StatsDisplay.tsx

+    return (
+      <Box>
+        <ActionButton
+          actionName="Show stats"


Translation needed

bbovenzi · 2025-06-14T14:40:16Z

airflow-core/src/airflow/ui/src/components/StatsDisplay.tsx

+          actionName="Show stats"
+          icon={<MdInfoOutline />}
+          onClick={() => setIsOpen(true)}
+          text="Stats"


bbovenzi · 2025-06-14T14:41:48Z

airflow-core/src/airflow/ui/src/components/HeaderCard.tsx

+export const HeaderCard = ({ actions, icon, isRefreshing, state, stats, subTitle, title }: Props) => {
+  const containerRef = useRef<HTMLDivElement>();
+  const containerWidth = useContainerWidth(containerRef);
+  const isGanttPage = useLocation().pathname.includes("/gantt");


How does this look when switching tabs? It might be better to stay consistent and always change the header based on containerWidth

bbovenzi · 2025-06-14T14:42:16Z

airflow-core/src/airflow/ui/src/components/StatsDisplay.tsx

+        <Dialog.Root lazyMount onOpenChange={() => setIsOpen(false)} open={isOpen} size="md">
+          <Dialog.Content backdrop>
+            <Dialog.Header bg="blue.muted">
+              <Heading size="xl">{title ?? "Statistics"}</Heading>


Translation needed here as well

bbovenzi · 2025-06-14T14:42:47Z

airflow-core/src/airflow/ui/src/components/StatsDisplay.tsx

+          text="Stats"
+          withText={false}
+        />
+        <Dialog.Root lazyMount onOpenChange={() => setIsOpen(false)} open={isOpen} size="md">


Do we need a full dialog? I feel like a Popover is sufficient

bbovenzi · 2025-06-14T14:48:21Z

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

@@ -72,7 +72,7 @@ const Instance = ({ dagId, isGroup, isMapped, runId, search, state, taskId }: Pr
      <Link
        replace
        to={{
-          pathname: `/dags/${dagId}/runs/${runId}/tasks/${isGroup ? "group/" : ""}${taskId}${isMapped ? "/mapped" : ""}`,
+          pathname: `/dags/${dagId}/runs/${runId}/tasks/${isGroup ? "group/" : ""}${taskId}${isMapped ? "/mapped" : ""}/gantt`,


Let's drop gantt from here or let's make sure we persist whatever the selected tab is

bbovenzi · 2025-06-14T14:49:00Z

airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx

+    { icon: <MdOutlineTask />, label: "Task Instances", value: "" },
+    { icon: <LuChartGantt />, label: "Gantt", value: "gantt" },


Looks like we forgot to include translations here.

bbovenzi · 2025-06-14T14:49:52Z

airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx

+  const data = validTaskInstances.map((taskInstance) => ({
+    state: taskInstance.state,
+    x: [
+      dayjs(taskInstance.start_date).tz(selectedTimezone).format("YYYY-MM-DD HH:mm:ss.SSS"),


Want to put the format as a const string at the top of the file or in datetimeUtils.ts? We repeat it a lot

bbovenzi · 2025-06-16T22:21:57Z

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 · 2025-06-17T14:48:03Z

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 · 2025-06-17T17:48:19Z

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 · 2025-06-17T18:27:35Z

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 · 2025-06-17T18:34:47Z

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

guan404ming · 2025-06-20T09:18:42Z

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

Screen.Recording.2025-06-20.at.5.12.21.PM.mov

jason810496

LGTM for the zh-TW translation and UI demo, but still need second eyes on the frontend code.

jscheffl · 2025-06-20T16:54:10Z

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.

…g fallback

guan404ming · 2025-06-22T11:31:57Z

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.

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

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

Thanks for the rework! Looks good to me.
Before merge would be good to have a review by one of the other peers as well. I would be good to merge it now.

pierrejeambrun

The issue with having the Gantt next to the Grid is that I'm not sure we will have enough real eastate to cover all cases.

For instance if I start showing last 50 runs, or even last 100 runs, it's impossible to see the Gantt at the moment.

last 50 runs displayed (I could minimize the right panel to have more space)

last 100 runs

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

jscheffl · 2025-06-24T19:17:23Z

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 · 2025-06-25T18:54:51Z

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 · 2025-06-26T14:20:14Z

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 requested review from bbovenzi, pierrejeambrun, ryanahamilton, jscheffl and shubhamraj-git as code owners June 12, 2025 18:02

boring-cyborg bot added area:translations area:UI Related to UI/UX. For Frontend Developers. translation:default labels Jun 12, 2025

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

bbovenzi reviewed Jun 12, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/router.tsx Outdated Show resolved Hide resolved

guan404ming marked this pull request as draft June 12, 2025 18:57

guan404ming force-pushed the add-gantt branch 3 times, most recently from b82c025 to fb91fb7 Compare June 14, 2025 08:16

guan404ming marked this pull request as ready for review June 14, 2025 08:35

guan404ming requested a review from Lee-W as a code owner June 14, 2025 08:35

Lee-W reviewed Jun 14, 2025

View reviewed changes

bbovenzi reviewed Jun 14, 2025

View reviewed changes

guan404ming marked this pull request as draft June 16, 2025 08:46

guan404ming force-pushed the add-gantt branch 2 times, most recently from d6f2fef to b7b5ac6 Compare June 19, 2025 19:46

guan404ming force-pushed the add-gantt branch 2 times, most recently from ca08ea4 to 380ca4f Compare June 20, 2025 09:15

guan404ming marked this pull request as ready for review June 20, 2025 09:18

guan404ming requested a review from jason810496 as a code owner June 20, 2025 09:18

jason810496 approved these changes Jun 20, 2025

View reviewed changes

guan404ming added 3 commits June 22, 2025 17:14

Add Gantt chart

09f3d19

Add gantt in grid view

ffe84d0

Update DetailsLayout and Gantt for improved layout and date formattin…

539b729

…g fallback

guan404ming force-pushed the add-gantt branch from 380ca4f to 539b729 Compare June 22, 2025 11:30

jscheffl approved these changes Jun 22, 2025

View reviewed changes

pierrejeambrun reviewed Jun 24, 2025

View reviewed changes

guan404ming marked this pull request as draft June 26, 2025 14:20

		{ icon: <MdOutlineTask />, label: "Task Instances", value: "" },
		{ icon: <LuChartGantt />, label: "Gantt", value: "gantt" },

Add Gantt chart view #51667

Are you sure you want to change the base?

Add Gantt chart view #51667

Uh oh!

Conversation

guan404ming commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related Issue

Why

How

Uh oh!

guan404ming commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bbovenzi commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

jscheffl commented Jun 12, 2025

Uh oh!

guan404ming commented Jun 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Lee-W left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bbovenzi commented Jun 16, 2025

Uh oh!

guan404ming commented Jun 17, 2025

Uh oh!

bbovenzi commented Jun 17, 2025

Uh oh!

guan404ming commented Jun 17, 2025

Uh oh!

bbovenzi commented Jun 17, 2025

Uh oh!

guan404ming commented Jun 20, 2025

Uh oh!

jason810496 left a comment

Choose a reason for hiding this comment

Uh oh!

jscheffl commented Jun 20, 2025

Uh oh!

guan404ming commented Jun 22, 2025

Uh oh!

jscheffl left a comment

Choose a reason for hiding this comment

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

last 50 runs displayed (I could minimize the right panel to have more space)

last 100 runs

Uh oh!

jscheffl commented Jun 24, 2025

Uh oh!

bbovenzi commented Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

guan404ming commented Jun 26, 2025

Uh oh!

Uh oh!

guan404ming commented Jun 12, 2025 •

edited

Loading

guan404ming commented Jun 12, 2025 •

edited

Loading

bbovenzi commented Jun 12, 2025 •

edited

Loading

guan404ming commented Jun 14, 2025 •

edited

Loading

bbovenzi commented Jun 25, 2025 •

edited

Loading