dash_bio.Jsme Examples and Reference

Jsme

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

from dash import Dash, html
import dash_bio as dashbio

app = Dash(__name__)

app.layout = html.Div([
    dashbio.Jsme(),
])

if __name__ == '__main__':
    app.run(debug=True)

Customization

Property smiles

The molecule SMILE to display

from dash import Dash, html
import dash_bio as dashbio

app = Dash(__name__)

app.layout = html.Div([
    dashbio.Jsme(
        smiles='O=C(Nc1cccc(Cl)c1)c3cncc4nnc(c2ccc(OC(F)F)cc2)n34',
    ),
])

if __name__ == '__main__':
    app.run(debug=True)

Property style

Generic style overrides on the plot div

from dash import Dash, html
import dash_bio as dashbio

app = Dash(__name__)

app.layout = html.Div([
    dashbio.Jsme(
        style={'margin': '20px', 'border': 'solid grey 2px'},
    ),
])

if __name__ == '__main__':
    app.run(debug=True)

Property width and height

The width and height of the JSME container. Can be set in px, % etc.

from dash import Dash, html
import dash_bio as dashbio

app = Dash(__name__)

app.layout = html.Div([
    dashbio.Jsme(
        width='100%',
        height='50vh',
    ),
])

if __name__ == '__main__':
    app.run(debug=True)

Property options

String that is a comma separated string of JSME options.
The available options are described on the
Wiki Jmol

from dash import Dash, html
import dash_bio as dashbio

app = Dash(__name__)

app.layout = html.Div([
    dashbio.Jsme(
        options='query useOCLidCode exportInChIauxInfo exportInChIkey \
exportInChI exportSVG searchInChIkey useOpenChemLib paste rButton',
    ),
])

if __name__ == '__main__':
    app.run(debug=True)

Example Data