dash_bio_igv Examples and Reference

see Igv in action.

Igv

An example of a default Igv component without any extra properties.

ce11
cursor guide
track labels
Save SVG
Refseq Genes

Select the genome to display below.

C. elegans (ce11)
×
using Dash, DashBio

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash(external_stylesheets=external_stylesheets)

HOSTED_GENOME_DICT = [
    Dict("value" => "mm10", "label" => "Mouse (GRCm38/mm10)"),
    Dict("value" => "rn6", "label" => "Rat (RGCS 6.0/rn6)"),
    Dict("value" => "gorGor4", "label" => "Gorilla (gorGor4.1/gorGor4)"),
    Dict("value" => "panTro4", "label" => "Chimp (SAC 2.1.4/panTro4)"),
    Dict("value" => "panPan2", "label" => "Bonobo (MPI-EVA panpan1.1/panPan2)"),
    Dict("value" => "canFam3", "label" => "Dog (Broad CanFam3.1/canFam3)"),
    Dict("value" => "ce11", "label" => "C. elegans (ce11)")
]

app.layout = html_div([
    dcc_loading(
        id="default-igv-container"
    ),
    html_hr(),
    html_p("Select the genome to display below."),
    dcc_dropdown(
        id="default-igv-genome-select",
        options=HOSTED_GENOME_DICT,
        value="ce11"
    )
])
# Return the IGV component with the selected genome.
callback!(app,
    Output("default-igv-container", "children"),
    Input("default-igv-genome-select", "value")
) do genome
    return (
        html_div([
            dashbio_igv(
                id="default-igv",
                genome=genome,
                minimumBases=100,
            )
        ])
    )
end
run_server(app, "0.0.0.0", debug=true)

Customization

Genome

Select a genome using an identifier string (e.g. "hg19"). A list of pre-defined genomes hosted by IGV can be found here.

ce11
cursor guide
track labels
Save SVG
Refseq Genes
using Dash, DashBio

app = dash()

app.layout = dashbio_igv(
    id="genome-igv",
    genome="ce11"
)

run_server(app, "0.0.0.0", debug=true)

Reference

Add a reference dictionary which can be used to specify the genomic data added to the IGV component, and add tracks to display features such as annotations, genome variants, alignments, and quantitative data.

For more information on reference options, visit the IGV wiki here.

Multiple tracks can be added to a single reference by creating a list of dicts, each of which correspond to a single track. For more information on Track Types and Track Configurations, visit the IGV wiki here.

This example has not been ported to Julia yet - showing the Python version instead.

Visit the old docs site for Julia at: https://community.plotly.com/c/dash/julia/20

ASM985889v3
29 kb
cursor guide
center line
track labels
Save SVG
Annotations
import dash_bio as dashbio

dashbio.Igv(
    id='reference-igv',
    reference={
        'id': 'ASM985889v3',
        'name': 'Sars-CoV-2 (ASM985889v3)',
        'fastaURL': 'https://s3.amazonaws.com/igv.org.genomes/covid_ASM985889v3/GCF_009858895.2_ASM985889v3_genomic.fna',
        'indexURL': 'https://s3.amazonaws.com/igv.org.genomes/covid_ASM985889v3/GCF_009858895.2_ASM985889v3_genomic.fna.fai',
        'order': 1000000,
        'tracks': [
            {
                'name': 'Annotations',
                'url': 'https://s3.amazonaws.com/igv.org.genomes/covid_ASM985889v3/GCF_009858895.2_ASM985889v3_genomic.gff.gz',
                'displayMode': 'EXPANDED',
                'nameField': 'gene',
                'height': 150,
                'color': 'rgb(176,141,87)'
            }
        ]
    },
)

Locus

The initial genomic location displayed on the viewer. This can be a string or a list of strings. In the example below, the locus is "chrV".

ce11
20 mb
cursor guide
track labels
Save SVG
chrV:1-20,863,530
chrII:1-15,279,421
Refseq Genes
using Dash, DashBio

app = dash()

app.layout = dashbio_igv(
    id="locus-igv",
    genome="ce11",
    locus=["chrV", "chrII"]
)

run_server(app, "0.0.0.0", debug=true)

Minimum Bases

Minimum window size in base pairs when zooming in.

ce11
cursor guide
track labels
Save SVG
Refseq Genes
using Dash, DashBio

app = dash()

app.layout = dashbio_igv(
    id="bases-igv",
    genome="ce11",
    minimumBases="10"
)

run_server(app, "0.0.0.0", debug=true)

Igv Properties

Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.

id (String; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.

style (Dict; optional): Generic style overrides on the plot div.

className (String; optional): className of the component div.

genome (String; optional): String identifier defining genome (e.g. "hg19"). See https://github.com/igvteam/igv.js/wiki/Reference-Genome for details and list of supported identifiers. Note: One (but only one) of either genome or reference properties must be set. If both are set, the genome property will be ignored.

reference (Dict; optional): Object defining reference genome. see https://github.com/igvteam/igv.js/wiki/Reference-Genome Note: One (but only one) of either genome or reference properties must be set. If both are set, the genome property will be ignored.

locus (String; optional): Initial genomic location(s). Either a string or an array of strings. If an array a viewport is created for each location.

minimumBases (Real; optional): Minimum window size in base pairs when zooming in.

tracks (Array; optional): Array of configuration objects defining tracks initially displayed when app launches. see https://github.com/igvteam/igv.js/wiki/Tracks-2.0.

loading_state (Dict; optional): Object that holds the loading state object coming from dash-renderer.

loading_state is a Dict with keys:

  • component_name (String; optional): Holds the name of the component that is loading.

  • is_loading (Bool; optional): Determines if the component is loading or not.

  • prop_name (String; optional): Holds which property is loading.

Example Data