Fix task instance and runs tooltips in Grid view#58359

Merged

pierrejeambrun merged 9 commits intoapache:mainfrom

RoyLee1224:basic-tooltip

Dec 3, 2025

Merged

Fix task instance and runs tooltips in Grid view#58359
pierrejeambrun merged 9 commits intoapache:mainfrom
RoyLee1224:basic-tooltip

Conversation

Copy link

Contributor

RoyLee1224 commented Nov 16, 2025 *

edited

Loading

part of #55900
part of #56250 (The hover tooltips disappear about a second after popping up.)

Changes

Refactor HoverTooltip and rename it to BasicTooltip
Migrate from HoverTooltip to BasicTooltip in Calendar tab
Apply BasicTooltip to task instance and runs tooltips in Grid view
Add translation for tooltip states

Why

Chakra UI's Tooltip got some performance issues. The custom BasicTooltip provides similar functionality with better rendering performance
Performance issue Reference: UI: Add grid tooltip to show RunType & note #51736 (comment)
Renamed from HoverTooltip to BasicTooltip to better reflect its purpose as a performant tooltip component suitable for high-density UI(eg. Grid view, Calendar tab).

Screenshots

Performance (Chakra UI tooltip vs. BasicTooltip)

I've tried with both approaches, Charka UI looks laggy with large amount TIs

chakra.mp4

custom.mp4

Before / After

Before (tooltip somehow disappear)

CleanShot.2025-11-16.at.01.42.05.mp4

After(tooltip last correctly)

CleanShot.2025-11-16.at.01.40.10.mp4

Before

Before (use default title for run tooltip)	After (consistent tooltip with TI)

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

RoyLee1224 requested review from bbovenzi, guan404ming, pierrejeambrun, ryanahamilton and shubhamraj-git as code owners

November 16, 2025 06:56

boring-cyborg bot added the area:UI label Nov 16, 2025

Copy link

Contributor

NilsJPWerner commented Nov 17, 2025

Would it be worth adding duration to the tooltip?

Copy link

Contributor

aaron-wolmutt commented Nov 19, 2025

Would it be worth adding duration to the tooltip?

The 2.11 version has task id, status, started, ended, duration and trigger rule in the tool tip

Copy link

Contributor

aaron-wolmutt commented Nov 19, 2025

Is the datetime in the screenshots the task start or the task end? I think the datetime should be in yyy-mm-dd, hh:mm:ss tz like in 2.11

RoyLee1224 mentioned this pull request Nov 20, 2025

Grid View Tooltip/Hover disappears automatically #58491

Closed

2 tasks

Copy link

waltervillarreal commented Nov 20, 2025

Thanks @RoyLee1224, I agree that it would be super useful to have the version, status, start, end, duration, and trigger rule in the tool tip.

Copy link

Contributor Author

RoyLee1224 commented Nov 21, 2025

Thanks @NilsJPWerner @waltervillarreal @aaron-wolmutt. I agree those time fields are very useful.

However, the current LightGridTaskInstanceSummary explicitly returns None for standard tasks (it only calculates time for Groups).

