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:

[]{.quarto-shortcode__-escaped data-is-shortcode="1" data-value=" }

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 >}}

local MVSJ file

{{< mol-json ./www/1cbs.mvsj >}}

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%;
}

Presentations

quarto-molstar also works with presentations, but there are some caveats. Here is an example: presentation.

Instead of divs, quarto-molstar creates in-line iframes for presentations, because divss with molstar content in them only appear black in revealjs. However, iframes can sometimes interact not very nicely with the scaling used by revealjs, so they can appear blurry. There is a way to make iframes that are not affected by the scaling and blurring and that is by using a background iframe, but this requires a separate file and is a bit more manual. Here is how you would include an example file _example.html an iframe:

<head>
<script type="text/javascript" src="./molstar.js"></script>
<link rel="stylesheet" type="text/css" href="./molstar.css"/>
</head>
<body>
<div id="app-id" class="molstar-app"></div>
<script type="text/javascript">
molstar.Viewer.create("app-id", {"emdbProvider":"rcsb","layoutShowLeftPanel":true,"layoutShowRemoteState":false,"viewportShowAnimation":true,"pdbProvider":"rcsb","layoutShowSequence":false,"viewportShowSelectionMode":false,"layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false,"layoutIsExpanded":false}).then(viewer => {
viewer.loadStructureFromUrl("./www/traj.xyz", "xyz")
});
</script>
</body>

<style>
.molstar-app {
  width: 100%;
  height: 800px;
}
</style>

And then in qmd:

## Heading {background-iframe="./_example.html" background-interactive=true}

Alternatively, the pixelScale parameter can be used to upscale the resolution of the rendering in presentations and readjust for the ‘downsampling’ of reveal.js.