Browser based visualization of Multiple Sequence-Alignments with JavaScript and HTML 5
The multiple sequence alignment views are interactive. They support:
Wrapped or un-wrapped view.
If wrapped, the sequences are folded at a certain horizontal position such that the alignment can be seen without horizontal scrolling.
Balloon messages for sequences and residue selections and sequence annotations. Holding the shift key suppresses the message.
On tablets which do not have a mouse, a what's that symbol can be dragged with the finger to the target.
Cross-references for sequences and residue selections. They appear in the ballon message where they can be clicked.
Highlighting conserved residues. The user can specify the conservation threshold.
Residue coloring. The user can chose a color scheme.
3D-visualization is only available if sequences are linked with a 3D structure.
The browser must accept Java applets must be prepared.
The 3D view and sequence view are interlinked.
Currently, Java is needed. In the future, there will also be WebGL based 3D visualization.
This functionality is found in the tool-pane at the top.
Conservation threshold
Depending on similarity at a position, residues are emphasized.
This depends on the selected conservation value in the pull down menu.
Assume the value "Conservation > 80%" selected in the pull down menu. A Lysine (One letter code K) is written bold or in color,
if more than 80% of residues at this alignment position are Lysine.
With this setting, conserved regions are highlighted.
If the user is interested in differing positions, a setting like 11% > Conservation would highlight all positions where less than 11% of
residues are Lysine.
Coloring
There are various color schemes for grouping amino acids by physical and chemical properties.
They can be selected with the pull down menu:
Black, Charge, Hydrophathy, Chemical, Taylor PUBMED:12183124.
They are identical or similar to those in other alignment packages (Jalview, TexShade, Pfaat, ClustalX, Cinema).
Selecting sequences
A sequence row can be selected by clicking the sequence
names. Selected sequences are indicated by blue background.
On desktop PCs, Users will be able to select multiple sequences using the key modifiers Shift and Ctrl.
Select a range of sequence rows: Click on the first one and Shift-Left-click the last sequence. This will select all sequences between those two.
Selecting sequences that are not neighboring: Hold Ctrl-left-click toggles the selected state of individual sequences on and off.
Ctrl-A selects all sequences.
On tablets touching the sequence name will toggle selected on and off.
When sequences are selected, the toolbar for selections is shown.
The set of currently selected sequences can be kept in sequence groups.
Sequence Groups
Sequence groups are collections of sequences represented as a button.
The action of the buttons is specified with a pull down menu:
Show only (default): Only the sequences of that group are shown in the alignment, all others are hidden.
Show only if shown: The cut set of visible sequences and sequences of that group is shown.
Show: Hidden sequences of that group are shown in the alignment.
Hide: The sequences of that group are not shown any more. Hidden sequences can be rescued with the trash-button.
Select only: The sequences of that group are selected and all others are deselected. Selected sequences are indicated by blue background.
Select only if selected: The cut set of visible sequences and sequences of that group is selected.
Select: The sequences of that group are selected. Already selected sequences are not changed.
Unselect: The sequences are deselected. The blue background disappears.
List names: The sequence names are displayed in a text box.
Delete Group The sequence group and its button are removed.
At least the sequence group will be present.
Furthermore, all sequences having underlined residue selections will form a group and all sequences with residue selections indicated by background color will constitute another.
Alignment Annotator has a check-box in "View" to create sequence groups from taxonomic data.
Further groups can be created. The user is asked for a group name and the currently selected sequences are taken.
Changing the order of sequences
On desktop PCs, sequences can be moved with the mouse by Drag&Drop
If the dragged sequence is selected (blue background), all selected sequences are moved.
Another option which works also on mobile devices is in the toolbar of sequence-selections which is shown when the sequences to be moved are selected.
"Move" and "To point" need to be activated.
Finally, the location where the sequences should be moved to, need to be clicked/tapped.
Hiding sequences
Sequences can be removed to the trash bin with the mouse.
Alternatively, selected sequences can be deleted with Ctrl-X or Backspace or Delete.
The toolbar of sequence-selections also contains a button to hide sequences.
Hidden sequences can be re-activated by clicking the trash icon or by clicking a sequence-group button.
Residue selections
Residue selections have a background color or are underlined.
Sequence features like glycosylated or phosphorylated residues are underlined unless the style is changed by a script command.
Underlined residue selections are listed at the end of each alignment row and can be activated or deactivated.
Residue selections usually have a balloon message and a context menu
(Right-Click). On mobile devices with touch screen the alignment
cursor can be set to any residue and the current sequence position
is written in a box to the left. For annotated residue positions,
this box can be touched ot open the context menu.
On small touch devices, it can be difficult to hit the exact residue position.
Therefore, a panel with a "Go-left" and "Go-right" button appears to go to the exact position.
Therefore
a text cursor can be moved with two buttons and .
At positions with residue selections, a button appears to open the popup message.
Searching and highlighting sequence patterns
Sequence patterns can be entered into the text field in the tab "Search".
All occurrences will be highlighted.
More than one can be entered (separated by space).
In the toolbar of selected sequences, sequences can be selected by name.
briefly:
Dots match any letter. For example "K.V" matches Lysine-Any-Valine
Square brackets: "K[AG]V" means Lysine-(Alanin or Glycine)-Valine
Intervals: "AG.{7,10}TCCA" means AG followed 7 to 10 residues followed by TCCA
Repeats: "(...)\1" matches any repeat of three residues such as CagCag.
Drag&Drop
Modern web browsers support drag&drop.
It can be used to intuitively
Change the order of sequences
To hide sequences and residue selections
To export fasta-formated sequences and alignments
To export styled alignment documents
3D-visualization
Left snapshot: By clicking amino acids in the alignment, the
respective position in 3D is indicated. Right snapshot: vice versa.
In both cases, the rendering style of the picked amino acid or atom can be changed or a text label attached.
Sequences which are loaded from a 3D-structure file file or which are associated to a 3D structure, can be visualized three-dimensionally with a Java applet.
However, there are several problems associated with Java and sometimes it works in one browser (IE, Firefox, Opera) while it does not in another.
In the near future (~ 2016) alternative technologies will be implemented for 3D visualization which will be more robust.
Java needs to be installed.
On modern Google-Chrome, Java is not supported any more by default. On Windows and Mac, it can be activated by opening the URL
chrome://flags/#enable-npapi
Communication between Java-Applets and web pages may be
blocked by the security system of the browser. In this case there
is usually a plugin-icon to enable HTML-Java-communication.
Java Applets do not run on mobile devices with iOS and Android
The 3D view and sequence alignment view are linked such that amino acids picked in one view are also indicated in the other. This requires communication between the
Applet and the web page and may be blocked (See above).
Residues picked in 3D are scrolled into view and highlighted in the alignment.
Vice-versa, if an amino acid is clicked in the alignment pane the residue is selected
and focused in the 3D view. The Ctrl-key prevents focusing.
Once a 3D-view is opened, it can be changed in Change 3D rendering.
First, the 3D view must be activated by clicking into the 3D canvas. The currently active 3D view will be indicated by name and loaded sequences.
To change the style of a specific residue, a residue must be activated, either by clicking an atom of the peptide chain in the 3D view or by clicking an alignment position.
Then several buttons appear which allow changing color and rendering style as well as adding text labels.
All changes only persist during the session.
Animated presentations
The movies are 0.1 to 0.3 MByte in size and require the Flash plugin.
Changing the order and hiding sequences
Including alignment figures in Word documents
Exporting sequences and alignments in Fasta format
Browser Compatibility
All main browsers are supported.
For large alignments, the speed of the web browser matters.
Currently, and Iridium browser are fastest.
Unfortunately, these browser stopped supporting Java applets and 3D visualization is currently not possible.
In the future, there will be WebGL based 3D visualization.
It is recommended to update the web browser regularly.
FAQs
How can I create the HTML alignment view?
There are two different ways:
With the web service Alignment Annotator. Easy to use. Java is not required.
With the Java application Strap: Menu-bar > File > Export alignment. Full flexibility. Requires some training. Java needs to be installed.
With the command line tool alignment-to-html (Experts only)
Do I need Java to visualize the alignment?
No, only for 3D-visualization.
Why do the optional Java applications Strap and Jalview not start?
See Java not starting
Why is the alignment not correctly displayed in my Word processor?
Some word processors do not interpret text styles properly.
Supported: MS-Word, OpenOffice, kompozer (Macintosh), gwrite (Linux). Not Supported: Abiword.
How can I select alignment columns in MS-Word?
Drag the mouse with the alt-key to select columns.
How can I include the alignment in my web page?
Upload the html-page to your web site.
Include it as an iframe like