Add legend to grid view

bbovenzi commented 1 year ago

Description

It would be useful to add a simple legend to the grid view.

Help a user understand the icons for a manual / backfill / dataset triggered dag runs
Help a user understand the symbol for tasks/runs with a note

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

[X] I agree to follow this project's Code of Conduct

amoghrajesh commented 1 year ago

@bbovenzi is this issue taken? I would like to try my hands here given some more reference material here.

bbovenzi commented 1 year ago

@bbovenzi is this issue taken? I would like to try my hands here given some more reference material here.

Nope! It's all yours. Feel free to ask any questions here.

We'll probably want to make a new react component and put add it in the main grid view component here.

We'll want to refer to each RunTypeIcon
And we'll want to explain the gradient we use to indicate if there is a note

amoghrajesh commented 1 year ago

Hi, @bbovenzi I am new to Airflow and would like to get a few things clarified before starting.

Do we have some kind of legends in the airflow codebase that I can refer to? Also, are we talking about legend being a small component that gives out some information like in graphs etc or react-legend? (https://www.npmjs.com/package/react-legend)
I would appreciate it if you could provide me with some online references for the same

bbovenzi commented 1 year ago

You can refer to the legend row of dag run/task instance statuses. Basically, just a representation of each icon/gradient with a word or two next to it. We don't need an extra mom package. Just a simple react component.

amoghrajesh commented 1 year ago

@bbovenzi a follow-up on which legend row you meant here? Can you show me where the legend is here?

ashb commented 1 year ago

@amoghrajesh That is not the Gird view we are talking about -- this one is https://airflow.apache.org/docs/apache-airflow/stable/ui.html#grid-view

amoghrajesh commented 1 year ago

@ashb @bbovenzi coming back to this issue after some time. We are trying to add some legend to this page if I am not mistaken:

We can add a small legend for type of run
A small legend for tasks vs runs? How do I identify them in terms of logos?

bbovenzi commented 1 year ago

1.Here you can see each run type and icon we use

No, but we want to also indicate if a task or run has a note. See the logic here

Grzyblon commented 2 months ago

@bbovenzi is this issue still relevant?

bbovenzi commented 2 months ago

Yes, I would say its still useful

Grzyblon commented 2 months ago

Is that what you have in mind ? I haven't figured out yet how should the icon looks in point about a DAG runs with a note.

bbovenzi commented 2 months ago

Something like that in a tooltip, yes! For notes, let's make a mock task instance and render the StatusWithNotes component

Grzyblon commented 2 months ago

I've moved that list to DagRunTooltip. DAG_run_types_in_tooltip_airflow

I was considering putting that in a tooltip but I had an impression that it should be easily visible. That's why I put it first under the grid. Also tooltip already have information about run type (maybe we should add an icon like run type description in Details tab). Finally maybe it would be nice to highlight DAG runs of given type after hovering mouse on list item just like task statuses. Of course same with note.

bbovenzi commented 1 month ago

No, definitely not in every single dag run tooltip. Once a user learns the icons, they don't need to be reminded every single time. Just an InfoTooltip component is fine I think.

But maybe we should add those icons to the run_type filters.

Grzyblon commented 1 month ago

@bbovenzi I’ve prepared a few proposals based on your comments.

But maybe we should add those icons to the run_type filters.

It was not so trivial as I thought it'll be. Here are results. DAG_run_types_in_filter I’ve also added rendering StatusWithNotes next to a “Contains a note” text with the same status color as task instance/ DAG run tooltip originates from. DAG_run_typeicon_in_tooltip_airflow

Just an InfoTooltip component is fine I think.

I’ve also made grid legend using InfoTooltip component placed over Grid component. This definitely needs some more tweaks. DAG_run_types_in_tooltip_airflow

In my opinion adding icons to run type options in filter plus rendering StatusWithNotes component in InstanceTooltip and DagRunTooltip should be sufficient. That way user will be getting familiar with the graphics gradually as they use these features. In that case adding InfoTooltip with whole legend seems redundant.

Is that looks good?

bbovenzi commented 1 month ago

looking good! we may need to adjust the statuswith notes margins but otherwise its great!

Grzyblon commented 1 month ago

Great! I’ll be unavailable for next few days now. I’ll tweaks things a bit, clean up code and prepare PR when I get back.

apache / airflow