Multiple networks integrated into one network in 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.