Multiple networks integrated into one network in Cytoscape - cytoscape

Question

I have a list of genes (let’s call it L), and I want to see how they work differently in 3 different species (human, zebrafish and cod). Of course, the 3 species don’t have all the genes in the list, besides, the interactions between genes are different across 3 species. Firstly, I search the genes in this list against the genomes of 3 species, to get 3 gene lists for 3 species (let’s call them l1, l2, l3). Then I put the 3 gene lists into STRING respectively. So now I have 3 networks (let’s call them n1, n2, n3), each network for each species.
With those 3 networks and 4 lists, I come to Cytoscape. What I want to visualise is to show 3 networks together. So the background is the all the nodes from L. When I say, let’s look at human, the network n1 (including both the nodes from l1 and the edges between them) will be hi-lighted (the other genes from the other two species stay there without moving, but faded out as a background). Then you also do the same for zebrafish and cod. By doing this, one can see how the genes work differently across 3 species.
So is that possible to be done in Cytoscape? Thank you in advance.

Answer 1

You could start with initializin cytoscape with L:
// Initialize cytoscape
cy = window.cy = cytoscape({
container: $('#diagram'),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'random'
},
elements: L,
style: [
{
selector: 'node',
style: {
'shape': 'data(faveShape)',
'content': 'data(DisplayName)',
'height': 'data(faveHeight)',
'width': 'data(faveWidth)',
'background-color': 'data(faveColor)',
'line-color': '#a8eae5',
'font-family': 'Segoe UI,Helvetica Neue,Helvetica,Arial, Verdana',
'font-size': '15px',
}
},
{
selector: 'edge',
style: {
'label': 'data(myLabel)',
'curve-style': 'bezier',
'width': 5,
'opacity': 0.5,
'line-color': '#a8eae5',
'font-size': '12px',
'target-arrow-shape': 'triangle',
'target-arrow-color': '#a8eae5'
}
},
{
selector: '.autorotate',
style: {
'edge-text-rotation': 'autorotate'
}
},
{
selector: 'edge.deactivate',
style: {
'opacity': 0.1,
}
},
{
selector: 'node.deactivated',
style: {
'opacity': 0.1,
}
}
],
});
After that you could add all the edges, but you have to add a property to tell which species the edges. Additionally you have to give the deactivated property to all nodes.
cy.nodes().addClass('deactivated');
cy.add('All the edges you have'); // Write somthing like species : 1 for first species and so on
cy.ready(function () {
cy.edges().addClass('deactivate');
});
This way all your nodes are on the graph, they are faded and you have all the edges there. You now could define a button or something and select the right groups and edges and remove the classes with:
cy.nodes("[species = '" + num + "']").removeClass(deactivated);
cy.edges("[species = '" + num + "']").removeClass(deactivate);
When you select another group, you can always say:
cy.nodes().addClass(deactivated);
cy.edges().addClass(deactivate);
and then select the right ones.