Yukthiw
commented
4 months ago 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.
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.
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
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
System and Functional Requirements
External Interface Requirements