Skip to content
BranchesTags

Repository files navigation

igv.js

build

igv.js is an embeddable interactive genome visualization component developed by the Integrative Genomics Viewer (IGV) team.

Citing igv.js

James T Robinson, Helga Thorvaldsdottir, Douglass Turner, Jill P Mesirov, igv.js: an embeddable JavaScript implementation of the Integrative Genomics Viewer (IGV), Bioinformatics, Volume 39, Issue 1, January 2023, btac830, https://doi.org/10.1093/bioinformatics/btac830

Below are examples and a quickstart guide. See the developer documentation for more documentation.

Examples

Alignments

Interactions

Copy number

Multiple regions

Mutation Annotation Format (MAF)

Variant color options

More

Quickstart

Installation

igv.js consists of a single javascript file with no external dependencies.

Pre-built files for script include, AMD, or CJS module systems (igv.min.js) and an ES6 module (igv.esm.min.js) can be downloaded from https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/.

To import igv as an ES6 module

importigvfrom"https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.esm.min.js"

Or as a script include (defines the "igv" global)

<scriptsrc="https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.min.js"></script>

Alternatively you can install with npm

npm install igv

and source the appropriate file for your module system (igv.min.js or igv.esm.min.js) in node_modules/igv/dist.

Usage

To create an igv.js browser supply a container div and an initial configuration defining the reference genome, initial tracks, and other state to the function igv.createBrowser(div, config).

This function returns a promise for an igv.Browser object which can used to control the browser. For example, to open a browser on a single alignment track opened at a specific locus:

 var igvDiv = document.getElementById("igv-div");
var options =
{
genome: "hg38",
locus: "chr8:127,736,588-127,739,371",
tracks: [
{
"name": "HG00103",
"url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
"indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
"format": "cram"
}
]
};
igv.createBrowser(igvDiv, options)
.then(function (browser) {
console.log("Created IGV browser");
})

Documentation

Full documentation of the igv.js API is available at https://igv.org/doc/igvjs/.

Development

Requirements

Building igv.js and running the examples require Linux or MacOS. Other Unix environments will probably work but have not been tested.

Windows users can use Windows Subsystem for Linux.

Building

Building igv.js and running the examples requires node.js.

Development can be done directly from the source files by importing igv.js from js/index.js.
See the html files in the dev folder for examples of how to import igv.js from the source directory. The distfiles are not required for development, however you must build at least once to compile the CSS and create the required file js/embedCss.js.

git clone https://github.com/igvteam/igv.js.git
cd igv.js
npm install
npm run build

This creates a dist folder with the following files

  • igv.js - UMDS file for script include, AMD, or CJS modules. A script include will define an "igv" global.
  • igv.min.js - minified version of igv.js
  • igv.esm.js -- ES6 module
  • igv.esm.min.js -- minified version of igv.esm.js

Additionally the file embedCSS.js is created in the js folder. This contains the CSS required for igv.js, which is injected into a shadow root containing igv.js.

Tests

To run the tests from the command line

npm run test

Supported Browsers

igv.js require a modern web browser with support for Javascript ECMAScript 2015 (ES6).

License

igv.js is MIT licensed.

Release Notes

About

Embeddable genomic visualization component based on the Integrative Genomics Viewer

Resources

Readme
MIT license

Contributing

Contributing
Activity
Custom properties

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - latchbio/igv.js: Embeddable genomic visualization component based on the Integrative Genomics Viewer · GitHub
Skip to content
BranchesTags
Repository files navigation
igv.js
build
igv.js is an embeddable interactive genome visualization component developed by the
Integrative Genomics Viewer (IGV) team.
Citing igv.js
James T Robinson, Helga Thorvaldsdottir, Douglass Turner, Jill P Mesirov, igv.js: an embeddable JavaScript
implementation of the Integrative Genomics Viewer (IGV), Bioinformatics, Volume 39, Issue 1, January 2023,
btac830, https://doi.org/10.1093/bioinformatics/btac830
Below are examples and a quickstart guide. See the developer documentation for more documentation.
Examples
Alignments
Interactions
Copy number
Multiple regions
Mutation Annotation Format (MAF)
Variant color options
More
Quickstart
Installation
igv.js consists of a single javascript file with no external dependencies.
Pre-built files for script include, AMD, or CJS module systems (igv.min.js) and an ES6 module (igv.esm.min.js)
can be downloaded from https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/.
To import igv as an ES6 module
importigvfrom"https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.esm.min.js"
Or as a script include (defines the "igv" global)
<scriptsrc="https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.min.js"></script>
Alternatively you can install with npm
npm install igv
and source the appropriate file for your module system (igv.min.js or igv.esm.min.js) in node_modules/igv/dist.
Usage
To create an igv.js browser supply a container div
and an initial configuration defining the reference genome, initial tracks, and other state to the
function igv.createBrowser(div, config).
This function returns a promise for an igv.Browser object which can used to control the browser. For example, to open
a browser on a single alignment track opened at a specific locus:
 var igvDiv = document.getElementById("igv-div");
