From 8f67e1b778727542a0fe062d3378d236a9808344 Mon Sep 17 00:00:00 2001
From: turner <douglass.turner@gmail.com>
Date: Tue, 6 Aug 2024 16:57:38 -0400
Subject: [PATCH] clean up

---
 dev/issues/blocking-load.html |  92 ++++----
 dev/misc/ccr.html             | 419 +++++++++++++++++-----------------
 examples/events.html          | 127 ++++++-----
 3 files changed, 320 insertions(+), 318 deletions(-)
diff --git a/dev/issues/blocking-load.html b/dev/issues/blocking-load.html
index 454453950..24d2c3430 100644
--- a/dev/issues/blocking-load.html
+++ b/dev/issues/blocking-load.html
@@ -8,84 +8,74 @@
     <meta name="author" content="">
     <link rel="shortcut icon" href="https://igv.org/web/https://igv.org/web/img/favicon.ico">
     <title>await demo</title>
-    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
 </head>
 <body>
 <div id="controlDiv" style="border: 1px solid red; padding: 20px;">
-    <button id="loadButton" style="font-size: 24px" >Add Track, list names</button>
+    <button id="loadButton" style="font-size: 24px">Add Track, list names</button>
 </div>
 <div id="igvDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
 
-
 <script type="module">
