Recuperate zoom and rendered position changed

[marimeireles]

There are these two functions who got lost from version 0.1 to 0.2 of ipycytoscape.
If you download this release file: https://github.com/QuantStack/ipycytoscape/releases/tag/0.1.4
You'll see it, but basically, we need to readd them to the code:

  this.cytoscape_obj.on('zoom', () => {
    this.model.set('zoom', {'level': this.cytoscape_obj.zoom()});
    this.model.save_changes();
  });

  this.cytoscape_obj.on('rendered_position', () => {
    this.model.set('rendered_position', {'renderedPosition': this.cytoscape_obj.rendered_position()});
    this.model.save_changes();
  })

  zoom_change() {
    this.cytoscape_obj.zoom(this.model.get('zoom'));
  }

  rendered_position_change() {
    this.cytoscape_obj.rendered_position(this.model.get('rendered_position'));
  }

This should lie inside https://github.com/QuantStack/ipycytoscape/blob/1cba2f411d6e323d83025d52dd314817f064ad94/src/widget.ts#L334

We also have to make sure it works, a calling of these functions in one of the example notebooks will be enough :)

[ianhi]

this.model.set('zoom', {'level': this.cytoscape_obj.zoom()});

needs to be this.model.set('zoom', this.cytoscape_obj.zoom());
looks like the cause of #26

[ianhi]

Also, what are these for? On the python side they don't seem to do much? https://github.com/QuantStack/ipycytoscape/blob/8769ec2d36a9ae5ec8420ffc1c96fbb0f062d284/ipycytoscape/cytoscape.py#L306-L307

Are they in case someone wants to modify those things from python? like:

for z in [.25, 1, 2]:
    cytoscapeobj.zoom =z
    sleep(1000)

[ianhi]

Ah, one consequence of this is that if you have multiple views of the same object they all are forced to have the same zoom level. Is this intended? My preference would be for different views to be able to have different zoom levels and rendered positions so i could look at multiple parts of the same graph at once using different cells.

[marimeireles]

So this code is for the frontend part, actually.
The idea of these functions is doing something like, if the zoom is > 90% then, show tips or something like that. And the rendered position was actually requested by an user, it can be used to create an analyses graph, where you want to preset the locations of the nodes.

My preference would be for different views to be able to have different zoom levels and rendered positions so i could look at multiple parts of the same graph at once using different cells.

That'd be cool. I don't really know how to do this, because I think the API for this is bounded to the whole graph object but don't know much about it, might be doable!

[ianhi]

So this code is for the frontend part, actually.

Huh, I think I'm misunderstanding something then. To me it looks like what these functions do is make sure that zoom and rendered_position are synced back to python.

And the rendered position was actually requested by an user, it can be used to create an analyses graph, where you want to preset the locations of the nodes.

I think I'm confused here as well. Looking at that code (https://github.com/QuantStack/ipycytoscape/blob/b39d99fc66cc416d5f6e32fa776896257f2d44f6/src/widget.ts) it seems that rendered_position neither affects anything on the frontend nor is affected by changes to the cytoscape graph.

That'd be cool. I don't really know how to do this, because I think the API for this is bounded to the whole graph object but don't know much about it, might be doable!

This was possible until I tried re-adding the above functions. My understanding of how widgets work is that there is one underlying python model, but every time you create a new output (i.e. cytoscapeobj as the last line in a cell) then a new javascript object is created to display there. So as long as the zoom in cytoscape doesn't get synced back to the python model then the different views can't communicate it to eachother. Is it bad practice to have the sync only go one way? So the zoom for all views can be set from python, but zooming on any given given doesn't result in the zoom value is aware of changing?

Here's the behavior without readding those lines:

and with them readded:

I think they diverge in position in such a crazy way because only the zoom attribute is being synced between them. Though, I would have thought that they would start with the same rendered position. Maybe there is some randomness used in the choosing the layout that affects this.