cytoscape / cytoscape.js

Graph theory (network) library for visualisation and analysis
https://js.cytoscape.org
MIT License
10.09k stars 1.64k forks source link

Layout changes to preset after unselecting a node #2158

Closed RK-Veltec closed 6 years ago

RK-Veltec commented 6 years ago

Hello. I'm adapting the Wine & Cheese example to a different data set. I initially made a formula that generated positions to create a spiral visual, as the example needs each node in a different position.

However, it is not visually intuitive for any number of nodes. I later learned about the layout attribute inside the cytoscape() function, and changed it to cose (going to test dagre layout later), and that works well for small data samples.

However, after selecting and unselecting a node, the graph doesn't go back to the cose layout. What do I have to change there to make its layout reset to cose, or whatever layout I defined it for? When I select a node, it changes to concentric layout (as it is meant to be), and when unselected, it makes the layout stop, but it changes to preset and not to cose.

Simply removing the positions from the data.json breaks the canvas, as the bluebird.min.js file uses the positions.

This issue can be reproduced by editing line 252 of demo.js of the Wine & Cheese example, changing the layout from preset to any other native to cytoscape.

layout: { name: 'cose', padding: layoutPadding }

I'm posting this here and not in the github of the example because no one goes there.

RK-Veltec commented 6 years ago

I partially solved this issue, but the animation glitches when I deselect a node.

To make it return to its original layout (lets say its breadthfirst, because its positions are fixed) after selecting and deselecting a node, I created the following var, and added it to the "return Promise.resolve()" found originally at line 208. See below:

// added this code above the return at line 208
var restoreLayout = function(){
      var layout = cy.layout({
        name: 'breadthfirst'
      });

      return layout.run();
}

// changed the return at line 208 to this below:
return Promise.resolve()
      .then( resetHighlight )
      .then( hideOthers )
      //.then( restorePositions ) You can delete this line
      .then( showOthers )
      .then( restoreLayout )
;

This solution, however, generates the following error:

Possibly unhandled TypeError: layout.run is not a function