Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Fix oversized width of DAGs table with hide/reveal of "links"#11866

Merged
ryanahamilton merged 2 commits intoapache:masterfrom
astronomer:dags_table_width
Oct 29, 2020
Merged

Fix oversized width of DAGs table with hide/reveal of "links"#11866
ryanahamilton merged 2 commits intoapache:masterfrom
astronomer:dags_table_width

Conversation

@ryanahamilton
Copy link
Contributor

@ryanahamilton ryanahamilton commented Oct 26, 2020

Resolves #11795

This update improves the presentation of the DAGs (home) view by making better use of the horizontal space. This was accomplished through a handful of changes:

  • Fixed the broken tooltip on the "i" icon in the leftmost column heading by adding missing js-tooltip class.
  • Moves the tags beneath the DAG ID. By not having left and right aligned elements within the same column, the contents of the cell flow better with the variation of screen widths, and there is less visual distraction with a single alignment point.
  • Changes the tag background from green to blue. Green typically communicates a positive status, but in this context the tag has no relation to the DAG's status. The blue is a better neutral color.
  • Changed the column order to a more logical organization. Going left-to-right the order now displays broader-to-detailed properties of the DAG. It also seemed to make more sense to have "schedule" and "last run" adjacent to each other given the former determines the latter.
  • Moved the existing CSS only used for this view out of the shared (main.css) file to a dedicated dags.css file only loaded for this view. The new CSS added in this PR was added to this file as well.
  • With the "links" taking up a great deal of space and not providing any actual detail of the DAGs, I've moved them to a hidden menu in the last column of the table. The menu is revealed upon hover of the "•••". In addition to saving space, this alleviates a lot of the visual clutter of having so many icons grouped throughout the page. Additionally, this allows text to be displayed beside the link icons—providing much better information to the user. I've reversed the prior order of the links in order to reduce the mouse travel to the most popular (tree, graph).

Screen Recording 2020-10-28 at 11 24 31 AM

  • Doc screenshot of this view has been updated accordingly.

Screenshots of overall updates

Full width - Before

Image 2020-10-26 at 5 22 18 PM

Full width - After

Image 2020-10-26 at 5 23 16 PM


Narrow width - Before

Image 2020-10-26 at 5 21 33 PM

Narrow width - After

Image 2020-10-26 at 5 11 22 PM


^ Add meaningful description above

Read the Pull Request Guidelines for more information.
In case of fundamental code change, Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in UPDATING.md.

@boring-cyborg boring-cyborg bot added area:docs area:webserver Webserver related Issues labels Oct 26, 2020
@ashb
Copy link
Member

ashb commented Oct 26, 2020

Interesting approach.

One thing to bear in mind: the links are used more than the actions are -- at least the tree view and graph view links are.

@ryanahamilton
Copy link
Contributor Author

@ashb in the context of the view/table's role as a bird's-eye-view across DAGs, neither the "links" or "actions" are really supporting that purpose, so they seemed most obvious to truncate. Given the sheer quantity of the links and the visual clutter they add, they appeared to be the best candidate. I suppose the actions could be moved within the "more" menu as well if that was desired?

@ashb
Copy link
Member

ashb commented Oct 26, 2020

More saying in terms of which is clicked not often - some links are much more commonly used then others, and those are used more often them actions.

It's too late for me to come to a conclusion of that thought

@ryw
Copy link
Member

ryw commented Oct 26, 2020

Yes I agree, my first reaction is that the 2 buttons I hit the most in the row will now be hidden. Maybe they deserve special treatment.

But the rest of the links are good to be hidden.

One way to consider this change is that if @ryanahamilton was proposing to do the opposite (change from his proposal to our current reality) we'd surely shoot it down :)

I'm +1 to merge this and keep iterating, maybe pull those 2 links back out if you can come up w something.

@ryw
Copy link
Member

ryw commented Oct 27, 2020

@mistercrunch what do you think of this one?

@ryw ryw removed the area:docs label Oct 27, 2020
@mistercrunch
Copy link
Member

mistercrunch commented Oct 28, 2020

Neat! Design-wise the expand-over-the-row isn't the common/expected pattern. The more common pattern here would be the dropdown button, which wouldn't hide the context like this does. This is one less click, but more mouse-traveling. This works and is clearly better than what we have now but personally prefer the dropdown button.

[outside the scope of this PR] another common pattern would be to hide the repetitive content of the Actions and show them on row-hover to de-crowd the UI

Side note, the status circles have gotten numerous, there's certainly a better way to visualize this information.

@ryanahamilton
Copy link
Contributor Author

Appreciate the feedback on this everyone. It seems that everyone is agreement that the density of this view has grown out-of-control. I think I'll be able to offer some additional follow-up adjustments to keep refining it.

I did just push one update to reverse the order of the links—this will reduce the mouse travel distance for the more popular links (tree, graph). (see updated GIF in PR description)

@ryw
Copy link
Member

ryw commented Oct 28, 2020

Yeah I like the reversal

Copy link
Member

@ashb ashb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's go for it, and see what people think of it -- we can always change something back or pull tree and graph view out if needed

@github-actions github-actions bot added the okay to merge It's ok to merge this PR as it does not require more tests label Oct 29, 2020
@github-actions
Copy link

The PR should be OK to be merged with just subset of tests as it does not modify Core of Airflow. The committers might merge it or can add a label 'full tests needed' and re-run it to run all tests if they see it is needed!

@ryanahamilton ryanahamilton merged commit b4b90da into apache:master Oct 29, 2020
@ryanahamilton ryanahamilton deleted the dags_table_width branch October 29, 2020 21:49
michalmisiewicz pushed a commit to michalmisiewicz/airflow that referenced this pull request Oct 30, 2020
…#11866)

* Conserve horizontal space by adding hide/reveal "links" in DAGs table

* Reverse the order of links to reduce mouse distance for most popular
szn pushed a commit to szn/airflow that referenced this pull request Nov 1, 2020
…#11866)

* Conserve horizontal space by adding hide/reveal "links" in DAGs table

* Reverse the order of links to reduce mouse distance for most popular
@ryanahamilton ryanahamilton added the area:UI Related to UI/UX. For Frontend Developers. label Nov 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers. area:webserver Webserver related Issues okay to merge It's ok to merge this PR as it does not require more tests

Projects

None yet

Development

Successfully merging this pull request may close these issues.

links wrapping on standard-width browser

4 participants