'applyForce': True,
'circularizeExternal': True,
'avoidOthers': True,
'labelInterval': 5,
'name': 'PDB_01019'
}
}]
model_data = urlreq.urlopen(
'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/' +
'master/mol3d/model_data.js').read()
styles_data = urlreq.urlopen(
'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/' +
'master/mol3d/styles_data.js').read()
model_data = json.loads(model_data)
styles_data = json.loads(styles_data)
app.layout = html.Div(children=[
dashbio.AlignmentChart(id='my-dashbio-alignmentchart', data=data),
dashbio.FornaContainer(id='my-dashbio-fornacontainer',
sequences=sequences),
dashbio.Molecule3dViewer(id='my-dashbio-molecule3dviewer',
modelData=model_data,
styles=styles_data,
backgroundOpacity='0')
])
if __name__ == '__main__':
app.run_server(debug=True)
def layout():
return html.Div(
id='forna-body',
className='app-body',
children=[
html.Div(
id='forna-control-tabs',
className='control-tabs',
children=[
dcc.Tabs(
id='forna-tabs',
value='what-is',
children=[
dcc.Tab(
label='About',
value='what-is',
children=html.Div(
className='control-tab',
children=[
html.
H4(className='what-is',
children='What is FornaContainer?'),
dcc.Markdown('''
FornaContainer is a force-directed graph that is
used to represent the secondary structure of nucleic
acids (i.e., DNA and RNA).
In the "Add New" tab, you can enter a sequence
by specifying the nucleotide sequence and the
dot-bracket representation of the secondary
structure.
In the "Sequences" tab, you can select which
sequences will be displayed, as well as obtain
information about the sequences that you have
already created.
In the "Colors" tab, you can choose to color each
nucleotide according to its base, the structural
feature to which it belongs, or its position in
the sequence; you can also specify a custom color
scheme.
The example RNA molecule shown has ID
[PDB_01019](http://www.rnasoft.ca/strand/show_results.php?molecule_ID=PDB_01019)
on the [RNA Strand](http://www.rnasoft.ca/strand/) database.
''')
])),
dcc.Tab(
label='Add New',
value='add-sequence',
children=html.Div(
className='control-tab',
children=[
html.Div(
title=
'Enter a dot-bracket string and a nucleotide sequence.',
className='app-controls-block',
children=[
html.Div(
className=
'fullwidth-app-controls-name',
children='Sequence'),
html.Div(
className=
'app-controls-desc',
children=
'Specify the nucleotide sequence as a string.'
),
dcc.Input(id='forna-sequence',
placeholder=
initial_sequences[
'PDB_01019']
['sequence']),
html.Br(),
html.Br(),
html.Div(
className=
'fullwidth-app-controls-name',
children='Structure'),
html.Div(
className=
'app-controls-desc',
children=
'Specify the RNA secondary structure '
'with a dot-bracket string.'
),
dcc.Input(id='forna-structure',
placeholder=
initial_sequences[
'PDB_01019']
['structure']),
]),
html.Div(
title=
'Change some boolean properties.',
className='app-controls-block',
children=[
html.Div(
className=
'app-controls-name',
children='Apply force'),
daq.BooleanSwitch(
id='forna-apply-force',
on=True,
color='#85002D'),
html.Div(
className=
'app-controls-desc',
children=
'Indicate whether the force-directed layout '
+
'will be applied to this molecule.'
),
html.Br(),
html.Div(
className=
'app-controls-name',
children=
'Circularize external'),
daq.BooleanSwitch(
id=
'forna-circularize-external',
on=True,
color='#85002D'),
html.Div(
className=
'app-controls-desc',
children=
'Indicate whether the external loops '
+
'should be forced to be arranged in a circle.'
),
html.Br(),
html.Div(
className=
'app-controls-name',
children='Avoid others'),
daq.BooleanSwitch(
id='forna-avoid-others',
on=True,
color='#85002D'),
html.Div(
className=
'app-controls-desc',
children=
'Indicate whether this molecule should '
+
'"avoid" being close to other molecules.'
),
html.Br(),
html.Div(
className=
'app-controls-name',
children='Label interval'),
dcc.Slider(
id='forna-label-interval',
min=1,
max=10,
value=5,
marks={
i + 1: str(i + 1)
for i in range(10)
}),
html.Div(
className=
'app-controls-desc',
children=
'Indicate how often nucleotides are '
+
'labelled with their number.'
)
]),
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'fullwidth-app-controls-name',
children='ID'),
html.Div(
className=
'app-controls-desc',
children=
'Specify a unique ID for this sequence.'
),
dcc.Input(
id='forna-id',
placeholder='PDB_01019')
]),
html.Hr(),
html.Div(id='forna-error-message'),
html.Button(
id='forna-submit-sequence',
children='Submit sequence'),
])),
dcc.Tab(
label='Sequences',
value='show-sequences',
children=html.Div(
className='control-tab',
children=[
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'fullwidth-app-controls-name',
children=
'Sequences to display'),
html.Div(
className=
'app-controls-desc',
children=
'Choose the sequences to display by ID.'
),
html.Br(),
dcc.Dropdown(
id=
'forna-sequences-display',
multi=True,
clearable=True,
value=['PDB_01019'])
]),
html.Hr(),
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'app-controls-block',
children=[
html.Div(
className=
'fullwidth-app-controls-name',
children=
'Sequence information by ID'
),
html.Div(
className=
'app-controls-desc',
children=
'Search for a sequence by ID '
+
'to get more information.'
),
html.Br(),
dcc.Dropdown(
id=
'forna-sequences-info-search',
clearable=True),
html.Br(),
html.Div(
id=
'forna-sequence-info'
)
])
])
])),
dcc.Tab(
label='Colors',
value='colors',
children=html.Div(
className='control-tab',
children=[
html.Div(className='app-controls-name',
children='Color scheme'),
dcc.Dropdown(
id='forna-color-scheme',
options=[{
'label':
color_scheme,
'value':
color_scheme
} for color_scheme in [
'sequence', 'structure',
'positions', 'custom'
]],
value='sequence',
clearable=False),
html.Div(
className='app-controls-desc',
id='forna-color-scheme-desc',
children=
'Choose the color scheme to use.'),
html.Div(
id='forna-custom-colorscheme',
className='app-controls-block',
children=[
html.Hr(),
html.Div(
className=
'app-controls-name',
children='Molecule name'),
dcc.Dropdown(
id=
'forna-custom-colors-molecule'
),
html.Div(
className=
'app-controls-desc',
children=
'Select the sequence to which the custom '
+
'color scheme will be applied. If none is selected, '
+
'the color scheme will be applied to all molecules.'
),
html.Br(),
html.Div(
className=
'app-controls-name',
children='Coloring range'),
daq.ColorPicker(
id='forna-color-low',
label='Low',
labelPosition='top',
value={'hex': '#BE0000'}),
daq.ColorPicker(
id='forna-color-high',
label='High',
labelPosition='top',
value={'hex': '#336AFF'}),
html.Div(
className=
'fullwidth-app-controls-name',
children='Coloring domain'
),
html.Div(
className=
'app-controls-desc',
children=
'Specify a minimum and maximum value '
+
'which will be used to calculate intermediate '
+
'colors for nucleotides that have a numerical '
+
'value specified below.'),
html.Br(),
dcc.Input(
id='forna-color-domain-low',
type='number',
value=1),
dcc.Input(
id=
'forna-color-domain-high',
type='number',
value=100),
html.Br(),
html.Br(),
html.Div(
className=
'fullwidth-app-controls-name',
children='Colors map'),
html.Div(
className=
'app-controls-desc',
children=
'Specify the colors for each '
+
'nucleotide by entering the position of '
+
'the nucleotide into the left input box, '
+
'and either a) a string representation '
+
'of a color or b) a number within the '
+
'range specified above. Then, press the '
+ '"Submit" button,'),
html.Br(),
dcc.Input(
id=
'forna-color-map-nucleotide',
type='number',
min=1,
placeholder=1),
dcc.Input(
id='forna-color-map-color',
placeholder='green'),
html.Br(),
html.Br(),
html.Button(
id=
'forna-submit-custom-colors',
children='Submit')
])
]))
])
]),
html.Div(id='forna-container',
children=[
dash_bio.FornaContainer(id='forna',
height=500,
width=500)
]),
dcc.Store(id='forna-sequences', data=initial_sequences),
dcc.Store(id='forna-custom-colors')
])
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):