Optimize Grid View for low-latency hover effect and keyboard navigation

[RoyLee1224]

Key Changes:

• Interaction Overlay: Introduced GridOverlays.tsx to handle highlighting via direct DOM manipulation (CSS transforms), bypassing React re-renders.
• Event Delegation: Replaced individual onMouseEnter listeners in GridTI and TaskNames with a single onMouseMove handler in the parent Grid container.
• Ref-Based Navigation: Updated useNavigation to provide instant visual feedback on keydown via refs, committing the URL change only on keyup. This significantly optimizes long-press keyboard navigation, reducing traversal time for 13 cells from ~8s to ~3s.
• Cleanup: Removed the useHover context and expensive document.querySelectorAll calls from child components.

TO-DO

• Gantt View Hover Synchronization

Screenshots

Hover Effect - Before

hover_before.mp4

Hover Effect - After

hover_after.mp4

Keyboard Navigation - Before (8s)

navigation_before.mp4

Keyboard Navigation - After (3s)

navigation_after.mp4

---

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

[bbovenzi]

Good call. We were already checking the element ids instead in order to speed it up. We should just get rid of all the individual functions.

[pierrejeambrun]

Nice improvement! 🎉

Looking good and working as expected.

As the grid view is a quite complex and important view and this represent a substantial code change, I would be in favor of marking this for 3.1.5 or maybe even 3.2.0. 3.1.4 is being cut out at the moment.

[bbovenzi]

We need to adjust the colors. The selected crosshairs should always be more prominent than the hover crosshairs:

Also, if you reduce the panel width to below the total width of the grid view the absolute positioning of the hover selection breaks:

[RoyLee1224]

Thanks for the review, @bbovenzi. I'll apply these fixes as soon as I finish my final exam.🚀

[bbovenzi]

We just merged some big changes to the grid view. So this will need a significant rebase.

[pierrejeambrun]

That's a nice improvement I'd love for it to get merged!

[RoyLee1224]

CleanShot.2026-01-27.at.23.32.56.mp4

The hover performance is now quite acceptable thanks to the virtualization in #60241. While the overlay method is faster, it adds extra complexity (like the panel width issue @bbovenzi mentioned). I think the trade-off isn't worth it for now.

I’ll close this PR and follow up with a more focused one for keyboard navigation performance (long press). Thanks!

[RoyLee1224]

Key Changes:

• Interaction Overlay: Introduced GridOverlays.tsx to handle highlighting via direct DOM manipulation (CSS transforms), bypassing React re-renders.
• Event Delegation: Replaced individual onMouseEnter listeners in GridTI and TaskNames with a single onMouseMove handler in the parent Grid container.
• Ref-Based Navigation: Updated useNavigation to provide instant visual feedback on keydown via refs, committing the URL change only on keyup. This significantly optimizes long-press keyboard navigation, reducing traversal time for 13 cells from ~8s to ~3s.
• Cleanup: Removed the useHover context and expensive document.querySelectorAll calls from child components.

TO-DO

• Gantt View Hover Synchronization

Screenshots

Hover Effect - Before

hover_before.mp4

Hover Effect - After

hover_after.mp4

Keyboard Navigation - Before (8s)

navigation_before.mp4

Keyboard Navigation - After (3s)

navigation_after.mp4

---

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

[bbovenzi]

Good call. We were already checking the element ids instead in order to speed it up. We should just get rid of all the individual functions.

[pierrejeambrun]

Nice improvement! 🎉

Looking good and working as expected.

As the grid view is a quite complex and important view and this represent a substantial code change, I would be in favor of marking this for 3.1.5 or maybe even 3.2.0. 3.1.4 is being cut out at the moment.

[bbovenzi]

We need to adjust the colors. The selected crosshairs should always be more prominent than the hover crosshairs:

Also, if you reduce the panel width to below the total width of the grid view the absolute positioning of the hover selection breaks:

[RoyLee1224]

Thanks for the review, @bbovenzi. I'll apply these fixes as soon as I finish my final exam.🚀

[bbovenzi]

We just merged some big changes to the grid view. So this will need a significant rebase.

[pierrejeambrun]

That's a nice improvement I'd love for it to get merged!

[RoyLee1224]

CleanShot.2026-01-27.at.23.32.56.mp4

The hover performance is now quite acceptable thanks to the virtualization in #60241. While the overlay method is faster, it adds extra complexity (like the panel width issue @bbovenzi mentioned). I think the trade-off isn't worth it for now.

