dash_bio.FornaContainer Examples and Reference

see FornaContainer in action.

FornaContainer

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

Select the sequences to display below. 

import dash
from dash.dependencies import Input, Output
import dash_bio as dashbio
from dash import dcc, 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)

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.

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

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

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

sequences is a list of dicts with keys:

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

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:

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.

hoverPattern (string; optional):
Allow users to specify which information will be displayed after hover
on the elements. To render node property place it into ${}
construction. For example: ‘Structure name is ${structName} - ${num}’.
Acceptable node properties are “num”, “radius”, “rna”, “nodeType”,
“structName”, “size”, “uid”, “name”.

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

loading_state is a dict with keys:

Example Data