Closed krassowski closed 3 years ago
One idea to make the border less intrusive would be to only make it grey on hover (and otherwise keep it white).
I find this very useful thinking about displaying several graphs in one dashboard for the user to see exactly the borders in which the graph is to be included.
Hey @krassowski, nice to see you around! :) Thanks for the fix. If you don't mind I decided to adopt your tip on adding the border when hovering.
I think this is an improvement and we should merge it... But correct me if I'm wrong @ianhi the content of the cell should be resized automatically as we change the size of the window, right? In this case it resizes but the user has to zoom in or out, so it doesn't close your issue. (Thanks!)
I think this is an improvement and we should merge it...
Definitely agree and happy with merging as is, although this it is not yet a complete solution.
The reason the graph doesn't automatically resize is because that only triggers on changes to the widget's layout size:
so if you do:
cyto.layout.width = '200px'
then the graph will resize itself to fit. But here the width is being modified by the browser so the width
and height
traits of the layout aren't updated and the changes don't propagate to our callback. ( This is perhaps it's own issue: It's a shame that how to resize programmatically is essentially undocumented. I think I've mentioned it a few times on various issues but it never made it into formal docs. It's actually a general widgets feature doing widget.layout.width =
)
So to get the relayouting to fit inside the new smaller size I think we need to add a MutationObserver on the size of the parent element and call this._resize
whenever that size changes.
@ianhi, thanks for the review. Will add a link to your comment in the original issue.
@krassowski thanks a lot for the PR! :cherry_blossom:
Two-line implementation for #76. The border is not required but beneficial to locate the corner as the resize symbol is not always consistently shown/easily visible across browsers and environments.