Using dash callbacks to control the state of a JBrowse 2 Linear Genome View¶

In [8]:

from dash import dcc, html, Dash
from dash.dependencies import Input, Output
from jbrowse_jupyter import create, create_component

In [9]:

# Create a Jupyter dash app
app = Dash(__name__)
server = app.server

# Docs: https://github.com/plotly/jupyter-dash

We want to create a small jupyter dash application that uses a drop down to change the location of the JBrowse Linear Genome View.

More info on dash callbacks here: https://dash.plotly.com/basic-callbacks

In [3]:

locations = [
    {"value": "17:41,196,332..41,277,401", "label": "location 1: 17:41,196,332..41,277,40"
    },
    {"value": "13:32,889,615..32,974,375", "label": "location 2: 13:32,889,615..32,974,375"},
]

Using a dash call back, we will use the jbrowse jupyter api to change the location of the hg19 config when we choose a location from the dropdown

In [5]:

# Return the component with a specific location. 
@app.callback(
    Output("default-container", "children"), Input("location-to-view", "value")
)
def return_jbrowse(location):
    conf = create("view", genome="hg19")
    conf.set_location(location)
    conf.set_default_session(['repeats_hg19'])
    return create_component(conf.get_config())

Create the layout of the dash python application

In [6]:

app.layout = html.Div(
    [
        html.P("Select a location to view."),
        dcc.Dropdown(
            id="location-to-view", options=locations, value="13:32,941,561..32,941,588"
        ),
        html.Hr(),
        dcc.Loading(id="default-container"),
    ]
)

In [7]:

app.run_server(mode="external", use_reloader=False, debug=True, port=3039)

Dash app running on http://127.0.0.1:3039/