2
$\begingroup$

I'm trying to use igv.js for a very simple visualization of some genomic alignments, but I can't get past the first step. I have a FASTA file that I want to use as the reference, but igv.js consistently gives an error when I try to load that file. The file is a valid FASTA (have tested others from other sources to be sure - same error), and I can specify a remote https:// file, but not a local file.

Here's the HTML page I'm working on:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Local FASTA Test</title>

    <!-- IGV JS-->
    <script src="https://igv.org/web/release/2.1.0/dist/igv.min.js"></script>

</head>

<body>

    <h1>Local File Test</h1>

    <div id="igv-div" style="padding-top: 10px;padding-bottom: 10px; border:1px solid lightgray"></div>

    <script type="text/javascript">
        var igvDiv = document.getElementById("igv-div");
        var options = {
            reference: {
                fastaURL: "test.fasta"
            }
        };

        igv.createBrowser(igvDiv, options)
            .then(function(browser) {
                console.log("Created IGV browser");
            })
    </script>

</body>

</html>

and here's the FASTA file

>HSBGPG Human gene for bone gla protein (BGP)
GGCAGATTCCCCCTAGACCCGCCCGCACCATGGTCAGGCATGCCCCTCCTCATCGCTGGGCACAGCCCAGAGGGT
ATAAACAGTGCTGGAGGCTGGCGGGGCAGGCCAGCTGAGTCCTGAGCAGCAGCCCAGCGCAGCCACCGAGACACC
ATGAGAGCCCTCACACTCCTCGCCCTATTGGCCCTGGCCGCACTTTGCATCGCTGGCCAGGCAGGTGAGTGCCCC
CACCTCCCCTCAGGCCGCATTGCAGTGGGGGCTGAGAGGAGGAAGCACCATGGCCCACCTCTTCTCACCCCTTTG
GCTGGCAGTCCCTTTGCAGTCTAACCACCTTGTTGCAGGCTCAATCCATTTGCCCCAGCTCTGCCCTTGCAGAGG
GAGAGGAGGGAAGAGCAAGCTGCCCGAGACGCAGGGGAAGGAGGATGAGGGCCCTGGGGATGAGCTGGGGTGAAC
CAGGCTCCCTTTCCTTTGCAGGTGCGAAGCCCAGCGGTGCAGAGTCCAGCAAAGGTGCAGGTATGAGGATGGACC
TGATGGGTTCCTGGACCCTCCCCTCTCACCCTGGTCCCTCAGTCTCATTCCCCCACTCCTGCCACCTCCTGTCTG
GCCATCAGGAAGGCCAGCCTGCTCCCCACCTGATCCTCCCAAACCCAGAGCCACCTGATGCCTGCCCCTCTGCTC
CACAGCCTTTGTGTCCAAGCAGGAGGGCAGCGAGGTAGTGAAGAGACCCAGGCGCTACCTGTATCAATGGCTGGG
GTGAGAGAAAAGGCAGAGCTGGGCCAAGGCCCTGCCTCTCCGGGATGGTCTGTGGGGGAGCTGCAGCAGGGAGTG
GCCTCTCTGGGTTGTGGTGGGGGTACAGGCAGCCTGCCCTGGTGGGCACCCTGGAGCCCCATGTGTAGGGAGAGG
AGGGATGGGCATTTTGCACGGGGGCTGATGCCACCACGTCGGGTGTCTCAGAGCCCCAGTCCCCTACCCGGATCC
CCTGGAGCCCAGGAGGGAGGTGTGTGAGCTCAATCCGGACTGTGACGAGTTGGCTGACCACATCGGCTTTCAGGA
GGCCTATCGGCGCTTCTACGGCCCGGTCTAGGGTGTCGCTCTGCTGGCCTGGCCGGCAACCCCAGTTCTGCTCCT
CTCCAGGCACCCTTCTTTCCTCTTCCCCTTGCCCTTGCCCTGACCTCCCAGCCCTATGGATGTGGGGTCCCCATC
ATCCCAGCTGCTCCCAAATAAACTCCAGAAG
Improve this question
$\endgroup$
3
  • $\begingroup$ Welcome to the site. Have you reached to the IGV.js developers? What is the "error" that you get $\endgroup$
    – Bioathlete
    Apr 28, 2019 at 4:29
  • $\begingroup$ I have not reached out to the developers - I want sure where to do that. The error says "cannot find chromosomename of undefined" or something similar. The key being "undefined"which I interpret as, it did not load the specified file. $\endgroup$
    – KirkD-CO
    Apr 28, 2019 at 13:21
  • $\begingroup$ The exact error I get is a dialog box stating: Cannot read property 'getHomeChromosomeName' of undefined $\endgroup$
    – KirkD-CO
    Apr 29, 2019 at 15:44

2 Answers 2

Reset to default
2
$\begingroup$

It looks as though the script is looking for a URL (fastaURL) so you could try specifying the file as file://directory/test.fasta

By default though, javascript cannot read local files from disk for security reasons. Are you sure it is even possible to specify a local file in your script in this way? If yes, then the problem is likely that you need to specify the path correctly.

Improve this answer
$\endgroup$
3
  • $\begingroup$ Thanks for the comment. I tried specifying the file as you suggested, but no luck. Perhaps it is the JavaScript limitation. I suppose I respect why that design decision is made, but for in internal use only purpose, it seems limiting. $\endgroup$
    – KirkD-CO
    Apr 29, 2019 at 15:44
  • $\begingroup$ One way to get round it is to host the web page and the FASTA file together in your own local webserver directory. OSX has a built in local webserver that you can switch on without too much difficulty - then open the page from your browser using localhost/test.html You would then be able to refer to the FASTA file as test.fasta as your script does now (URL relative to the calling page). $\endgroup$
    – Jay Moore
    Apr 29, 2019 at 19:25
  • $\begingroup$ That did the trick. Both files must be on a server and it does indeed work. $\endgroup$
    – KirkD-CO
    May 10, 2019 at 4:22
1
$\begingroup$

just stumbled on this. I'm the developer of igv.js. Please feel free to open issues and questions on our git forum, I don't often have time to browse other forums.

Browsers will not allow loading of local files by file path in javascript, if they did it would be a gigantic security hole. This restriction includes "file://" urls. Local files can be loaded by user action (clicking a button), that is supported in igv.js but there is no button for it as igv.js is designed as a component to embed in pages, not an application by itself. For an example see igv.org/app (https://github.com/igvteam/igv-webapp), a minimal application wrapping igv.js. You'll find "local file" options for genomes and tracks there.

Improve this answer
$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.