FornaContainer Examples and Reference


Default FornaContainer

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

import dash
import dash_bio as dashbio
import dash_core_components as dcc
import dash_html_components as html
from dash.exceptions import PreventUpdate

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

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

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


@app.callback(
    dash.dependencies.Output('forna', 'sequences'),
    [dash.dependencies.Input('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.


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
)


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’, ‘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 has the following type: dict containing keys ‘domain’, ‘range’, ‘colorValues’. Those keys have the following types:

  • 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.
  • 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.

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 (dict; optional): The molecules that will be displayed. sequences has the following type: list of dicts containing keys ‘sequence’, ‘structure’, ‘options’. Those keys have the following types:

  • 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.
  • options (dict; optional): Additional options to be applied to the rendering of the RNA molecule. options has the following type: dict containing keys ‘applyForce’, ‘circularizeExternal’, ‘labelInterval’, ‘name’, ‘avoidOthers’. Those keys have the following types: - 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. - 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. - avoidOthers (boolean; optional): Whether or not this molecule should “avoid” other molecules in the map.

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