dash_bioMolecule2dViewer Examples and Reference

see Molecule2dViewer in action.

Molecule2dViewer

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


library(dash)
library(dashHtmlComponents)
library(dashCoreComponents)
library(dashBio)
library(jsonlite)

model_data <- read_json("https://git.io/mol2d_buckminsterfullerene.json")

app <- Dash$new()

app$layout(
    htmlDiv(
        list(
            dashbioMolecule2dViewer(
                id = 'dashbio-default-molecule2d',
                modelData = model_data
            ),
        htmlHr(),
        htmlDiv(id = 'molecule2d-default-output')
        )
    )
)

app$callback(
    output(id = "molecule2d-default-output", property = "children"),
    params = list(
            input(id = "dashbio-default-molecule2d", property = "selectedAtomIds")
    ),

    update_selected_atoms <- function(ids){
        if (is.null(ids[[1]]) | length(ids) < 1 ) {
            return("No atom has been selected. Select atoms by clicking on them.")
        }
        else {
            return(sprintf("    Selected atom ID: %s", as.character(paste(unlist(ids), collapse=' - '))))
        }
    }
)

app$run_server()

Customization

Selected Atom Ids

Highlight specific atoms in the molecule.

library(dashBio)

model_data <- read_json("https://git.io/mol2d_buckminsterfullerene.json")

dashbioMolecule2dViewer(
    modelData = model_data,
    selectedAtomIds = list(seq(1:10))
)

Model Data

Change the bonds and atoms in the molecule.

library(dashBio)

model_data <- read_json("https://git.io/mol2d_buckminsterfullerene.json")

for (node in model_data$nodes) {
    node$atom <- "N"
}

for (link in model_data$links) {
    link$distance <- 50.0
    link$strength <- 0.5
}

dashbioMolecule2dViewer(
    modelData = model_data,
    selectedAtomIds = list(seq(1:10))
)

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 (character; optional):
The ID used to identify this component in callbacks.

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

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

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

modelData (named list; default { nodes: [], links: [],}):
Description of the molecule to display.

modelData is a named list with keys:

  • links (list where each item is a named list; optional)

    links is a list where each item is a named list with keys:

    • bond (numeric; optional)

    • distance (numeric; optional)

    • id (numeric; optional)

    • source (optional)

    • strength (numeric; optional)

    • target (optional)

  • nodes (list where each item is a named list; optional)

    nodes is a list where each item is a named list with keys:

    • atom (character; optional)

    • id (numeric; optional)

loading_state (named list; optional):
Object that holds the loading state object coming from dash-renderer.

loading_state is a named list with keys:

  • component_name (character; optional):
    Holds the name of the component that is loading.

  • is_loading (logical; optional):
    Determines if the component is loading or not.

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

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

Example Data