Add Grid View to new UI

[bbovenzi]

Add an initial Grid View to the new UI.

Features:

• expand and collapse task groups
• expand and collapse all task groups (including in graph view)
• basic title to show run_id/task_name and state
• Click on a dag run, task name, or task instance to select
• hover on a dag run, task name or task instance to see your position
• All clickable areas are keyboard accessible
• duration and date axes for the dag run bar graph
• paginate dag runs by increments of 10 even though the limit is 25. I'm open to change this.

Not included:

• Full tooltips. There is an issue with Chakra v3 that tooltips in particular are much slower and so a large grid view would grind to a halt: Initial render time doubled since updating to v3 chakra-ui/chakra-ui#9488
• Accessible state colors. Will be another PR
• AutoRefresh and detecting new dag runs
• Detecting selected dag run from the url and shifting the grid base date to match
• Filtering by run state or type
• Hovering to highlight different task states
• Task name search

I think there's still too many magic numbers to make the layout work. Which I'm happy to work on as well as performance once we confirm that we want to use the grid view in this full page modal.

---

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

[jscheffl]

Did a small "smoke test" - if you select a mapped task and close the grid, the selected task navigation throws an error:

[jscheffl]

Also second had "strange" results in the example task group, when I selected tasks in a group my browser (Firefox, Ubuntu 24.04 LTS) was sorting the runs and selecting the first execution if I clicked on the task of second/third run:

[jscheffl]

Besides the glitches looks good!

[bbovenzi]

Good call on the mapped task stuff. I made an issue for it here: #45990

Would you be able to make a gif or video of the second behavior you described? I am having a hard time understanding or I can't replicate it yet locally

[pierrejeambrun]

Great! Beside the small issues mentioned by Jens.

[jscheffl]

Good call on the mapped task stuff. I made an issue for it here: #45990

Would you be able to make a gif or video of the second behavior you described? I am having a hard time understanding or I can't replicate it yet locally

Sorry for the delay, coming back post merge now.

simplescreenrecorder-2025-01-25_21.48.58.mp4

Attached please find the recording. Just tested post merge on current main. Clicks are not visual but whenever I click a task cell you see the runs are getting re-sorted by the length of the bars of DAG runs.