I’ll close this PR and follow up with a more focused one for keyboard navigation performance (long press). Thanks!

[RoyLee1224]

Key Changes:

• Interaction Overlay: Introduced GridOverlays.tsx to handle highlighting via direct DOM manipulation (CSS transforms), bypassing React re-renders.
• Event Delegation: Replaced individual onMouseEnter listeners in GridTI and TaskNames with a single onMouseMove handler in the parent Grid container.
• Ref-Based Navigation: Updated useNavigation to provide instant visual feedback on keydown via refs, committing the URL change only on keyup. This significantly optimizes long-press keyboard navigation, reducing traversal time for 13 cells from ~8s to ~3s.
• Cleanup: Removed the useHover context and expensive document.querySelectorAll calls from child components.

TO-DO

• Gantt View Hover Synchronization

Screenshots

Hover Effect - Before

hover_before.mp4

Hover Effect - After

hover_after.mp4

Keyboard Navigation - Before (8s)

navigation_before.mp4

Keyboard Navigation - After (3s)

navigation_after.mp4

---

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

[bbovenzi]

Good call. We were already checking the element ids instead in order to speed it up. We should just get rid of all the individual functions.

[pierrejeambrun]

Nice improvement! 🎉

Looking good and working as expected.

As the grid view is a quite complex and important view and this represent a substantial code change, I would be in favor of marking this for 3.1.5 or maybe even 3.2.0. 3.1.4 is being cut out at the moment.

[bbovenzi]

We need to adjust the colors. The selected crosshairs should always be more prominent than the hover crosshairs:

Also, if you reduce the panel width to below the total width of the grid view the absolute positioning of the hover selection breaks:

[RoyLee1224]

Thanks for the review, @bbovenzi. I'll apply these fixes as soon as I finish my final exam.🚀

[bbovenzi]

We just merged some big changes to the grid view. So this will need a significant rebase.

[pierrejeambrun]

That's a nice improvement I'd love for it to get merged!

[RoyLee1224]

CleanShot.2026-01-27.at.23.32.56.mp4

The hover performance is now quite acceptable thanks to the virtualization in #60241. While the overlay method is faster, it adds extra complexity (like the panel width issue @bbovenzi mentioned). I think the trade-off isn't worth it for now.

I’ll close this PR and follow up with a more focused one for keyboard navigation performance (long press). Thanks!

[RoyLee1224]

Key Changes:

• Interaction Overlay: Introduced GridOverlays.tsx to handle highlighting via direct DOM manipulation (CSS transforms), bypassing React re-renders.
• Event Delegation: Replaced individual onMouseEnter listeners in GridTI and TaskNames with a single onMouseMove handler in the parent Grid container.
• Ref-Based Navigation: Updated useNavigation to provide instant visual feedback on keydown via refs, committing the URL change only on keyup. This significantly optimizes long-press keyboard navigation, reducing traversal time for 13 cells from ~8s to ~3s.
• Cleanup: Removed the useHover context and expensive document.querySelectorAll calls from child components.

TO-DO

• Gantt View Hover Synchronization

Screenshots

Hover Effect - Before

hover_before.mp4

Hover Effect - After

hover_after.mp4

Keyboard Navigation - Before (8s)

navigation_before.mp4

Keyboard Navigation - After (3s)

navigation_after.mp4

---

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

[bbovenzi]

Good call. We were already checking the element ids instead in order to speed it up. We should just get rid of all the individual functions.

[pierrejeambrun]

Nice improvement! 🎉

Looking good and working as expected.

As the grid view is a quite complex and important view and this represent a substantial code change, I would be in favor of marking this for 3.1.5 or maybe even 3.2.0. 3.1.4 is being cut out at the moment.

[bbovenzi]

We need to adjust the colors. The selected crosshairs should always be more prominent than the hover crosshairs:

Also, if you reduce the panel width to below the total width of the grid view the absolute positioning of the hover selection breaks:

[RoyLee1224]

Thanks for the review, @bbovenzi. I'll apply these fixes as soon as I finish my final exam.🚀

[bbovenzi]

We just merged some big changes to the grid view. So this will need a significant rebase.

[pierrejeambrun]

That's a nice improvement I'd love for it to get merged!

[RoyLee1224]

CleanShot.2026-01-27.at.23.32.56.mp4

The hover performance is now quite acceptable thanks to the virtualization in #60241. While the overlay method is faster, it adds extra complexity (like the panel width issue @bbovenzi mentioned). I think the trade-off isn't worth it for now.

I’ll close this PR and follow up with a more focused one for keyboard navigation performance (long press). Thanks!