var options =
{
genome: "hg38",
locus: "chr8:127,736,588-127,739,371",
tracks: [
{
"name": "HG00103",
"url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
"indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
"format": "cram"
}
]
};
igv.createBrowser(igvDiv, options)
.then(function (browser) {
console.log("Created IGV browser");
})

Documentation
Full documentation of the igv.js API is available at https://igv.org/doc/igvjs/.
Development
Requirements
Building igv.js and running the examples require Linux or MacOS. Other Unix environments will probably
work but have not been tested.
Windows users can use Windows Subsystem for Linux.
Building
Building igv.js and running the examples requires node.js.
Development can be done directly from the source files by importing igv.js from js/index.js.

See the html files in the dev folder for examples of how to import igv.js from the source
directory. The distfiles are not required for development, however you must build at least
once to compile the CSS and create the required file js/embedCss.js.
git clone https://github.com/igvteam/igv.js.git
cd igv.js
npm install
npm run build

This creates a dist folder with the following files
  • igv.js - UMDS file for script include, AMD, or CJS modules. A script include will define an "igv" global.
  • igv.min.js - minified version of igv.js
  • igv.esm.js -- ES6 module
  • igv.esm.min.js -- minified version of igv.esm.js
Additionally the file embedCSS.js is created in the js folder. This contains the CSS required for igv.js,
which is injected into a shadow root containing igv.js.
Tests
To run the tests from the command line
npm run test

Supported Browsers
igv.js require a modern web browser with support for Javascript ECMAScript 2015 (ES6).
License
igv.js is MIT licensed.
Release Notes
About
Embeddable genomic visualization component based on the Integrative Genomics Viewer
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - latchbio/igv.js: Embeddable genomic visualization component based on the Integrative Genomics Viewer · GitHub
Skip to content
BranchesTags
Repository files navigation
igv.js
build
igv.js is an embeddable interactive genome visualization component developed by the
Integrative Genomics Viewer (IGV) team.
Citing igv.js
James T Robinson, Helga Thorvaldsdottir, Douglass Turner, Jill P Mesirov, igv.js: an embeddable JavaScript
implementation of the Integrative Genomics Viewer (IGV), Bioinformatics, Volume 39, Issue 1, January 2023,
btac830, https://doi.org/10.1093/bioinformatics/btac830
Below are examples and a quickstart guide. See the developer documentation for more documentation.
Examples
Alignments
Interactions
Copy number
Multiple regions
Mutation Annotation Format (MAF)
Variant color options
More
Quickstart
Installation
igv.js consists of a single javascript file with no external dependencies.
Pre-built files for script include, AMD, or CJS module systems (igv.min.js) and an ES6 module (igv.esm.min.js)
can be downloaded from https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/.
To import igv as an ES6 module
importigvfrom"https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.esm.min.js"
Or as a script include (defines the "igv" global)
<scriptsrc="https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.min.js"></script>
Alternatively you can install with npm
npm install igv
and source the appropriate file for your module system (igv.min.js or igv.esm.min.js) in node_modules/igv/dist.
Usage
To create an igv.js browser supply a container div
and an initial configuration defining the reference genome, initial tracks, and other state to the
function igv.createBrowser(div, config).
This function returns a promise for an igv.Browser object which can used to control the browser. For example, to open
a browser on a single alignment track opened at a specific locus:
 var igvDiv = document.getElementById("igv-div");
var options =
{
genome: "hg38",
locus: "chr8:127,736,588-127,739,371",
tracks: [
{
"name": "HG00103",
"url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
"indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
"format": "cram"
}
]
};
igv.createBrowser(igvDiv, options)
.then(function (browser) {
console.log("Created IGV browser");
})

Documentation
Full documentation of the igv.js API is available at https://igv.org/doc/igvjs/.
Development
Requirements
Building igv.js and running the examples require Linux or MacOS. Other Unix environments will probably
work but have not been tested.
Windows users can use Windows Subsystem for Linux.
Building
Building igv.js and running the examples requires node.js.
Development can be done directly from the source files by importing igv.js from js/index.js.

