BlasterJS logo
BLASTERJS
A BioJS component to display BLAST single and multiple alignments
doi: 10.1371/journal.pone.0205286

Screenshots


How to use


Requirements

Bootstrap 3:
Avaliable on http://getbootstrap.com/

Html2canvas:
Avaliable on https://html2canvas.hertzen.com/

Accepted files

BLAST default output text or XML files
(-outfmt 0 or 5):
Download an example file here
You can check NCBI BLAST user manual

How to get BlasterJS

Install BlasterJS packate using npm (Linux developers):
$ npm install biojs-vis-blasterjs

or

Download the JavaScript file from (Platform independent):
blaster.min.js

How to use BlasterJS

This is the basic structure of a web page that uses the library BlasterJS:

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
    ...
</head>
<body>
    ...
    <input type="file" id="blastinput" />
    <div id="blast-multiple-alignments"></div>
    <div id="blast-alignments-table"></div>
    <div id="blast-single-alignment"></div>
    ...
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script type="text/javascript" src="js/blaster.js"></script>
    <script type="text/javascript">
        var blasterjs = require("biojs-vis-blasterjs");
        var instance  = new blasterjs({
            input: "blastinput",
            multipleAlignments: "blast-multiple-alignments",
            alignmentsTable: "blast-alignments-table",
            singleAlignment: "blast-single-alignment"
        });    
    </script>
</body>

First, a link to bootstrap CSS must be declared in the head section:

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
    ...
</head>
    

In the body section, the user specifies the HTML elements to be used. In particular, there are four HTML elements available:

  • The blastinput input element: This is the input element to enter the BLAST file
  • The blast-multiple-alignments div: This is the div that renders the summary of the alignment.
  • The blast-alignments-table div: This is the div that renders the alignments table.
  • The blast-single-alignment div: This is the div that renders each individual alignment.
The user can choose which of the three div elements he wants to use by simply declaring them or not.

<body>
    ...
    <input type="file" id="blastinput" />
    <div id="blast-multiple-alignments"></div>
    <div id="blast-alignments-table"></div>
    <div id="blast-single-alignment"></div>
    ...
    

At the end of the body, the links to html2canvas and blasterjs JS files have to be declared:

    ...
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script type="text/javascript" src="js/blaster.js"></script>
    

And, the BlasterJS constructor script is called, defining the HTML elements to be used:

    <script type="text/javascript">
        var blasterjs = require("biojs-vis-blasterjs");
        var instance  = new blasterjs({
            input: "blastinput",
            multipleAlignments: "blast-multiple-alignments",
            alignmentsTable: "blast-alignments-table",
            singleAlignment: "blast-single-alignment"
        });    
    </script>
</body>

BlasterJS customisation

Upload BLAST output via String:
It is possible to enter the BLAST output file through a String variable instead of uplIt is possible to enter the BLAST output file through a String variable instead of uploading the file through the input element. To do so, call the BlasterJS constructor in the following way:

    ...
    <script type="text/javascript">
        var alignments = "...";
           
        var blasterjs = require("biojs-vis-blasterjs");
        var instance  = new blasterjs({
            string: alignment,
            multipleAlignments: "blast-multiple-alignments",
            alignmentsTable: "blast-alignments-table",
            singleAlignment: "blast-single-alignment"
        });    
    </script>
</body>

Define a custom callback for the alignments table elements:
The default callback of the alignments table elements is to update the single-alignment div. Additionally, BlasterJS allows the user to add a custom callback to the alignments table elements in the following way:

    ...
    <script type="text/javascript">
        var blasterjs = require("biojs-vis-blasterjs");
        var instance  = new blasterjs({
            input: "blastinput",
            multipleAlignments: "blast-multiple-alignments",
            alignmentsTable: "blast-alignments-table",
            singleAlignment: "blast-single-alignment" ,
            callback: function(alignment) { ... }
        });    
    </script>
</body>

Troubleshooting

Upload a wrong BLAST output file:
During the results uploading process, BlasterJS automatically checks that the uploaded BLAST output file does not contain any errors. If the user uploads an erroneous file, BlasterJS will show the following error message:

ERROR WHILE UPLOADING DATA: You have uploaded an invalid BLAST output file.

Try it


Upload a BLAST output file


Download example BLAST output file

Team


Contact Us