Colour options for tags on DAGS

[RichBr87]

Description

Following the useful feature of tags with https://airflow.apache.org/docs/apache-airflow/2.0.0/howto/add-dag-tags.html it would be great if there was an option here to choose different colours for the tags.

Use case / motivation

As per the description, it would be great to see options for colour choices when adding tags. This will be really useful for those with several DAGs that might have dependencies on an upstream DAG where the same colour can be added. This will help users see at a glance which category/type a DAG is under.

Whilst it's a small thing, I think it will be really beneficial to users and certainly make the UI more colourful.

Are you willing to submit a PR?

Related Issues

[boring-cyborg[bot]]

Thanks for opening your first issue here! Be sure to follow the issue template!

[eladkal]

Not sure if it's small thing as you mention. Tags are just text that is taken from the DAG definition. It's not resource that created in the system and has configuration like Pools where you can just add another option and take it into account.

Where do you imagine that the color will be defined?

[RichBr87]

Apologies I meant small as in a small change to request, not that the work would be small. I'm not fully technical, so please excuse the following - The tags on Airflow 2.0 (not sure about 1.10.8 etc as we skipped these versions) are an aqua colour which I am taking to be defined in the coding of the UI. Would it be possible to pre-define other colours and then the user adds one of the chosen colours as a variable after tags=['example']?

[eladkal]

I assume you mean something like: with models.DAG( dag_id="A", ..., tags=[('critical', RED)) as dag:

I don't think this can be a solution as in you might also have:

with models.DAG( dag_id="B", ..., tags=[('critical', BLUE)) as dag:

The author of B doesn't necessarily knows that A already use the tag.

I think that in order to implement this feature the tags will have to be an object maintained as Airflow resource (like pools) and then DAGs can use a pre-defined tag but as mentioned I don't think this is a small feature.

lets see what other think. In any case for the moment this is a theoretical discussion - this issue will get more attention (in terms of proposal review) if someone will be willing to implement it.

[ashb]

If we were going to do it I think managing the colour of the tags should be done outside of the Dag file as Elad suggests

[potiuk]

This could be done as a config entry in Airflow.

On one hand it is not ideal (because users would not be able to modify it) but on the other hand since the tags are anyhow manually assigned by DAG writers as "free choice", I think we can assume that colors should be applied to the "globally known and common" tags which makes configuration as the best place to do it.

[ckljohn]

You can use emoji as workaround. For example, 🔴🟡🟢

[herrmann1981]

From my point of view it would be great if tags would get assigned a color automatically by a color pallet. Like it is done in Grafana or Jira. For example:

• tag1 (most often used) --> primary color
• tag2 --> secondary color
• tag2 .....

[potiuk]

cc: @bbovenzi @pierrejeambrun -> maybe some ideas here ?

[bbovenzi]

We'd probably have to add a method in the webserver to get all the tags, apply color logic and create a dict of what tag goes with what color. Then anytime the UI uses a tag we need to call that method to keep the color consistent across the app. Happy to review a PR for it.

[pierrejeambrun]

This sounds like a nice improvement :)

I had a similar issue one time and we tried generating random colors based on the tag values. Sort of a hash function from string to hex color space. This was giving poor color choices, often with low contrasts and ended up using a predefined color palette.

I am also in favor of a palette handled outside of dag files. We could get some inspiration from the color palette available in Chakra here, the one we use in the react part of the UI. (They also mention tools for creating our own if needed)

I like the idea of having a way to override the default palette via the configuration, maybe something similar to what we do for state colors, the difference being that it wouldn't be a mapping but a list ?

With the current tag style in the UI (background-color), we also might need to adapt the text-color to have correct contrast (going with a border would circumvent that, as we do for state colors)

One more thing, when creating the dict that @bbovenzi mention, I think we should try to do it in a way that creating new tags do not shift colors of existing ones. From a user point of view, i believe this might be confusing.