PPI layouts: BioJS components for the display of Protein-Protein Interactions

Summary: We present two web-based components for the display of Protein-Protein Interaction networks using different self-organizing layout methods: force-directed and circular. These components conform to the BioJS standard and can be rendered in an HTML5-compliant browser without the need for third-party plugins. We provide examples of interaction networks and how the components can be used to visualize them, and refer to a more complex tool that uses these components. Availability: http://github.com/biojs/biojs; http://dx.doi.org/10.5281/zenodo.7753


Introduction
"Proteins are the building blocks of life". This is probably the most commonly used analogy in the molecular biology world. Despite the danger of falling into a cliché, we will elaborate on this. A brick is not a building, not a room, not even a wall; in the same way, proteins rarely perform functions in isolation, it is their interactions which form the complex networks that are responsible for almost all cellular processes.
The number of reported Protein-Protein Interaction (PPI) networks has grown considerably, partly due to advances in high-throughput experimentation and partly due to the new predictions that result from these empirical data.
Various strategies have been used to store this data for ease of retrieval and analysis of PPI networks 1 . For instance, IntAct 2 is an open source repository for molecular interactions reported in the literature or directly deposited by the user; the STRING database 3 includes physical and functional associations derived from genomic context, high-throughput experiments, coexpression analysis or the literature. Other PPI sources are described in: 4-9 .
The volume of data now contained in PPI repositories has made the analysis and understanding thereof a challenge that can be enriched by the use of visualization techniques. PPI networks have been found to follow a behaviour that in graph theory is referred to as scale-free, which uses a few highly connected nodes and many nodes with few interactors. This feature allows a user to predefine visualization strategies to highlight certain characteristics. This approach has been used for multiple tools, some are stand-alone applications (e.g. Cytoscape 10 ), Java applications that are web available via Applets (e.g.VisANT 11 ), or those developed on Flash (e.g. STITCH 4 ). Details about other tools, comparisons between them, highlighted features and supported layouts can be found in any of the following reviews: 12-14 .
The web technologies covered under the umbrella term of HTML5 allow the display of some of those layouts natively on the web in a fully interactive way. We have used these technologies to implement two of the most popular layouts for PPI network visualization: Force-directed and Circle.

BioJS components
We have implemented the standards defined by BioJS in the development of two components for the visualization of PPI networks. The use of BioJS gives visibility to the components so that they can be discovered by third parties interested in the visualization of protein networks on the web.
We consider the publication via the BioJS registry beneficial for both the potential user and the developer of the component. The user of the component will save time by adopting a component instead of developing it from scratch. The particular needs of the user may require the implementation of specifics which could contribute to the further development of the component in a communal effort. All this is in the nature of open source projects, but without visibility it would hardly ever happen.
Both PPI network visualizer components are implemented as wrappers of layouts included in the Data Driven Document (D3) library 16 , a popular JavaScript library for the processing and visualization of data. Besides making these layouts follow the BioJS structure, most of the effort has been directed at providing methods that are closer to the PPI vocabulary (e.g. addProtein(),addInteraction()). Both components follow the same API (Application Program Interface) and therefore any script developed to display on one layout can be used on the other.

Force-directed layout
The D3 library provides an implementation of the Barnes-Hut simulation in order to efficiently create a self-organized network. This algorithm performs better than others because it aggregates the forces of close nodes, to avoid individual calculation on the forces whenever possible. Its performance facilitates a smoother transition between the execution steps of the algorithm, creating an appealing visual effect of live self organization. We have used this generic network layout available in D3 to provide a set of methods and events to represent PPI networks. Figure 1 displays a subset of proteins from the organism Mycobacterium tuberculosis, that interact with furB. It includes all the interactions between these proteins with each protein color coded by reported functional class. FurB is a zinc uptake regulation protein involved in repression of many genes involved in zinc homeostasis 17 . The example also includes some instructions for coloring and format. For more details on those methods see the component on the BioJS registry: http://goo.gl/064ChR.

