Few minor feature requests

[yhoogstrate]

1) Save displays / coordinates (either as file or via cookie) When I was working with a large and complex structure, a few hairpins were slightly overlapping. It's not a big deal, because it's really easy to move nucleotides around. However, I shifted them around but I don't see a way to save it and to continue with it later on. It would be handy to save visualizations in a way you can continue with it later on.

2) Export to SVG

3) If you hover over the lasso and link+ button, you can't see a descripton of what their functions are. A baloon could be helpful.

4) Shifting multiple nucleotides at the same time. It would be handy to be able to move an entire hairpin instead of each nucleotide separately. VaRNA has an option to rotate entire substructures at once, that's really useful.

[benediktrauscher]

Thank you for the suggestions! I will implement them as soon as possible.

[Omei]

Over the next few months, the development team at EteRNA is developing a new data browser application to retrieve and analyze the rapidly growing (~10,000/month) set of RNA riboswitch designs that are being designed by Eterna players and synthesized and measured by the Das lab at Stanford. As part of this browser, we need a Javascript based 2D drawing capability, and I an very pleased to have been pointed to your project. (I'm also looking at Forna).

On the surface, the only absolute requirement we have that you haven't already implemented is the layout of multiple interacting RNA molecules. Here's an example of what we currently get from our Flash app. Here there are three separate RNA molecules; we'll need to support at least five.

Do you have any feeling for how well suited your current layout algorithm for a generalization of this kind?

Thanks for your attention.

Omei

[benediktrauscher]

Hello Omei,

thanks very much for your interest. The main differences between forna and DrawRNAjs are that

• DrawRNAjs runs on the client side entirely while forna has a python backend
• DrawRNAjs is based on Cytoscape.js (canvas) while forna uses D3.js (SVG)
• DrawRNAjs uses a preset layout algorithm while forna uses a force-directed layout

Currently all DrawRNAjs uses a JavaScript port of VARNA's NAview algorithm (based on PMID:2454712). I'm not quite sure what your exact requirements are. Changing the algorithm to do something different should be rather complicated whereas using the algorithm to independently calculate coordinates for several structures and displaying them on the same canvas (or multiple adjacent ones) should be rather easy. In any way, the tool is designed in a way that allows to easily plug in new layout algorithms. I'd be happy to collaborate on this if that would be of any interest to you.

All the best,

Benedikt

[Omei]

Hi Benedikt,

Your collaboration would be a real plus! The success of (EteRNA)[http://www.eternagame.org/] is based on collaboration at all levels.

Let me give you a little more context. Each month, a new set of "puzzles" is posted, where players are challenged to design an RNA sequence that will have a particular property (structure and/or behavior). Each player can submit as many designs as he/she chooses, up to some limit (currently 100). The Das Lab then takes these sequence specifications, creates each RNA, and measures how well each meets the specification for the lab. These results are then published for all players to review. Specific challenges are usually repeated over time, allowing players to refine the group's understanding of what features of the RNA sequence elicit the desired behavior.

Here's a screenshot of NuPACK's in-silico prediction of how one submitted RNA will fold, given the presence (or absence) of two miRNA that are associated with active TB infection. The challenge was to design an RNA "XOR" gate that emits light if one and only one of the TB RNAs is present.

The structure on the left is the predicted MFE folding for the designed RNA in absence of either of the miRNAs. The next two are the predicted foldings if one or the other of the RNAs is present, and the structure on the right is the predicted folding when both are present.

The "output" of the gate is the formation (or not) of the MS2 binding hairpin. If the hairpin is present under the various input conditions of the vitro experiment, it will bind to the MS2 group of a phosphorescent protein and show to what extent the molecule is folding in the desired configuration.

The goal of the new data browser is to be able to sift through and display the massive amount of data being collected (currently on the order of 10,000 RNA molecules a month) in a way that allows the players to piece together the underlying principles of RNA structure and function. Currently, the engineering of medically significant riboswitches is the major focus of the puzzles.

The current browser, from which this screenshot was taken, is an integrated Flash application originally written maybe four years ago, at a time when the experimental process was limited to creating and measuring tens, rather than tens of thousands, of distinct molecules a month. With continuous upgrades, it has served us well, but we have basically outgrown it.

Does that give you any better feel for what kind of development effort we might be looking at wrt the 2D structure visualization? As I mentioned earlier, we'll need to be able to handle multiple, interacting RNA strands. But I talked to another developer who just recently added this capability to our legacy browser, and it seems like his technique should be generalizable to any layout engine.

Best regards, Omei

[benediktrauscher]

Hello Omei,

thank you for taking the time to explain this to me. EteRNA seems to be a really exciting project. I've taken some time to play the game a little, however did not make it past the tutorial stage yet due to a lack of time. I'm hoping to play some more soon to get a better understanding of the project.

It is already possible to display several structures on one page using DrawRNAjs. The only requirement is that the dot-bracket notation for every structure is available as input for the program. Then it is possible to just instantiate several instances of the program, each displaying another structure. I have tried to create an example where four (arbitrarily selected) structures are displayed next to each other similar to the screenshot you posted. In this example each structure is painted on its own canvas, therefore the structures cannot "touch" each other. However, I'm intending to implement rendering of multiple structures on one canvas in the future.

Kind regards,

Benedikt

[Omei]

Hi Benedikt,

My picture may have conveyed the wrong point. It's not a requirement for us to have multiple independent structures in the same canvas, even though my example seems to imply that. The layout issue I'm concerned about appears in the second to fourth structure, where there are two (or three) separate RNA molecules forming a dimer (or trimer). The helices and loops formed by multiple interacting RNA strands need to look just like those formed from a single RNA molecule.

You probably won't find any example of these in the beginning tutorials. But designing riboswitches that respond to various concentrations of multiple miRNAs in vitro is the focus of current EteRNA research.

Thanks for your continued interest.

Omei

[benediktrauscher]

Hi Omei,

oh I see. Sorry for being so slow to get this one. DrawRNAjs renders a structure encoded by dot-bracket notation (similar to most other RNA secondary structure visualisation programs I'm aware of). Therefore if you can provide the combined structure of several independent RNAs as one dot-bracket notation input, it will be rendered just fine. Different parts of the combined structure could then be distinguished by e.g. colouring them differently (if that's desired).

Thank you and kind regards,

Benedikt

[Omei]

This is close to what our flash-based layout engine currently does. Say, for example, we wanted to represent a dimer helix formed by a pair of GUAC strands. We would encode the structure as ((((&)))) and the sequence as GUAC&GUAC. The layout display engine recognizes the & as indicating a concatenation of distinct RNAs. I haven't actually looked at the code, but it essentially replaces the & with (maybe) four (pseudo) bases that won't get rendered in the canvas but will affect the position of all the bases. So the layout algorithm itself doesn't change; the real work is getting the base visibility, the bonds between them, base numbering, etc. to match user expectations.

[benediktrauscher]

Hi Omei,

I'm convinced that something like this can be easily implemented. Please let me know if you need any help.

Kind regards,

Benedikt

[yhoogstrate]

@bene200 Maybe I'm missing something but is there not a easy way to quickly remove bonds?

I was expecting something like this: