CODEWITHSUNDEEP
meteorcytoscape.js
Hynek Los kamute
Hynek Los kamute

Reputation: 596

(cytoscape.js & meteor ) Howto let cytoscape.js be updated partialy

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)

Upvotes: 0

Views: 621

Answers (1)

Hynek Los kamute
Hynek Los kamute

Reputation: 596

ok. so after some time i found library in meteor, which is allowing to hook some function on update/insert/... in mongodb
matb33:collection-hooks:
https://atmospherejs.com/matb33/collection-hooks
with this i can change graph gradually.. once i clear my code i will past full working example

please, be aware of subscription delay. I run to problems, i start to have null respose while query Collections.Collection subscribe is async function... it will be covered in example i will past later


EDIT 4.2.2016 - this library matb33:collection-hooks is not usefull for question i put here... This hooks works only for side who set hooks... i will update question with full example later(1-2 weeks), so i can accept it as answer... but for meanwhile, if someone is looking for same, here is fast hint
collection is Elements:

Elements.find({...your filter...}).observeChanges({
             //hook on adding to mongo - see meteor doc for other hooks   
             added: function (id, fields) {

               }

whenever you add to mongodb to Elemenets , hook is trigered ( server/client)

Upvotes: 0

Related Questions