BioJS

How to use a BioJS Component?

Protein Features Viewer

Protein Feature Viewer

The Feature viewer presents sequence feature tracks under a ruler that represents sequence length for the selected protein.

Click here for more info

What do we want to achieve?

Your own web page using the UniProt Feature Viewer!

See the Pen Feature Viewer by Jose Villaveces (@secevalliv) on CodePen.

Where to start?

http://biojs.io/

Step 1: Empty page

We need a page ready to display protein features

Open any simple text editor
Name the file myPage.html

<html>
<head>
    <meta charset='utf-8'>    
</head>
<body>
    <!-- We will use this div to host the feature viewer. -->
    <!-- Identify it as target_ft and give it a width of 1200px -->
    <div id="" width=""/>
</body>
</html>

Step 2: Empty page

In order to get the protein data, we need to enable users to let us know which protein accession they want to use

First we will create an element for users to write down a protein accession

<html>
<head>
    <meta charset='utf-8'>    
</head>
<body>
    <!-- We will use this div to create an input element identified 
    as accession. -->
    <!-- Additionally, we will create a button. The button will 
    trigger the function getData when clicked. -->
    <div>
        <input id="">
        <button onClick="">Get Data/<button>
    </div>
    
    <div id="target_ft" width="1200px"/>
</body>
</html>

Step 3: Capturing the input data

In order to get the protein data, we need to enable users to let us know which protein accession they want to use

<html>
<head>
    <meta charset='utf-8'>
    
    <script>
        var getData = function(){
            /* Get the value inside the input identfied as 'accession' 
               Tip: use the attribute 'html'*/
            var accession = '';
            
            /* Get the element identified as 'target_ft' */
            var element = null;
        }
    </script>
    
</head>
<body>
    <div>
        <input id="accession">
        <button onClick="getData()">Get Data/<button>
    </div>
    
    <div id="target_ft" width="1200px"/>
</body>
</html>

Step 4: Make sure so far is working!

Let’s see if we are indeed capturing what the user has written down in our input element

<html>
<head>
    <meta charset='utf-8'>
    <script>
        var getData = function(){
            
            var accession = document.getElementById('accession').html;
            var element = document.getElementById('target_ft');
            
            alert(accession);
        }
    </script>
    
</head>
<body>
    <div>
        <input id="accession">
        <button onClick="getData()">Get Data/<button>
    </div>
    
    <div id="target_ft" width="1200px"/>
</body>
</html>

Step 5: Include the required files

You can safely remove the alert now to avoid visual noise
Include ProteinFeaturesViewer JavaScript and CSSs (you can allways find them in the registry)

<html>
<head>
    <meta charset='utf-8'>
    
    <!-- Required libs! -->
    <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"/>
    
    <script>
        var getData = function(){
            var accession = document.getElementById('accession').html;
            var element = document.getElementById('target_ft');
        }
    </script>
    
</head>
<body>
    <div>
        <input id="accession">
        <button onClick="getData()">Get Data/<button>
    </div>
    
    <div id="target_ft" width="1200px"/>
</body>
</html>

Step 6: Instantiate the ProteinFeaturesViewer component

<html>
<head>
    <meta charset='utf-8'>
    
    <!-- Required libs! -->
    <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"/>
    
    <script>
        var getData = function(){
            var accession = document.getElementById('accession').html;
            var element = document.getElementById('target_ft');
            
            var app = require('biojs-vis-proteinfeaturesviewer');
            var instance = new app({
                el: element,
                uniprotacc: accession
            });
        }
    </script>
    
</head>
<body>
    <div>
        <input id="accession">
        <button onClick="getData()">Get Data/<button>
    </div>
    
    <div id="target_ft" width="1200px"/>
</body>
</html>

The component working

See the Pen Feature Viewer by Jose Villaveces (@secevalliv) on CodePen.

Back to program