dev/blocking-await.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="https://igv.org/web/img/favicon.ico">
    <title>await demo</title>
    <script src="http://igv.org/web/snapshot/dist/igv.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

    <script type="text/javascript">

        $(document).ready(async function () {
            console.log("ready");
            window.igvBrowser = await igv.createBrowser(document.getElementById('igvDiv'), {
                genome: "hg19",
                locus: "chr8:128,306,385-129,129,504"
            })
        });

        function doTest() {
            displayAlignmentTrackFromUrl({
                payload: {
                    trackHeight: 500,
                    dataURL: 'https://s3.amazonaws.com/1000genomes/phase3/data/HG00096/exome_alignment/HG00096.mapped.ILLUMINA.bwa.GBR.exome.20120522.bam',
                    indexURL: 'https://s3.amazonaws.com/1000genomes/phase3/data/HG00096/exome_alignment/HG00096.mapped.ILLUMINA.bwa.GBR.exome.20120522.bam.bai',
                    name: 'HG00096_' + Math.random(),
                    visibilityWindow: 1000000,
                    color: 'blue'
                }
            })
            return "doTest returns";
        }

        function listTrackNames() {
            var count = igvBrowser.trackViews.length;
            for (var i = 0; i < count; i++) {
                var trackName = igvBrowser.trackViews[i].track.name;
                console.log(trackName);
            } // for i
        } // listTrackNames


        async function displayAlignmentTrackFromUrl(msg) {
            //checkSignature(self, "displayAlignmentTrackFromUrl")

            var trackName = msg.payload.name;
            var trackHeight = msg.payload.trackHeight;
            var dataURL = msg.payload.dataURL;
            var visibilityWindow = msg.payload.visibilityWindow;

            console.log("==== bam visibilityWindow: " + visibilityWindow);
            console.log("==== bam height: " + trackHeight);
            console.log("dataURL: " + dataURL)

            var indexURL = msg.payload.indexURL;
            var color = msg.payload.color;
            var config = {
                name: trackName,
                type: "alignment",
                format: "bam",
                url: dataURL,
                indexURL: indexURL,
                sync: true,
                order: Number.MAX_VALUE,
                visibilityWindow: visibilityWindow,
                height: trackHeight,
                color: color
            };
            console.log(JSON.stringify(config));

            try {
                console.log(" about to call 'await loadTrack(config)'");
                await igvBrowser.loadTrack(config);
                console.log(" 'await loadTrack(config)' returned");
                listTrackNames();
                //self.hub.send({cmd: msg.callback, status: "success", callback: "", payload: ""});
            } catch (error) {
                console.log("=== load bed track error")
                console.log(error)
                // self.hub.send({cmd: msg.callback, status: "failure", callback: "", payload: error});
            }

        } // displayAlignmentTrackFromUrl

    </script>

</head>
<body>
<div id="controlDiv" style="border: 1px solid red; padding: 20px;">
    <button style="font-size: 24px" onclick="loadAndList()">Add Track, list names</button>
</div>
<div id="igvDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
</body>

</html>