htsget/htsget-igvjs.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="Jim Robinson" name="author">
    <link href=img/favicon.ico rel="shortcut icon">
    <title>htsget igv.js</title>

    <!-- IGV JS -->
    <script src="https://cdn.jsdelivr.net/npm/igv@2.13.11/dist/igv.min.js"></script>

</head>

<body>

<h1>htsget igv.js example</h1>

<p>
    See <a href="https://samtools.github.io/hts-specs/htsget.html" target="_blank">hts-specs </a>
</p>

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

<script type="text/javascript">

    var div = document.getElementById("igv-div");
    var options = {
        genome: "hg19",
        locus: "chr20:6,067,166-6,092,516",
        tracks: [
            // FIXME It seems some issue with igv.js loading VCF through htsget. Getting error "Invalid VCF file: missing fileformat line:" ~victor
            // {
            //     type: 'variant',
            //     name: 'Variants - HG002_GIAB.filtered.vcf.gz',
            //     sourceType: 'htsget',
            //     format: "vcf",
            //     url: 'http://localhost:3100/variants/local/vcf/HG002_GIAB.filtered',
            //     height: 50
            // },
            {
                type: 'alignment',
                name: 'Alignments - htsnexus_test_NA12878.bam',
                sourceType: 'htsget',
                format: 'bam',
                url: 'http://localhost:3100/reads/local/bam/htsnexus_test_NA12878'
            }
        ]
    };

    igv.createBrowser(div, options)

        .then(function (browser) {
            console.log("Created IGV browser");
        })

</script>

</body>

</html>