-
-    import igv from "../../js";
-    $(document).ready(async () => {
-        console.log("ready")
-        window.igvBrowser = await igv.createBrowser(document.getElementById('igvDiv'), { genome: "hg19", locus: "chr8:128,306,385-129,129,504" })
+    import igv from "../../js/index.js"; // Assuming this is the correct path
+
+    // Use the DOMContentLoaded event to ensure the DOM is fully loaded
+    document.addEventListener('DOMContentLoaded', async () => {
+        console.log("DOM fully loaded and parsed");
+        window.igvBrowser = await igv.createBrowser(
+            document.getElementById('igvDiv'),
+            { genome: "hg19", locus: "chr8:128,306,385-129,129,504" }
+        );
     });
 
-    document.getElementById('loadButton').onclick = () => {
-
+    document.getElementById('loadButton').addEventListener('click', () => {
         displayAlignmentTrackFromUrl({
-                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 displayAlignmentTrackFromUrl({ trackHeight, dataURL, indexURL, name,  visibilityWindow, color }) {
+            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 displayAlignmentTrackFromUrl({ trackHeight, dataURL, indexURL, name, visibilityWindow, color }) {
         console.log("==== bam visibilityWindow: " + visibilityWindow);
         console.log("==== bam height: " + trackHeight);
         console.log("dataURL: " + dataURL);
 
-        const config =
-            {
-                name,
-                type: "alignment",
-                format: "bam",
-                url: dataURL,
-                indexURL,
-                sync: true,
-                order: Number.MAX_VALUE,
-                visibilityWindow,
-                height: trackHeight,
-                color
-            }
+        const config = {
+            name,
+            type: "alignment",
+            format: "bam",
+            url: dataURL,
+            indexURL,
+            sync: true,
+            order: Number.MAX_VALUE,
+            visibilityWindow,
+            height: trackHeight,
+            color
+        };
 
         console.log(JSON.stringify(config));
-
         console.log(" about to call 'await loadTrack(config)'");
 
         (async () => {
-
             try {
-                await window.igvBrowser.loadTrack(config)
+                await window.igvBrowser.loadTrack(config);
             } catch (error) {
-                console.log("=== load bed track error")
-                console.log(error)
-                return
+                console.log("=== load bed track error");
+                console.log(error);
+                return;
             }
 
-            console.log(" 'await loadTrack(config)' returned")
+            console.log(" 'await loadTrack(config)' returned");
 
-            for (let { track } of window.igvBrowser.trackViews) {
-                console.log(track.name)
+            for (const { track } of window.igvBrowser.trackViews) {
+                console.log(track.name);
             }
-
-        })()
+        })();
     }
-
-
 </script>
-
-
 </body>
-
 </html>
diff --git a/dev/misc/ccr.html b/dev/misc/ccr.html
index c64c4b2b0..a6fb96130 100644
--- a/dev/misc/ccr.html
+++ b/dev/misc/ccr.html
@@ -165,224 +165,215 @@ <h4>CCR BED12 Color Legend</h4>
 
 <script type="module">
 
-    import igv from "../../js/index.js";
-    var igvBrowser;
-
-    $(document).ready(function () {
-
-        var div = $("#igvDiv")[0],
-            options = {
-                showNavigation: true,
-                showIdeogram: true,
-                showRuler: true,
-                reference: {
-                    id: "hg19"
-                },
-                genome: "hg19",
-                locus: locus,
-                tracks: [
-                    {
-                        url: 'https://s3.us-east-2.amazonaws.com/ccrs/ccrs/ccrs.autosomes.v2.20180420.bw',
-                        name: 'CCRs',
-                        type: "wig",
-                        color: function(value) {
-                            var c;
-                            if (value < 90){
-                                c = "rgb(0,0,255)"
-                            }
-                            if (value >= 90){
-                                c = "rgb(255,165,0)"
-                            }
-                            if (value >= 95){
-                                c = "rgb(255,0,0)"
-                            }
-                            if (value >= 99){
-                                c = "rgb(139,0,0)"
-                            }
-                            return c
-                        },
-                        height: 200,
-                        visibilityWindow: 500000,
-                        order: 1
-                    },
-                    {
-                        url: 'https://s3.us-east-2.amazonaws.com/ccrs/ccrs/ccrs.xchrom.v2.20180420.bw',
-                        name: 'X-CCRs',
-                        type: "wig",
-                        color: function(value) {
-                            var c;
-                            if (value < 90){
-                                c = "rgb(0,0,255)"
-                            }
-                            if (value >= 90){
-                                c = "rgb(255,165,0)"
-                            }
-                            if (value >= 95){
-                                c = "rgb(255,0,0)"
-                            }
-                            if (value >= 99){
-                                c = "rgb(139,0,0)"
-                            }
-                            return c
-                        },
-                        height: 200,
-                        visibilityWindow: 500000,
-                        order: 2
-                    },
-                    {
-                        name: "CCRs in BED12",
-                        type: "annotation",
-                        format: "bed",
-                        sourceType: "file",
-                        url: "https://s3.us-east-2.amazonaws.com/ccrs/ccrs/ccrs.autosomes.v2.20180420.bed12.bed.gz",
-                        indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/ccrs/ccrs.autosomes.v2.20180420.bed12.bed.gz.tbi",
-                        order: 3,
-                        height: 50,
-                        visibilityWindow: 500000,
-                        displayMode: "EXPANDED"
-                    },
-                    {
-                        name: "X-CCRs in BED12",
-                        type: "annotation",
-                        format: "bed",
-                        sourceType: "file",
-                        url: "https://s3.us-east-2.amazonaws.com/ccrs/ccrs/ccrs.xchrom.v2.20180420.bed12.bed.gz",
-                        indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/ccrs/ccrs.xchrom.v2.20180420.bed12.bed.gz.tbi",
-                        order: 4,
-                        height: 50,
-                        visibilityWindow: 500000,
-                        displayMode: "EXPANDED"
-                    },
-                    {
-                        name: "Ensembl Transcripts",
-                        type: "annotation",
-                        format: "gtf",
-                        sourceType: "file",
-                        url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/Homo_sapiens.GRCh37.75.gtf.gz",
-                        indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/Homo_sapiens.GRCh37.75.gtf.gz.tbi",
-                        order: 5,
-                        visibilityWindow: 500000,
-                        displayMode: "COLLAPSED",
-                        autoHeight: true
-                    },
-                    {
-                        name: "Pfam domains",
-                        type: "annotation",
-                        format: "bed",
-                        sourceType: "file",
-                        url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/pfams.bed12.bed.gz",
-                        indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/pfams.bed12.bed.gz.tbi",
-                        order: 6,
-                        height: 50,
-                        color: "#019c01",
-                        visibilityWindow: 500000,
-                        displayMode: "COLLAPSED"
+    import igv from "../../js/index.js"
+
+    const options =
+        {
+            showNavigation: true,
+            showIdeogram: true,
+            showRuler: true,
+            genome: "hg19",
+            locus: locus,
+            tracks: [
+                {
+                    url: 'https://s3.us-east-2.amazonaws.com/ccrs/ccrs/ccrs.autosomes.v2.20180420.bw',
+                    name: 'CCRs',
+                    type: "wig",
+                    color: function(value) {
+                        var c;
+                        if (value < 90){
+                            c = "rgb(0,0,255)"
+                        }
+                        if (value >= 90){
+                            c = "rgb(255,165,0)"
+                        }
+                        if (value >= 95){
+                            c = "rgb(255,0,0)"
+                        }
+                        if (value >= 99){
+                            c = "rgb(139,0,0)"
+                        }
+                        return c
                     },
-                    {
-                        name: "ClinVar protein-changing pathogenics",
-                        type: "variant",
-                        format: "vcf",
-                        color: "#000000",
-                        url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/clinvar-functional-pathogenics.vcf.gz",
-                        indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/clinvar-functional-pathogenics.vcf.gz.tbi",
-                        order: 7,
-                        visibilityWindow: 500000
-                    },
-                    {
-                        name: "COSMIC Cancer-Related Coding Variants",
-                        type: "variant",
-                        format: "vcf",
-                        color: "#551a8b",
-                        url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/CosmicCodingMuts.vcf.gz",
-                        indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/CosmicCodingMuts.vcf.gz.tbi",
-                        order: 8,
-                        visibilityWindow: 500000
-                    },
-                    {
-                        name: "gnomAD protein-changing high quality variants",
-                        type: "variant",
-                        format: "vcf",
-                        color: "#bebebe",
-                        url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/gnomad-functional-pass.vcf.gz",
-                        indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/gnomad-functional-pass.vcf.gz.tbi",
-                        order: 9,
-                        visibilityWindow: 500000
-                    },
-                    {
-                        name: "gnomAD coverage at 10x",
-                        url:  "https://s3.us-east-2.amazonaws.com/ccrs/tracks/gnomad-coverage.bw",
-                        type: "wig",
-                        color: function(value) {
-                            var c;
-                            if (value < 0.5){
-                                c = "#ff8c00"
-                            }
-                            if (value >= 0.5){
-                                c = "#add8e6"
-                            }
-                            return c
-                        },
-                        height: 50,
-                        order: 10,
-                        visibilityWindow: 500000
-                    },
-                    {
-                        name: "Segmental Duplications",
-                        type: "annotation",
-                        format: "bed",
-                        sourceType: "file",
-                        url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/hgsegmental.bed.gz",
-                        indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/hgsegmental.bed.gz.tbi",
-                        order: 11,
-                        visibilityWindow: 500000,
-                        displayMode: "EXPANDED"
+                    height: 200,
+                    visibilityWindow: 500000,
+                    order: 1
+                },
+                {
+                    url: 'https://s3.us-east-2.amazonaws.com/ccrs/ccrs/ccrs.xchrom.v2.20180420.bw',
+                    name: 'X-CCRs',
+                    type: "wig",
+                    color: function(value) {
+                        var c;
+                        if (value < 90){
+                            c = "rgb(0,0,255)"
+                        }
+                        if (value >= 90){
+                            c = "rgb(255,165,0)"
+                        }
+                        if (value >= 95){
+                            c = "rgb(255,0,0)"
+                        }
+                        if (value >= 99){
+                            c = "rgb(139,0,0)"
+                        }
+                        return c
                     },
-                    {
-                        name: "Self-Chains at 90% Identity",
-                        type: "annotation",
-                        format: "bed",
-                        sourceType: "file",
-                        url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/self-chains.id90.bed.gz",
-                        indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/self-chains.id90.bed.gz.tbi",
-                        order: 12,
-                        visibilityWindow: 500000,
-                        displayMode: "EXPANDED"
+                    height: 200,
+                    visibilityWindow: 500000,
+                    order: 2
+                },
+                {
+                    name: "CCRs in BED12",
+                    type: "annotation",
+                    format: "bed",
+                    sourceType: "file",
+                    url: "https://s3.us-east-2.amazonaws.com/ccrs/ccrs/ccrs.autosomes.v2.20180420.bed12.bed.gz",
+                    indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/ccrs/ccrs.autosomes.v2.20180420.bed12.bed.gz.tbi",
+                    order: 3,
+                    height: 50,
+                    visibilityWindow: 500000,
+                    displayMode: "EXPANDED"
+                },
+                {
+                    name: "X-CCRs in BED12",
+                    type: "annotation",
+                    format: "bed",
+                    sourceType: "file",
+                    url: "https://s3.us-east-2.amazonaws.com/ccrs/ccrs/ccrs.xchrom.v2.20180420.bed12.bed.gz",
+                    indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/ccrs/ccrs.xchrom.v2.20180420.bed12.bed.gz.tbi",
+                    order: 4,
+                    height: 50,
+                    visibilityWindow: 500000,
+                    displayMode: "EXPANDED"
+                },
+                {
+                    name: "Ensembl Transcripts",
+                    type: "annotation",
+                    format: "gtf",
+                    sourceType: "file",
+                    url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/Homo_sapiens.GRCh37.75.gtf.gz",
+                    indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/Homo_sapiens.GRCh37.75.gtf.gz.tbi",
+                    order: 5,
+                    visibilityWindow: 500000,
+                    displayMode: "COLLAPSED",
+                    autoHeight: true
+                },
+                {
+                    name: "Pfam domains",
+                    type: "annotation",
+                    format: "bed",
+                    sourceType: "file",
+                    url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/pfams.bed12.bed.gz",
+                    indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/pfams.bed12.bed.gz.tbi",
+                    order: 6,
+                    height: 50,
+                    color: "#019c01",
+                    visibilityWindow: 500000,
+                    displayMode: "COLLAPSED"
+                },
+                {
+                    name: "ClinVar protein-changing pathogenics",
+                    type: "variant",
+                    format: "vcf",
+                    color: "#000000",
+                    url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/clinvar-functional-pathogenics.vcf.gz",
+                    indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/clinvar-functional-pathogenics.vcf.gz.tbi",
+                    order: 7,
+                    visibilityWindow: 500000
+                },
+                {
+                    name: "COSMIC Cancer-Related Coding Variants",
+                    type: "variant",
+                    format: "vcf",
+                    color: "#551a8b",
+                    url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/CosmicCodingMuts.vcf.gz",
+                    indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/CosmicCodingMuts.vcf.gz.tbi",
+                    order: 8,
+                    visibilityWindow: 500000
+                },
+                {
+                    name: "gnomAD protein-changing high quality variants",
+                    type: "variant",
+                    format: "vcf",
+                    color: "#bebebe",
+                    url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/gnomad-functional-pass.vcf.gz",
+                    indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/gnomad-functional-pass.vcf.gz.tbi",
+                    order: 9,
+                    visibilityWindow: 500000
+                },
+                {
+                    name: "gnomAD coverage at 10x",
+                    url:  "https://s3.us-east-2.amazonaws.com/ccrs/tracks/gnomad-coverage.bw",
+                    type: "wig",
+                    color: function(value) {
+                        var c;
+                        if (value < 0.5){
+                            c = "#ff8c00"
+                        }
+                        if (value >= 0.5){
+                            c = "#add8e6"
+                        }
+                        return c
                     },
-                    {
-                        name: "gnomAD: all variants",
-                        type: "variant",
-                        format: "vcf",
-                        color: "#bebebe",
-                        url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/gnomad-vep-vt.vcf.gz",
-                        indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/gnomad-vep-vt.vcf.gz.tbi",
-                        order: 13,
-                        visibilityWindow: 500000
+                    height: 50,
+                    order: 10,
+                    visibilityWindow: 500000
+                },
+                {
+                    name: "Segmental Duplications",
+                    type: "annotation",
+                    format: "bed",
+                    sourceType: "file",
+                    url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/hgsegmental.bed.gz",
+                    indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/hgsegmental.bed.gz.tbi",
+                    order: 11,
+                    visibilityWindow: 500000,
+                    displayMode: "EXPANDED"
+                },
+                {
+                    name: "Self-Chains at 90% Identity",
+                    type: "annotation",
+                    format: "bed",
+                    sourceType: "file",
+                    url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/self-chains.id90.bed.gz",
+                    indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/self-chains.id90.bed.gz.tbi",
+                    order: 12,
+                    visibilityWindow: 500000,
+                    displayMode: "EXPANDED"
+                },
+                {
+                    name: "gnomAD: all variants",
+                    type: "variant",
+                    format: "vcf",
+                    color: "#bebebe",
+                    url: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/gnomad-vep-vt.vcf.gz",
+                    indexURL: "https://s3.us-east-2.amazonaws.com/ccrs/tracks/gnomad-vep-vt.vcf.gz.tbi",
+                    order: 13,
+                    visibilityWindow: 500000
+                },
+                {
+                    url: 'https://s3.us-east-2.amazonaws.com/ccrs/tracks/gerp.bw',
+                    name: 'GERP++',
+                    type: "wig",
+                    color: function(value) {
+                        var c;
+                        if (value < 1.7){
+                            c = "rgb(0,0,255)"
+                        }
+                        if (value >= 1.7){
+                            c = "rgb(255,0,0)"
+                        }
+                        return c
                     },
-                    {
-                        url: 'https://s3.us-east-2.amazonaws.com/ccrs/tracks/gerp.bw',
-                        name: 'GERP++',
-                        type: "wig",
-                        color: function(value) {
-                            var c;
-                            if (value < 1.7){
-                                c = "rgb(0,0,255)"
-                            }
-                            if (value >= 1.7){
-                                c = "rgb(255,0,0)"
-                            }
-                            return c
-                        },
-                        order: 14
-                    }
-                ]
-            };
-
-        igv.createBrowser(div, options)
-            .then(function (b) {
-                igvBrowser = b;
-            })
-
-    });
+                    order: 14
+                }
+            ]
+        };
+
+    let igvBrowser
+    igv.createBrowser(document.getElementById('igvDiv'), options)
+        .then(b => igvBrowser = b)
 
     function load() {
 
diff --git a/examples/events.html b/examples/events.html
index 56559b994..e8009b27a 100644
--- a/examples/events.html
+++ b/examples/events.html
@@ -11,14 +11,15 @@
     <link rel="shortcut icon" href="//igv.org/web/img/favicon.ico">
     <title>Integrative Genomics Viewer: Events</title>
 
-    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+    <!-- Bootstrap 5.3 - CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
 </head>
 
-<body role="document">
+<body>
 
 <div class="container">
     <div class="row">
-        <div class="col-md-12">
+        <div class="col-md">
             <h2>IGV.js Example - Events</h2>
             <p class="lead">Use IGV's events to extend default behavior and improve integration with other parts of your app.</p>
 
@@ -34,43 +35,43 @@ <h2>IGV.js Example - Events</h2>
                 <tr>
                     <td>locuschange</td>
                     <td>
-                        <p>Fired whenever the viewer locus changes.</p><br/>
+                        <p>Fired whenever the viewer locus changes.</p><br />
                         <strong>Note: as of release 2.10.0 an array of reference frames is passed to the handler to account
-                        for multi-locus views.</strong>
-                        <strong>Arguments Passed to Handler Fn:  </strong>
-                        <div class="well">
-                            <dl class="dl-horizontal">
-                                <dt>referenceFrameList</dt>
-                                <dd>[{chr, start, end, label}, {chr, start, end, label}, ...]</dd>
+                            for multi-locus views.</strong>
+                        <strong>Arguments Passed to Handler Fn: </strong>
+                        <div class="border p-2 mb-3">
+                            <dl class="row">
+                                <dt class="col-sm-3">referenceFrameList</dt>
+                                <dd class="col-sm-9">[{chr, start, end, label}, {chr, start, end, label}, ...]</dd>
                             </dl>
                         </div>
                     </td>
-                    <td><a href="events/locus-change.html">Track locus in page URL</a></td>
+                    <td><a href="./events/locus-change.html">Track locus in page URL</a></td>
                 </tr>
                 <tr>
                     <td>trackclick</td>
                     <td>
                         <p>Fired whenever the user clicks on a track feature - use this event to customize popover behavior/appearance.
-                            <ul>
-                                <li>The handler function can return a <code>string</code> to override the default popover contents.</li>
-                                <li>If the handler function returns <code>false</code> the default popup will not be shown.</li>
-                                <li>If the handler function returns <code>undefined</code> then the default popup will be shown.</li>
-                            </ul>
-                        </p><br/>
+                        <ul>
+                            <li>The handler function can return a <code>string</code> to override the default popover contents.</li>
+                            <li>If the handler function returns <code>false</code> the default popup will not be shown.</li>
+                            <li>If the handler function returns <code>undefined</code> then the default popup will be shown.</li>
+                        </ul>
+                        </p><br />
 
                         <strong>Arguments Passed to Handler Fn:</strong>
-                        <div class="well">
-                            <dl class="dl-horizontal">
-                                <dt>track</dt>
-                                <dd>{object} trackView track object</dd>
-                                <dt>popupData</dt>
-                                <dd>{object[]} data that would normally be shown in popup</dd>
+                        <div class="border p-2 mb-3">
+                            <dl class="row">
+                                <dt class="col-sm-3">track</dt>
+                                <dd class="col-sm-9">{object} trackView track object</dd>
+                                <dt class="col-sm-3">popupData</dt>
+                                <dd class="col-sm-9">{object[]} data that would normally be shown in popup</dd>
                             </dl>
                         </div>
                     </td>
                     <td>
-                        <a href="events/custom-track-popover.html">Custom Track Popover</a><br/>
-                        <a href="events/custom-track-click.html">Popover Track Click Handling</a>
+                        <a href="./events/custom-track-popover.html">Custom Track Popover</a><br />
+                        <a href="./events/custom-track-click.html">Popover Track Click Handling</a>
                     </td>
                 </tr>
                 <tr>
@@ -83,31 +84,29 @@ <h2>IGV.js Example - Events</h2>
                 <tr>
                     <td>trackremoved</td>
                     <td>
-                        <p>Fired whenever a track is removed from the viewer</p><br/>
+                        <p>Fired whenever a track is removed from the viewer</p><br />
 
                         <strong>Arguments Passed to Handler Fn:</strong>
-                        <div class="well">
-                            <dl class="dl-horizontal">
-                                <dt>track</dt>
-                                <dd>{object} removed track</dd>
+                        <div class="border p-2 mb-3">
+                            <dl class="row">
+                                <dt class="col-sm-3">track</dt>
+                                <dd class="col-sm-9">{object} removed track</dd>
                             </dl>
                         </div>
                     </td>
                     <td>
-                        <a href="events/track-reorder.html">Track Reorder</a><br/>
+                        <a href="./events/track-reorder.html">Track Reorder</a><br />
                     </td>
-                    <td></td>
-                </tr>
                 <tr>
                     <td>trackorderchanged</td>
                     <td>
-                        <p>Fired whenever the track order is changed, either by (1) dragging, (2) adding a new track, or (3) removing a track</p><br/>
+                        <p>Fired whenever the track order is changed, either by (1) dragging, (2) adding a new track, or (3) removing a track</p><br />
 
                         <strong>Arguments Passed to Handler Fn:</strong>
-                        <div class="well">
-                            <dl class="dl-horizontal">
-                                <dt>trackNames</dt>
-                                <dd>{Array} ordered list of track names</dd>
+                        <div class="border p-2 mb-3">
+                            <dl class="row">
+                                <dt class="col-sm-3">trackNames</dt>
+                                <dd class="col-sm-9">{Array} ordered list of track names</dd>
                             </dl>
                         </div>
                     </td>
@@ -118,33 +117,55 @@ <h2>IGV.js Example - Events</h2>
         </div>
     </div>
     <div class="row">
-        <div class="col-md-12">
-            <h4 class="page-header">Subscribe to an Event</h4>
-            <code>on(&lt;event name&gt;, &lt;handler fn&gt;, [this])</code><br/>
+        <div class="col-md">
+            <h4 class="my-4">Subscribe to an Event</h4>
+            <code>on(&lt;event name&gt;, &lt;handler fn&gt;, [this])</code><br />
             <pre>
-    var div = $("#igvDiv")[0],
-        options = {
-            ...
-        };
+    const div = document.getElementById('igvDiv');
+    const options = {
+        ...
+    };
 
-    var browser = igv.createBrowser(div, options);
+    const browser = igv.createBrowser(div, options);
 
-    var onLocusChange = function (referenceFrame) {
-        alert("Locus changed to: " + referenceFrame.label);
+    const onLocusChange = (referenceFrame) => {
+        alert(`Locus changed to: ${referenceFrame.label}`);
     };
 
     browser.on("locuschange", onLocusChange);
-            </pre>
+                </pre>
 
-            <h4 class="page-header">Unsubscribe Handler</h4>
-            <code>un(&lt;event name&gt;, &lt;handler fn&gt;)</code><br/>
+            <h4 class="my-4">Unsubscribe Handler</h4>
+            <code>un(&lt;event name&gt;, &lt;handler fn&gt;)</code><br />
             <pre>
     browser.un("locuschange", onLocusChange);
-            </pre>
+                </pre>
         </div>
     </div>
 </div>
 
+<script type="module">
+
+    import igv from "../js/index.js"; // Make sure the path is correct
+
+    (async () => {
+        const browser = await igv.createBrowser(document.getElementById('igvDiv'), {});
+
+        const onLocusChange = referenceFrameList => {
+
+            for (const { label } of referenceFrameList) {
+                console.log(`Locus changed to: ${label}`);
+            }
+
+        }
+
+        // Subscribe to the locuschange event
+        browser.on("locuschange", onLocusChange);
+
+    })()
+
+</script>
+
 </body>
 
-</html>
\ No newline at end of file
+</html>
