Fix task instance and runs tooltips in Grid view #58359

RoyLee1224 · 2025-11-16T06:56:30Z

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.

NilsJPWerner · 2025-11-17T18:09:56Z

Would it be worth adding duration to the tooltip?

aaron-wolmutt · 2025-11-19T00:25:44Z

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

aaron-wolmutt · 2025-11-19T00:31:56Z

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

waltervillarreal · 2025-11-20T13:02:23Z

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.

RoyLee1224 · 2025-11-21T00:02:19Z

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.

aaron-wolmutt · 2025-11-21T00:16:38Z

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

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

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

RoyLee1224 · 2025-11-21T23:51:08Z

Update

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

update.mp4

pierrejeambrun

Nice.

Just a few suggestions / nitpick, but looking good.

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

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

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

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

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

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

guan404ming

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

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

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

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

pierrejeambrun

LGTM

* 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>

github-actions · 2025-12-03T16:50:04Z

Backport successfully created: v3-1-test

Status	Branch	Result
✅	v3-1-test

…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>

…#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>

* 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

…#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>

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 Related to UI/UX. For Frontend Developers. label Nov 16, 2025

RoyLee1224 mentioned this pull request Nov 20, 2025

Grid View Tooltip/Hover disappears automatically #58491

Closed

2 tasks

pierrejeambrun reviewed Nov 21, 2025

View reviewed changes

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

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

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 Mark PR with this label to backport to v3-1-test branch label Nov 25, 2025

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

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

pierrejeambrun merged commit 4970ea2 into apache:main Dec 3, 2025
60 checks passed

Fix task instance and runs tooltips in Grid view #58359

Fix task instance and runs tooltips in Grid view #58359

Uh oh!

Conversation

RoyLee1224 commented Nov 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related

Changes

Why

Screenshots

Performance (Chakra UI tooltip vs. BasicTooltip)

Before / After

Uh oh!

NilsJPWerner commented Nov 17, 2025

Uh oh!

aaron-wolmutt commented Nov 19, 2025

Uh oh!

aaron-wolmutt commented Nov 19, 2025

Uh oh!

waltervillarreal commented Nov 20, 2025

Uh oh!

RoyLee1224 commented Nov 21, 2025

Uh oh!

aaron-wolmutt commented Nov 21, 2025

Uh oh!

pierrejeambrun left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RoyLee1224 commented Nov 21, 2025

Update

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

guan404ming left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Dec 3, 2025

Backport successfully created: v3-1-test

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

RoyLee1224 commented Nov 16, 2025 •

edited

Loading

pierrejeambrun left a comment •

edited

Loading