BLASTERJS
A BioJS component to display BLAST single and multiple alignments
doi: 10.1371/journal.pone.0205286
A BioJS component to display BLAST single and multiple alignments
doi: 10.1371/journal.pone.0205286
Bootstrap 3:
Avaliable on http://getbootstrap.com/
Html2canvas:
Avaliable on https://html2canvas.hertzen.com/
BLAST default output text or XML files
(-outfmt 0 or 5):
Download an example file here
You can check NCBI BLAST user manual
Install BlasterJS packate using npm (Linux developers):
$ npm install biojs-vis-blasterjs
or
Download the JavaScript file from (Platform independent):
blaster.min.js
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:
<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>
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: alignments,
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>
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.