See the html files in the dev folder for examples of how to import igv.js from the source
directory. The distfiles are not required for development, however you must build at least
once to compile the CSS and create the required file js/embedCss.js.
git clone https://github.com/igvteam/igv.js.git
cd igv.js
npm install
npm run build

This creates a dist folder with the following files
  • igv.js - UMDS file for script include, AMD, or CJS modules. A script include will define an "igv" global.
  • igv.min.js - minified version of igv.js
  • igv.esm.js -- ES6 module
  • igv.esm.min.js -- minified version of igv.esm.js
Additionally the file embedCSS.js is created in the js folder. This contains the CSS required for igv.js,
which is injected into a shadow root containing igv.js.
Tests
To run the tests from the command line
npm run test

Supported Browsers
igv.js require a modern web browser with support for Javascript ECMAScript 2015 (ES6).
License
igv.js is MIT licensed.
Release Notes
About
Embeddable genomic visualization component based on the Integrative Genomics Viewer
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - latchbio/igv.js: Embeddable genomic visualization component based on the Integrative Genomics Viewer · GitHub
Skip to content
BranchesTags
Repository files navigation
igv.js
build
igv.js is an embeddable interactive genome visualization component developed by the
Integrative Genomics Viewer (IGV) team.
Citing igv.js
James T Robinson, Helga Thorvaldsdottir, Douglass Turner, Jill P Mesirov, igv.js: an embeddable JavaScript
implementation of the Integrative Genomics Viewer (IGV), Bioinformatics, Volume 39, Issue 1, January 2023,
btac830, https://doi.org/10.1093/bioinformatics/btac830
Below are examples and a quickstart guide. See the developer documentation for more documentation.
Examples
Alignments
Interactions
Copy number
Multiple regions
Mutation Annotation Format (MAF)
Variant color options
More
Quickstart
Installation
igv.js consists of a single javascript file with no external dependencies.
Pre-built files for script include, AMD, or CJS module systems (igv.min.js) and an ES6 module (igv.esm.min.js)
can be downloaded from https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/.
To import igv as an ES6 module
importigvfrom"https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.esm.min.js"
Or as a script include (defines the "igv" global)
<scriptsrc="https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.min.js"></script>
Alternatively you can install with npm
npm install igv
and source the appropriate file for your module system (igv.min.js or igv.esm.min.js) in node_modules/igv/dist.
Usage
To create an igv.js browser supply a container div
and an initial configuration defining the reference genome, initial tracks, and other state to the
function igv.createBrowser(div, config).
This function returns a promise for an igv.Browser object which can used to control the browser. For example, to open
a browser on a single alignment track opened at a specific locus:
 var igvDiv = document.getElementById("igv-div");
var options =
{
genome: "hg38",
locus: "chr8:127,736,588-127,739,371",
tracks: [
{
"name": "HG00103",
"url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
"indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
"format": "cram"
}
]
};
igv.createBrowser(igvDiv, options)
.then(function (browser) {
console.log("Created IGV browser");
})

Documentation
Full documentation of the igv.js API is available at https://igv.org/doc/igvjs/.
Development
Requirements
Building igv.js and running the examples require Linux or MacOS. Other Unix environments will probably
work but have not been tested.
Windows users can use Windows Subsystem for Linux.
Building
Building igv.js and running the examples requires node.js.
Development can be done directly from the source files by importing igv.js from js/index.js.

See the html files in the dev folder for examples of how to import igv.js from the source
directory. The distfiles are not required for development, however you must build at least
once to compile the CSS and create the required file js/embedCss.js.
git clone https://github.com/igvteam/igv.js.git
cd igv.js
npm install
npm run build

This creates a dist folder with the following files
  • igv.js - UMDS file for script include, AMD, or CJS modules. A script include will define an "igv" global.
  • igv.min.js - minified version of igv.js
  • igv.esm.js -- ES6 module
  • igv.esm.min.js -- minified version of igv.esm.js
Additionally the file embedCSS.js is created in the js folder. This contains the CSS required for igv.js,
which is injected into a shadow root containing igv.js.
Tests
To run the tests from the command line
npm run test

