dash_bio_molecule2dviewer Examples and Reference

see Molecule2dViewer in action.

Molecule2dViewer

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

CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

No atom has been selected. Select atoms by clicking on them.
using Dash, DashBio
using StringEncodings, HTTP, JSON

req = HTTP.request("GET", "https://git.io/mol2d_buckminsterfullerene.json")
data = decode(req.body, "UTF-8")

model_data = JSON.parse(data)

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

app = dash(external_stylesheets=external_stylesheets)

app.layout = html_div([
    dashbio_molecule2dviewer(
        id="dashbio-default-molecule2d",
        modelData=model_data
    ),
    html_hr(),
    html_div(id="molecule2d-default-output")
])

callback!(app,
    Output("molecule2d-default-output", "children"),
    [Input("dashbio-default-molecule2d", "selectedAtomIds")]
) do ids
    if ids isa Nothing || length(ids) == 0
        return "No atom has been selected. Select atoms by clicking on them."
    end
    return "Selected atom IDs: $(join([string(i) for i in ids],","))"
end

run_server(app, "0.0.0.0", debug=true)

Customization

Selected Atom Ids

Highlight specific atoms in the molecule.

CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
using Dash, DashBio
using StringEncodings, HTTP, JSON

req = HTTP.request("GET", "https://git.io/mol2d_buckminsterfullerene.json")
data = decode(req.body, "UTF-8")

model_data = JSON.parse(data)

app = dash()

app.layout = dashbio_molecule2dviewer(
    id="molecule2d-selectedatomids",
    modelData=model_data,
    selectedAtomIds=(range(1, length = 10))
)

run_server(app, "0.0.0.0", debug=true)

Model Data

Change the bonds and atoms in the molecule.

NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
using Dash, DashBio
using StringEncodings, HTTP, JSON

req = HTTP.request("GET", "https://git.io/mol2d_buckminsterfullerene.json")
data = decode(req.body, "UTF-8")

model_data = JSON.parse(data)

app = dash()

for atom in model_data["nodes"]
    atom["atom"] = "N"
end
for bond in model_data["links"]
    bond["distance"] = 50.0
    bond["strength"] = 0.5
end
app.layout = dashbio_molecule2dviewer(
    id="molecule2d-modeldata",
    modelData=model_data
)

run_server(app, "0.0.0.0", debug=true)

Molecule2dViewer Properties

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 (Array of Reals; optional): The selected atom IDs.

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

height (Real; 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 (Array of Dicts; optional)

    links is an Array of Dicts with keys:

    • bond (Real; optional)

    • distance (Real; optional)

    • id (Real; optional)

    • source (optional)

    • strength (Real; optional)

    • target (optional)

  • nodes (Array of Dicts; optional)

    nodes is an Array of Dicts with keys:

    • atom (String; optional)

    • id (Real; 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 (Bool; optional): Determines if the component is loading or not.

  • prop_name (String; optional): Holds which property is loading.

scrollZoom (Bool; optional): The option of whether or not to allow scrolling to control the zoom.

Example Data