Circle layout
As mentioned previously, both components have the same API with the exception of methods that help to control the force layout of the first component which do not apply to the Circle layout. Thanks to this, the script to generate a PPI visualization of the same network is very similar in both. In order to demonstrate this we have created a second script that visualizes the same network as in Figure 1 but now on a Circle layout (Figure 2). The only difference between both scripts is the declaration of the object. Instead of using the object Biojs.InteractionsD3 it uses Biojs.InteractionsBundleD3 and rest of the script is exactly the same. This can be seen in the fiddle: http://jsfiddle.net/J4CE7/1/.
FurB interacts with a number of different genes, with related functions, including the transcriptional regulator FurA, which represses transcription of katG, the catalase-peroxidase gene as well as itself, and the HTH-type transcriptional repressor SmtB, also involved in zinc homeostasis. FurB also interacts with the cAMP receptor protein, a global transcriptional regulator, although no link to metal ions has been annotated for this protein, a disruption in the protein results in slow growth. Additional interactions for FurB are with enzymes involved in amino acid biosynthesis (dapB, acn) or purine metabolism (purE, purK). One thing in common between these proteins appears to be their relation to growth.
BioJS provides instructions regarding the installation of each component including their required dependencies, style files and snippets of JavaScript code to be inserted into the web page where the component will be embedded. All the proteins in the graphic should then be added. The following example shows how to add the protein with UniProt id O05839 (http://www.uniprot.org/uniprot/O05839). Note how the organism to which it belongs is included, along with which feature should be used for the label: instance.addProtein({ id: 'O05839', organism: " M TB", gene_name:"furB", typeLegend:"gene_name"}); In the same way, the interactions should be added to the graphic, ensuring that the interactions are between proteins that have already been added. For instance: instance.addInteraction( "O05839", "P0A582", {id: "P0A582_P0A582"}); Once all the proteins and interactions have been declared, the graphic can be restarted so it reflects the additions: instance.restart ();

Use Case: PINV
We have used these two layouts and a few other BioJS components to create a web native application that allows the querying and visual exploration of PPI networks. It is called PINV: Protein Interactions Network Visualizer, and is freely available at http://biosual. cbio.uct.ac.za/pinv.html.
With PINV, we are looking to offer an alternative for the visualization of PPI data that takes advantage of the web to provide collaborative tools.
Currently PINV can display the PPI networks in three ways: the two layouts discussed above and through a table of the raw data. The

Competing interests
No competing interests were disclosed.

Grant information
This project was funded by the Computational Biology Group at the University of Cape Town.
The funders had no role in study design, data collection and analysis, decision to publish, or preparation of the manuscript.

Acknowledgements
We want to thank J. Holtzhausen for her contribution to the editorial matters of this article.
addition of other layouts in the future is not complicated, thanks to the standards defined by BioJS and the adoption of the same API.
The same example used for Figure 1 and Figure 2 is available on PINV under this link: http://goo.gl/r4XpOS.

Conclusions
One of the limitations of current web-based methods for PPI visualization is that they require third-party browser plugins. We demonstrate that the HTML5 standard provides enough functionality to render these networks in compliant browsers, without the need to install additional browser components. Adoption of the BioJS standard has the advantage of greater exposure to potential users, and an established set of features such as testing and documentation. Finally, the components abstract much of the details of rendering complex scalable vector graphics (SVG) behind an intuitive API, allowing users to focus on building richer applications.

Source code examples:
From the manuscript or the source code examples it is not obvious why the UniProtKB accession numbers and the organism information is provided, as neither is used or shown in the examples. It should be clarified, if tools require this information or if this might be used for connecting with other BioJS components.

Title:
Looking only at the title and the abstract, it appears that "PPI layouts" is the name of the BioJS component that is described in the article. As this is not the case and the name "PPI layouts" is never used again, it could be removed from the title to prevent confusion.

I have read this submission. I believe that I have an appropriate level of expertise to confirm that it is of an acceptable scientific standard.
No competing interests were disclosed. The manuscript is easy to read and provides a quick, yet useful introduction to the BioJS PPI visualisation tools. The component described in the manuscript and the BioJS project in general are a welcome initiative. The PPI interaction tools was straightforward to assess thanks to support for the online edition, simple implementation, and its distribution to the bioinformatics community under an open access license.
Below, I have a few suggestions:

BioJS component section
In the first paragraph the sentence "The use of BioJS gives visibility to the components so that they can be [discovered] by third parties...". Do the authors mean that the individual component will benefit from the BioJS visibility, or is there a specific discovery mechanism? example network M. tuberculosis While I appreciate that it is not easy to find the right balance between a simple yet biologically relevant illustration of the tool, I believe that the paragraph that describes the interaction network could be improved. For example, some proteins are named and described while others are not.
While reading the description of the code generating the network in Figure 1 and 2 and using the jsFiddle instance, several questions arose that could be addressed in the manuscript.
the authors provide a UniProt identifier. Could the nodes be links to the relevant protein UniProt pages? Could other identifiers be used and how would the links to other arbitrary pages be defined?
What is the use of the species name in the protein instance definition? Is it mandatory? Are there examples of PPIs with multiple species? Graph annotation. Is it possible to use different symbols for the nodes? How to annotate the edges (through colours and/or labels)? Any comments on the use of node colours as a means to illustrate additional meta-data: are specific colour palettes (for continuous data for example) or transparency available? PINV The PINV application is a step further than the examples described in the manuscript, that possibly deserves a bit more description in the text and could guide the reader on how to build up from simple cases to more complex applications.

Before Figure 2
Instead of using the object Biojs.InterationsD3 it uses Biojs.InteractionsBundleD3 and [the] rest of the script is exactly the same.

Compliant browsers
The authors repeat the requirement for compliant browsers. I was wondering if examples of compliant browsers could be provided to guide users new to html5 and issues related to browser compatibility.

I have read this submission. I believe that I have an appropriate level of expertise to confirm that it is of an acceptable scientific standard.
No competing interests were disclosed. Competing Interests: