sing-group / biojs-vis-blasterjs Goto Github PK
View Code? Open in Web Editor NEWBlasterJS - an open source JS library to display Blast results
Home Page: http://www.sing-group.org/blasterjs/
License: Other
BlasterJS - an open source JS library to display Blast results
Home Page: http://www.sing-group.org/blasterjs/
License: Other
Hi. I am trying to implement blasterjs via String in my web database. Here is my blast output page:
`<?php
// Include necessary files
include_once realpath("../../header.php");
// Your BLAST input parameters
$query = $_POST["query"];
$blast_db = $_POST["blast_db"];
$blast_prog = $_POST["blast_prog"];
$max_hits = $_POST["max_hits"];
$evalue = $_POST["evalue"];
$blast_matrix = $_POST["blast_matrix"];
$blast_filter = $_POST["blast_filter"];
// Define variables
$blast_res = '';
$num_input_seqs = substr_count($query, ">");
// Check for existence of blast_links.json file
$links_hash = [];
$blast_links_file = "$blast_dbs_path/blast_links.json";
if (file_exists($blast_links_file)) {
$links_json_file = file_get_contents($blast_links_file);
$links_hash = json_decode($links_json_file, true);
}
// Convert blast_filter checkbox value to "yes" or "no"
$blast_filter = $blast_filter == "on" ? "yes" : "no";
// Construct the BLAST command based on the selected program
if ($blast_prog == "blastn") {
$blast_cmd = "\"$query\" | $blast_prog -db $blast_db -dust $blast_filter -evalue $evalue -num_descriptions $max_hits -num_alignments $max_hits -html -max_hsps 3";
} elseif ($blast_prog == "tblastn") {
$blast_cmd = "\"$query\" | $blast_prog -db $blast_db -seg $blast_filter -evalue $evalue -num_descriptions $max_hits -num_alignments $max_hits -html -max_hsps 3";
} elseif (in_array($blast_prog, ["blastp", "blastx", "tblastx"])) {
$blast_cmd = "\"$query\" | $blast_prog -db $blast_db -seg $blast_filter -evalue $evalue -matrix $blast_matrix -num_descriptions $max_hits -num_alignments $max_hits -html";
}
// Execute BLAST command
$blast_res = shell_exec('printf '.$blast_cmd);
$blast_res = str_replace('<a name=',"<a id=", $blast_res);
// Output HTML structure with BLAST results
echo $blast_res;
?>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<!-- Include any other necessary stylesheets -->
</head>
<body>
<!-- Your HTML content goes here -->
<!-- Ensure that you have the necessary elements for Blaster.js -->
<input type="file" id="blastinput" />
<div id="blast-multiple-alignments"></div>
<div id="blast-alignments-table"></div>
<div id="blast-single-alignment"></div>
<!-- Include necessary JavaScript files -->
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="blaster.min.js"></script>
<script type="text/javascript">
// Initialize Blaster.js with the Blast results
var alignments = "<?php echo $blast_res;?>";
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>
<!-- Include any additional scripts or JavaScript files -->
<!--<script type="text/javascript" src="fruit_genomebase/js/kinetic-v5.1.0.min.js"></script>-->
<!--<script src="fruit_genomebase/js/blast_canvas_graph.js"></script>-->
<!-- Include the output as plain text-->
<div style="margin:20px">
<a href="blast_input_pomegranate.php"><i class='fas fa-reply' style='color:#229dff'></i> Go back to input</a>
<a id="download_blast_table" class="float-right" style="cursor:pointer"><i class='far fa-file' style='font-size:24px;color:#229dff'></i> Download result in tabular format</a>
</div>
<?php
// Include necessary files
include_once realpath("$easy_gdb_path/footer.php");
?>
<script>
// Your JavaScript code goes here, if any
</script>
<style>
/* Your CSS styles go here, if any */
</style>
`
I do see the text output of blast results, but no output of blasterjs. The files are in the same directory as the blast output.php file. Also, when I put an html test for blasterjs in the same directory, it does work, but with an input file.
Any idea where am I wrong??
Thanks,
Alex
Hi,
We are facing some issues with the browserified script generated after npm install
( build/blasterjs.js
).
We use it like this :
<script type="text/javascript" src="js/blasterjs.js"></script>
The module can't be recognize, the exact error is
ReferenceError: blasterjs is not defined
Are we missing something? Do we need to run an other command to generate the browserified script?
thanks in advance
Hi!
Thanks for this great library. I have integrated it into my software!
Some of my users would like additional columns in the output, such as nident
(Number of identical matches). Since outfmt 0 and 5 cannot be edited in this way, how difficult would it be to add an outfmt 6 parser?
blastp -query /tmp/tmphtyu61b6 -db "db/ORG.faa" -outfmt 5
:
<?xml version="1.0"?>
<!DOCTYPE BlastOutput PUBLIC "-//NCBI//NCBI BlastOutput/EN" "http://www.ncbi.nlm.nih.gov/dtd/NCBI_BlastOutput.dtd">
<BlastOutput>
<BlastOutput_program>blastp</BlastOutput_program>
<BlastOutput_version>BLASTP 2.11.0+</BlastOutput_version>
<BlastOutput_reference>Stephen F. Altschul, Thomas L. Madden, Alejandro A. Sch&auml;ffer, Jinghui Zhang, Zheng Zhang, Webb Miller, and David J. Lipman (1997), "Gapped BLAST and PSI-BLAST: a new generation of protein database search programs", Nucleic Acids Res. 25:3389-3402.</BlastOutput_reference>
<BlastOutput_db>db/ORG.faa</BlastOutput_db>
<BlastOutput_query-ID>Query_1</BlastOutput_query-ID>
<BlastOutput_query-def>q</BlastOutput_query-def>
<BlastOutput_query-len>23</BlastOutput_query-len>
<BlastOutput_param>
<Parameters>
<Parameters_matrix>BLOSUM62</Parameters_matrix>
<Parameters_expect>10</Parameters_expect>
<Parameters_gap-open>11</Parameters_gap-open>
<Parameters_gap-extend>1</Parameters_gap-extend>
<Parameters_filter>F</Parameters_filter>
</Parameters>
</BlastOutput_param>
<BlastOutput_iterations>
<Iteration>
<Iteration_iter-num>1</Iteration_iter-num>
<Iteration_query-ID>Query_1</Iteration_query-ID>
<Iteration_query-def>q</Iteration_query-def>
<Iteration_query-len>23</Iteration_query-len>
<Iteration_hits>
<Hit>
<Hit_num>1</Hit_num>
<Hit_id>gnl|BL_ORD_ID|722</Hit_id>
<Hit_def>gnl|extdb|ORG_000808 HAD family phosphatase [Lactobacillus delbrueckii]</Hit_def>
<Hit_accession>722</Hit_accession>
<Hit_len>226</Hit_len>
<Hit_hsps>
<Hsp>
<Hsp_num>1</Hsp_num>
<Hsp_bit-score>22.7126</Hsp_bit-score>
<Hsp_score>47</Hsp_score>
<Hsp_evalue>0.163946</Hsp_evalue>
<Hsp_query-from>6</Hsp_query-from>
<Hsp_query-to>14</Hsp_query-to>
<Hsp_hit-from>1</Hsp_hit-from>
<Hsp_hit-to>9</Hsp_hit-to>
<Hsp_query-frame>0</Hsp_query-frame>
<Hsp_hit-frame>0</Hsp_hit-frame>
<Hsp_identity>9</Hsp_identity>
<Hsp_positive>9</Hsp_positive>
<Hsp_gaps>0</Hsp_gaps>
<Hsp_align-len>9</Hsp_align-len>
<Hsp_qseq>MRVAGLKTD</Hsp_qseq>
<Hsp_hseq>MRVAGLKTD</Hsp_hseq>
<Hsp_midline>MRVAGLKTD</Hsp_midline>
</Hsp>
</Hit_hsps>
</Hit>
</Iteration_hits>
<Iteration_stat>
<Statistics>
<Statistics_db-num>1805</Statistics_db-num>
<Statistics_db-len>530335</Statistics_db-len>
<Statistics_hsp-len>0</Statistics_hsp-len>
<Statistics_eff-space>12197705</Statistics_eff-space>
<Statistics_kappa>0.041</Statistics_kappa>
<Statistics_lambda>0.267</Statistics_lambda>
<Statistics_entropy>0.14</Statistics_entropy>
</Statistics>
</Iteration_stat>
</Iteration>
</BlastOutput_iterations>
</BlastOutput>
blastp -query /tmp/tmphtyu61b6 -db "db/ORG.faa" -outfmt "6 qseqid qgi qacc sseqid sallseqid sgi sallgi sacc sallacc qstart qend sstart send qseq sseq evalue bitscore score length pident nident mismatch positive gapopen gaps ppos frames qframe sframe btop staxids sscinames scomnames sblastnames sskingdoms stitle salltitles sstrand qcovs qcovhsp qcovus"
:
q 0 q gnl|extdb|ORG_000808 gnl|extdb|ORG_000808 0 0 gnl|extdb|ORG_000808 gnl|extdb|ORG_000808 6 14 1 9 MRVAGLKTD MRVAGLKTD 0.16 22.7 47 9 100.000 9 0 9 0 0 100.00 1/1 1 1 9 0 N/A N/A N/A N/A gnl|extdb|ORG_000808 HAD family phosphatase [Lactobacillus delbrueckii] gnl|extdb|ORG_000808 HAD family phosphatase [Lactobacillus delbrueckii] N/A 39 39 N/A
{
"qseqid": "q",
"qgi": "0",
"qacc": "q",
"sseqid": "gnl|extdb|ORG_000808",
"sallseqid": "gnl|extdb|ORG_000808",
"sgi": "0",
"sallgi": "0",
"sacc": "gnl|extdb|ORG_000808",
"sallacc": "gnl|extdb|ORG_000808",
"qstart": "6",
"qend": "14",
"sstart": "1",
"send": "9",
"qseq": "MRVAGLKTD",
"sseq": "MRVAGLKTD",
"evalue": "0.16",
"bitscore": "22.7",
"score": "47",
"length": "9",
"pident": "100.000",
"nident": "9",
"mismatch": "0",
"positive": "9",
"gapopen": "0",
"gaps": "0",
"ppos": "100.00",
"frames": "1/1",
"qframe": "1",
"sframe": "1",
"btop": "9",
"staxids": "0",
"sscinames": "N/A",
"scomnames": "N/A",
"sblastnames": "N/A",
"sskingdoms": "N/A",
"stitle": "gnl|extdb|ORG_000808 HAD family phosphatase [Lactobacillus delbrueckii]",
"salltitles": "gnl|extdb|ORG_000808 HAD family phosphatase [Lactobacillus delbrueckii]",
"sstrand": "N/A",
"qcovs": "39",
"qcovhsp": "39",
"qcovus": "N/A"
}
The only information that is used by BlasterJS that is not included in this outfmt 6 report is Hsp_midline
, correct? But this could be calculated relatively easily.
It seems doable. Am I missing something?
How difficult would it be to dynamically add columns to the table?
Are you interesting in doing this? If not, I may give it a shot.
We are using blast v 2.2.30 and we have noticed that the score value isn't parsed correctly by the module if it's above 100, because it's not formatted the same way in the blast output.
example:
score <100
>JK2MQ9P02HIOES
Length=327
Score = 89.8 bits (48), Expect = 5e-19
Identities = 51/52 (98%), Gaps = 1/52 (2%)
score > 100
>JK2MQ9P02GXIRB
Length=78
Score = 145 bits (78), Expect = 1e-35
Identities = 78/78 (100%), Gaps = 0/78 (0%)
if Score is higher than 100, there is 3 spaces between the '=' char and the score instead of one.
It can be easily fixed in the parseBlastText
method with a replace like this (line 186 of index.js) :
var score = lines[currentLine+2].split(',')[0].replace(/\s\s+/g, ' ').split(' ')[3];
If this seems ok to you I'll submit a PR
Hi!
Displaying this file shows a little problem:
blast.txt
If you look at the first alignment, the middle line is shifted 1 bp to the left
Have a good day,
G.
Hi,
Thanks for the nice project. For my use case, I have BLAST result files generated by the server. The client side code simply needs to display these results. In other words, there is no need for a file input box. I managed to get this to work using the following code, but it would be nice to have a have this be part of the API.
//...fetch resultsString from server
let myBlob = new Blob([resultsString], {type : "text/plain"});
let fakeEvent = {
target: { files: [myBlob] }
};
instance._displayAlignments(fakeEvent, instance);
Hi, I am not formiliar with Jave. Just wondering is there any example to use BlasterJS in R (shiny app) or python. Thank you!
Hi @abmiguez ,
Congratulations to tool, i utilized in my project and the results so awesome. But i will found the one problem with alignments in 'string option' (Upload BLAST output via String).
In another Issues #8 , i write about the problem, but i create another issue for formality.
Although the results in the input data work perfectly, if you have a file in the back end and use the same file in 'string option', the alignments dont appears.
Below, my code in JS and blast (version 2.12.0 in python), as well the print in my project:
JS:
<script type="text/javascript" src="../static/node/node_modules/biojs-vis-blasterjs/lib/html2canvas.js"></script>
<script type="text/javascript" src="../static/node/node_modules/biojs-vis-blasterjs/build/blasterjs.js"></script>
<script type="module">
var blasterjs = require("biojs-vis-blasterjs");
var instance = new blasterjs({
string: `{{blast_result}}`,
multipleAlignments: "blast-multiple-alignments",
alignmentsTable: "blast-alignments-table",
singleAlignment: "blast-single-alignment"
});
</script>
Blast script:
def blastNN(self, database, blast, query):
if database == "x":
out_test = ''
blastn = NcbiblastnCommandline(query=query, db="database_location", out=self.output, outfmt="0")
blastn()
Image:
I hope this helps, if you have any questions send me an email.
Hello,
I wish to use the blasterJS for visualizing miRNA alignment data from my local blast.
What code I need to change, please suggest.
Thanks, and Kind Regards
Hi, great work!
I use blast to find DNA parts in my lab's inventory, but today I came across something strange when using blasterjs.
If a given subject sequence produces more than one alignment with the query, all alignments are coloured the same at the "blast-multiple-alignments" section.
A scenario where this could be a problem is when looking for a C-terminal fusion instead of an N-terminal fusion. The displayed result would be the same, even though the BLAST result is not.
Conceptually, if the subject contains the same parts as the query, but ordered differently, the displayed alignments are exactly the same as if the subject had been identical. Coverage is 100% in both cases and, from looking at the plots, you would not realise that query and subject are very different.
It would make sense to include a thin bounding box around each rectangle (or any other suitable visual element) to show clearly when a subject has more than one alignment with the query.
Also a hint to the strand sense of the alignments would be informative.
I have more ideas and comments, which I'll share if you'd like me to.
Best,
N
Hi,
It would be nice if I can add custom callbacks, specifically in the onclick
method of the alignment table. After obtaining the BLAST results, the user may need to perform additional actions on those results - a callback would allow me to add this capability to my app. I added the following lines to the butDesc.onclick
function in order to achieve this:
if (self.opt.callback) {
self.opt.callback(this.alignment);
}
Hi Developer,
I am working on building a web server in which I have to generate a blast output and show it to users. The "blasterjs" can help in visualizing my output, but currently it requires user to submit BLAST output via <Input Type="file> tag. Is there any way, I can directly specify the BLAST output file path to JS, without the need of <Input Type="file>
Thank you
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.