Protael.zip to any location (you don't need server to run it).
Starter project contains JS and CSS files as well as a basic HTML file where you need to edit only protein data.
<!DOCTYPE html>
<head>
<!--JQuery and jQueryUI are required, could be loaded from CDN:-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<!--Snap is required:-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<!-- FileSaver: -->
<script type="text/javascript" async="" src="js/vendor/FileSaver_Blob.js"></script>
<!--And finally Protael styles and js:-->
<link rel="stylesheet" href="Protael.css" />
<script type="text/javascript" src="protael.1.1.0.min.js"></script>
<script>
$(document).ready(function() {
// define your protein
var myProtein = {"sequence": "MSDFDEFERQLNENKQERDKENRHRKRSHSRSRSRDRKRRSRSRDRRNRDQRSASRDRRRRSKPLTRGA"};
// create Protael instance
//Protael (proteinObject, containerID, width, height, enableControls)
var p = Protael(myProtein, "myProtaelContainer", true);
//draw your protein
p.draw();
// you can also chain method calls:
// var p = Protael(myProtein, "myProtaelContainer", true).draw();
});
</script>
</head>
<body>
<div id="myProtaelContainer"></div>
</body>
</html>
Since we provided only protein sequence there is not much going on. You can zoom, select and export part of the sequence and try out different color schemas.
There are 5 predefined coloring schemas you can choose from: Clustal, Lesk, Cinema, MAEditor, ALI
var p = Protael(myProtein, "myProtaelContainer", true);
//set residues coloring scheme
p.setColoringScheme("Clustal");
p.draw();
// or with chaining:
//var p = Protael(myProtein, "myProtaelContainer", true)
// .draw().setColoringScheme("Clustal");
That's how it looks:
You can add your own coloring schema using seqcolors property of the protein.
Say, you have your secondary structure prediction and want to color protein based on the predicted secondary structure:
var myProtein = {
"sequence": "MSDFDEFERQLNENKQERDKENRHRKRSHSRSRSRDRKRRSRSRDRRNRDQRSASRDRRRRSKPLTRGA",
"seqcolors": {
// 'data' contains either comma-separated values, or string with 1 datachar per residue, ex: 'CCCCCHHHHH...'
"data": "C,C,C,C,C,H,H,H,H,H,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,C,E,E,E,E,C,C,C,C,C,C,C,C,C,C,C",
"colors": {
"H": "red",
"E": "blue"
}
}};
Annotations/features should be grouped together in "feature tracks". Normally, you would want to create separate track for each feature type or data source and apply visual style to the whole track. That's how it's done:
var myProtein = {
...
"ftracks": [
// star first feature track
{
"label": "PFAM_DOMAINS",
// display type: "block"(default) will render a rectangle and label inside
// "line" will render a line and label above it
"display": "block",
"showLine": true, //display base line ("string" for features)
"clazz": "pfam_domains", // your custom css class
// here come the features in this track
"features": [
{
"id": "PF14259", // will be used as DOM element ID
"label": "PF14259", // label to be displayed on the feature
"clazz": "pfam_feature", // custom css class
"start": 10, // feature start; required
"end": 22, // feature end; required
"properties": { // properties will be converted to data-* attributes
"Full name": "RRM_6"
}
},
{
"regionType": "PFAM_DOMAIN",
"start": 26,
"end": 33,
"clazz": "pfam_feature",
"label": "PF00076"
}]
},
//start second track
{
"label": "Structures",
"color": "green", // instead of css class you can specify HTML color
"showLine": true,
"allowOverlap": true, // if set to false overlapping features will be
// rendered on different levels
"features": [ // array of feature objects
{
"regionType": "STRUCTURE",
"start": 27,
"end": 42,
"color": "pink", // override track color for this feature
"label": "2M52"
},
{
"regionType": "STRUCTURE",
"start": 40,
"end": 47,
"properties": {
"Full name": "3V4M. Chain: A/B. Metod: X-ray. Resolution: 1.80 A"
},
"label": "3V4M"
}]
},
//start third track
{
"label": "Some annotations",
"color": "#FF0",
"display": "line", // show annotations as lines
"showLine": true,
"allowOverlap": true, // if set to false overlapping features will be
// rendered on different levels
"features": [ // array of feature objects
{
"start": 40,
"end": 50,
"label": "Annotation 1"
},
{
"start": 55,
"end": 67,
"label": "Annotation 2"
}]
}],
....
All quantitative data should go in to qtracks property of the protein.
You can either provide array of values [1, 2, 3, 4,... ] or string with single-digit value per residue :"1234..."
Currently use can use any of the following chart types:
line - basic line chartspline - smooth lines (spline interpolation through data points)area - basic area chartarea-spline - area chart using spline interpolationcolumn - column chartThere is an option to display qtracks using different scale by setting "transform" property to one of the following values:
loglog2log10expThere are 3 different coloring option which could be applied to any graph:
var myProtein = {
"sequence": "MSDFDEFERQLNENKQERDKENRHRKRSHSRSRSRDRKRRSRSRDRRNRDQRSASRDRRRRSKPLTRGA",
"qtracks": [
{
"label": "Single color; area; custom display range[-2;2]",
"color": "yellow",
"type": "area",
"displayScale": true,
"displayMax": 3,
"displayMin": -2,
"values": [ 1, 0.7, 0.5...]
},
{
"label": "3-points gradient fill; area-spline",
// zero values are green, <0 gradient to yellow, >0 gradient to red
"color": [
"yellow",
"green",
"red"
],
"type": "area-spline",
"values": [ 1, 0.7, 0.5...]
},
{
"label": "2-points gradient fill; area-spline",
// gradient from yellow to red, with zero values being
// colored differently depending on the graph values
"color": [
"yellow",
"red"
],
"values": [ 1, 0.7, 0.5...]
}, {
"label": "Single color; spline",
"color": "red",
"type": "spline",
"values": [ 1, 0.7, 0.5...]
},
{
"label": "3-points gradient fill; column",
"color": [
"yellow",
"green",
"red"
],
"type": "column",
"values": [ 1, 0.7, 0.5...]
},
{
"label": "2-points gradient fill; column",
"color": [
"yellow",
"red"
],
"type": "column",
"values": [ 1, 0.7, 0.5...]
}, {
"label": "2-points gradient; line",
"color": [
"green",
"red"
],
"type": "line",
"values": [ 1, 0.7, 0.5...]
}
]
}
]};
Currently there are several different types of markers that could be added to protein:
Markers could be displayed above(default) or below the main sequence. Use "position":"bottom" to place markes below the sequence.
var myProtein = {
...
"markers": [{
"type": "gap", // required
"x": 2, // required
"label": "gap",
"color": "#1240ab"
}, {
"type": "gap",
"x": 6,
"color": "#1240ab"
},{
"type": "glycan",
"x": 10,
"label": "glycan",
},{
"type": "glycan",
"x": 11,
"label": "bottom glycan",
"position": "bottom"
}, {
"type": "glycan",
"x": 13
}, {
"type": "unknownglycan",
"x": 20,
"label": "unknown glycan",
"color":"green"
}, {
"type": "unknownglycan",
"x": 23,
"color":"#3c3"
},{
"type": "oliglycan",
"label": "oliglycan",
"x": 30,
"color":"red"
},{
"type": "oliglycan",
"x": 33,
color:"#f60"
},{
"label": "stick",
"type": "stick",
"x": 40,
"color": "#fc0"
},
{
"label": "bottom stick",
"type": "stick",
"x": 43,
"color": "#f90",
"position": "bottom"
} ]
}
var myProtein = {
...
"bridges": [{
"type": "S-S",
"start": 5,
"end": 15,
"startlabel": "5",
"endlabel": "15",
"color": "red"
}, {
// no labels at the ends
"type":"other",
"start": 25,
"end": 35,
"color": "green"
}, {
// no labels at all
"start": 45,
"end": 55,
"color": "blue"
}]
};
var myProtein = {
"alidisplay": true, //if set to false will not display residues in alignments, default = false
"alignments": [
{
"CS": "Clustal", // you can specify different coloring schema for each sequence
// by default 'ALI' is used (gray lines for aligned regions)
"id": "1bo4",
"label": "1bo4_A", // label for tooltip (will be used in case "data" is not set, see below)
"sequence": "RTCRLGPDQVKSMRAALDLFGREFGDVATYSQHQPDSDYLGNLLRSKTFIALAAFDQEAVVGALAAYVLPKFEQPRSEIYIYDLAVSGEHRRQGIATALINLLKHEANALGAYVIYVQADYGDDPAVALYTKLGIREEVMH",
"start": 7, // start position of the alignment
"properties": { // properties attribute will be converted to data-* attribute
// and by default used in tooltip
"pdbid": "1bo4",
"PDB structure": "1bo4_A"
}
},
{
"CS": "",
"description": "3tfy_A",
"id": "3tfy",
"label": "3tfy_A",
"sequence": "NDKFYKDVL-EVGELAKLAYFNDIAVGAVCCRV--DHSQNQKRLYIMTLGCLAPYRRLGIGTKMLNHVLNICEKDGTFDNIYLHVQISNESAIDFYRKFG",
"start": 42
},
....
],
"sequence": "MISTQTKITRLNSQDVGVMRAMLGMFGEAFEDAENYCRAQPSDSYLQDLLCGSGFIAIAALQGQEVIGGLAAYVLPKFEQQRKEIYIYDLGVQGAYRRRGIATALINELQRIAHDIGAYVIFVQADYGDDPAVALYTKLGIREDVMHFDIEPQPAA"
};
You can setup default coloring schema as well:
var myProtein = {
"alidisplay": false, // see how it looks now
"alignments": [
...
]};
var p = Protael(myProtein, "myProtaelContainer", true).draw();
//set residues coloring scheme
p.setColoringScheme("Clustal");
Another option to color alignments is to assign single color (based on some value). See an example.