search

cytoscape / ipycytoscape

A Cytoscape Jupyter widget
https://ipycytoscape.readthedocs.io/en/master/
BSD 3-Clause "New" or "Revised" License
269 stars 62 forks source link

Allow to resize the widget #186

Closed krassowski closed 3 years ago

krassowski commented 3 years ago

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.

ipycytoscape

krassowski commented 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).

joseberlines commented 3 years ago

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.

marimeireles commented 3 years ago

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.

marimeireles commented 3 years ago

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!)

ianhi commented 3 years ago

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:

https://github.com/QuantStack/ipycytoscape/blob/26fed38ae6aa5c3bad375cab3ddcf937d84de72b/src/widget.ts#L177-L181

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.

marimeireles commented 3 years ago

@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: