Molstar shiny element

Shiny.react component to show Molstar molecular visualizations. It can use a "Protein Data Bank" id, an URL to a valid .pdb/.cif file in the internet.

Usage

Molstar(
  class = NULL,
  url = NULL,
  pdbId = NULL,
  dimensions = NULL,
  useInterface = FALSE,
  showControls = FALSE,
  showAxes = FALSE,
  ...
)

Arguments

class

character string for the class name to apply to the outer parent element.

url

Load a structure by passing in the URL of the file. This file type needs to be supported by Molstar (.pdb, .cif).

pdbId

Load an official PDB structure by supplying its 4 letter ID. See the details for example databses.

dimensions

an integer vector indicating the dimensions of the visualization in pixels (c(width, height)). By default the molstar plugin will take up the full screen.

useInterface

a logical value indicating if the full Molstar interface will be used around the core canvas.

showControls

a logical value indicating if the controls will be shown around the sides of the interface. It needs the useInterface parameter to be also TRUE. Only recommended for large sizes.

showAxes

a logical value indicating if axes will appear in the bottom left corner.

...

Component other props and children.

Details

A pdbId can be found in public databases such as:

• https://www.ebi.ac.uk/pdbe/entry/search/index/

• https://www.rcsb.org/

The file parameter is supported by the react library, but it should not be used in Shiny.

Examples

Molstar(pdbId = "1LOL", dimensions = c(300, 300))
#> <div class="react-container">
#>   <script class="react-data" type="application/json">{"type":"element","module":"molstar-react","name":"Molstar","props":{"type":"raw","value":{"className":null,"url":null,"pdbId":"1LOL","dimensions":[300,300],"useInterface":false,"showControls":false,"showAxes":false}}}</script>
#>   <script>jsmodule['@/shiny.react'].findAndRenderReactData()</script>
#> </div>
Molstar(pdbId = "1y98", dimensions = c(300, 300))
#> <div class="react-container">
#>   <script class="react-data" type="application/json">{"type":"element","module":"molstar-react","name":"Molstar","props":{"type":"raw","value":{"className":null,"url":null,"pdbId":"1y98","dimensions":[300,300],"useInterface":false,"showControls":false,"showAxes":false}}}</script>
#>   <script>jsmodule['@/shiny.react'].findAndRenderReactData()</script>
#> </div>

url <- "https://alphafold.ebi.ac.uk/files/AF-A0A1U8FD60-F1-model_v4.pdb"
Molstar(url = url, dimensions = c(300, 300))
#> <div class="react-container">
#>   <script class="react-data" type="application/json">{"type":"element","module":"molstar-react","name":"Molstar","props":{"type":"raw","value":{"className":null,"url":"https://alphafold.ebi.ac.uk/files/AF-A0A1U8FD60-F1-model_v4.pdb","pdbId":null,"dimensions":[300,300],"useInterface":false,"showControls":false,"showAxes":false}}}</script>
#>   <script>jsmodule['@/shiny.react'].findAndRenderReactData()</script>
#> </div>

url2 <- "https://alphafold.ebi.ac.uk/files/AF-A0A1U8FD60-F1-model_v4.cif"
Molstar(url = url2, dimensions = c(300, 300))
#> <div class="react-container">
#>   <script class="react-data" type="application/json">{"type":"element","module":"molstar-react","name":"Molstar","props":{"type":"raw","value":{"className":null,"url":"https://alphafold.ebi.ac.uk/files/AF-A0A1U8FD60-F1-model_v4.cif","pdbId":null,"dimensions":[300,300],"useInterface":false,"showControls":false,"showAxes":false}}}</script>
#>   <script>jsmodule['@/shiny.react'].findAndRenderReactData()</script>
#> </div>