Supported Browsers
igv.js require a modern web browser with support for Javascript ECMAScript 2015 (ES6).
License
igv.js is MIT licensed.
Release Notes
About
Embeddable genomic visualization component based on the Integrative Genomics Viewer
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - latchbio/igv.js: Embeddable genomic visualization component based on the Integrative Genomics Viewer · GitHub
Skip to content
BranchesTags
Repository files navigation
igv.js
build
igv.js is an embeddable interactive genome visualization component developed by the
Integrative Genomics Viewer (IGV) team.
Citing igv.js
James T Robinson, Helga Thorvaldsdottir, Douglass Turner, Jill P Mesirov, igv.js: an embeddable JavaScript
implementation of the Integrative Genomics Viewer (IGV), Bioinformatics, Volume 39, Issue 1, January 2023,
btac830, https://doi.org/10.1093/bioinformatics/btac830
Below are examples and a quickstart guide. See the developer documentation for more documentation.
Examples
Alignments
Interactions
Copy number
Multiple regions
Mutation Annotation Format (MAF)
Variant color options
More
Quickstart
Installation
igv.js consists of a single javascript file with no external dependencies.
Pre-built files for script include, AMD, or CJS module systems (igv.min.js) and an ES6 module (igv.esm.min.js)
can be downloaded from https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/.
To import igv as an ES6 module
importigvfrom"https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.esm.min.js"
Or as a script include (defines the "igv" global)
<scriptsrc="https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.min.js"></script>
Alternatively you can install with npm
npm install igv
and source the appropriate file for your module system (igv.min.js or igv.esm.min.js) in node_modules/igv/dist.
Usage
To create an igv.js browser supply a container div
and an initial configuration defining the reference genome, initial tracks, and other state to the
function igv.createBrowser(div, config).
This function returns a promise for an igv.Browser object which can used to control the browser. For example, to open
a browser on a single alignment track opened at a specific locus:
 var igvDiv = document.getElementById("igv-div");
var options =
{
genome: "hg38",
locus: "chr8:127,736,588-127,739,371",
tracks: [
{
"name": "HG00103",
"url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
"indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
"format": "cram"
}
]
};
igv.createBrowser(igvDiv, options)
.then(function (browser) {
console.log("Created IGV browser");
})

Documentation
Full documentation of the igv.js API is available at https://igv.org/doc/igvjs/.
Development
Requirements
Building igv.js and running the examples require Linux or MacOS. Other Unix environments will probably
work but have not been tested.
Windows users can use Windows Subsystem for Linux.
Building
Building igv.js and running the examples requires node.js.
Development can be done directly from the source files by importing igv.js from js/index.js.

See the html files in the dev folder for examples of how to import igv.js from the source
directory. The distfiles are not required for development, however you must build at least
once to compile the CSS and create the required file js/embedCss.js.
git clone https://github.com/igvteam/igv.js.git
cd igv.js
npm install
npm run build

This creates a dist folder with the following files
  • igv.js - UMDS file for script include, AMD, or CJS modules. A script include will define an "igv" global.
  • igv.min.js - minified version of igv.js
  • igv.esm.js -- ES6 module
  • igv.esm.min.js -- minified version of igv.esm.js
Additionally the file embedCSS.js is created in the js folder. This contains the CSS required for igv.js,
which is injected into a shadow root containing igv.js.
Tests
To run the tests from the command line
npm run test

Supported Browsers
igv.js require a modern web browser with support for Javascript ECMAScript 2015 (ES6).
License
igv.js is MIT licensed.
Release Notes
About
Embeddable genomic visualization component based on the Integrative Genomics Viewer
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - latchbio/igv.js: Embeddable genomic visualization component based on the Integrative Genomics Viewer · GitHub
Skip to content
BranchesTags
Repository files navigation
igv.js
build
igv.js is an embeddable interactive genome visualization component developed by the
Integrative Genomics Viewer (IGV) team.
Citing igv.js
James T Robinson, Helga Thorvaldsdottir, Douglass Turner, Jill P Mesirov, igv.js: an embeddable JavaScript
implementation of the Integrative Genomics Viewer (IGV), Bioinformatics, Volume 39, Issue 1, January 2023,
btac830, https://doi.org/10.1093/bioinformatics/btac830
Below are examples and a quickstart guide. See the developer documentation for more documentation.
Examples
Alignments
Interactions
Copy number
Multiple regions
Mutation Annotation Format (MAF)
Variant color options
More
Quickstart
Installation
igv.js consists of a single javascript file with no external dependencies.
Pre-built files for script include, AMD, or CJS module systems (igv.min.js) and an ES6 module (igv.esm.min.js)
can be downloaded from https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/.
To import igv as an ES6 module
importigvfrom"https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.esm.min.js"
Or as a script include (defines the "igv" global)
<scriptsrc="https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.min.js"></script>
Alternatively you can install with npm
npm install igv
and source the appropriate file for your module system (igv.min.js or igv.esm.min.js) in node_modules/igv/dist.
Usage
To create an igv.js browser supply a container div
and an initial configuration defining the reference genome, initial tracks, and other state to the
function igv.createBrowser(div, config).
This function returns a promise for an igv.Browser object which can used to control the browser. For example, to open
a browser on a single alignment track opened at a specific locus:
 var igvDiv = document.getElementById("igv-div");
