biojs-vis-proteinFeaturesViewer
Getting the code
As well as featuresviewer.min.js
which contains the minified JavaScript code required to run the application, two css files are required: main.css
(general styling, including feature styles) and fontello.css
(icon font).
The easy way (CDN)
We host all our releases on Github, using Github pages as a CDN. The latest release is available here:
<script src="http://ebi-uniprot.github.io/CDN/feature-viewer/featuresviewer.js"></script>
<link href="http://ebi-uniprot.github.io/CDN/feature-viewer/css/main.css" rel="stylesheet"/>
<link href="http://ebi-uniprot.github.io/CDN/feature-viewer/css/fontello.css" rel="stylesheet"/>
We also archive previous versions:
<script src="http://ebi-uniprot.github.io/CDN/feature-viewer/1.0.0/featuresviewer.js"></script>
<link href="http://ebi-uniprot.github.io/CDN/feature-viewer/1.0.0/css/main.css" rel="stylesheet"/>
<link href="http://ebi-uniprot.github.io/CDN/feature-viewer/1.0.0/css/fontello.css" rel="stylesheet"/>
The node way
>npm install biojs-vis-proteinfeaturesviewer
This is probably the preferred way if you are developing a new component or application that uses our feature viewer. It would be useful as well if you are modifying this component. Some more information about node and NPM.
Loading the Feature Viewer
In order to use this component, you need an HTML element such as <div> or <span> or anything else that can act as a container where the viewer will be located. In the following lines, we use a DIV element identified as yourDiv, it could have any other name.
When creating the instance, you need to specify the object where the component will be located, el, as well as the UniProt accession whose sequence annotations will be visualized, uniprotacc. We are supposing here that you will instantiate the component as soon as the window has been loaded, i.e., window.onload function.
<div id='yourDiv'/>
<script>
window.onload = function() {
var yourDiv = document.getElementById('yourDiv');
var biojs_vis_proteinFeaturesViewer = require('biojs-vis-proteinfeaturesviewer');
var instance = new biojs_vis_proteinFeaturesViewer({
el: yourDiv,
uniprotacc : 'P05067'
});
}
</script>
That’s it, you should now see the Feature Viewer in your web page!
API
The protein feature viewer offer some public methods that can be used to programmatically interact with the component.
selectFeature(ftType, begin, end, altSequence)
If you want to select a feature you can use the selectFeature method. The parameters ftType, begin and end are mandatory while altSequence is optional. Whenever you want to select variants, mutagenesis or conflict sequences you need to pass the altSequence, i.e., the bit of sequence reported by that feature.
<script>
instance.selectFeature('region', 27, 83);
instance.selectFeature('act_site', 47, 47);
</script>
<script>
instance.selectFeature('variant', 33, 34, 'QH');
instance.selectFeature('conflict', 53, 58, 'KGLMTW');
instance.selectFeature('mutagen', 115, 115, 'K');
</script>
Here is the list of the currently supported feature types:
Category: Domains and sites
ftType | Label | Description |
---|---|---|
domain | Domain | Position and type of each modular protein domain |
repeat | Repeat | Positions of repeated sequence motifs or repeated domains |
ca_bind | Calcium binding | Position(s) of calcium binding region(s) within the protein |
zn_fing | Zinc finger | Position(s) and type(s) of zinc fingers within the protein |
dna_bind | DNA binding | Position and type of a <span class=”caps](http://www.uniprot.org/help/DNA</span>-binding domain |
np_bind | Nucleotide binding | Nucleotide phosphate binding region |
region | Region | Region of interest in the sequence |
coiled | Coiled coil | Positions of regions of coiled coil within the protein |
motif | Motif | Short (up to 20 amino acids) sequence motif of biological interest |
act_site | Active site | Amino acid(s) directly involved in the activity of an enzyme |
metal | Metal binding | Binding site for a metal ion |
binding | Binding site | Binding site for any chemical group (co-enzyme, prosthetic group, etc.) |
site | Site | Any interesting single amino acid site on the sequence |
Category: Molecule processing
ftType | Label | Description |
---|---|---|
init_met | Initiator methionine | Cleavage of the initiator methionine |
signal | Signal | Sequence targeting proteins to the secretory pathway or periplasmic space |
transit | Transit peptide | Extent of a transit peptide for organelle targeting |
propep | Propeptide | Part of a protein that is cleaved during maturation or activation |
chain | Chain | Extent of a polypeptide chain in the mature protein |
peptide | Peptide | Extent of an active peptide in the mature protein |
Category: Post translational modifications
ftType | Label | Description |
---|---|---|
mod_res | Modified residue | Modified residues excluding lipids, glycans and protein cross-links |
lipid | Lipidation | Covalently attached lipid group(s) |
carbohyd | Glycosylation | Covalently attached glycan group(s) |
disulfid | Disulfide bond | Cysteine residues participating in disulfide bonds |
crosslnk | Cross-link | Residues participating in covalent linkage(s) between proteins |
Category: Sequence information
ftType | Label | Description |
---|---|---|
compbias | Compositional biased | Region of compositional bias in the protein |
non_std | Non-standard residue | Occurence of non-standard amino acids (selenocysteine and pyrrolysine) in the protein sequence |
unsure | Sequence uncertainty | Regions of uncertainty in the sequence |
conflict | Sequence conflict | Description of sequence discrepancies of unknown origin |
non_cons | Non-adjacent residues | Indicates that two residues in a sequence are not consecutive |
non_ter | Non-terminal residue | The sequence is incomplete. Indicate that a residue is not the terminal residue of the complete protein |
Category: Structural features
ftType | Label | Description |
---|---|---|
helix | Helix | Helical regions within the experimentally determined protein structure |
turn | Turn | Turns within the experimentally determined protein structure |
strand | Beta strand | Beta strand regions within the experimentally determined protein structure |
Category: Topology
ftType | Label | Description |
---|---|---|
topo_dom | Topological domain | Location of non-membrane regions of membrane-spanning proteins |
transmem | Transmembrane | Extent of a membrane-spanning region |
intramem | Intramembrane | Extent of a region located in a membrane without crossing it |
Category: Mutagenesis
ftType | Label | Description |
---|---|---|
mutagen | Mutagenesis | Site which has been experimentally altered by mutagenesis |
Category: Variants
ftType | Label | Description |
---|---|---|
variant | Natural variant | Description of a natural variant of the protein |
Events
The Protein Feature Viewer triggers five events. In order to listen to those events, you need to get the dispatcher.
instance.getDispatcher().on("ready", function(obj) {
console.log('ready');
console.log(obj);
});
“ready”
As soon as data has been loaded and visualized, this event will be triggered. The object provided by this event corresponds to all the data retrieved from the data service plus some parsing, it will be ready to be used by the viewer or any other JavaScript component.
“featureSelected”
As soon as a feature has been selected, meaning a click on it has happened, this event will be triggered. The object provided by this event looks like:
{
"feature":{
"type":{"name":"REGION","label":"region of interest"},
"description":"Heparin-binding",
"begin":"96",
"end":"110",
"internalId":"ft_65"
},
"color":"rgb(179, 62, 0)"
}
“featureDeselected”
As soon as a feature has been deselected, this event will be triggered. A feature is deselected when it is selected and a clicked on it happens, or when another feature is selected. The object provided by this event looks like the one provided by the event “featureSelected”.
“noData”
Triggered when the data failed to be loaded. The object provided by this event will be an error return by a jQuery.ajax request.
“noFeatures”
Triggered when the Uniprot accession has no sequence annotations. The object provided by this event corresponds to the data retrieved from the data service.
“notFound”
Triggered when the method selectFeature is used but no corresponding feature has been found. The object provided by this event will contain the information passed as parameters to the method, for instance
{
"ftType": "REGION",
"begin": 5,
"end": 27
}
Contributing
Please submit all issues and pull requests to the ebi-uniprot/biojs-vis-proteinFeaturesViewer repository!
Support
If you have any problem or suggestion please open an issue here.
License
This software is licensed under the Apache 2 license, quoted below.
Copyright (c) 2014, ebi-uniprot
Licensed under the Apache License, Version 2.0 (the “License”); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.