Molecule3dViewer Examples and Reference


Default Molecule3dViewer

An example of a default Molecule3dViewer 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/' +
    'mol3d/model_data.js'
).read()
styles_data = urlreq.urlopen(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
    'mol3d/styles_data.js'
).read()

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

model_data = json.loads(model_data)
styles_data = json.loads(styles_data)

app.layout = html.Div([
    dashbio.Molecule3dViewer(
        id='my-dashbio-molecule3d',
        styles=styles_data,
        modelData=model_data
    ),
    "Selection data",
    html.Hr(),
    html.Div(id='molecule3d-output')
])


@app.callback(
    dash.dependencies.Output('molecule3d-output', 'children'),
    [dash.dependencies.Input('my-dashbio-molecule3d', 'selectedAtomIds')]
)
def show_selected_atoms(atom_ids):
    if atom_ids is None or len(atom_ids) == 0:
        return 'No atom has been selected. Click somewhere on the molecular \
        structure to select an atom.'
    return [html.Div([
        html.Div('Element: {}'.format(model_data['atoms'][atm]['element'])),
        html.Div('Chain: {}'.format(model_data['atoms'][atm]['chain'])),
        html.Div('Residue name: {}'.format(model_data['atoms'][atm]['residue_name'])),
        html.Br()
    ]) for atm in atom_ids]


if __name__ == '__main__':
    app.run_server(debug=True)
Selection data

Selection Type

Choose what gets highlighted with the same color upon selection.

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

dashbio.Molecule3dViewer(
    styles=styles_data,
    modelData=model_data,
    selectionType='Chain'
)  

Background Color/Opacity

Change the background color and opacity of the canvas on which Mol3D is rendered.

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

dashbio.Molecule3dViewer(
    styles=styles_data,
    modelData=model_data,
    backgroundColor='#FF0000',
    backgroundOpacity=0.2
)  

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

help(dash_bio.Molecule3dViewer)
```

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

atomLabelsShown (boolean; optional): Property to either show or hide labels

backgroundColor (string; default '#FFFFFF'): Property to change the background color of the molecule viewer

backgroundOpacity (number; default 0): Property to change the background opacity - ranges from 0 to 1

labels (list; optional): labels corresponding to the atoms of the molecule

modelData (dict; optional): The data that will be used to display the molecule in 3D The data will be in JSON format and should have two main dictionaries - atoms, bonds. modelData has the following type: dict containing keys ‘atoms’, ‘bonds’. Those keys have the following types:

  • atoms (list; optional)
  • bonds (list; optional)

selectionType (a value equal to: ‘atom’, ‘residue’, ‘chain’; default 'atom'): The selection type - may be atom, residue or chain

styles (dict; optional): Property that can be used to change the representation of the molecule. Options include sticks, cartoon and sphere. styles has the following type: list of dicts containing keys ‘color’, ‘visualization_type’. Those keys have the following types:

  • color (string; optional)
  • visualization_type (a value equal to: ‘cartoon’, ‘sphere’, ‘stick’; optional)

selectedAtomIds (list; optional): Property that stores a list of all selected atoms