Modifying the API to return these timestamps for all tasks involves backend changes and potential schema updates (similar to the attempts in #55927)

To avoid scope creep, I'd like to keep this PR focused on fixing the flashing bug and performance, restoring the tooltip functionality as seen in #53438.

We can open a separate PR to update the backend and enable the time fields display.

Copy link

Contributor

aaron-wolmutt commented Nov 21, 2025

Thanks @NilsJPWerner @waltervillarreal @aaron-wolmutt. I agree those time fields are very useful.

However, the current LightGridTaskInstanceSummary explicitly returns None for standard tasks (it only calculates time for Groups).

Modifying the API to return these timestamps for all tasks involves backend changes and potential schema updates (similar to the attempts in #55927)

To avoid scope creep, I'd like to keep this PR focused on fixing the flashing bug and performance, restoring the tooltip functionality as seen in #53438.

We can open a separate PR to update the backend and enable the time fields display.

You have a great point about avoiding scope creep in pull requests. I'm trying keep my PRs separated by backend/front end as well. I think the fix would fit 3.1.X then and adding those fields to the API would probably fit the 3.2 release

pierrejeambrun reviewed

Nov 21, 2025

View reviewed changes

Copy link

Member

pierrejeambrun left a comment *

edited

Loading

Choose a reason for hiding this comment

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

Thanks for PR.

I don't think the PR title is accurate.

Also it appears that we have Tooltip component too, to what extend should we only have 1 Tooltip conponent instead of having HoverTooltip/BasicTooltip + Tooltip, it's hard to get the difference unless we read the implementation in details.

airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx Outdated Show resolved Hide resolved

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

RoyLee1224 changed the title ~~Implement task instance and runs tooltips in Gridview~~ Fix task instance and runs tooltips in Grid view

Nov 21, 2025

RoyLee1224 force-pushed the basic-tooltip branch from ad68cfc to 9393ad5 Compare

November 21, 2025 23:39

Copy link

Contributor Author

RoyLee1224 commented Nov 21, 2025

Update

Add auto-flip for viewport overflow
Add translation for tooltip states

update.mp4

RoyLee1224 added 6 commits November 24, 2025 14:50


 refactor: replace hovertooltip with basictooltip

e5c5179


 feat: implement basic tooltip for grid TI

3a6ba7d


 feat: implement basic tooltip for grid run

06a68d9


 fix: use get duration util

1596e79


 refactor: simplify BasicTooltip and add auto-flip for viewport overflow

cd82c2e


 fix(i18n): add translation for tooltip states

fe14760

RoyLee1224 force-pushed the basic-tooltip branch from 640ea98 to fe14760 Compare

November 24, 2025 19:50

pierrejeambrun added this to the Airflow 3.1.4 milestone Nov 25, 2025

pierrejeambrun added the backport-to-v3-1-test label Nov 25, 2025

pierrejeambrun reviewed

Nov 25, 2025

View reviewed changes

Copy link

Member

pierrejeambrun left a comment

Choose a reason for hiding this comment

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

Nice.

Just a few suggestions / nitpick, but looking good.

airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx Show resolved Hide resolved

airflow-core/src/airflow/ui/src/components/TaskInstanceTooltip.tsx Show resolved Hide resolved

airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx Outdated Show resolved Hide resolved

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

pierrejeambrun reviewed

Nov 25, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx Outdated Show resolved Hide resolved

RoyLee1224 added 2 commits November 26, 2025 20:50


 refactor: improve BasicTooltip positioning and remove duration

3c52202


 fix: use Chakra semantic tokens

18bb2c4


 refactor: use dynamic height for BasicTooltip positioning

b38c4b6

RoyLee1224 commented

Nov 27, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/components/BasicTooltip.tsx Show resolved Hide resolved

guan404ming approved these changes

Dec 1, 2025

View reviewed changes

Copy link

Member

guan404ming left a comment

Choose a reason for hiding this comment

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

LGTM for my local tests. left some nit, thanks!

airflow-core/src/airflow/ui/src/components/BasicTooltip.tsx Show resolved Hide resolved

airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx Show resolved Hide resolved

airflow-core/src/airflow/ui/src/components/BasicTooltip.tsx Show resolved Hide resolved

pierrejeambrun approved these changes

Dec 3, 2025

View reviewed changes

Copy link

Member

pierrejeambrun left a comment

Choose a reason for hiding this comment

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

LGTM

pierrejeambrun merged commit 4970ea2 into apache:main

Dec 3, 2025

60 checks passed

github-actions bot pushed a commit that referenced this pull request Dec 3, 2025


 [v3-1-test] Fix task instance and runs tooltips in Grid view (#58359)

7b632a2

* refactor: replace hovertooltip with basictooltip * feat: implement basic tooltip for grid TI * feat: implement basic tooltip for grid run * fix: use get duration util * refactor: simplify BasicTooltip and add auto-flip for viewport overflow * fix(i18n): add translation for tooltip states * refactor: improve BasicTooltip positioning and remove duration * fix: use Chakra semantic tokens * refactor: use dynamic height for BasicTooltip positioning (cherry picked from commit 4970ea2) Co-authored-by: LI,JHE-CHEN <103923510+RoyLee1224@users.noreply.github.com>

Copy link

github-actions bot commented Dec 3, 2025

Backport successfully created: v3-1-test

Status	Branch	Result
	v3-1-test

github-actions bot pushed a commit to aws-mwaa/upstream-to-airflow that referenced this pull request Dec 3, 2025


 [v3-1-test] Fix task instance and runs tooltips in Grid view (apache#...

989f8b9

...58359) * refactor: replace hovertooltip with basictooltip * feat: implement basic tooltip for grid TI * feat: implement basic tooltip for grid run * fix: use get duration util * refactor: simplify BasicTooltip and add auto-flip for viewport overflow * fix(i18n): add translation for tooltip states * refactor: improve BasicTooltip positioning and remove duration * fix: use Chakra semantic tokens * refactor: use dynamic height for BasicTooltip positioning (cherry picked from commit 4970ea2) Co-authored-by: LI,JHE-CHEN <103923510+RoyLee1224@users.noreply.github.com>

bbovenzi pushed a commit that referenced this pull request Dec 3, 2025


 [v3-1-test] Fix task instance and runs tooltips in Grid view (#58359) (...

58ca074

...#59013) * refactor: replace hovertooltip with basictooltip * feat: implement basic tooltip for grid TI * feat: implement basic tooltip for grid run * fix: use get duration util * refactor: simplify BasicTooltip and add auto-flip for viewport overflow * fix(i18n): add translation for tooltip states * refactor: improve BasicTooltip positioning and remove duration * fix: use Chakra semantic tokens * refactor: use dynamic height for BasicTooltip positioning (cherry picked from commit 4970ea2) Co-authored-by: LI,JHE-CHEN <103923510+RoyLee1224@users.noreply.github.com>

itayweb pushed a commit to itayweb/airflow that referenced this pull request Dec 6, 2025


 Fix task instance and runs tooltips in Grid view (apache#58359)

602e6b1

* refactor: replace hovertooltip with basictooltip * feat: implement basic tooltip for grid TI * feat: implement basic tooltip for grid run * fix: use get duration util * refactor: simplify BasicTooltip and add auto-flip for viewport overflow * fix(i18n): add translation for tooltip states * refactor: improve BasicTooltip positioning and remove duration * fix: use Chakra semantic tokens * refactor: use dynamic height for BasicTooltip positioning