Feat: Add version change indicators for Dag and bundle versions in Grid view

[choo121600]

Summary

Adds visual indicators in the Grid view to help users identify Dag version changes and detect mixed-version TaskInstances within a single DagRun.

Problem

• After updating a Dag file, it's difficult to know from which DagRun the new version is applied.
• Some TaskInstances within the same DagRun may use different Dag versions, but this is not visible in the UI.

Solution

This PR introduces visual cues in the Grid view to address these pain points:

• Dag Version Indicator: Vertical/horizontal orange line with tooltip showing version number
• Bundle Version Indicator: Git commit icon with tooltip showing bundle version
• Toggle Options: Users can choose to show None, Dag Version Indicator only, Bundle Version Indicator only, or All indicators

Change

Backend

• Added bundle_version and dag_version_number fields to GridRunsResponse
• Modified grid query to JOIN with DagVersion table for efficient single-query data fetch
• Added dag_version_number to LightGridTaskInstanceSummary for mixed version detection

Frontend

• New VersionIndicator.tsx component(BundleVersionIndicator, DagVersionIndicator)
• New useGridRunsWithVersionFlags hook to calculate version change flags
• Updated Bar.tsx, Grid.tsx, TaskInstancesColumn.tsx to display indicators
• Added version indicator toggle in PanelButtons.tsx

Screenshots

Version Change

LocalDagBundle

Dag Version Indicator Tooltip(vertical)

Dag Version Indicator Tooltip(horizontal)

GitDagBundle

Dag Version Indicator Tooltip

Bundle Version Indicator Tooltip

Dark Mode

Toggle Option(with Legend)

Users can choose 'Show All', 'Show Dag Version', 'Show Bundle Version', 'Hide All'

Show All

Show Bundle Version

Show Dag Version

Hide All

Indicator Scenarios

Scenario 1: Normal

• All tasks run with the same version
• No indicator (default state)

Scenario 2: Version Change

• Entire run with new version
• Left indicator + version number tooltip

Scenario 3: Mixed Version

• Multiple versions within single run
• Left, Row indicator + version number tooltip

Scenario 4: Bundle Version & DagVersion Change

Scenario 5: Only Bundle Change (Dynamic Dag)

closes: #52286

---

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

[bugraoz93]

Thanks for the PR! I think this is bringing back the deprecated and removed monolith endpoint with its methods. I think we should integrate the fix into only new structure
cc: @dstandish @pierrejeambrun

[choo121600]

@bugraoz93 Thanks for your quick feedback! I saw something strange while fixing the conflict,
So I started checking the main branch — your comment helped me confirm it.

I think my endpoints follow the old style. I’ll change them to use the new structure.

[bugraoz93]

@bugraoz93 Thanks for your quick feedback! I saw something strange while fixing the conflict,
So I started checking the main branch — your comment helped me confirm it.

I think my endpoints follow the old style. I’ll change them to use the new structure.

Amazing, thanks a lot!

[choo121600]

I’ve updated the tests and removed the old structure,
but I'm testing whether the feature I added works as before🥲
After verifying the tests, I will leave a comment!

[choo121600]

I’ve tested the scenarios I had in mind, and everything looks good so far 🙌
Reviews are welcome from this point.

[bugraoz93]

Thanks for the changes! I believe this PR still contains old deprecated code :)

[jason810496]

Nice! Thanks for the PR!

[choo121600]

I thought I deleted the old version, but it still there.
Right now, my new code and the old APIs are mixed together, and it looks like the old version is included when I commit 🤔
This might be a problem with my local setup, so I will check and fix it this week.

[ephraimbuddy]

If we want to visualize version change, in my opinion, we should do it for bundle version and not dag version that changes everytime especially for dynamic dags cc @jedcunningham

[bbovenzi]

If we want to visualize version change, in my opinion, we should do it for bundle version and not dag version that changes everytime especially for dynamic dags cc @jedcunningham

In that case, we might need to use an icon and then show the bundle version in a tooltip. Maybe something like <FiGitCommit />

[pierrejeambrun]

If we want to visualize version change, in my opinion, we should do it for bundle version and not dag version that changes everytime especially for dynamic dags cc @jedcunningham

Maybe we need both with different colors, dag version change (to task level) + bundle version change (dag run level only).

If we were to keep only one, I would be in favor of keeping the DagVersion because it is consistant with the Graph(Graph is showing structures of specific dag versions), And because I think source code is less important than what was actually executed.

[pierrejeambrun]

I think the code looks very complicated for what we are trying to achieve. (And also there are some unused stuff I believe from the legacy grid)

The backend need to serialize the dag_run.versions in the GridRunsResponse, same for tasks.

And in the UI, we just need a simple logic to check if dag_run.version of Nth run is equal to dag_run.version of (N-1)th run.

(Same logic goes for tasks, and yes if DagRun.dag_versions.lenght === 1 no need to go try the task level logic)

Maybe I missed something though.

[pierrejeambrun]

In that case, we might need to use an icon and then show the bundle version in a tooltip. Maybe something like

I'm afraid that we can potentially have as many tooltips as TI in the grid. Which would most likely bring back tooltip performance issue we observed in the past.

[choo121600]

It's hard to keep track of the context here.

