Forna (force-directed RNA): Simple and effective online RNA secondary structure diagrams

Motivation: The secondary structure of RNA is integral to the variety of functions it carries out in the cell and its depiction allows researchers to develop hypotheses about which nucleotides and base pairs are functionally relevant. Current approaches to visualizing secondary structure provide an adequate platform for the conversion of static text-based representations to 2D images, but are limited in their offer of interactivity as well as their ability to display larger structures, multiple structures and pseudoknotted structures. Results: In this article, we present forna, a web-based tool for displaying RNA secondary structure which allows users to easily convert sequences and secondary structures to clean, concise and customizable visualizations. It supports, among other features, the simultaneous visualization of multiple structures, the display of pseudoknotted structures, the interactive editing of the displayed structures, and the automatic generation of secondary structure diagrams from PDB files. It requires no software installation apart from a modern web browser. Availability and implementation: The web interface of forna is available at http://rna.tbi.univie.ac.at/forna while the source code is available on github at www.github.com/pkerpedjiev/forna. Contact: pkerp@tbi.univie.ac.at Supplementary information: Supplementary data are available at Bioinformatics online.


forna as a Web Application
One of forna's key features is the ability to intuitively edit an RNA structure. Links between unpaired nucleotides are added by holding the shift key and dragging from one unpaired nucleotide to another. The structure is immediately updated along with the coloring. The recalculation is performed on the client ensuring lag-free updates. Unwanted links can be removed by holding 'shift' and clicking on them. If the user introduces a pseudoknot with new link, it is detected and added as a force-less link.

Visualizing a PDB File
PDB files store information about the 3D positions of each atom in a molecule as determined by structural biology methods such as X-Ray crystallography or NMR. While packed with information, they can be difficult to interpret without in-depth knowledge of the structure in question. Extracting the secondary structure requires the use of intermediate programs such as MC-Annotate 2.
More recently, rnapdbee 1 has been developed as a web service to extract and display secondary structure from PDB files. The resulting images, however, are static and wedded to the layout provided by the visualization tool as well as the secondary structure present in the PDB file. forna extends this functionality by allowing users to input a PDB file and displaying an interactive representation that can be explored and manipulated. Furthermore, forna includes information about protein interactions (an interaction in this case denoting the presence of a nucleotide and an amino acid within 2.8 Å of each other). Figure 2 displays the visualization of a Bacterial Ribonuclease P Holoenzyme in Complex with a tRNA. Immediately evident are the interactions between the ribozyme and the 5' and 3' ends of the tRNA as well as the T ΨC loop. A protein is seen interacting with the large junction and one of the interior loops of the ribozyme.
It should be noted that due to computational constraints, we set a limit of 2MB for the maximum size of a PDB file that can be uploaded. Users wishing to This sequence illustrates how one can draw a particular secondary structure and goes from left to right, top to bottom. Each arc represents the newly added basepair, which is added by shift-clicking on an unpaired nucleotide and dragging to a target nucleotide. In the last column of the third row, a link is removed by holding shift and clicking on the link. In the final step, a pseudoknotted interaction is detected and the resulting link is force-less. visualize larger molecules are encouraged to download and run the forna server locally.

Arbitrary Coloring
It is often useful to color certain nucleotides a particular color to illustrate a region of interest. Figure 4 demonstrates how one can supply coloring information for specific ranges of nucleotides. The secondary structure in this example is extracted from the tertiary structure of the Ternary S-Domain Complex of Human Signal Recognition Particle (PDB ID). The coloring is entered by clicking on the 'Colors' drop-up, clicking 'Set' and then pasting the following text: 18-57:red 64-110:blue

Kissing Hairpins
One often needs to depict the interaction between two molecules. Figure 5 shows two small molecules interacting via a kissing hairpin interaction. It should be noted that this is difficult to display when the interactions are longer than a few nucleotides due to the layout constraints. Nevertheless, for shorter interactions, adding artificial links can provide an adequate view of where molecules interact. For this example, the following fasta sequences were entered in the 'Add Molecule' dialog:

forna as a Javascript Viewing Container
The web-application version of forna described in the main text relies on a server to calculate an initial layout which is then refined by the force-directed layout calculation. It provides an interface for adding and removing structures as well as for changing the coloring and the display parameters. There are, however, other applications where one may simply want to display a structure without allowing the user to display their own or to change coloring. This is often the case when one wants to share structures online, as for example, from a secondary structure prediction server. To accommodate this need, we provide an independent javascript container which is completely decoupled from the back-end server. The initial calculated layout is simpler, and features such as displaying a PDB file (which require server-side annotation) are disabled, but other features such as panning, zooming and dragging can be enabled using specific parameters.
The container is available as its own repository (called fornac: for fornat container), and can be instantiated using only a few lines of javascript code. While the specifics of the API are detailed in the online documentation at https://github.com/pkerpedjiev/fornac, The general pattern for use is shown in the example web page below: <!DOCTYPE html> <meta charset="utf-8"> This is an RNA container. <div id='rna_ss'> </div> This after the RNA container. <link rel='stylesheet' type='text/css' href='css/fornac.css' /> <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/d3.js'></script> <script type='text/javascript' src='js/fornac.js'></script> container.addRNA(options.structure, options); </script> The two key features of the example are the div to contain the forna container and the javascript at the bottom which populates it with an RNA sequence, secondary structure and some optional parameters. The resulting web page can be seen in Figure 8 where a visualization of the RNA secondary structure appears without the need to first create a static image or call a java library.