Make grid view widths adjustable #27273
Conversation
boring-cyborg
bot
added
area:UI
There was a problem hiding this comment.
Very cool feature !
I'll do a more in depth review tomorrow. (can't test the code right now)
Overall looking good.
I feel like we have quite a few 'magic numbers' that are hard to reason about. Most of them were not introduced in this PR, but maybe extracting them into shared variables with explicit names could help in maintaining them later ?
airflow/www/static/js/dag/Main.tsx
Outdated
| useEffect(() => { | ||
| if (contentRef.current) { | ||
| const topOffset = contentRef.current.offsetTop; | ||
| const footerHeight = parseInt(getComputedStyle(document.getElementsByTagName('body')[0]).paddingBottom.replace('px', '').replace('em', ''), 10) || 0; |
There was a problem hiding this comment.
This feels weird to replace indifferently px and em. I think footerHeight won't have the correct value if it is specified in 'em'. (We use it as a pixel value later in the code).
|
❤️ |
|
Tested locally and working great. I just have one issue when displaying details for a task group with long 'tooltip'. There is a weird 'jump' when trying to resize at first. (a gif would have been better, sorry :p) Starting from this: And then when clicking on the separator for a rezise, it flickers, and the separator jumps to the left right away: As if the tooltip was taking all the space and pushing as much as possible the separator to the left. This could be just on my side and cause by my local setup:
|
|
I cleaned up the magic numbers. |
|
Making Airflow UI better one piece at-a-time :) |
Make the border between the grid and details panel draggable so users can adjust the width as they want.
^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an 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 a newsfragment file, named
{pr_number}.significant.rstor{issue_number}.significant.rst, in newsfragments.