Molstar example

Usage examples for

https://github.com/jmbuhr/quarto-molstar

RCSB PDB

Get a protein from the RCSB PDB with:

{{< mol-rcsb 7sgl >}}

AlphaFold model.

Load the predicted structure of a protein from the AlphaFold Database using the AlphaFold Database ID. The loaded structure is coloured based on the prediction score.

{{< mol-afdb Q8W3K0 >}}

Local pdb file

Get a local pdb file with:

{{< mol-url ./www/7sgl.pdb >}}

pdb file from url

Get a pdb file from a url:

{{< mol-url https://files.rcsb.org/download/7sgl.pdb >}}

local xyz file

Get a local xyz file with:

{{< mol-url ./www/example.xyz >} }

local pdb and trajectory

Load a topology and a trajectory with:

{{< mol-traj ./www/example.pdb ./www/example.xtc >}}

snapshot file

Load a snapshot file, to share a saved Mol* session which will save aesthetic parameters and scene setup.

{{< mol-snapshot ./www/molstar.molj >}}

local file with volume information

{{< mol-volume ./www/traj.xyz ./www/density.cube >}}

Customization

Molstar options

The first argument (plus the second for mol-traj) is a positional argument. After this you can pass keyword arguments, which will be merged with defaults and passed on to molstar.Viewer.create. For example, if you don’t have an animation you might want to hide the animation button and open the right options panel on load:

{{< mol-rcsb 7sgl viewportShowAnimation=false layoutShowLeftPanel=false layoutShowControls=true >}}

There is a list of available options in the molstar source code: here.

Example

{{< mol-rcsb 7eqr viewportShowAnimation=false >}}

Global options

To embed plain text files (such as .pdb, .xyz) into the rendered html, add this to your yml header:

molstar: embed

The molecules will then also appear if you open the html file without a web server. Note that this can increase the size of the file significantly and only works with the mol-url shortcode. It does not work for binary trajectory formats such as xtc.

CSS

Each embedded app is inserted into a div with an ID created from the path of the pdb-file or trajectory (please don’t embed the same thing twice, it will only show up once). So the first app on this page will respond to css for #app-7sgl.

All apps have the class molstar-app and the following css is included by default:

.molstar-app {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

For example, you might want to make one app a bit shorter because there is text above it:

#app-7sgl {
  padding-bottom: 40%;
}