[RoyLee1224]

Key Changes:

• Interaction Overlay: Introduced GridOverlays.tsx to handle highlighting via direct DOM manipulation (CSS transforms), bypassing React re-renders.
• Event Delegation: Replaced individual onMouseEnter listeners in GridTI and TaskNames with a single onMouseMove handler in the parent Grid container.
• Ref-Based Navigation: Updated useNavigation to provide instant visual feedback on keydown via refs, committing the URL change only on keyup. This significantly optimizes long-press keyboard navigation, reducing traversal time for 13 cells from ~8s to ~3s.
• Cleanup: Removed the useHover context and expensive document.querySelectorAll calls from child components.

TO-DO

• Gantt View Hover Synchronization

Screenshots

Hover Effect - Before

hover_before.mp4

Hover Effect - After

hover_after.mp4

Keyboard Navigation - Before (8s)

navigation_before.mp4

Keyboard Navigation - After (3s)

navigation_after.mp4

---

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

[bbovenzi]

Good call. We were already checking the element ids instead in order to speed it up. We should just get rid of all the individual functions.

[pierrejeambrun]

Nice improvement! 🎉

Looking good and working as expected.

As the grid view is a quite complex and important view and this represent a substantial code change, I would be in favor of marking this for 3.1.5 or maybe even 3.2.0. 3.1.4 is being cut out at the moment.

[bbovenzi]

We need to adjust the colors. The selected crosshairs should always be more prominent than the hover crosshairs:

Also, if you reduce the panel width to below the total width of the grid view the absolute positioning of the hover selection breaks:

[RoyLee1224]

Thanks for the review, @bbovenzi. I'll apply these fixes as soon as I finish my final exam.🚀

[bbovenzi]

We just merged some big changes to the grid view. So this will need a significant rebase.

[pierrejeambrun]

That's a nice improvement I'd love for it to get merged!

[RoyLee1224]

CleanShot.2026-01-27.at.23.32.56.mp4

The hover performance is now quite acceptable thanks to the virtualization in #60241. While the overlay method is faster, it adds extra complexity (like the panel width issue @bbovenzi mentioned). I think the trade-off isn't worth it for now.

I’ll close this PR and follow up with a more focused one for keyboard navigation performance (long press). Thanks!

[RoyLee1224]

Key Changes:

• Interaction Overlay: Introduced GridOverlays.tsx to handle highlighting via direct DOM manipulation (CSS transforms), bypassing React re-renders.
• Event Delegation: Replaced individual onMouseEnter listeners in GridTI and TaskNames with a single onMouseMove handler in the parent Grid container.
• Ref-Based Navigation: Updated useNavigation to provide instant visual feedback on keydown via refs, committing the URL change only on keyup. This significantly optimizes long-press keyboard navigation, reducing traversal time for 13 cells from ~8s to ~3s.
• Cleanup: Removed the useHover context and expensive document.querySelectorAll calls from child components.

TO-DO

• Gantt View Hover Synchronization

Screenshots

Hover Effect - Before

hover_before.mp4

Hover Effect - After

hover_after.mp4

Keyboard Navigation - Before (8s)

navigation_before.mp4

Keyboard Navigation - After (3s)

navigation_after.mp4

---

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

[bbovenzi]

Good call. We were already checking the element ids instead in order to speed it up. We should just get rid of all the individual functions.

[pierrejeambrun]

Nice improvement! 🎉

Looking good and working as expected.

As the grid view is a quite complex and important view and this represent a substantial code change, I would be in favor of marking this for 3.1.5 or maybe even 3.2.0. 3.1.4 is being cut out at the moment.

[bbovenzi]

We need to adjust the colors. The selected crosshairs should always be more prominent than the hover crosshairs:

Also, if you reduce the panel width to below the total width of the grid view the absolute positioning of the hover selection breaks:

[RoyLee1224]

Thanks for the review, @bbovenzi. I'll apply these fixes as soon as I finish my final exam.🚀

[bbovenzi]

We just merged some big changes to the grid view. So this will need a significant rebase.

[pierrejeambrun]

That's a nice improvement I'd love for it to get merged!

[RoyLee1224]

CleanShot.2026-01-27.at.23.32.56.mp4

The hover performance is now quite acceptable thanks to the virtualization in #60241. While the overlay method is faster, it adds extra complexity (like the panel width issue @bbovenzi mentioned). I think the trade-off isn't worth it for now.

I’ll close this PR and follow up with a more focused one for keyboard navigation performance (long press). Thanks!

