react-msaview

We developed the react-msaview to make a compact, efficient, and scalable web-based MSA viewer. Being web-based, it is easily shareable with other users. We take special care to make the code efficient by rendering to HTML5 canvas and to use tiled scrolling.

Features

Scalability

• 1D vertical tiled scrolling of phylogenetic tree to optimize rendering of large trees

• 2D tiled scrolling to optimize rendering of large multiple sequence alignments

• Examples: can render 230k node newick tree from UCSC COVID-19 sample tree

View detailed metadata about entries inside the app

• E.g. View metadata about alignment from MSA datafile headers (e.g. stockholm)

• E.g. View metadata about “annotation tracks” from UniProt in a dialog e.g. GFF file

Shareability

• Can share sessions with other users by copying and pasting the URL which will send all relevant settings about what is in a session to other users to open your results

Data exploration

• Collapse certain subtrees with click action on branches which also hides gaps that were introduced by that subtree in the rest of the alignment

• View only subtree to only view a small section of a large MSA

Customizability

• Allows changing color schemes, with jalview, clustal, and other color schemes

• Allows toggling the branch length rendering for the phylogenetic tree

• The tree or the MSA panel can be loaded separately from each other

• Can draw labels aligned right or next to the tree

• Allows “zooming out” by setting tiny rowHeight/colWidth settings to get big picture patterns in MSA data

Protein domain/structure tracks

• Users can dynamically fetch data from UniProt to plot protein domains (for a specific protein) on the MSA (specific protein’s coordinates translated to account for gaps in MSA coordinate space)

3D protein structure viewer

• Hovering over the various columns in the MSA highlights the position on the protein and vice-versa

Reusability and availability

• The code is published on NPM as the react-msaview package

• A simple instance is also available at this weblink https://gmod.github.io/react-msaview/

File format support

• FASTA formatted for MSA (e.g. gaps already inserted)

• Stockholm files (e.g. .stock file, with or without embedded newick tree, uses stockholm-js parser. also supports “multi-stockholm” files with multiple alignments embedded in a single file)

• Clustal files (e.g. .aln file, uses clustal-js parser)

• Newick (tree can be loaded separately as a .nh file)

Embedding in JBrowse 2

• We have also released the code as a JBrowse 2 plugin, where the MSA can be displayed alongside other JBrowse 2 genome browser panels

• Available as a plugin here https://github.com/GMOD/jbrowse-plugin-msaview

• Available as a demo here https://jbrowse.org/demos/app

Screenshots

Import form

The “import form” with pre-loaded examples including a 230K node COVID tree from UCSC, several CLUSTAL formatted files, several RNA and Protein formatted stockholm files, and a large tree+MSA generated by MAFFT. You can then also open your own MSA file, Tree file, or combine both together

Settings panel

Figure showing the “settings panel”, showing color scheme editor and other settings

Dynamic color schemes

The clustal_protein_dynamic and percent_identity_dynamic color schemes use statistics about letters in a certain column to generate a color

ClustalX dynamic coloring

Percent identity dynamic coloring