Browser based visualization of Multiple Sequence-Alignments
with JavaScript and HTML 5

The multiple sequence alignment views are interactive. They support: 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. 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:
  1. Show only (default): Only the sequences of that group are shown in the alignment, all others are hidden.
  2. Show only if shown: The cut set of visible sequences and sequences of that group is shown.
  3. Show: Hidden sequences of that group are shown in the alignment.
  4. Hide: The sequences of that group are not shown any more. Hidden sequences can be rescued with the trash-button.
  5. Select only: The sequences of that group are selected and all others are deselected. Selected sequences are indicated by blue background.
  6. Select only if selected: The cut set of visible sequences and sequences of that group is selected.
  7. Select: The sequences of that group are selected. Already selected sequences are not changed.
  8. Unselect: The sequences are deselected. The blue background disappears.
  9. List names: The sequence names are displayed in a text box.
  10. 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 WIKI: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.
WIKI:Regular expression briefly:

Drag&Drop

Modern web browsers support drag&drop. It can be used to intuitively

3D-visualization

3D 3D

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. 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.

Browser Compatibility

All main browsers are supported. For large alignments, the speed of the web browser matters. Currently, WIKI:Google Chrome 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