question:Howto let cytoscape.js to be updated partialy - at this moment (in example below) i know only howto do reload of whole graph on any change in collections of nodes/edges.
so if i understand correctly, in example below, function:
function updateNetworkData(net) {
var edges = Edges.find().fetch();
var nodes = Nodes.find().fetch();
net.elements().remove(); // make sure evything is clean
if (nodes) net.add(nodes);
if (edges) net.add(edges);
//net.reset() // render layout
net.layout();
}
will recreate fully cytoscape graph , when collections Edges/Nodes are changed, because there is Tracker.autorun on client side JS :
Tracker.autorun(function() {
updateNetworkData(net);
});
this means, whole graph is getting recreated, anytime i change any single value of any edge/node in mongo... this is too much, and not exactly what i want...
so let me repeat question: how to make cytoscape graph to refresh only changed node/edge? i.e when i change property name of node in mongo, i want cytoscape to have refresh only on particular node in graph
example code : JS
net= "" //main object
if (Meteor.isClient) {
Tracker.autorun(function() {
updateNetworkData(net);
});
Template.graf.rendered = function() {
console.log("on rendered called");
net = cytoscape({
container: document.getElementById('cy'),
ready: function() {
console.log("network ready");
updateNetworkData(net); // load data when cy is ready
},
style: cytoscape.stylesheet()
.selector('node')
.style({
'content': function(e) {
return e.data("name")
},
'font-size': 12,
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'text-outline-color': function(e) {
return e.locked() ? "red" : "#888"
},
'min-zoomed-font-size': 8
// 'width': 'mapData(score, 0, 1, 20, 50)',
// 'height': 'mapData(score, 0, 1, 20, 50)'
})
.selector('edge')
.style({
'content': function(e) {
return e.data("name") ? e.data("name") : "";
},
'target-arrow-shape': 'triangle',
})
});
}
}
if (Meteor.isServer) {
Meteor.startup(function() {
// code to run on server at startup
});
}
function updateNetworkData(net) {
var edges = Edges.find().fetch();
var nodes = Nodes.find().fetch();
net.elements().remove(); // make sure evything is clean
if (nodes) net.add(nodes);
if (edges) net.add(edges);
//net.reset() // render layout
net.layout();
}
CSS
#cy {
width : 70vw;
height: 50vw;
position: absolute;
}
HTML
<head>
<title>hello</title>
</head>
<body>
<h1>Welcome to Meteor!b</h1>
{{>graf}}
</body>
<template name="graf">
<div id="cy"></div>
</template>
//its based on code from https://github.com/maxkfranz/cyedit)
