dash_bio.Molecule2dViewer Examples and Reference

see Molecule2dViewer in action.

Molecule2dViewer

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)

Customization

Selected Atom Ids

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

Model Data

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
)

Molecule2dViewer Properties

Access this documentation in your Python terminal with:
```python

help(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.

Example Data