"label": "PLPR",
"value": "PLPR"
}, {
"label": "5L73",
"value": "5L73"
}, {
"label": "NSP2",
"value": "NSP2"
}]
app.layout = html.Div([
dcc.Dropdown(id="multi-dropdown",
options=dropdown_options,
value=["1BNA", "MPRO"],
multi=True),
dashbio.NglMoleculeViewer(id="multiple-ngl"),
])
@app.callback(
[Output("multiple-ngl", 'data'),
Output("multiple-ngl", "molStyles")], [Input("multi-dropdown", "value")])
def return_molecule(value):
if (value is None):
raise PreventUpdate
molstyles_dict = {
"representations": ["cartoon", "axes+box"],
"chosenAtomsColor": "white",
"chosenAtomsRadius": 1,
"molSpacingXaxis": 100,
"type": "text/plain",
"input": content
},
"resetView": resetView,
"uploaded": False,
}
# Get sample data for starting the app
_model_data = get_data(test_value="1BNA",
pdb_id="1BNA",
color="red",
resetView=False)
viewer = html.Div(
[dash_bio.NglMoleculeViewer(id=_COMPONENT_ID, data=[_model_data])],
style={
"display": "inline-block",
"width": "calc(100% - 500px)",
"float": "left",
"marginTop": "50px",
"marginRight": "50px",
},
)
# Based on simple_app_layout
# simple_app_layout does not work because:
# There needs to be an additional reset button
def modified_simple_app_layout(component):
return [
'aaRange': 'ALL',
'chosenAtoms': '',
'color': '#e41a1c',
'config': {
'type': '',
'input': ''
},
'uploaded': False,
'resetView': False,
}
# Canvas container to display the structures
component_id = 'nglViewer'
viewer = html.Div(
id='ngl-biomolecule-viewer',
children=[dash_bio.NglMoleculeViewer(id=component_id, data=[data_dict])],
)
about_html = [
html.H4(className='what-is', children='What is NGL Molecule Viewer?'),
html.P('NGL Molecule Viewer is a visualizer that allows you'
' to view biomolecules in multiple representations.'),
html.P('You can select a preloaded structure, or upload your own,'
' in the "Data" tab. Supported formats: .pdb(.gz) / .cif(.gz) '),
html.
P('Additionally you can show multiple structures and (or) specify a chain/'
' residues range / highlight Cα of chosen residues or single atoms.'),
html.P(
'In the "View" tab, you can change the style of the viewer.'
' Like the background color, the chain colors, the render quality etc.'
' On top you can change the molecular representations.')
app = dash.Dash(__name__)
data_path = "https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/"
app.layout = html.Div([
dcc.Dropdown(id="color-dropdown", value='white',
options=[{"label": s.capitalize(), "value": s} for s in ["black", "white"]]),
dcc.Dropdown(id="quality-dropdown", value='auto',
options=[{"label": s.capitalize(), "value": s}
for s in ["auto", "low", "medium", "high"]]),
dcc.Dropdown(id="camera-dropdown", value='perspective',
options=[{"label": s.capitalize(), "value": s}
for s in ["perspective", "orthographic"]]),
dashbio.NglMoleculeViewer(id="stage-ngl"),
])
@app.callback(
[Output("stage-ngl", 'data'),
Output("stage-ngl", "molStyles"),
Output("stage-ngl", "stageParameters")],
[Input("color-dropdown", "value"),
Input("quality-dropdown", "value"),
Input("camera-dropdown", "value")]
)
def return_molecule(color, quality, camera):
molstyles_dict = {
"representations": ["cartoon", "axes+box"],
"chosenAtomsColor": "white",
'''
### Saving an Image
An image with the selected parameters can be saved as a `.PNG` by flagging the `downloadImage`
property. With the `imageParameters` optional dict, we can specify whether to enable `antialias`,
`transparency`, or `trim`, and set the `filename` for the saved image.
'''
app = dash.Dash(__name__)
data_path = "https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/"
app.layout = html.Div([
html.Button(id='save-ngl', n_clicks=0, children="Download Image"),
dcc.Input(id='file-ngl', placeholder="Enter filename"),
dashbio.NglMoleculeViewer(id="download-ngl"),
])
@app.callback([
Output("download-ngl", 'data'),
Output("download-ngl", "molStyles"),
Output("download-ngl", "downloadImage"),
Output("download-ngl", "imageParameters")
], [Input("save-ngl", "n_clicks")], [State("file-ngl", "value")])
def return_molecule(n_clicks, filename):
molstyles_dict = {
"representations": ["cartoon", "axes+box"],
"chosenAtomsColor": "red",
"chosenAtomsRadius": 1,
"molSpacingXaxis": 100,
{"label": "NSP2", "value": "NSP2"}
]
app.layout = html.Div([
dcc.Markdown('''
### NglMoleculeViewer Controls
* Rotate Stage: Left-click on the viewer and move the mouse to rotate the stage.
* Zoom: Use the mouse scroll-wheel to zoom in and out of the viewer.
* Pan: Right click on the viewer to pan the stage.
* Individual Molecule Interaction: Left click on the molecule to interact with, then hold the
`CTRL` key and use right and left click mouse buttons to rotate and pan individual molecules.
'''),
dcc.Dropdown(id="default-dropdown", options=dropdown_options, placeholder="Select a molecule",
value = "1BNA"),
dashbio.NglMoleculeViewer(id="default-ngl"),
])
@app.callback(
[Output("default-ngl", 'data'),
Output("default-ngl", "molStyles")],
[Input("default-dropdown", "value")]
)
def return_molecule(value):
if (value is None):
raise PreventUpdate
molstyles_dict = {
"representations": ["cartoon", "axes+box"],
"chosenAtomsColor": "white",
options=representation_options,
multi=True,
value=["cartoon", "axes+box"]),
dcc.RadioItems(id="molstyle-radio",
options=[
{
'label': 'sideByside',
'value': "True"
},
{
'label': 'Independent',
'value': "False"
},
],
value="False"),
dashbio.NglMoleculeViewer(id="molstyle-ngl"),
])
@app.callback(
[Output("molstyle-ngl", 'data'),
Output("molstyle-ngl", "molStyles")],
[Input("molstyle-dropdown", "value"),
Input("molstyle-radio", "value")])
def return_molecule(style, sidebyside):
sidebyside_bool = sidebyside == "True"
molstyles_dict = {
"representations": style,
"chosenAtomsColor": "red",
hosted with the `local` boolean argument.
The color and radius of chosen atoms can be set through the `molStyles` property with the
"chosenAtomsColor" and "chosenAtomsRadius" keys.
'''
app = dash.Dash(__name__)
data_path = "https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/"
app.layout = html.Div([
dcc.Input(id="chain-input", placeholder="Eg. 5L73.A:629-819@700,750,800", value="5L73.A:629-819@700,750,800"),
dcc.Dropdown(id="chain-color", value='black',
options=[{"label": s.capitalize(), "value": s} for s in ["black", "white","red", "blue"]]),
dashbio.NglMoleculeViewer(id="chain-ngl"),
])
@app.callback(
[Output("chain-ngl", 'data'),
Output("chain-ngl", "molStyles")],
[Input("chain-input", "value"),
Input("chain-color", "value")]
)
def return_molecule(value, color):
if (value is None):
raise PreventUpdate
molstyles_dict = {
"representations": ["cartoon", "axes+box"],
value=600,
step=100,
marks={
300: '300px',
800: '800px'
}),
dcc.Slider(id='width-ngl',
min=300,
max=800,
value=600,
step=100,
marks={
300: '300px',
800: '800px'
}),
dashbio.NglMoleculeViewer(id="dimensions-ngl"),
])
@app.callback([
Output("dimensions-ngl", 'data'),
Output("dimensions-ngl", "molStyles"),
Output("dimensions-ngl", "height"),
Output("dimensions-ngl", "width")
], [Input("height-ngl", "value"),
Input("width-ngl", "value")])
def return_molecule(height, width):
molstyles_dict = {
"representations": ["cartoon", "axes+box"],
"chosenAtomsColor": "red",
"chosenAtomsRadius": 1,