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.
-
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
-
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
- 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
-
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
-
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
- 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)
- Hovering over the various columns in the MSA highlights the position on the protein and vice-versa
-
The code is published on NPM as the
react-msaviewpackage -
A simple instance is also available at this weblink https://gmod.github.io/react-msaview/
-
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)
-
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
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
Figure showing the "settings panel", showing color scheme editor and other settings
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



