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. 

from dash import Dash, html, dcc, Input, Output, callback
import dash_bio as dashbio
from dash.exceptions import PreventUpdate

app = Dash()

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']
    )
])

@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(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:

  • options (dict; optional):
    Additional options to be applied to the rendering of the RNA
    molecule.

    options is a dict with keys:

    • applyForce (boolean; optional):
      Indicate whether the force-directed layout will be applied to
      the displayed molecule. Enabling this option allows users to
      change the layout of the molecule by selecting and dragging
      the individual nucleotide nodes. True by default.

    • avoidOthers (boolean; optional):
      Whether or not this molecule should “avoid” other molecules in
      the map.

    • circularizeExternal (boolean; optional):
      This only makes sense in connection with the applyForce
      argument. If it’s True, the external loops will be arranged in
      a nice circle. If False, they will be allowed to flop around
      as the force layout dictates. True by default.

    • labelInterval (number; optional):
      Change how often nucleotide numbers are labelled with their
      number. 10 by default.

    • name (string; optional):
      The molecule name; this is used in custom color scales.

  • sequence (string; required):
    A string representing the RNA nucleotide sequence of the RNA
    molecule.

  • structure (string; required):
    A dot-bracket string
    (https://software.broadinstitute.org/software/igv/RNAsecStructure)
    that specifies the secondary structure of the RNA molecule.

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:

  • colorValues (dict with strings as keys and values of type dict with strings as keys and values of type string | number; optional):
    A dictionary which contains keys, each of which are either an
    empty string ('') or the name of a molecule that has been
    defined in the name prop in the options for a sequence in the
    sequences property. The value corresponding to the key that is
    an empty string (if that key exists) is a “default” color scheme
    that will be applied first, and can be overridden by the color
    schemes defined for molecule-specific keys. The aforementioned
    color schemes each take the form of a dictionary in which the keys
    are the nucleotide positions and the values are either a) numbers
    to be normalized with respect to the scale defined in domain (so
    that their color will be calculated), or b) direct string
    representations of colors.

  • domain (list of numbers; optional):
    The limits for the color scale. This is used with the range
    specified in range to calculate the color of a given nucleotide,
    based on the number that it is assigned.

  • range (list of strings; optional):
    The range of colors that will be used in conjunction with the
    domain prop.

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:

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

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

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

Example Data