Question

In cytoscape.js, I’m trying to change the values of two node attributes, for each node in a 329-node network.

This works, but takes 86 seconds. I was hoping it would be much faster. Here is my code:

var data = // data of the form {lfc: {key1: 0.01, key2: 0.02, ...}, pval: {key1: 0.03,  key2: 0.04, ...}};
var nodes = cy.nodes();
console.log('starting to update node data...');
var start = new Date().getTime();
for (var i = 0; i < nodes.length; i++)
{
  var node = nodes[i];
  var id = node.data("id");
  var lfc = data['lfc'][id];
  var pval = data['pval'][id];
  node.data({lfc: lfc, pval: pval});
}
var end = new Date().getTime();
console.log("finished in " + (end - start) + "ms");

I know if I am setting the attributes of all nodes in the network to the same value, it’s much faster. This takes about half a second:

var start = new Date().getTime();
cy.nodes().data({lfc: 1.0, pval: 1.0});
var end = new Date().getTime();
console.log("finished in " + (end - start) + "ms");

But since I’m trying to give each node individual values, I can’t do this.

Any ideas for improving performance?

Answer 1

The problem with calling functions like that in a loop is that each iteration causes events and notifications to the renderer — because visual updates may be needed. As you noted, this is not an issue when adding/loading in bulk, because this only generates one notification.

The ideal architecture would be to load in all the elements you need before intialising cytoscape.js, and then updating individual nodes as they change on the server. Polling the server and updating all the nodes will likely cause you other issues other than loading performance.