Cytoscape Edgehandles: multiple cy instances messing with Ghost Edgehandles

Question

I want to display several instances of cytoscape in a single page, in a time sequence: first one set of nodes are displayed on the graph, the user must create edges between them, then he moves to a second graph, etc.

There seems to be a conflict between my reinitialisation code and cy.edgehandles. In the first instance, everything works fine. From the second instance on, the "ghost" edges are not displayed while draging the edges.

I get the following error message in the console:

jquery.cytoscape.js-edgehandles.js:333 Uncaught TypeError: Cannot read property 'id' of null jquery.cytoscape.js-edgehandles.js:333 $.fn.cytoscapeEdgehandles.functions.init.drawLine jquery.cytoscape.js-edgehandles.js:732 moveHandler jquery-2.0.3.min.js:5 x.event.dispatchjquery-2.0.3.min.js:5 x.event.add.y.handle

The variable that appears to be "null" is :

333: source: sourceNode.id(),

Here is the code I wrote to reinitialise the cy.instance:

$('#next').click(function(){
indexLevel++;// index to move from one instance to the next. 
cy.load(elesJson);// load nodes collection
cy.ready(); 
});

Here is my code:

//elements

$(function(){
var elesJson = { 
nodes: [{ data: { id: 'S'} }...],
edges: [{ data: { id: 'loan', source: 'B', target: 'U' } },...]};

// instance index

var indexLevel=0;

// cy initialisation

$("#cy"+indexLevel).cytoscape({
style: cytoscape.stylesheet()...
elements: elesJson, 
ready: function(){window.cy = this;cy.zoomingEnabled( false );
    cy.panningEnabled( false );});

Any solution to this?

Answer 1

I'm not what the issue is exactly, but I think the cause may be in the workflow. It should be:

(1) destroy() the edgehandles on cy.

(2) cy.destroy() the core instance.

(3) Create a new core instance, cy.

(4) Create a new edgehandles on cy.

Alternate flow:

(1) Never destroy.

(2) Instead of destroying, empty graphs and re-use them: cy.elements().remove()

The alternate flow is probably safer if there is a bug in edgehandles, and it's certainly more efficient (i.e. faster).

If this doesn't solve the problem, then perhaps you could share some code (or send it to me privately if the code is sensitive) and we can post the generic results here.