neXtProt protein sequence viewer

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 letter per Line (must be a multiple of 10)
toolbar (boolean) : Add a toolbar allowing users to choose the number of letter per line
search (boolean) : Add an input in the header to search for pattern in the sequence. Regular expression is supported.

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 colors and labels.
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');

//Coverage list
var exempleSequenceCoverage = [
    {start: 0, end: 25, color: "black", underscore: false},
    {start: 25, end: 47, color: "#ff0000", underscore: false},
    {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},
    {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);

Sequence Viewer

Simple

Selection

Coverage