[RoyLee1224]

Key Changes:

• Interaction Overlay: Introduced GridOverlays.tsx to handle highlighting via direct DOM manipulation (CSS transforms), bypassing React re-renders.
• Event Delegation: Replaced individual onMouseEnter listeners in GridTI and TaskNames with a single onMouseMove handler in the parent Grid container.
• Ref-Based Navigation: Updated useNavigation to provide instant visual feedback on keydown via refs, committing the URL change only on keyup. This significantly optimizes long-press keyboard navigation, reducing traversal time for 13 cells from ~8s to ~3s.
• Cleanup: Removed the useHover context and expensive document.querySelectorAll calls from child components.

TO-DO

• Gantt View Hover Synchronization

Screenshots

Hover Effect - Before

hover_before.mp4

Hover Effect - After

hover_after.mp4

Keyboard Navigation - Before (8s)

navigation_before.mp4

Keyboard Navigation - After (3s)

navigation_after.mp4

---

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

[bbovenzi]

Good call. We were already checking the element ids instead in order to speed it up. We should just get rid of all the individual functions.

[pierrejeambrun]

Nice improvement! 🎉

Looking good and working as expected.

As the grid view is a quite complex and important view and this represent a substantial code change, I would be in favor of marking this for 3.1.5 or maybe even 3.2.0. 3.1.4 is being cut out at the moment.

[bbovenzi]

We need to adjust the colors. The selected crosshairs should always be more prominent than the hover crosshairs:

Also, if you reduce the panel width to below the total width of the grid view the absolute positioning of the hover selection breaks:

[RoyLee1224]

Thanks for the review, @bbovenzi. I'll apply these fixes as soon as I finish my final exam.🚀

[bbovenzi]

We just merged some big changes to the grid view. So this will need a significant rebase.

[pierrejeambrun]

That's a nice improvement I'd love for it to get merged!

[RoyLee1224]

CleanShot.2026-01-27.at.23.32.56.mp4

The hover performance is now quite acceptable thanks to the virtualization in #60241. While the overlay method is faster, it adds extra complexity (like the panel width issue @bbovenzi mentioned). I think the trade-off isn't worth it for now.

I’ll close this PR and follow up with a more focused one for keyboard navigation performance (long press). Thanks!

[RoyLee1224]

Key Changes:

• Interaction Overlay: Introduced GridOverlays.tsx to handle highlighting via direct DOM manipulation (CSS transforms), bypassing React re-renders.
• Event Delegation: Replaced individual onMouseEnter listeners in GridTI and TaskNames with a single onMouseMove handler in the parent Grid container.
• Ref-Based Navigation: Updated useNavigation to provide instant visual feedback on keydown via refs, committing the URL change only on keyup. This significantly optimizes long-press keyboard navigation, reducing traversal time for 13 cells from ~8s to ~3s.
• Cleanup: Removed the useHover context and expensive document.querySelectorAll calls from child components.

TO-DO

• Gantt View Hover Synchronization

Screenshots

Hover Effect - Before

hover_before.mp4

Hover Effect - After

hover_after.mp4

Keyboard Navigation - Before (8s)

navigation_before.mp4

Keyboard Navigation - After (3s)

navigation_after.mp4

---

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

[bbovenzi]

Good call. We were already checking the element ids instead in order to speed it up. We should just get rid of all the individual functions.

[pierrejeambrun]

Nice improvement! 🎉

Looking good and working as expected.

As the grid view is a quite complex and important view and this represent a substantial code change, I would be in favor of marking this for 3.1.5 or maybe even 3.2.0. 3.1.4 is being cut out at the moment.

[bbovenzi]

We need to adjust the colors. The selected crosshairs should always be more prominent than the hover crosshairs:

Also, if you reduce the panel width to below the total width of the grid view the absolute positioning of the hover selection breaks:

[RoyLee1224]

Thanks for the review, @bbovenzi. I'll apply these fixes as soon as I finish my final exam.🚀

[bbovenzi]

We just merged some big changes to the grid view. So this will need a significant rebase.

[pierrejeambrun]

That's a nice improvement I'd love for it to get merged!

[RoyLee1224]

CleanShot.2026-01-27.at.23.32.56.mp4

The hover performance is now quite acceptable thanks to the virtualization in #60241. While the overlay method is faster, it adds extra complexity (like the panel width issue @bbovenzi mentioned). I think the trade-off isn't worth it for now.

I’ll close this PR and follow up with a more focused one for keyboard navigation performance (long press). Thanks!