Upload BLAST output via String dont recognize alignments

[P3df4r]

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.

[Aditya-Upa]

i read the README file and converted the BLAST output into a string using JSON.stringify function and fed it to the blasterjs component like so :
var alignments = {blastResults};
const instance = new blasterjs({
//input: 'blastinput',
string: alignments,
multipleAlignments: 'blast-multiple-alignments',
alignmentsTable: 'blast-alignments-table',
singleAlignment: 'blast-single-alignment',
});
}, []);

return (

{/* */}

);
But upon doing this i am receiving an error of invalid blast output file format. Is this not how to use it? sorry I am new to all this so please help me out!

[P3df4r]

Hi @Aditya-Upa ,

I don't remember in the README allow JSON format to input. On the site, the recommendation is outfmt 0 or 5 (XML format) (More details: https://www.ncbi.nlm.nih.gov/books/NBK279684/table/appendices.T.options_common_to_all_blast/).

In my code, 'var alignments = {blastResults}' accept the blast output in format descript previously.

If you have any questions, send me an email or message.

[Aditya-Upa]

Thank you so much! This works ! One last query; can you tell me how to include the html2canvas node module in node_modules/biojs-vis-blasterjs/lib/index.js ? i did it like this :
var blasterjs;
var Class = require('js-class');
var html2canvas = require('html2canvas');
module.exports = blasterjs = Class(
/** @Lends Biojs.blasterjs# */
{ ...rest of the code... }
Still I am getting ReferenceError: html2canvas is not defined
Can you help me with that? thanks once again !

[P3df4r]

Hi @Aditya-Upa ,

I dont know if necessary using var in index.js. I tried install html2canvas to npm, but dont work. I copied the html2canva.js in node_modules/biojs-vis-blasterjs/lib/ and worked, no need to change any code.

Other problem was the BlasterJS package. Was the same steps (Copy .js and move to node_modules/biojs-vis-blasterjs/lib/)

If you have any questions, send me an email or message.

[Aditya-Upa]

i copied the html2canvas.js in the lib folder. Despite that i am facing the same error as before which is :
Unhandled Runtime Error
ReferenceError: html2canvas is not defined

Call Stack
downloadAlignmentsImg
node_modules/biojs-vis-blasterjs/lib/index.js (916:0)
HTMLButtonElement.eval
node_modules/biojs-vis-blasterjs/lib/index.js (877:0)

my index.js file in the biojs-vis-blasterjs/lib directory looks like this :

var blasterjs;
var Class = require('js-class');
//var html2canvas = require('html2canvas');

module.exports = blasterjs = Class(
    /** @lends Biojs.blasterjs# */
    {  ... })

[P3df4r]

Hi @Aditya-Upa ,

I don't modified index.js. Try install the html2canvas to the NPM (https://html2canvas.hertzen.com/).

[Aditya-Upa]

I didn't make any modifications to the index file present in the lib directory of biojs-vis-blasterjs. I deleted the node modules in my next js app and reinstalled all modules including the biojs-vis-blasterjs module and the html2canvas module. I even tried copying https://html2canvas.hertzen.com/dist/html2canvas.js into the lib directory. Neither method worked. I am getting Unhandled Runtime Error
ReferenceError: html2canvas is not defined.