Make entire task box clickable to select the task in Airflow 3 graph view

[jsjasonseba]

Description

In Airflow 3.0 graph view, currently only the task name inside a node/box is clickable to select the task.
This makes the interaction a bit unintuitive. It is more intuitive to make the entire task box clickable for selection.

Use case/motivation

Better UI experience

Related issues

No response

Are you willing to submit a PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct

[bbovenzi]

We could change the Flex element to a Button. We just need to make sure to handle Task Group nodes separately. And the DagNode also has a clickable switch element, so we need to be mindful how to click that one too.

[jsjasonseba]

Hi @bbovenzi, sorry I didn't notice your comment earlier. I have implemented a working approach, but I used router link wrapping the flex instead of button. I have handled the TaskGroup nodes part, but didn't realise there is DagNode too. Thanks for the feedback. Let me test it again.

That said, do you agree with this design, or do you prefer the previous design with only the selectable task name?

[bbovenzi]

You can see in my PR comment that we can't just wrap it all in a link.

But yes, you are right that it is better UX to make the whole box clickable. Let's just make sure it is valid and accessible html. Not sure if the LinkOverlay in chakra will help: https://www.chakra-ui.com/docs/components/link-overlay