Can you please 'resolve' comments that you have addressed so we know what effort remains on the PR before we need to do another round of reviews. (There are a lot of things unresolved at the moment, but I guess most of them you addressed.)

Thanks.

The reason I haven’t resolved the comments yet is that the actions were failing during the freeze period.
Once the freeze is over and the actions turn green, I’ll make sure to resolve and leave comments 😉
(I’ll also update the PR description along with the comments, since there were significant code changes while adding the DagBundle feature and the show/hide functionality.)

[pierrejeambrun]

I see some activity on the PR, let us know when this is ready for a second round of reviews. (need rebase and a few comments are still worked on it appears).

Thank you for your work

[bbovenzi]

Thanks for taking this on!

We should make sure that the display works when the version count is is in the double or even triple digits. Perhaps we should fallback to just use an icon?

[choo121600]

We should make sure that the display works when the version count is is in the double or even triple digits. Perhaps we should fallback to just use an icon?

Thank you! you're right it displays fine for up to two digits, but with three digits the horizontal indicator starts overlapping other elements.
We could use the FiRefreshCw icon as the default and show the version number on hover. What do you think?

Screen.Recording.2025-10-17.at.12.48.00.AM.mov

[bbovenzi]

I think the git line+circle icon you had before is better. We use the CwRefresh for clearing dag runs

Also, we probably will want to add a checkbox in Options to turn off the version indicators.

[choo121600]

Also, we probably will want to add a checkbox in Options to turn off the version indicators.

Would it be better to have it as a checkbox instead of a "Hide All" option in the dropdown menu?

[pierrejeambrun]

Yes that dropdown seems nice to me to be able to hide / display version markers.

Do you have an updated screenshot of what it looks like now with both bundle change and version change on the same grid. (most likely what happens if at the same spot we have both a version change and bundle change)

[pierrejeambrun]

Vertical pin should probably be a few pixels taller, so it doesn't overlap with the 'dag run' bar:

[choo121600]

DO you have an updated screenshot of what it looks like now?

I’ll make sure to update all the feature-related screenshots by tomorrow ;)
Once it’s done, I’ll mention you and Bovenzi.

[choo121600]

@bbovenzi @pierrejeambrun I’ve updated all the screenshots in the description ;)

[bbovenzi]

I think we should add a legend to make it easier for users to learn dag versions vs bundle version changes.

[bbovenzi]

Why did we make a custom tooltip instead of the one from chakra? I know there were performance issues with it before, but now it seems much better.

[choo121600]

I used a custom tooltip to prevent it from covering other task status boxes in the Task Instance grid view, allowing it to naturally overlap with the indicator.
However, this approach made the CSS more complex and harder to maintain, so I’ve been reconsidering it.

As you suggested, I think it would be better to use the Chakra tooltip provided in the component for better consistency and simplicity, and I’ll update it accordingly.

[choo121600]

@bbovenzi I’ve been thinking about the legend, and currently, the horizontal indicator for Dag version changes and the indicator for bundle version changes use the same icon.
So, distinguishing them by icon alone seems difficult. Instead, I modified the horizontal Dag version change indicator to use a consistent style with the vertical one(a combination of a line and a circle.)

Here’s an example of what it looks like. What do you think?

[choo121600]

@bbovenzi I’ve been thinking about the legend, and currently, the horizontal indicator for Dag version changes and the indicator for bundle version changes use the same icon. So, distinguishing them by icon alone seems difficult. Instead, I modified the horizontal Dag version change indicator to use a consistent style with the vertical one(a combination of a line and a circle.)

Here’s an example of what it looks like. What do you think?

@bbovenzi @pierrejeambrun This part hasn’t been implemented yet. I’d like to hear your ideas regarding the legend.

[pierrejeambrun]

Nice, looking better and better.

A few suggestions to try to make things simpler and improve UX.

[pierrejeambrun]

I don't think you need to pass this down, because the grid is calling get_dag_details and the latest dag_version is already there in the payload.

So you might get it in the front-end from there. same for the bundle name and bundle version.

[pierrejeambrun]

Same for this. You don't need to compute it. We have the get_dag_run query in the context of the grid, that returns dag_versions already, if the list is bigger than 1 we have mixed version. (only thing is that this list consider TaskInstanceHistory too, which might or might not be appropriate depending on how we want to visualize things)

[pierrejeambrun]

Removing that will also simplify the backend code.

[choo121600]

I understand the suggestion to reuse the existing APIs, and I explored the frontend-only approach, However, I have some concerns.

One main issue is the Grid shows multiple Dag runs at the same time, and if we try to fetch the version information for each run individually using get_dag_run, the number of API calls quickly adds up.

For example, if there are 10 runs displayed, we’d end up making 11 API calls in total—one for get_dag_details and one for each of the 10 runs.

Could you let me know if what I found out is incorrect?

[pierrejeambrun]

Feel free to mark addressed comments as resolved.

Let me know when this needs another round of review.

[choo121600]

Except for this part #53216 (comment)
I’ve marked the addressed comments as resolved and updated all the screenshots.
@pierrejeambrun Could you review it once more?

[bbovenzi]

We'll need to rebase this after virtualizing the grid's vertical scroll.