Molecule2dViewer Examples and Reference


Default Molecule2dViewer

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

import json
import six.moves.urllib.request as urlreq
from six import PY3

import dash
import dash_bio as dashbio
import dash_html_components as html


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

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

model_data = urlreq.urlopen(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
    'mol2d_buckminsterfullerene.json'
).read()

if PY3:
    model_data = model_data.decode('utf-8')

model_data = json.loads(model_data)

app.layout = html.Div([
    dashbio.Molecule2dViewer(
        id='my-dashbio-molecule2d',
        modelData=model_data
    ),
    html.Hr(),
    html.Div(id='molecule2d-output')
])


@app.callback(
    dash.dependencies.Output('molecule2d-output', 'children'),
    [dash.dependencies.Input('my-dashbio-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_server(debug=True)


Selected Atom Ids

Highlight specific atoms in the molecule.

import json
import six.moves.urllib.request as urlreq

import dash_bio as dashbio

model_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol2d_buckminsterfullerene.json').read()

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 six.moves.urllib.request as urlreq

import dash_bio as dashbio

model_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol2d_buckminsterfullerene.json').read()

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:
```python

help(dash_bio.Molecule2dViewer)
```

id (string; optional): The ID used to identify this component in callbacks.

height (number; default 500): The height of the SVG element.

modelData (dict; default { nodes: [], links: [], }): Description of the molecule to display. modelData has the following type: dict containing keys ‘nodes’, ‘links’. Those keys have the following types:

  • nodes (dict; optional): nodes has the following type: list of dicts containing keys ‘id’, ‘atom’. Those keys have the following types: - id (number; optional) - atom (string; optional)
  • links (dict; optional): links has the following type: list of dicts containing keys ‘id’, ‘source’, ‘target’, ‘bond’, ‘strength’, ‘distance’. Those keys have the following types: - id (number; optional) - source (optional) - target (optional) - bond (number; optional) - strength (number; optional) - distance (number; optional)

selectedAtomIds (list of numbers; optional): The selected atom IDs.

width (number; default 500): The width of the SVG element.