dash_bio_speck Examples and Reference

See Speck in action.

Speck

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

using Dash, DashBio, DashBioUtils
using StringEncodings, HTTP, JSON

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

data = "https://git.io/speck_methane.xyz"

data = DashBioUtils.read_xyz(data, is_datafile=false)

app = dash(external_stylesheets=external_stylesheets)

app.layout = html_div([
  dcc_dropdown(
      id="default-speck-preset-views",
      options=[
          Dict("label" =>  "Default", "value" =>  "default"),
          Dict("label" =>  "Ball and stick", "value" =>  "stickball")
      ],
      value="default"
  ),
  dashbio_speck(
      id="default-speck",
      data=data
  ),
])

callback!(app,
  Output("default-speck", "presetView"),
  [Input("default-speck-preset-views", "value")]
) do preset_name
  return preset_name
end

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

Customization

Molecule Rendering Styles

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

using Dash, DashBio, DashBioUtils
using StringEncodings, HTTP, JSON

data = "https://git.io/speck_methane.xyz"

data = DashBioUtils.read_xyz(data, is_datafile=false)

app = dash()

app.layout = dashbio_speck(
  data=data,
  view=Dict(
      "resolution" =>  400,
      "ao" =>  0.1,
      "outline" =>  1,
      "atomScale" =>  0.25,
      "relativeAtomScale" =>  0.33,
      "bonds" =>  true
  )
)

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

Scroll To Zoom

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

using Dash, DashBio, DashBioUtils
using StringEncodings, HTTP, JSON

data = "https://git.io/speck_methane.xyz"

data = DashBioUtils.read_xyz(data, is_datafile=false)

app = dash()

app.layout = dashbio_speck(
    data=data,
    view=Dict(
        "resolution" =>  400,
        "ao" =>  0.1,
        "outline" =>  1,
        "atomScale" =>  0.25,
        "relativeAtomScale" =>  0.33,
        "bonds" =>  true
    )
)

run_server(app, "0.0.0.0", debug=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 (String; optional):
The ID used to identify this component in Dash callbacks.

data (Array of Dicts; 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 an Array of Dicts with keys:

  • symbol (String; optional)

  • x (Real; optional)

  • y (Real; optional)

  • z (Real; optional)

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

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

view is a Dict with keys:

  • ao (Real; optional)

  • aoRes (Real; optional)

  • aspect (Real; optional)

  • atomScale (Real; optional)

  • atomShade (Real; optional)

  • bondScale (Real; optional)

  • bondShade (Real; optional)

  • bondThreshold (Real; optional)

  • bonds (Bool; optional)

  • brightness (Real; optional)

  • dofPosition (Real; optional)

  • dofStrength (Real; optional)

  • fxaa (Real; optional)

  • outline (Real; optional)

  • relativeAtomScale (Real; optional)

  • resolution (Real; optional)

  • rotation (Dict; optional)

    rotation is a Dict with keys:

  • spf (Real; optional)

  • translation (Dict; optional)

    translation is a Dict with keys:

    • x (Real; optional)

    • y (Real; optional)

  • zoom (Real; 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 (Dict; default { height: '600px', width: '600px', position: 'relative',}):
Generic style overrides on the plot div.

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.

showLegend (Bool; default false):
The option of whether to show color legend.

Example Data