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, I am not formiliar with Jave. Just wondering is there any example to use BlasterJS in R (shiny app) or python. Thank you!

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, 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

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

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

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&amp;auml;ffer, Jinghui Zhang, Zheng Zhang, Webb Miller, and David J. Lipman (1997), &quot;Gapped BLAST and PSI-BLAST: a new generation of protein database search programs&quot;, 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.

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

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

What is the license of Blasterjs?

LICENSE says it's GPL-3.

In index.js it says MIT.

(I'd much prefer MIT, so I can bundle the library with my code more easily!)

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