var options =
{
genome: "hg38",
locus: "chr8:127,736,588-127,739,371",
tracks: [
{
"name": "HG00103",
"url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
"indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
"format": "cram"
}
]
};
igv.createBrowser(igvDiv, options)
.then(function (browser) {
console.log("Created IGV browser");
})

Documentation
Full documentation of the igv.js API is available at https://igv.org/doc/igvjs/.
Development
Requirements
Building igv.js and running the examples require Linux or MacOS. Other Unix environments will probably
work but have not been tested.
Windows users can use Windows Subsystem for Linux.
Building
Building igv.js and running the examples requires node.js.
Development can be done directly from the source files by importing igv.js from js/index.js.

See the html files in the dev folder for examples of how to import igv.js from the source
directory. The distfiles are not required for development, however you must build at least
once to compile the CSS and create the required file js/embedCss.js.
git clone https://github.com/igvteam/igv.js.git
cd igv.js
npm install
npm run build

This creates a dist folder with the following files
  • igv.js - UMDS file for script include, AMD, or CJS modules. A script include will define an "igv" global.
  • igv.min.js - minified version of igv.js
  • igv.esm.js -- ES6 module
  • igv.esm.min.js -- minified version of igv.esm.js
Additionally the file embedCSS.js is created in the js folder. This contains the CSS required for igv.js,
which is injected into a shadow root containing igv.js.
Tests
To run the tests from the command line
npm run test

Supported Browsers
igv.js require a modern web browser with support for Javascript ECMAScript 2015 (ES6).
License
igv.js is MIT licensed.
Release Notes
About
Embeddable genomic visualization component based on the Integrative Genomics Viewer
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - latchbio/igv.js: Embeddable genomic visualization component based on the Integrative Genomics Viewer · GitHub
Skip to content
BranchesTags
Repository files navigation
igv.js
build
igv.js is an embeddable interactive genome visualization component developed by the
Integrative Genomics Viewer (IGV) team.
Citing igv.js
James T Robinson, Helga Thorvaldsdottir, Douglass Turner, Jill P Mesirov, igv.js: an embeddable JavaScript
implementation of the Integrative Genomics Viewer (IGV), Bioinformatics, Volume 39, Issue 1, January 2023,
btac830, https://doi.org/10.1093/bioinformatics/btac830
Below are examples and a quickstart guide. See the developer documentation for more documentation.
Examples
Alignments
Interactions
Copy number
Multiple regions
Mutation Annotation Format (MAF)
Variant color options
More
Quickstart
Installation
igv.js consists of a single javascript file with no external dependencies.
Pre-built files for script include, AMD, or CJS module systems (igv.min.js) and an ES6 module (igv.esm.min.js)
can be downloaded from https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/.
To import igv as an ES6 module
importigvfrom"https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.esm.min.js"
Or as a script include (defines the "igv" global)
<scriptsrc="https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.min.js"></script>
Alternatively you can install with npm
npm install igv
and source the appropriate file for your module system (igv.min.js or igv.esm.min.js) in node_modules/igv/dist.
Usage
To create an igv.js browser supply a container div
and an initial configuration defining the reference genome, initial tracks, and other state to the
function igv.createBrowser(div, config).
This function returns a promise for an igv.Browser object which can used to control the browser. For example, to open
a browser on a single alignment track opened at a specific locus:
 var igvDiv = document.getElementById("igv-div");
var options =
{
genome: "hg38",
locus: "chr8:127,736,588-127,739,371",
tracks: [
{
"name": "HG00103",
"url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
"indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
"format": "cram"
}
]
};
igv.createBrowser(igvDiv, options)
.then(function (browser) {
console.log("Created IGV browser");
})

Documentation
Full documentation of the igv.js API is available at https://igv.org/doc/igvjs/.
Development
Requirements
Building igv.js and running the examples require Linux or MacOS. Other Unix environments will probably
work but have not been tested.
Windows users can use Windows Subsystem for Linux.
Building
Building igv.js and running the examples requires node.js.
Development can be done directly from the source files by importing igv.js from js/index.js.

