dash_bioSpeck Examples and Reference

Speck

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

library(dashBio)
library(dash)
library(dashCoreComponents)
library(dashHtmlComponents)
library(readr)
library(dashTable)

app <- Dash$new()

importSpeck <- function(filepath,
                        header = FALSE,
                        skip = 2) {
    textdata <- read.table(
    text = paste0(readLines(filepath), collapse="\n"),
    header = header,
    skip = skip,
    col.names = c("symbol", "x", "y", "z"),
    stringsAsFactors = FALSE)
  return(dashTable::df_to_list(textdata))
}

data <- importSpeck("https://git.io/speck_methane.xyz")

app$layout(htmlDiv(list(
    dccDropdown(
        id = 'default-speck-preset-views',
        options = list(
            list("label" = "Default", "value" = "default"),
            list("label" = "Ball and Stick", "value" = "stickball")
        ),
        value = "default"
    ),

    dashbioSpeck(
        id = "default-speck",
        data = data
    )
)))
app$callback(
    output(id = "default-speck", property = "presetView"),
    params = list(
        input(id = "default-speck-preset-views", property = "value")
    ),

    update_preset_view <- function(preset_name) {
        return(preset_name)
    }
)

app$run_server()

Customization

Molecule Rendering Styles

Change the level of atom outlines, ambient occlusion, and more with the “view” parameter.

library(dashBio)

data <- importSpeck("https://git.io/speck_methane.xyz")

dashbioSpeck(
    data = data,
    view = list(
        "resolution" = 400,
        "ao" = 0.1,
        "outline" = 1,
        "atomScale" = 0.25,
        "relativeAtomScale" = 0.33,
        "bonds" = TRUE
    )
)

Scroll To Zoom

Allow for the scroll wheel to control zoom for the molecule.

library(dashBio)

data <- importSpeck("https://git.io/speck_methane.xyz")

dashbioSpeck(
    data = data,
    scrollZoom  = TRUE
)

Speck 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 Dash callbacks.

data (list where each item is a named list; optional):
The xyz file data; a list of atoms such that each atom has a
dictionary defining the x, y, and z coordinates along with the atom’s
symbol.

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

symbol (character; optional)
x (numeric; optional)
y (numeric; optional)
z (numeric; optional)

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

view (named list; default speckView.new()):
An object that determines and controls various parameters related to
how the molecule is displayed.

view is a named list with keys:

ao (numeric; optional)
aoRes (numeric; optional)
aspect (numeric; optional)
atomScale (numeric; optional)
atomShade (numeric; optional)
bondScale (numeric; optional)
bondShade (numeric; optional)
bondThreshold (numeric; optional)
bonds (logical; optional)
brightness (numeric; optional)
dofPosition (numeric; optional)
dofStrength (numeric; optional)
fxaa (numeric; optional)
outline (numeric; optional)
relativeAtomScale (numeric; optional)
resolution (numeric; optional)
rotation (named list; optional)

rotation is a named list with keys:
spf (numeric; optional)
translation (named list; optional)

translation is a named list with keys:
- x (numeric; optional)
- y (numeric; optional)
zoom (numeric; optional)

presetView (a value equal to: ‘default’, ‘stickball’, ‘toon’ or ‘licorice’; optional):
One of several pre-loaded views: default, stick-ball, toon, and
licorice.

style (named list; default { height: '600px', width: '600px', position: 'relative',}):
Generic style overrides on the plot div.

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.