MSAViewer

Multiple Sequence Alignment Viewer - the MSAViewer - a BioJS component.

          .         .
         ,8.       ,8.            d888888o.           .8.
        ,888.     ,888.         .`8888:' `88.        .888.
       .`8888.   .`8888.        8.`8888.   Y8       :88888.
      ,8.`8888. ,8.`8888.       `8.`8888.          . `88888.
     ,8'8.`8888,8^8.`8888.       `8.`8888.        .8. `88888.
    ,8' `8.`8888' `8.`8888.       `8.`8888.      .8`8. `88888.
   ,8'   `8.`88'   `8.`8888.       `8.`8888.    .8' `8. `88888.
  ,8'     `8.`'     `8.`8888.  8b   `8.`8888.  .8'   `8. `88888.
 ,8'       `8        `8.`8888. `8b.  ;8.`8888 .888888888. `88888.
,8'         `         `8.`8888. `Y8888P ,88P'.8'       `8. `88888.

This project is unmaintained. Please consider switching to plotly/react-msa-viewer.

If you still need to use MSAViewer, download and locally host http://web.archive.org/web/20220120161943id_/https://s3.eu-central-1.amazonaws.com/cdn.bio.sh/msa/latest/msa.min.gz.js. See #257 for further details.

---

---

Use it

Full screen mode.

Demo

These examples show how you could embed the MSAViewer into your page.

Current sniper with different examples

display an MSA

Features

• runs purely in the Browser
• import files in format like FASTA, Clustal, ...
• be interactive and receive Events
• filter, sort, hide the sequences
• display sequence features
• extendable Views for your integration
• customizable viewport
• simplicity as design rule
• export to fASTAb
• generate the consenus seq
• more to come ...

Use the MSAViewer

The following examples assume that the msa() constructor is available.

If you have loaded msa as a script in your web page with something like...

<script src="path/to/msa.min.gz.js"></script>

... then congratulations! You are ready to go.

If you are using npm and are adding msa as a dependency, then you can use the following:

var msa = require("msa");

Import seqs

a) Directly import a url

var opts = {
  el: rootDiv,
  importURL: "./data/fer1.clustal",
};
var m = msa(opts);

-> JSBin example

b) Import your own sequences from a string

// your fasta file (advice: save it in a DOM node)
var fasta = ">seq1\n\
ACTG\n\
>seq2\n\
ACGG\n";

// parsed array of the sequences
var seqs =  msa.io.fasta.parse(fasta);

var m = msa({
     el: rootDiv,
     seqs: seqs
});
m.render();

-> JSBin Example

c) Asynchronously import seqs

var m = msa({
	el: rootDiv,
});
msa.io.clustal.read("https://raw.githubusercontent.com/wilzbach/msa/master/test/dummy/samples/p53.clustalo.clustal", function(err, seqs){
	m.seqs.reset(seqs);
	m.render();
});

-> JSBin example

d) Import your sequences from the DOM

var fasta = document.getElementById("fasta-file").innerText;
var seqs = msa.io.fasta.parse(fasta);

var m = msa({
    el: rootDiv,
    seqs: seqs
});
m.render();

with the following data stored in your HTML page:

<pre style="display: none" id="fasta-file">
>seq1
ACTG
>seq2
ACGG</pre>

-> JSBin Example

Basic config parameters

• bootstrapMenu: automagically show a menu
• el: the root DOM element
• importURL: when you want to import a file automagically
• seqs: if you prefer to pass sequences as object

There also many other option - grouped into these categories. See below for more details.

• column: hide columns
• colorscheme: everything about a colorscheme
• conf: basic configuration
• vis: visual elements
• visorder: ordering of the visual elements
• zoomer: everything that is pixel-based

Getting help

Please open an issue or ping us on Gitter

MSAViewer in Action

• VaPoR
• CATH - example
• Gene3D - Paper, example
• msaR - Visualize an MSA as interactive R plot or shiny widget
• MPI Bioinformatics Toolkit for protein sequence analysis
• PolyMarker
• Galaxy visualization plugin
• BitterDB
• @thejmazz's JavaScript and Bioinformatics tutorial
• Center for Phage Technology
• PHYLOViZ Online
• HistoneDB 2.0

Are you using the MSAViewer? Don't hesistate to make a PR and let us know!

Change the colorscheme

Checkout this live example or edit.

var opts = {
  el: rootDiv,
  importURL: "./data/fer1.clustal",
  colorscheme: {"scheme": "hydro"}
};
var m = msa(opts);

Own colorscheme

var opts = {
  el: rootDiv,
  importURL: "./data/fer1.clustal",
  colorscheme: {"scheme": "hydro"}
};
var m = msa(opts);
m.g.colorscheme.addStaticScheme("own",{A: "orange", C: "red", G: "green", T: "blue"});
m.g.colorscheme.set("scheme", "own");

Have a look at the doc for more info.

Add features

Checkout this live example or edit.

var xhr = require("xhr");
var gffParser = require("biojs-io-gff");
var m = msa({el: rootDiv, importURL: "https://raw.githubusercontent.com/wilzbach/msa/master/test/dummy/samples/p53.clustalo.clustal");

// add features
xhr("./data/fer1.gff3", function(err, request, body) {
  var features = gffParser.parseSeqs(body);
  m.seqs.addFeatures(features);
});

// or even more
xhr("./data/fer1.gff_jalview", function(err, request, body) {
  var features = gffParser.parseSeqs(body);
  m.seqs.addFeatures(features);
});

Update seqs

m.seqs.at(0).set("hidden", true) // hides the first seq
m.seqs.at(0).get("seq") // get raw seq
m.seqs.at(0).get("seqId") // get seqid
m.seqs.at(0).set("seq", "AAAA") // sets seq
m.seqs.add({seq: "AAA"});  // we add a new seq at the end
m.seqs.unshift({seq: "AAA"});  // we add a new seq at the beginning
m.seqs.pop() // remove and return last seq
m.seqs.shift() // remove and return first seq
m.seqs.length // nr
m.seqs.pluck("seqId") // ["id1", "id2", ..]
m.seqs.remove(m.seqs.at(2)) // remove seq2
m.seqs.getMaxLength() // 200
m.seqs.addFeatures()
m.seqs.removeAllFeatures()
m.seqs.setRef(m.seqs.at(1)) // sets the second seq as reference (default: first)
m.seqs.comparator = "seqId" // sort after seqId
m.seqs.sort() // apply our new comparator
m.seqs.comparator =  function(a,b){ return - a.get("seq").localeCompare(b.get("seq"))} // sort after the seq itself in descending order
m.seqs.sort()

Even more is possible.

Update selection

m.g.selcol.add(new msa.selection.rowsel({seqId: "f1"})); // row-based
m.g.selcol.add(new msa.selection.columnsel({xStart: 10, xEnd: 12})); // column-wise
m.g.selcol.add(new msa.selection.possel({xStart: 10, xEnd: 12, seqId: "f1"})); // union of row and column
m.g.selcol.reset([new msa.selection.rowsel({seqId: "f1"})]); // reset

m.g.selcol.getBlocksForRow() // array of all selected residues for a row
m.g.selcol.getAllColumnBlocks() // array with all selected columns
m.g.selcol.invertRow(@model.pluck "id")
m.g.selcol.invertCol([0,1,2])
m.g.selcol.reset() // remove the entire selection
m.g.user.set("searchText", search) // search

Jump to a column

m.g.zoomer.setLeftOffset(10) // jumps to column 10

Export and save

m.utils.export.saveAsFile(m, "all.fasta") // export seqs
m.utils.export.saveSelection(m, "selection.fasta")
m.utils.export.saveAnnots(m, "features.gff3")
m.utils.export.saveAsImg(m,"biojs-msa.pn