dev/localGenome.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">
    <link href=../img/favicon.ico rel="shortcut icon">
    <title>IGV - Dev</title>

    <!-- IGV CSS -->

    <link href="css/dev.css" rel="stylesheet" type="text/css"/>


</head>
<body>

<div>
    <label>Fasta file: <input id="fasta" type="file"/></label>
    <label>Index file: <input id="index" type="file"/></label>
    <button id="submitGenomeBtn">Load genome</button>
</div>

<div>
    <select id="selectGenomeBtn">
        <option value="hg19">hg19</option>
        <option value="danRer10">danRer10</option>
    </select>

</div>

<div id="myDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto">
</div>


<script type="text/javascript">

</script>
<script type="module">

    import igv from "../js/api.js";

    const div = document.getElementById("myDiv");

    const options = {
        genome: "hg19"
    };

    let browser;
    igv.createBrowser(div, options)
        .then(function (b) {
            browser = b;
        })


    function submitGenome() {

        var fasta = document.getElementById('fasta').files[0];
        var index = document.getElementById('index').files[0];
        browser.loadGenome({
            fastaURL: fasta,
            indexURL: index
        });
    }

    function selectGenome() {
        console.log(document.getElementById("selectGenomeBtn").value);
        browser.loadGenome(document.getElementById("selectGenomeBtn").value)
            .then(function (genome) {
                console.log("genome " + genome.id + " loaded");
            })
    }

    document.getElementById("selectGenomeBtn").addEventListener("change", selectGenome);
    document.getElementById("submitGenomeBtn").addEventListener("click", submitGenome);


</script>

</body>

</html>