index.qmd

---
title: Molstar example
format:
  html:
    code-copy: true
toc: true
# molstar: embed
---

# Usage examples for

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

## RCSB PDB

Get a protein from the RCSB PDB with:

`{{{< mol-rcsb 7sgl >}}}`

{{< mol-rcsb 7sgl >}}

## AlphaFold model.

Load the predicted structure of a protein from the [AlphaFold Database](https://alphafold.com/) using the AlphaFold Database ID. The loaded structure is coloured based on the prediction score.

`{{{< mol-afdb Q8W3K0 >}}}`

{{< mol-afdb Q8W3K0 >}}

## Local pdb file

Get a local pdb file with:

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

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

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

## local xyz file

Get a local xyz file with:

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

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

## local pdb and trajectory

Load a topology and a trajectory with:

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

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

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

## local file with volume information

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

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


## local MVSJ file

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

{{< 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](https://github.com/molstar/molstar/blob/33963c085a79e5eec64160b64c5d6ff3782b477b/src/apps/viewer/app.ts#L72-L103).

Example

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

{{< 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:

``` yml
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:

``` css
.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:

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

# Presentations

`quarto-molstar` also works with presentations, but there are some caveats.
Here is an example: [presentation](presentation.html).

Instead of `div`s, quarto-molstar creates in-line `iframe`s for presentations,
because `divs`s 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](https://quarto.org/docs/presentations/revealjs/#iframe-backgrounds), 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:

```html
<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`:

```markdown
## 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`.

```markdown
{{< mol-url ./www/7sgl.pdb pixelScale=3 >}}
```