Skip to content

Commit

Permalink
Update examples to use esm imports
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrobinso
jrobinso committed Mar 20, 2023
1 parent f4fde69 commit bc6e5d7
Show file tree
Hide file tree
Showing 22 changed files with 665 additions and 692 deletions.
7 changes: 3 additions & 4 deletions examples/circular-view.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@
<meta charset="UTF-8">
<title>Circular Genome View</title>

<!-- IGV JS -->
<script src="../dist/igv.min.js"></script>

<!-- React (required for circular view) -->
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
Expand Down Expand Up @@ -43,7 +40,9 @@ <h2>Circular genome view</h2>
</div>


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

import igv from "../dist/igv.esm.min.js"


// Start igv.js and create regions
Expand Down
121 changes: 60 additions & 61 deletions examples/copyNumber.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,6 @@
<link href=img/favicon.ico rel="shortcut icon">
<title>igv.js</title>

<!-- IGV JS -->
<script src="../dist/igv.min.js"></script>

</head>

<body>
Expand All @@ -19,7 +16,9 @@ <h1>Segmented Copy Number</h1>

Segmented copy number ("seg" format) with
<ul>
<li>Explicit sample list - TCGA-06-0168-01A-02D-0236-01, TCGA-02-0115-01A-01D-0193-01, TCGA-02-2485-01A-01D-0784-01, TCGA-06-0151-01A-01D-0236-01</li>
<li>Explicit sample list - TCGA-06-0168-01A-02D-0236-01, TCGA-02-0115-01A-01D-0193-01,
TCGA-02-2485-01A-01D-0784-01, TCGA-06-0151-01A-01D-0236-01
</li>
<li>No index</li>
<li>Index with no visibiliy window (loads by whole chromosome)</li>
<li>Index with visibility window of 100 MB</li>
Expand All @@ -30,63 +29,63 @@ <h1>Segmented Copy Number</h1>

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

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function () {

const version = igv.version()
console.log("Using IGV version: " + version)

const igvDiv = document.getElementById("igv-div")
const options =
{
genome: "hg19",
showSampleNames: true,
tracks: [
{
name: "Explicit Samples",
type: "seg",
format: "seg",
samples: [
"TCGA-06-0168-01A-02D-0236-01",
"TCGA-02-0115-01A-01D-0193-01",
"TCGA-02-2485-01A-01D-0784-01",
"TCGA-06-0151-01A-01D-0236-01"],
url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
height: 100
},
{
name: "Segmented Copy Number",
type: "seg",
format: "seg",
url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
},


{
name: "Indexed",
type: "seg",
format: "seg",
url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
indexURL: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz.tbi"
},
{
name: "Indexed with visibility window",
type: "seg",
format: "seg",
url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
indexURL: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz.tbi",
visibilityWindow: "100000000"
},
]
}


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

import igv from "../dist/igv.esm.min.js"

const version = igv.version()
console.log("Using IGV version: " + version)

const igvDiv = document.getElementById("igv-div")
const options =
{
genome: "hg19",
showSampleNames: true,
tracks: [
{
name: "Explicit Samples",
type: "seg",
format: "seg",
samples: [
"TCGA-06-0168-01A-02D-0236-01",
"TCGA-02-0115-01A-01D-0193-01",
"TCGA-02-2485-01A-01D-0784-01",
"TCGA-06-0151-01A-01D-0236-01"],
url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
height: 100
},
{
name: "Segmented Copy Number",
type: "seg",
format: "seg",
url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
},


{
name: "Indexed",
type: "seg",
format: "seg",
url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
indexURL: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz.tbi"
},
{
name: "Indexed with visibility window",
type: "seg",
format: "seg",
url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
indexURL: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz.tbi",
visibilityWindow: "100000000"
},
]
}


igv.createBrowser(igvDiv, options)
.then(function (browser) {
console.log("Created IGV browser")
})


</script>

Expand Down
102 changes: 50 additions & 52 deletions examples/cram-vcf.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@
<link href=img/favicon.ico rel="shortcut icon">
<title>igv.js</title>

<!-- IGV JS -->
<script src="../dist/igv.min.js"></script>
</head>

<body>
Expand All @@ -16,65 +14,65 @@ <h1>VCF variants and CRAM alignments</h1>

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

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

document.addEventListener("DOMContentLoaded", function () {
import igv from "../dist/igv.esm.min.js"

var options =
{
// Example of fully specifying a reference . We could alternatively use "genome: 'hg19'"
reference:
const options =
{
// Example of fully specifying a reference . We could alternatively use "genome: 'hg19'"
reference:
{
id: "hg19",
fastaURL: "https://s3.amazonaws.com/igv.broadinstitute.org/genomes/seq/1kg_v37/human_g1k_v37_decoy.fasta",
cytobandURL: "https://s3.amazonaws.com/igv.broadinstitute.org/genomes/seq/b37/b37_cytoband.txt"
},
locus: "8:128,750,948-128,751,025",
tracks:
[
{
id: "hg19",
fastaURL: "https://s3.amazonaws.com/igv.broadinstitute.org/genomes/seq/1kg_v37/human_g1k_v37_decoy.fasta",
cytobandURL: "https://s3.amazonaws.com/igv.broadinstitute.org/genomes/seq/b37/b37_cytoband.txt"
name: "Phase 3 WGS variants",
type: "variant",
format: "vcf",
url: "https://s3.amazonaws.com/1000genomes/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5b.20130502.sites.vcf.gz",
indexURL: "https://s3.amazonaws.com/1000genomes/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5b.20130502.sites.vcf.gz.tbi"
},
locus: "8:128,750,948-128,751,025",
tracks:
[
{
name: "Phase 3 WGS variants",
type: "variant",
format: "vcf",
url: "https://s3.amazonaws.com/1000genomes/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5b.20130502.sites.vcf.gz",
indexURL: "https://s3.amazonaws.com/1000genomes/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5b.20130502.sites.vcf.gz.tbi"
},
{
type: 'alignment',
format: 'cram',
url: 'https://s3.amazonaws.com/1000genomes/phase3/data/HG00096/exome_alignment/HG00096.mapped.ILLUMINA.bwa.GBR.exome.20120522.bam.cram',
indexURL: 'https://s3.amazonaws.com/1000genomes/phase3/data/HG00096/exome_alignment/HG00096.mapped.ILLUMINA.bwa.GBR.exome.20120522.bam.cram.crai',
name: 'HG00096',
sort: {
chr: "chr8",
position: 128750986,
option: "BASE",
direction: "ASC"
},
height: 600
{
type: 'alignment',
format: 'cram',
url: 'https://s3.amazonaws.com/1000genomes/phase3/data/HG00096/exome_alignment/HG00096.mapped.ILLUMINA.bwa.GBR.exome.20120522.bam.cram',
indexURL: 'https://s3.amazonaws.com/1000genomes/phase3/data/HG00096/exome_alignment/HG00096.mapped.ILLUMINA.bwa.GBR.exome.20120522.bam.cram.crai',
name: 'HG00096',
sort: {
chr: "chr8",
position: 128750986,
option: "BASE",
direction: "ASC"
},
height: 600
},

{
name: "Genes",
type: "annotation",
format: "bed",
url: "https://s3.amazonaws.com/igv.broadinstitute.org/annotations/hg19/genes/refGene.hg19.bed.gz",
indexURL: "https://s3.amazonaws.com/igv.broadinstitute.org/annotations/hg19/genes/refGene.hg19.bed.gz.tbi",
order: Number.MAX_VALUE,
visibilityWindow: 300000000,
displayMode: "EXPANDED"
}
]

{
name: "Genes",
type: "annotation",
format: "bed",
url: "https://s3.amazonaws.com/igv.broadinstitute.org/annotations/hg19/genes/refGene.hg19.bed.gz",
indexURL: "https://s3.amazonaws.com/igv.broadinstitute.org/annotations/hg19/genes/refGene.hg19.bed.gz.tbi",
order: Number.MAX_VALUE,
visibilityWindow: 300000000,
displayMode: "EXPANDED"
}
]
}

};
var igvDiv = document.getElementById("igvDiv")

var igvDiv = document.getElementById("igvDiv");
igv.createBrowser(igvDiv, options)
.then(function (browser) {
console.log("Created IGV browser")
})

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

</body>
Expand Down
6 changes: 3 additions & 3 deletions examples/custom-reader.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@
<link href=img/favicon.ico rel="shortcut icon">
<title>igv.js</title>

<!-- IGV JS -->
<script src="../dist/igv.min.js"></script>
</head>

<body>
Expand Down Expand Up @@ -42,7 +40,9 @@ <h1>Custom Reader Example</h1>

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

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

import igv from "../dist/igv.esm.min.js"

document.addEventListener("DOMContentLoaded", function () {

Expand Down
Loading

0 comments on commit bc6e5d7

Please sign in to comment.