ePlant3 Interactions View Blueprint and Requirements

[VinLau]

ePlant3 Interactions View Blueprint and Requirements

by V. Lau (reviewed by N. Provart)

Introduction

Genes and their gene products (proteins) can interact with other genes and gene products. The most common types of interactions are Protein-DNA Interactions (PDIs, ) where proteins up- or down-regulate the expression of its target (DNA) gene, and Protein-Protein Interactions (PPIs) whereby two proteins bind together to achieve their functions. PDIs and PPIs can be discovered via targetted assays but more generally via high-throughput methods such as Protein Microarrays, Chromatin Immunoprecipation Sequencing (ChIP-Seq) Rao, V. S., Srinivas, K., Sujini, G. N., & Kumar, G. N. (2014);Furey, T. S. (2012);Paiano, A., Margiotta, A., De Luca, M., & Bucci, C. (2019). One succinet method to display this high-throughput data is via a graph (or network) whereby nodes (genes) connect to each via edges (lines). At the BAR, we host over 2.8 million PDIs and PPIs for Arabidopsis Dong, S., Lau, V., Song, R., Ierullo, M., Esteban, E., Wu, Y., ... & Provart, N. J. (2019). They can viewed via the Arabidopsis Interactions Viewer 2 (AIV2, see below). Note that AIV2 allows for multiple genes to be searched (i.e. whether two genes interact with one another) versus ePlant which is a single-gene approach.

AIV2 display multiple searched GOIs (larger nodes), whereby protein interactors are shown via circular nodes (the doughnut pie-chart denotes cellularrlocalization) and DNA interactors are collapsed into square boxes which can be viewed with a tooltip Current ePlant2 Interactions Viewer. Note it follows a similar design and colour scheme but only contains one search gene, which again is large. Other genes whcih are loaded into ePlant currently are also darker grey.

Purpose

Users will wish to see at a glance, for their gene of interest (GOI); what interaction partners exist. This shall be visualized via a graph (i.e. gene network).

Intended Audience

• ePlant Users
  • Plant biologists
  • Bioinformaticians
  • Students

Product Scope and Value

The addition of this module to ePlant will allow users to focus on interactors of their GOI. From there, they may discover additional GOIs and learn how their gene is modulated. Moreover, genes that modulate the GOI may also interact with each other as we source PDI and PPI information from more than one source. Shown visually, this will help the researcher discover novel information.

Abbreviations

• PPI: Protein-Protein Interaction
• PDI: Protein-DNA Interaction
• GOI: Gene of Interest
• AIV2: Arabidopsis Interactions Viewer 2

System and Functional Requirements

• This module should easily be replicated and generalized for other species when we receive PPI and PDI data for other species
• The module must load the gene network view in a organized manner to visualize all genes at a glance
  • Protein interacting genes will be visualized by circular nodes
  • Protein-DNA interacting genes will be 'collapsed' into their respective chromosomes (see above ePlant2 example)
  • Interactions are denoted via edges (i.e. lines) with a specific colour coding
    • Such as predicted interactions are shown by a dashed line
  • Colour coding will be specified by a legend (we can reuse the old legend to keep consistency across our applications)
• The user can view information about and load additional interactors upon hovering over the gene
• The user can click on a call-to-action (i.e. button) to download the raw data
• The user can apply filters pertaining to confidence and correlation to simplify the view; the view shall be updated instantly.

External Interface Requirements

• User Interface: The network view should take up as much resolution of the available panel as possible
• Hardware Interface: Optimize this for desktop and large format tablet visualization (resolution >960px); mobile visualization on graphs is unrealistic.
• Software Interface: Use your existing ePlant3 module logic to create this view. You will need to use our existing webservices such as this one to grab the interactors. You should use Cytoscape.js as the graphing library.
• Communication Interfaces: Standard communication on Github Issues, and weekly discussions. Please link to this issue for any features, bugs pertaining to the Gene Network view and label it with the 'Inteactions Viewer view' label on Github.

[Yukthiw]

Short summary of my findings comparing the use of Cytoscape.js with the react-cytoscapejs library vs without. After a bit of investigation, I don't believe using the react-cytoscapejs library will provide much value. Most of what it offers is already very easily accomplished with the base Cytoscape.js library with React hooks. Furthermore, much of the functionality that we would require is not supported by the react-cytoscapejs library, so we would need to rely on base Cytoscape.js functionality anyways. It would probably be best to rely on one less dependency, especially since it does not provide much value.

Here is an example of a very simple Graph component using the library:

import React from 'react';
import React from 'react';
import CytoscapeComponent from 'react-cytoscapejs';
import coseBilkent from 'cytoscape-cose-bilkent';

cytoscape.use(coseBilkent);

const Graph = () => {
  const elements = [ 
    { data: { id: 'a', label: 'Node A' } },
    { data: { id: 'b', label: 'Node B' } },
    { data: { id: 'ab', source: 'a', target: 'b', label: 'Edge from Node A to Node B' } }
  ];

  const layout = { name: ''cose-bilkent'' };

  const style = [ 
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(label)'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ];

  return (
    <CytoscapeComponent elements={elements} layout={layout} style={{ width: '100%', height: '400px' }} stylesheet={style} />
  );
};

export default Graph;

vs. without the library:

import { useRef, useEffect } from 'react';
import cytoscape from 'cytoscape';
import coseBilkent from 'cytoscape-cose-bilkent';

// Register the extension
cytoscape.use(coseBilkent);

const Graph = () => {
  const cyRef = useRef(null);

  useEffect(() => {
    const cy = cytoscape({
      container: cyRef.current,
      elements: [
        { data: { id: 'a', label: 'Node A' } },
        { data: { id: 'b', label: 'Node B' } },
        { data: { id: 'ab', source: 'a', target: 'b', label: 'Edge from Node A to Node B' } }
      ],
      layout: {
        name: 'cose-bilkent'
      },
      style: [
        {
          selector: 'node',
          style: {
            'background-color': '#666',
            'label': 'data(label)'
          }
        },
        {
          selector: 'edge',
          style: {
            'width': 3,
            'line-color': '#ccc',
            'target-arrow-color': '#ccc',
            'target-arrow-shape': 'triangle'
          }
        }
      ]
    });

    return () => {
      cy.destroy();
    };
  }, []);

  return (
    <div ref={cyRef} style={{ width: '100%', height: '800px' }} />
  );
};

export default Graph;

As you can, there isn't much that the package offers in terms of boilerplate minimization. There are some helper functions provided by the library which allow for support of non-JSON prop types, I'm not completely clear on what this means, we likely will not need to rely on this functionality.

[Yukthiw]

Some simple examples here as well https://codesandbox.io/examples/package/react-cytoscapejs. These all utilize the react-cytoscapejs library, however I can't see much value in it here either.

[VinLau]

Short summary of my findings comparing the use of Cytoscape.js with the react-cytoscapejs library vs without. After a bit of investigation, I don't believe using the react-cytoscapejs library will provide much value. Most of what it offers is already very easily accomplished with the base Cytoscape.js library with React hooks. Furthermore, much of the functionality that we would require is not supported by the react-cytoscapejs library, so we would need to rely on base Cytoscape.js functionality anyways. It would probably be best to rely on one less dependency, especially since it does not provide much value.

Hi @Yukthiw , thanks for your research. For our graph you will need to do an API call to our webservices to load the nodes. I.e. in useEffect() after mounting, can you even do that with the React-Cytoscape library? If you can't, then it is completely it out of the picture.