see Molecule2dViewer in action.
An example of a default Molecule2dViewer component without any extra properties.
import json
import urllib.request as urlreq
from dash import Dash, html, Input, Output, callback
import dash_bio as dashbio
app = Dash(__name__)
model_data = urlreq.urlopen(
'https://git.io/mol2d_buckminsterfullerene.json'
).read().decode('utf-8')
model_data = json.loads(model_data)
app.layout = html.Div([
dashbio.Molecule2dViewer(
id='dashbio-default-molecule2d',
modelData=model_data
),
html.Hr(),
html.Div(id='default-molecule2d-output')
])
@callback(
Output('default-molecule2d-output', 'children'),
Input('dashbio-default-molecule2d', 'selectedAtomIds')
)
def update_selected_atoms(ids):
if ids is None or len(ids) == 0:
return "No atom has been selected. Select atoms by clicking on them."
return "Selected atom IDs: {}.".format(', '.join([str(i) for i in ids]))
if __name__ == '__main__':
app.run(debug=True)
Highlight specific atoms in the molecule.
import json
import urllib.request as urlreq
import dash_bio as dashbio
model_data = urlreq.urlopen(
'https://git.io/mol2d_buckminsterfullerene.json'
).read().decode('utf-8')
dashbio.Molecule2dViewer(
id='molecule2d-selectedatomids',
modelData=json.loads(model_data),
selectedAtomIds=list(range(10))
)
Change the bonds and atoms in the molecule.
import json
import urllib.request as urlreq
import dash_bio as dashbio
model_data = urlreq.urlopen(
'https://git.io/mol2d_buckminsterfullerene.json'
).read().decode('utf-8')
model_data = json.loads(model_data)
for atom in model_data['nodes']:
atom.update(atom='N')
for bond in model_data['links']:
bond.update(distance=50.0, strength=0.5)
dashbio.Molecule2dViewer(
id='molecule2d-modeldata',
modelData=model_data
)
Access this documentation in your Python terminal with:
```pythonhelp(dash_bio.Molecule2dViewer)
```
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 used to identify this component in callbacks.
selectedAtomIds
(list of numbers; optional):
The selected atom IDs.
width
(number; default 500
):
The width of the SVG element.
height
(number; default 500
):
The height of the SVG element.
modelData
(dict; default { nodes: [], links: [],}
):
Description of the molecule to display.
modelData
is a dict with keys:
links
(list of dicts; optional)
links
is a list of dicts with keys:
bond
(number; optional)
distance
(number; optional)
id
(number; optional)
source
(optional)
strength
(number; optional)
target
(optional)
nodes
(list of dicts; optional)
nodes
is a list of dicts with keys:
atom
(string; optional)
id
(number; optional)
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.
scrollZoom
(boolean; optional):
The option of whether or not to allow scrolling to control the zoom.