Skip to content

Update graph nodes with operator style attributes.#32822

Merged
bbovenzi merged 2 commits into
apache:mainfrom
tirkarthi:graph-node-colors
Aug 3, 2023
Merged

Update graph nodes with operator style attributes.#32822
bbovenzi merged 2 commits into
apache:mainfrom
tirkarthi:graph-node-colors

Conversation

@tirkarthi

@tirkarthi tirkarthi commented Jul 25, 2023

Copy link
Copy Markdown
Contributor

closes: #31949
related: #31949

The value from graph_data API is "fill:#ffee00;" . Please let me know if there is a simpler way to parse this instead of string manipulation. Sample dag with screenshot

from datetime import datetime
from airflow.decorators import dag, task
from airflow.models.baseoperator import BaseOperator
from airflow.operators.bash import BashOperator


class HelloOperator(BaseOperator):
    ui_color = "#ffee00"
    ui_fgcolor = "#00ff04"
    custom_operator_name = "Howdy"


@dag(dag_id="gh32757", start_date=datetime(2023, 1, 1), catchup=False)
def mydag():

    @task
    def input(i):
        return i

    @task
    def output(i):
        return i

    bash = BashOperator(task_id="t1", bash_command="echo hello")
    hello = HelloOperator(task_id="t2")
    bash2 = BashOperator(task_id="t3", bash_command="echo bye")

    inputs = input.expand(i=[1, 2])
    output.expand(i=inputs)
    bash >> hello
    bash2

mydag()

image

@boring-cyborg boring-cyborg Bot added area:UI Related to UI/UX. For Frontend Developers. area:webserver Webserver related Issues labels Jul 25, 2023
@bbovenzi

bbovenzi commented Jul 25, 2023

Copy link
Copy Markdown
Contributor

That howdy operator does not look good at all. I wonder if there is a different way we want to show the operator color instead of a background? Maybe make it a tag?

@bbovenzi bbovenzi added this to the Airflow 2.6.4 milestone Jul 25, 2023
@tirkarthi

tirkarthi commented Jul 25, 2023

Copy link
Copy Markdown
Contributor Author

The color selection for the operator could be bad on my part. This is how it looks in the traditional graph view as well. I just wanted to select some odd colors to see how border and other style attributes look.

image

@eladkal eladkal added the type:bug-fix Changelog: Bug Fixes label Aug 1, 2023
@eladkal eladkal modified the milestones: Airflow 2.6.4, Airflow 2.7.0 Aug 1, 2023
@bbovenzi

bbovenzi commented Aug 2, 2023

Copy link
Copy Markdown
Contributor

Here is what I was thinking about. What do you think?

Screenshot 2023-08-02 at 1 08 28 PM

@bbovenzi

bbovenzi commented Aug 2, 2023

Copy link
Copy Markdown
Contributor

@tirkarthi If you like that idea, let me know if you'd like for me to commit that change

@pierrejeambrun

pierrejeambrun commented Aug 2, 2023

Copy link
Copy Markdown
Member

I personally think that Brent suggestion looks great!

@bbovenzi

bbovenzi commented Aug 3, 2023

Copy link
Copy Markdown
Contributor

Decided to commit my changes so we can try to get this in for 2.7.

@tirkarthi

tirkarthi commented Aug 3, 2023

Copy link
Copy Markdown
Contributor Author

Thanks @bbovenzi , this will be an improvement to differentiate operators based on custom colors. It can be changed based on feedback if users still want it as background color like the legacy graph view.

@bbovenzi
bbovenzi merged commit 3bb63f1 into apache:main Aug 3, 2023
ephraimbuddy pushed a commit that referenced this pull request Aug 3, 2023
@tirkarthi @bbovenzi @ephraimbuddy
Update graph nodes with operator style attributes. (#32822)
6794b8e 
* Update graph nodes with task style attributes.

* Change operator text to a tag w/ colors

---------

Co-authored-by: Brent Bovenzi <[email protected]>
(cherry picked from commit 3bb63f1)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bbovenzi bbovenzi bbovenzi approved these changes
@ryanahamilton ryanahamilton Awaiting requested review from ryanahamilton
@ashb ashb Awaiting requested review from ashb
@pierrejeambrun pierrejeambrun Awaiting requested review from pierrejeambrun

Assignees

No one assigned

Labels

area:UI Related to UI/UX. For Frontend Developers. area:webserver Webserver related Issues type:bug-fix Changelog: Bug Fixes

Projects

None yet

Milestone

Airflow 2.7.0

Development

Successfully merging this pull request may close these issues.

Support Operator User Interface Elements in new graph view

5 participants

@tirkarthi @bbovenzi @pierrejeambrun @ephraimbuddy @eladkal