# 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.