Alignment Viewer 2.0
Alignment Viewer 2.0 is a standalone multiple multiple sequence alignment (MSA) viewer written in TypeScript. This project uses the React framework and was boostrapped with Create React App.
A demo is available on Github Pages: https://fast.alignmentviewer.org
The Alignment Viewer 2.0 component ffeatures:
- Display alignment details (i.e., down to individual residues) and/or the alignment in its entirety.
- Support for DNA/RNA and protein sequences
- Calculates and displays sequence logos, consensus sequence, conservation / gap statistics.
- Support for sorting the alignment
- Support for different styling options including color schemes and selection of which residues to color (e.g., only those that match the consensus sequences).
- Client side only - runs in the browser alone.
- View can be customized, removing or adding only the pieces needed.
- Support for interaction events (clicking on, mousing over the alignments, logos, etc)
Linking to Alignment Viewer 2.0
In addition to embedding Alignment Viewer 2.0 directly on your own website (see below), it is also possible to pass alignments to the demo website.
Links should take the form:
https://fast.alignmentviewer.org?alignment-url={CUSTOM_ALIGNMENT_URL}
- The server hosting the custom alignment must be using HTTPS
- The
CUSTOM_ALIGNMENT_URLmust be propertly encoded (wikipedia description) - The alignment must be either in
fastaorstockholmformat.
Example links:
Embedding Alignment Viewer 2.0
We're on NPM (repository link) so you can install using your favorite package manager, e.g.,:
yarn add alignment-viewer-2Once installed, adding to your website is as simple as:
import * as React from 'react';
import { AlignmentViewer, FastaAlignment } from "alignment-viewer-2";
const fastaFileText = ">target\n" +
"ATGCATGC\n" +
">seq1\n" +
"AAAACCCC\n" +
">seq2\n" +
"ATGCATTT\n" +
">seq3\n" +
"ATGCAAAA\n"
const alignmentObj = FastaAlignment.fromFileContents(
"ALIGNMENT_NAME", fastaFileText
);
<AlignmentViewer alignment={ alignmentObj } style={ alignmentObj.getDefaultStyle() } />Building Alignment Viewer 2.0
git clone https://github.com/sanderlab/AlignmentViewer2.0.git
cd AlignmentViewer2.0
yarnFor some reason node-sass needs to be installed separately even though it is in devDependencies (?!?)
yarn add node-sassTo startup the local demo site:
yarn runRunning Unit Tests
yarn testPerformance Strategy
UPDATE May 27, 2020: we are working on a new version of the detailed alignment view that uses WebGL rather than the Ace Editor. Ace was never designed for exactly our use case and has been the code that uses the most memory, takes much of the processing time, and suffers the most lag and stuttering on large alignments. In rough tests, switching from Ace to WebGL dramatically increases performance - the memory footprint decreases by a factor of 10 and the size of the alignments we can smoothly display increases 10-100X (a few million sequences of length 500 is possible). We are in the process of adding in the same features as before, and expect to release the new version soon. Note that the change should be transparant for end users and developers, so feel free to use the current version as is.
The Alignment Viewer 2.0 component was designed from the ground up to be highly performant in order to allow for viewing and analysis of very large MSAs - we actively test on an alignment based on beta-lactamase that contains ~23,000 sequences of length ~250 amino acids (link to beta-lactamase MSA).
Our strategy for dealing with peformance issues boils down to two main approaches:
-
Don't load what isn't visible (Ace Editor): Inserting many elements into the HTML DOM at one time absolutely kills performance. For example, insertion of roughly 100,000 elements (think an alignment of 1000 sequences of length 100) can drastically decreease performance. In order to allow for larger alignments in the Detailed MSA Viewer, we only insert the portion of the MSA that is visible at any given time. Smart loading decreases the number of elements in the DOM significantly and drastically improves performance. To accomplish this, we make use of the Ace Editor project, and use a custom mode / highlighter to parse and style multiple sequence alignments.
-
Use the graphics card (WebGL with PixiJS): In order to view the entire MSA in the same viewed windoow, we have also implemented the MiniMap MSA Viewer using the PixiJS 2D WebGL framework. This viewer avoids having many DOM elements by representing the MSA as a series of tiled images (avoiding browser image size limits) which can be zoomed, scaled, interacted with, etc. using the pixi-viewport project.
Other Web-based Multiple Sequence Alignment Viewers
- Alignment Viewer1 (webpage, github): The predecessor to Alignment Viewer 2.0, this project and website provide a means to view MSAs as perform additional sequence analysis like viewing sequence space with a UMAP component. Alignment Viewer was written in javascript.
- MSAViewer2 (webpage, github): A popular MSA viewer that provides a bunch of functionality such as sorting, filtering, changing color schemes, etc. MSAViewer can also be easily imported and embedded into other projects. Alignment Viewer was written in javascript.
- Jalview3 (webpage): an MSA viewer that provides primary, secondary, and tertiary visualizations and analyses that include sequence alignment, conservation and clustering, secondary structure and disorder prediction, etc.
- MView 4 (webpage): Although not built specifically for the web, the MView command line utility can be executed from an EBI tool service. This tool can be used to reformats multiple sequence alignments files into html markup.
- Wasabi5 (webpage, github): In addition to providing an MSA viewer, the Wasabi project provides a bunch of tools for evolutionary sequence analysis. Wasabi was written in python and javascript.
- AliView6 (webpage, github): Although aliview isn't web-based, it is one of the fastest and most useful MSA viewers so I thought it important to include.
Color Schemes
Alignment Viewer 2.0 provides a bunch of different color schemes for both amino acid and nucleotide sequences. Scheme definitions were taken from the msa-colorschemes repository, a part of the MSAViewer project2, which derived many of the schemes from JalView3.
About Us
Alignment Viewer 2.0 was developed at the Dana-Farber Cancer Institute and Harvard Medical School by Andrew Diamantoukos, Chris Sander, and Nicholas Gauthier.
Contributing
Alignment Viewer 2.0 is meant to be a community open source project. We actively encourage and support contributions. Alignment Viewer 2.0 is licensed under the MIT license.
Please fork and improve/enhance Alignment Viewer 2.0 any way you want. If you believe that your work will be of benifit to the entire community, please open a pull request.
Citations
(1) Reguant R, Antipin Y, Sheridan R et al. AlignmentViewer: Sequence Analysis of Large Protein Families [version 1; peer review: 1 approved, 1 approved with reservations]. F1000Research 2020, 9:213
(2) Guy Yachdav and Sebastian Wilzbach and Benedikt Rauscher and Robert Sheridan and Ian Sillitoe and James Procter and Suzanna Lewis and Burkhard Rost and Tatyana Goldberg. "MSAViewer: interactive JavaScript visualization of multiple sequence alignments." Bioinformatics (2016)
(3) Waterhouse, A.M., Procter, J.B., Martin, D.M.A, Clamp, M. and Barton, G. J. (2009) "Jalview Version 2 - a multiple sequence alignment editor and analysis workbench" Bioinformatics25 (9) 1189-1191 doi: 10.1093/bioinformatics/btp033
(4) Brown, N.P., Leroy C., Sander C. (1998). MView: A Web compatible database search or multiple alignment viewer. Bioinformatics. 14 (4):380-381.
(5) Veidenberg, A., Medlar, A. and Löytynoja, A. (2015) Wasabi: an integrated platform for evolutionary sequence analysis and data visualisation. Mol. Biol. Evol.
(6) Larsson, A. (2014). AliView: a fast and lightweight alignment viewer and editor for large data sets. Bioinformatics30(22): 3276-3278. http://dx.doi.org/10.1093/bioinformatics/btu531