A web app for the interactive drawing of nucleic acid structures. Bases are automatically arranged to convey stems and loops and the layout of a drawing can be easily adjusted by dragging with the mouse. Drawings can be highly customized, including the fonts, colors and dimensions of elements and the outlines and numbering of bases. The entirety of the Leontis-Westhof notation for depicting canonical and non-canonical base-pairs is also supported. Drawings are exported in SVG and PowerPoint (PPTX) formats such that all elements of a drawing (e.g., bases and bonds) are exported as individual SVG and PowerPoint objects, allowing for further manipulation in a vector graphics editor such as Adobe Illustrator or PowerPoint.
-
Article in Nucleic Acids Research: https://doi.org/10.1093/nar/gkad302
-
Citations are greatly appreciated! (If you use RNAcanvas to draw structures in publications.)
If you have questions, find issues, or have feature requests, email [email protected] or open an issue thread here on GitHub.
- Creating a New Drawing
- Saving and Opening Drawings
- Exporting Drawings
- Tools
- Removing Elements
- Adding Tertiary Bonds in Place of Secondary Bonds
- Precisely Rotating the Drawing
- The Termini Gap
- Coloring Bases According to Data
- Strung Elements and Non-Canonical Base-Pairs
- GU Wobble Base-Pairs as Dots
- GC Base-Pairs as Double Lines
- Text Labels
- Base Markers
- Straightening Stacked Stems
- Line Drawings
- Outlining Subsequences of Bases
- Stick-and-Ball Drawings
- Motif Finding
- Frequently Asked Questions
- Funding
The form to create a new drawing
can be accessed using the button on the welcome page
or via the File: New menu button.
Structures may be input in dot-bracket notation
(also sometimes called "Vienna" format)
or as CT "Connectivity Table" files.
Structure prediction programs
such as Mfold and RNAfold
produce CT files.
Example structures in dot-bracket notation
can be loaded
using the buttons towards the top of the form.
Options controlling how the sequence and structure are parsed
can be viewed and adjusted
using the Details toggles above the top-right corners
of the sequence and structure text boxes.
Drawings can be saved using the File: Save menu button,
which will cause a drawing file with .rnacanvas extension to be downloaded.
(Drawing files produced by the web app
previously had .rna2drawer2 extension
before the web app was renamed from RNA2Drawer to RNAcanvas.
The contents of drawing files remains the same, though,
and drawing files with .rna2drawer2 extension can still be opened as before.)
The downloaded drawing file contains a complete representation of your drawing. By default, the downloaded drawing file will appear in your downloads folder, though this can be changed by changing the corresponding setting in your web browser.
To open a saved drawing,
go to the form to do so
using the button on the welcome page
or via the File: Open menu button
and upload your saved drawing
(i.e., the drawing file with .rnacanvas extension).
Opening a saved drawing from before the RNA2Drawer web app.
Saved drawings from before the RNA2Drawer web app with .rna2drawer extension (no trailing "2") can also be opened,
though not all aspects of a drawing will be preserved.
A list of which aspects will be preserved
can be viewed by clicking on the Details toggle
in the form to open saved drawings.
Drawings can be exported in SVG and PPTX formats. SVG stands for scalable vector graphics and SVG files can be opened and edited in vector graphics editors such as Adobe Illustrator and Inkscape. PPTX is the main file format of PowerPoint.
All elements of a drawing are exported as individual SVG and PPTX objects. For instance, bases are exported as text boxes and primary and secondary bonds are exported as line objects. This facilitates further manipulation of the exported drawing in vector graphics editors and PowerPoint.
The forms to export drawings
can be accessed via the Export dropdown menu.
It is also possible to scale an exported drawing
by specifying a scaling factor in these forms.
For example, a scaling factor of "1" would result in no scaling of the exported drawing,
while a scaling factor of "2" would result in an exported drawing
that is double the size of what it was in the app.
The different tools of the app control how you interact with the drawing. Information and options pertaining to the tools of the app can be found towards the bottom-left corner of the app.
With the dragging tool, stems and loops can be dragged while maintaining the arrangement of bases as stems and loops.
The.Dragging.Tool.mov
Stems can also be dragged along flat loops and flat loops themselves can be moved up and down and rotated.
Dragging.with.Flat.Loops.mov
By default, unpaired bases are compressed
when a stem is dragged towards them.
This behavior can be turned off
by toggling the Only Expand option
towards the bottom-left corner of the app.
Only.Expanding.mov
With the pairing tool, bases can be paired and unpaired by adding and removing secondary and tertiary bonds.
To select a subsequence of bases, click on a base and drag the mouse over the other bases to select. Clicking on another set of bases will pair them with the selected set of bases. In contrast, clicking on the selected set of bases will unpair them.
By default, secondary bonds are added when possible.
To add tertiary bonds in place of secondary bonds,
hold the Shift key when pairing bases.
The.Pairing.Tool.mov
Subsequences complementary to the selected subsequence
can be highlighted
by toggling the Show Complements option
towards the bottom-left corner of the app.
Options controlling the highlighting of complements
can be adjusted in the Complement Rules form,
which can be accessed using the Options button next to the Show Complements toggle.
Complements.Highlighting.mov
With the flattening tool, individual inner and outer loops can be flattened and unflattened.
Notably, flattening a loop changes how stems in the loop can be dragged. Stems can be dragged along a flattened loop or dragged vertically to change the height of the flattened loop.
The.Flattening.Tool.mov
With the flipping tool, stems and loops can be flipped and unflipped.
The.Flipping.Tool.mov
With the editing tool, different aspects of elements (e.g., fonts, colors, dimensions) can be edited.
Elements can be selected by clicking on them or by dragging the blue selecting box over them. Towards the bottom-left corner of the app is also a toggle that controls what type of elements are currently being selected and edited (e.g., bases, secondary bonds, numberings).
When elements are selected, a form will appear on the right side of the app for editing the selected elements.
Most elements can be removed
from the drawing
by pressing the Delete key
while having the elements selected.
Primary bonds are one exception to this.
(There will always be one primary bond
between each consecutive pair of bases.)
To deselect elements, click on any empty part of the drawing.
The.Editing.Tool.mov
Most elements can be removed
using the editing tool
by pressing the Delete key
while having the elements selected.
Primary bonds are one exception to this. (There will always be one primary bond between each consecutive pair of bases.)
Removing.Elements.mov
By default, the pairing tool pairs bases with secondary bonds when possible.
Tertiary bonds can be added instead by holding the Shift key
when pairing bases.
Adding.Tertiary.Bonds.in.Place.of.Secondary.Bonds.mov
The drawing can be precisely rotated
using the Rotation field in the Layout form
accessible via the Edit: Layout menu button.
Precisely.Rotating.the.Drawing.mov
The termini gap controls the distance between the first and last bases in the drawing
when the outermost loop is round
and can be edited in the Layout form,
which is opened using the Edit: Layout menu button.
The.Termini.Gap.mov
The Bases by Data form
(accessed using the Edit: Bases: By Data menu button)
allows bases to be selected and edited
according to whether a base falls into a specified range of data.
This allows bases to be colored according to chemical probing data
such as SHAPE data.
In the video below,
the Bases by Data form
is used to color the bases of a hairpin
according to some example chemical probing data.
First the example chemical probing data is pasted into the data text box and the start position of the data (position 4) is input.
Then bases with low reactivity (values between 0 and 0.2) are selected and given black outlines and white text colors.
Then the Bases by Data form is returned to
so that bases with mild reactivity (values between 0.21 and 0.6)
can be selected and given green outlines and text colors.
Then the Bases by Data form is returned to again
so that bases with moderate reactivity (values between 0.61 and 0.8)
can be selected and given orange outlines and text colors.
And finally the Bases by Data form is returned to
so that bases with high reactivity (values between 0.81 and 1.2)
can be selected and given red outlines and text colors.
Coloring.Bases.According.to.Data.mov
Elements such as squares, circles, triangles and text can be "strung" on the lines of bonds. This allows for non-canonical base-pairs to be depicted using the Leontis-Westhof notation, for instance.
Strung.Elements.and.Non-Canonical.Base-Pairs.mov
GU wobble base-pairs can be depicted as dots (solid or hollow) by adding a circle strung element and making the line of the bond invisible.
GU.Wobble.Base-Pairs.as.Dots.mov
One way to depict GC base-pairs as double lines is to add a white rectangle strung element to all GC bonds that covers the middle portion of the line for all GC bonds.
GC.Base-Pairs.as.Double.Lines.mov
Text labels can be added to structural features (e.g., hairpins, loops) by adding a text strung element to a bond that is part of the structural feature. Due to being strung elements, the text labels will move along with the structural feature with respect to both position and orientation whenever the layout of the drawing is adjusted.
Text.Labels.mov
Strung elements of bonds (e.g., colored triangles and circles) can be dragged next to bases to mark them with extra information. Due to being strung elements, these base markers will maintain their orientation (relative to the bond that they are strung on) whenever the layout of the drawing is adjusted.
Base.Markers.mov
Flattening the loop between two stacked stems is an easy way to "straighten" them.
Straightening.Stacked.Stems.mov
The following attributes give this drawing the appearance of a line drawing:
- For all bases, font size of
9and color of#999999. - For all primary bonds, line width of
9, line color of#999999, and base padding of0. - For all bases, an outline with radius of
4, line width of1, and line and fill colors of#999999.
Line.Drawing.mov
It is also possible to make only part of a drawing appear as a line drawing while keeping the rest of the drawing the same.
Partial.Line.Drawing.mov
Subsequences of bases can be outlined with some creative styling of primary bonds and strung elements and the outlines of individual bases.
Outlining.Subsequences.of.Bases.mov
One way to draw structural features (e.g., hairpins) in a stick-and-ball manner is shown in the video below.
First the base letters of the structure are made invisible (by making them white).
Then secondary bonds are made much wider (line width of 16) so that they overlap and shorter (base padding of 12) to give stems of the structure a "stick" appearance.
Circle strung elements are then added, sized to match the loops of the structure, and dragged over the loops of the structure.
The bottommost secondary bond of the structure is also made slightly thinner (line width of 12) and longer (base padding of 0) and given round line caps to better connect the stick-and-ball structure with neighboring elements.
Stick-and-Ball.Drawings.mov
The Find Motifs form can be accessed
using the button towards the bottom-right corner of the app.
The Find Motifs form supports
partial mismatching,
IUPAC single letter codes,
and regular expressions.
Motif.Finding.mov
How do I delete a tertiary bond?
Using the editing tool,
select the tertiary bond
and press the Delete key.
How can I rotate the drawing?
A Rotation field is present in the Layout form.
This form can be accessed via the Edit: Layout menu button.
See section on
precisely rotating the drawing.
How can I make colors transparent? Most color picker swatches have a text box next to them holding a percentage value. This percentage value is the opacity of the color. Opacity is the opposite of transparency (i.e., 100% opacity equals 0% transparency and vice versa). To make a color fully transparent, one would set its opacity to 0%.
How can I color bases according to SHAPE data or other chemical probing data? See section on coloring bases according to data.
How can I change the characters of bases?
Using the editing tool,
one would:
1) set the editing tool to edit bases,
2) select the bases that one would like to edit,
and 3) enter the desired character into the Character field
of the Bases form that will have appeared on the right side of the app.
How can I take a screenshot? The app itself is unable to take screenshots, though most operating systems have built-in ways of taking screenshots of the whole screen or just a portion of the screen, such as the Snipping Tool on Windows.
Is there an easy way to "straighten" stacked stems? Flattening the loop between two stacked stems is an easy way to "straighten" them. See section on straightening stacked stems.
How do I create a drawing that is an outline of a structure? See section on line drawings.
This material is based upon work supported by the National Science Foundation Graduate Research Fellowship Program under Grant No. DGE 1840340.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent