dash_bio.FornaContainer Examples and Reference

see FornaContainer in action.

Graph

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

import dash
from dash.dependencies import Input, Output
import dash_bio as dashbio
import dash_core_components as dcc
import dash_html_components as html
from dash.exceptions import PreventUpdate

app = dash.Dash(__name__)

sequences = {
    'PDB_01019': {
        'sequence': 'AUGGGCCCGGGCCCAAUGGGCCCGGGCCCA',
        'structure': '.((((((())))))).((((((()))))))'
    },
    'PDB_00598': {
        'sequence': 'GGAGAUGACgucATCTcc',
        'structure': '((((((((()))))))))'
    }
}

app.layout = html.Div([
    dashbio.FornaContainer(id='my-default-forna'),
    html.Hr(),
    html.P('Select the sequences to display below.'),
    dcc.Dropdown(
        id='my-default-forna-sequence-display',
        options=[
            {'label': name, 'value': name} for name in sequences.keys()
        ],
        multi=True,
        value=['PDB_01019']
    )
])

@app.callback(
    Output('my-default-forna', 'sequences'),
    Input('my-default-forna-sequence-display', 'value')
)
def show_selected_sequences(value):
    if value is None:
        raise PreventUpdate
    return [
        sequences[selected_sequence]
        for selected_sequence in value
    ]

if __name__ == '__main__':
    app.run_server(debug=True)

Select the sequences to display below.

Customization

Height/Width

Change the size of the canvas component that holds the container.

import dash_bio as dashbio

sequences = [{
    'sequence': 'AUGGGCCCGGGCCCAAUGGGCCCGGGCCCA',
    'structure': '.((((((())))))).((((((()))))))'
}]

dashbio.FornaContainer(
    sequences=sequences,
    height=300,
    width=500
)

Disable Zoom And Pan

Specify whether zoom and pan interactions should be disabled.

import dash_bio as dashbio

sequences = [{
    'sequence': 'AUGGGCCCGGGCCCAAUGGGCCCGGGCCCA',
    'structure': '.((((((())))))).((((((()))))))'
}]

dashbio.FornaContainer(
    sequences=sequences,
    allowPanningAndZooming=False
)

Label Interval

Specify the interval at which the sequence positions should be labelled.

import dash_bio as dashbio

sequences = [{
    'sequence': 'AUGGGCCCGGGCCCAAUGGGCCCGGGCCCA',
    'structure': '.((((((())))))).((((((()))))))',
    'options': {
        'labelInterval': 3
    }
}]

dashbio.FornaContainer(
    sequences=sequences
)

Fill Color For All Nodes

Change the color of all of the nucleotides in all sequences shown.

import dash_bio as dashbio

sequences = [{
    'sequence': 'AUGGGCCCGGGCCCAAUGGGCCCGGGCCCA',
    'structure': '.((((((())))))).((((((()))))))'
}]

dashbio.FornaContainer(
    sequences=sequences,
    nodeFillColor='pink'
)

Color Scheme

Change the parameter according to which the structure is colored.

import dash_bio as dashbio

sequences = [{
    'sequence': 'AUGGGCCCGGGCCCAAUGGGCCCGGGCCCA',
    'structure': '.((((((())))))).((((((()))))))'
}]

dashbio.FornaContainer(
    sequences=sequences,
    colorScheme='positions'
)

Custom Color Schemes For Different Sequences

Specify color schemes to be applied to all sequences in the container, or sequence-specific color schemes.

import dash_bio as dashbio

sequences = [
    {
        'sequence': 'AUGGGCCCGGGCCCAAUGGGCCCGGGCCCA',
        'structure': '.((((((())))))).((((((()))))))',
        'options': {
            'name': 'PDB_01019'
        }
    },
    {
        'sequence': 'GGAGAUGACgucATCTcc',
        'structure': '((((((((()))))))))',
        'options': {
            'name': 'PDB_00598'
        }
    }
]

custom_colors = {
    'domain': [0, 100],
    'range': ['rgb(175, 0, 255)', 'orange'],
    'colorValues': {
        '': {'1': 10, '5': 40},  # default; can be overridden by sequence-specific colorschemes below
        'PDB_01019': {'10': 'rgb(120, 50, 200)', '13': 50},
        'PDB_00598': {str(i): i*5 for i in range(3, len(sequences[1]['sequence']))}
    }
}

custom_colors['colorValues']['PDB_00598']['1'] = 'red'
dashbio.FornaContainer(
    sequences=sequences,
    colorScheme='custom',
    customColors=custom_colors
)

FornaContainer Properties

Access this documentation in your Python terminal with:
```python

help(dash_bio.FornaContainer)
```

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.

allowPanningAndZooming (boolean; default True):
Allow users to zoom in and pan the display. If this is enabled, then
pressing the ‘c’ key on the keyboard will center the view.

colorScheme (a value equal to: ‘sequence’, ‘structure’, ‘positions’ or ‘custom’; default 'sequence'):
The color scheme that is used to color the nodes.

customColors (dict; optional):
The custom colors used to color the nodes if the ‘custom’ option is
chosen for the colorScheme prop. For example, if the domain is [0, 20], the range is ['yellow', 'red'], and the dictionary specified
in ‘colorValues’ that corresponds to a molecule is {'6': 10}, the
sixth nucleotide in that molecule will have a color that is perfectly
in between yellow and red (i.e., orange), since 10 is perfectly in
between 0 and 20.

customColors is a dict with keys:

height (number; default 500):
The height (in px) of the container in which the molecules will be
displayed.

nodeFillColor (string; optional):
The fill color for all of the nodes. This will override any color
scheme defined in colorScheme.

sequences (list of dicts; optional):
The molecules that will be displayed.

sequences is a list of dicts with keys:

width (number; default 300):
The width (in px) of the container in which the molecules will be
displayed.

Example Data