CODEWITHSUNDEEP
jqueryjquery-selectorscytoscape-webcytoscape.js
grokkaine
grokkaine

Reputation: 821

using two graph panels in cytoscape.js

I need to display two graph panels in the same page in Cytoscape.js. Each panel contains a network responsive to the events from the other panel. This used to be simple in the Flash version of cytoscape web.

I was declaring two visualization objects:

var vis1 = new org.cytoscapeweb.Visualization(div_id1, options);
var vis2 = new org.cytoscapeweb.Visualization(div_id2, options);

,them after declaring styles and object listeners I was drawing them:

vis1.draw({ network: networ_json1 , visualStyle: visual_style1});
vis2.draw({ network: networ_json2 , visualStyle: visual_style2});

The listeners are easy to implement because you have access to both objects the same time:

vis1.addListener("select", "nodes", function(evt) {
    for (var i in evt.target){
        node_ids = evt.target[i].data.conN;
        var  data1 = { selected: "1"};
        if(node_ids.length >= 1){
             vis2.updateData("nodes", node_ids, data1)
             vis2.select("nodes",node_ids);
        }
    }
});

Now I want to upgrade this to Cytoscape.js but I got stuck to displaying two panels on the same page. 1) Let me know where I go wrong and 2) Please give me a hint on how to proceed next. A small example of a node being selected in panel 2 if it is selected in panel 1 would be great!

Here is the test.html:

<html>
    <head>
        <title>Cytoscape.js double panel test</title>
        <script src="js/jquery.js"></script>
        <script src="js/cytoscape.min.js"></script>
        <script src="js/simple.js"></script>
        <script></script>
    </head>
    <body>
    <div id="cy1" style="height:600px;width:800px;border:1px solid #777;"></div>
    <div id="cy2" style="height:600px;width:800px;border:1px solid #777;"></div>
    </body>
</html>

And here is simple.js. Only panel two will display a network, instead of both.

$(function(){
    var nodes1 = [];
    for (var i = 0; i < 5; i++) {
        nodes1.push({
            data:{
                id: "n" + i
            },
            group: 'nodes1'
        });
    }

    var edges1 = [];
    edges1.push({ data: { id: 'e1', source: 'n1', target: 'n2' }, group: 'edges1' })
    edges1.push({ data: { id: 'e2', source: 'n1', target: 'n3' }, group: 'edges1' })
    edges1.push({ data: { id: 'e3', source: 'n1', target: 'n4' }, group: 'edges1' })
    edges1.push({ data: { id: 'e4', source: 'n2', target: 'n0' }, group: 'edges1' })
    edges1.push({ data: { id: 'e5', source: 'n3', target: 'n2' }, group: 'edges1' })

    $("#cy1").cytoscape({
        elements: {
            nodes: nodes1,
            edges: edges1
        }
    });

    var nodes2 = [];
    for (var i = 0; i < 5; i++) {
        nodes2.push({
            data:{
                id: "n" + i
            },
            group: 'nodes2'
        });
    }

    var edges2 = [];
    edges2.push({ data: { id: 'e1', source: 'n1', target: 'n2' }, group: 'edges2' })
    edges2.push({ data: { id: 'e2', source: 'n1', target: 'n3' }, group: 'edges2' })
    edges2.push({ data: { id: 'e3', source: 'n1', target: 'n4' }, group: 'edges2' })
    edges2.push({ data: { id: 'e4', source: 'n2', target: 'n0' }, group: 'edges2' })
    edges2.push({ data: { id: 'e5', source: 'n3', target: 'n2' }, group: 'edges2' })

    $("#cy2").cytoscape({
        elements: {
            nodes: nodes2,
            edges: edges2
        }   
    });

});

Upvotes: 4

Views: 1858

Answers (1)

Developer
Developer

Reputation: 306

Currently, this is not completely implemented. You can track its progress via: https://github.com/cytoscape/cytoscape.js.

If you have a specific/urgent need, let me know and I can prioritize it.

Edit: Having multiple graph panels in cytoscape.js is one of the active, urgent features. Estimated completion in 3.5 days. This time duration can decrease depending on need.

Upvotes: 2

Related Questions