Fix some long known Graph View UI problems

[yuqian90]

We often hear these two complaints from users:

1. Graph View does not make use of the whole screen space. The height is clipped at a fixed value. This is especially bad for large monitors.
2. Graph jumps around when TaskGroup is expanded or collapsed

This PR fixes both issues.

Here's a gif showing some of the UI interactions after this change. Notice these two changes:

1. The graph now uses the whole page. It's no longer clipped to a fixed height
2. The clicked node focuses around the cursor when TaskGroup is expanded or collapsed, instead of jumping around.

[bbovenzi]

Looking good. Do you mind running yarn && yarn lint in the airflow/www directory? Static checks aren't happy.

[bbovenzi]

Also, the new graph view doesn't have the first problem. But I'll make sure the second problem is also addressed before 2.6.0 is released.

[yuqian90]

Looking good. Do you mind running yarn && yarn lint in the airflow/www directory? Static checks aren't happy.

Thanks for pointing out. Done. It did uncover an unused variable.

Also, the new graph view doesn't have the first problem. But I'll make sure the second problem is also addressed before 2.6.0 is released.

That sounds great. Is there a place to preview what 2.6.0 graph will look like?

[bbovenzi]

That sounds great. Is there a place to preview what 2.6.0 graph will look like?

Either run airflow locally, or you can see some screenshots/gifs in the PR: #29413

[bbovenzi]

@yuqian90 wdyt of expand/collapse like this?

[yuqian90]

@yuqian90 wdyt of expand/collapse like this?

This looks awesome. Does it scale well with large DAGs? e.g. one that has hundreds of tasks and many TaskGroups?

[bbovenzi]

This looks awesome. Does it scale well with large DAGs? e.g. one that has hundreds of tasks and many TaskGroups?

Working on it! If not, maybe we'll just disable animations if there are 1000+ tasks.