See the html files in the dev folder for examples of how to import igv.js from the source
directory. The distfiles are not required for development, however you must build at least
once to compile the CSS and create the required file js/embedCss.js.
git clone https://github.com/igvteam/igv.js.git
cd igv.js
npm install
npm run build

This creates a dist folder with the following files
  • igv.js - UMDS file for script include, AMD, or CJS modules. A script include will define an "igv" global.
  • igv.min.js - minified version of igv.js
  • igv.esm.js -- ES6 module
  • igv.esm.min.js -- minified version of igv.esm.js
Additionally the file embedCSS.js is created in the js folder. This contains the CSS required for igv.js,
which is injected into a shadow root containing igv.js.
Tests
To run the tests from the command line
npm run test

Supported Browsers
igv.js require a modern web browser with support for Javascript ECMAScript 2015 (ES6).
License
igv.js is MIT licensed.
Release Notes
About
Embeddable genomic visualization component based on the Integrative Genomics Viewer
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - latchbio/igv.js: Embeddable genomic visualization component based on the Integrative Genomics Viewer · GitHub
Skip to content
BranchesTags
Repository files navigation
igv.js
build
igv.js is an embeddable interactive genome visualization component developed by the
Integrative Genomics Viewer (IGV) team.
Citing igv.js
James T Robinson, Helga Thorvaldsdottir, Douglass Turner, Jill P Mesirov, igv.js: an embeddable JavaScript
implementation of the Integrative Genomics Viewer (IGV), Bioinformatics, Volume 39, Issue 1, January 2023,
btac830, https://doi.org/10.1093/bioinformatics/btac830
Below are examples and a quickstart guide. See the developer documentation for more documentation.
Examples
Alignments
Interactions
Copy number
Multiple regions
Mutation Annotation Format (MAF)
Variant color options
More
Quickstart
Installation
igv.js consists of a single javascript file with no external dependencies.
Pre-built files for script include, AMD, or CJS module systems (igv.min.js) and an ES6 module (igv.esm.min.js)
can be downloaded from https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/.
To import igv as an ES6 module
importigvfrom"https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.esm.min.js"
Or as a script include (defines the "igv" global)
<scriptsrc="https://cdn.jsdelivr.net/npm/igv@3.8.0/dist/igv.min.js"></script>
Alternatively you can install with npm
npm install igv
and source the appropriate file for your module system (igv.min.js or igv.esm.min.js) in node_modules/igv/dist.
Usage
To create an igv.js browser supply a container div
and an initial configuration defining the reference genome, initial tracks, and other state to the
function igv.createBrowser(div, config).
This function returns a promise for an igv.Browser object which can used to control the browser. For example, to open
a browser on a single alignment track opened at a specific locus:
 var igvDiv = document.getElementById("igv-div");
var options =
{
genome: "hg38",
locus: "chr8:127,736,588-127,739,371",
tracks: [
{
"name": "HG00103",
"url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
"indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
"format": "cram"
}
]
};
igv.createBrowser(igvDiv, options)
.then(function (browser) {
console.log("Created IGV browser");
})

Documentation
Full documentation of the igv.js API is available at https://igv.org/doc/igvjs/.
Development
Requirements
Building igv.js and running the examples require Linux or MacOS. Other Unix environments will probably
work but have not been tested.
Windows users can use Windows Subsystem for Linux.
Building
Building igv.js and running the examples requires node.js.
Development can be done directly from the source files by importing igv.js from js/index.js.

See the html files in the dev folder for examples of how to import igv.js from the source
directory. The distfiles are not required for development, however you must build at least
once to compile the CSS and create the required file js/embedCss.js.
git clone https://github.com/igvteam/igv.js.git
cd igv.js
npm install
npm run build

This creates a dist folder with the following files
  • igv.js - UMDS file for script include, AMD, or CJS modules. A script include will define an "igv" global.
  • igv.min.js - minified version of igv.js
  • igv.esm.js -- ES6 module
  • igv.esm.min.js -- minified version of igv.esm.js
Additionally the file embedCSS.js is created in the js folder. This contains the CSS required for igv.js,
which is injected into a shadow root containing igv.js.
Tests
To run the tests from the command line
npm run test

Supported Browsers
igv.js require a modern web browser with support for Javascript ECMAScript 2015 (ES6).
License
igv.js is MIT licensed.
Release Notes
About
Embeddable genomic visualization component based on the Integrative Genomics Viewer
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages