Bold and increase font-size of graph task headers

[NilsJPWerner]

Description

I think bolding and increasing the fontsize of task headers would improve legibility. Here is a comparison:

Before:

After:

This was from just adding font-weight: bold and font-size: 14px to the header css, and increasing the height of the task by a few pixels.

Some other suggestions are to make the the border a bit wider and drop the task status from the contents since the border now makes it redundant. It could be replaced with duration or nothing at all.

Use case/motivation

No response

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

[jscheffl]

Thanks for the proposal. Peronally I'd prefer to keep a consistent font size (meaning not too many different font sizes on the UI) but making bold text and other proposals looks good to me (but I am just one person - other opinions welcome).

I assigned you the issue, feel free to raise a PR.

[NilsJPWerner]

@bbovenzi do you have thoughts?

[aadeshmodak13]

We have to go to airflow/www/static/css/graph.css Am I right?? I'm new to open source.

[bbovenzi]

We got rid of most of graph.css. It's all in https://github.com/apache/airflow/tree/main/airflow/www/static/js/dag/details/graph now.

We can definitely make the name bigger. One idea I was toying with was also to hide details and only show the status color and task name when you zoom out.

[NilsJPWerner]

That's a good idea! I was thinking that running tasks could dynamically display their current run time as well. You could also have some sort of progress indicator that compares current run time to average previous run times. That may be a bit involved though.

[bbovenzi]

Yes it would be fun to be able to display more useful info like that while also having a simpler view too.

Rough WIP: