DOCSEARCHbyAlgolia
Submit Docs

igv.js

repository·master·Indexed 20 days ago

https://github.com/igvteam/igv.js

An embeddable, interactive genomic visualization component based on the Integrative Genomics Viewer. It allows developers to integrate high-performance genomic data viewing, such as alignments, tracks, and variants, directly into web applications. The library supports custom track registration, UCSC Hubs, session files, and provides an API for managing browser instances via igv.createBrowser().

Tokens
2K
Snippets
9
Records
13
Agent score
72%

What's inside igv.js

  1. Use RNA secondary structure tracks in igv.js

    master
    The RNA tracks provided in this directory are designed for visualizing RNA secondary structure. Note that these tracks are specifically for structural data and are not intended for visualizing RNA expression levels.

  2. Load structural variant (SVS) information in igv.js via configuration or loadTrack

    master

    You can integrate structural variant (SVS) information into the igv.js browser using two methods:

    1. Static Configuration: Specify structural variant information within the browser configuration file (as seen in svs-config.html).
    2. Dynamic Loading: Load structural variant information dynamically by passing a JSON object to the igv.js browser using the loadTrack method (as seen in svs-load.html).

  3. Install igv.js

    master

    You can install igv.js using npm or by including pre-built files directly via CDN.

    npm installation

    npm install igv

    After installing via npm, you can source the appropriate file from node_modules/igv/dist depending on your module system (e.g., igv.min.js or igv.esm.min.js).

    CDN usage

    • ES6 Module: Import directly from jsDelivr.
    • Script Include: Use a <script> tag to define the igv global.

  4. Build igv.js from source

    master

    To build igv.js from the source repository, you must have node.js installed. Building is required to compile the CSS and generate the js/embedCss.js file, which is used to inject styles into the browser's shadow root.

    Build steps

    1. Clone the repository.
    2. Install dependencies.
    3. Run the build script.

    Tip: Use --depth 1 when cloning to save time if you only need the latest commit.

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

  5. Load sample information in igv.js via configuration or JSON

    master

    You can integrate sample information into the igv.js browser using two methods:

    1. Static Configuration: Specify sample information directly within the browser configuration file (as seen in sampleinfo-config.html).
    2. Dynamic Loading: Load sample information dynamically by passing a JSON object to the igv.js browser instance (as seen in sampleinfo-load.html).

  7. Import igv.js as a script include

    master

    To use igv.js as a global script include, add the igv.min.js file to your HTML. This will define the igv global object.

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

  9. Initialize an IGV browser with igv.createBrowser()

    master

    To create an interactive genome visualization browser, use the igv.createBrowser(div, config) function.

    • div: The HTML element that will serve as the container for the browser.
    • config: An object defining the initial state, including the genome, locus, and an array of tracks.

    This function returns a Promise that resolves to an igv.Browser object, which can be used to programmatically control the browser instance.

    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");
    });

  10. Initialize an IGV Browser instance

    master

    To start using IGV.js, use createBrowser to instantiate a new browser object. This is the primary entry point for managing genomic tracks and viewing data. You can also manage multiple browser instances using removeBrowser or removeAllBrowsers.

    import igv from './js/index.js';

// Create a new browser instance
const browser = await igv.createBrowser(containerElement, options);

// Clean up
// igv.removeBrowser(browser);
// igv.removeAllBrowsers();

  11. Register custom track classes and file formats

    master

    You can extend IGV.js by registering new track types or file formats. This allows the library to recognize and handle custom data types through the track factory system.

    • registerTrackClass(trackClass): Registers a new class that extends TrackBase to handle specific track types.
    • registerTrackCreatorFunction(creatorFunction): Registers a function responsible for creating track instances.
    • registerFileFormats(formats): Registers new file format definitions so IGV knows how to parse specific file extensions or MIME types.

  12. Load UCSC Hubs and Session files

    master

    IGV.js provides utilities to load external genomic data configurations:

    • loadHub(hubUrl): Loads a UCSC Genome Browser Hub.
    • loadSessionFile(sessionFile): A method on the Browser instance (exported via the default object) used to load a previously saved IGV session file.
    import igv from './js/index.js';

// Load a UCSC Hub
await igv.loadHub('http://example.com/hub.txt');

// Load a session into an existing browser
// Assuming 'browser' is an instance created via createBrowser
await igv.loadSessionFile(sessionFile);