see Molecule2dViewer in action.
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()
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))
)
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))
)
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.