Sequence Viewer

This javascript tool will allow you to display your sequence of DNA, protein, or others, formatted FASTA-like, and apply some visual improvment for selection and coverage

Simple

This is the classic display of a sequence.
Before displaying the sequence you can adjust some rendering options :

showLineNumbers (boolean) : Display or not the line numbers
wrapAminoAcids (boolean) : Add or not the layout with break-line and blank separation
charsPerLine (integer) : Choose the number of letters per Line (must be a multiple of 10) Default: 50
toolbar (boolean) : Add a toolbar allowing users to choose the number of letters per line.
search (boolean) : Add an input in the header to search for pattern in the sequence. Regular expression is supported.
title (string) : Allows to change the title. Default: "Protein Sequence"
sequenceMaxHeight (string) : Define the max-height of the sequence. Default: "400px"
badge (boolean) : Display the badge with sequence length. Default: true

Selection

You can also select and bring to light a part of the sequence.
This sequence will be highlight by the color of your choice.

Coverage

A coverage with color codes can be apply to the sequence.
For this, you must provide a list, mapping all the sequence with some specific parameters :

start
end
color : text color
bgcolor : background color
underscore : add underline below the chars
tooltip : add tooltip
onclick : add click listener

With the coverage, it's also possible to give within the parameters an interval to highlight in the sequence.
An other array will be needed to display the legend of color codes.

// Display the sequence with coverage and legend
var seq3 = new Sequence('MALWMRLLPLLALLALWGPDPAAAFVNQHLCGSHLVEALYLVCGERGFFYTPKTRREAEDLQVGQVELGGGPGAGSLQPLALEGSLQKRGIVEQCCTSICSLYQLENYCN');
seq3.render('#protein-sequence-viewer3');

//function called by "onclick"
var onclickFun = function(e) {
  console.log("Region clicked");
}

//Coverage list
var exempleSequenceCoverage = [
    {start: 0, end: 25, color: "black", underscore: false, bgcolor: "#ffd891"},
    {start: 25, end: 47, color: "#ff0000", underscore: false, tooltip: "this is a tooltip"},
    {start: 47, end: 54, color: "#ff0000", underscore: true},
    {start: 54, end: 55, color: "#ff0000", underscore: false},
    {start: 55, end: 56, color: "black", underscore: false},
    {start: 56, end: 89, color: "#69CC33", underscore: false, onclick:onclickFun},
    {start: 89, end: 90, color: "black", underscore: false},
    {start: 90, end: 110, color: "#ff0000", underscore: false}
];

seq3.coverage(exempleSequenceCoverage);
// for coverage + highlight :
// seq3.coverage(exempleSequenceCoverage, start, end, highlightColor);

//Define Legend and color codes
var exempleLegend = [
    {name: "Mature Protein", color: "#ff0000", underscore: false},
    {name: "Proteotypic peptide", color: "#69CC33", underscore: false},
    {name: "Synthetic peptide",color: "#fff",underscore: true}
    ];
seq3.addLegend(exempleLegend);

Events

The sequence-viewer includes two listeners :

onMouseSelection : When selecting a subpart of the sequence with the mouse.
onSubpartSelected : When a subpart of the sequence is highlighted.

Those methods take a custom function in parameter to connect the sequence-viewer events to the rest of your application.