Library Request: molstar a protein viewer.

[zachcp]

Hi Team Observable,

• I'd like to be able to embed molstar viewers.
• According to the stubborn importer troubleshooter this is a tricky import.
• theres are some nice precedents for other static site embeds - e.g. quarto-molstar

I'll work on some import options but it might make for a nice addition to the library section.

thanks!
zach cp

[mbostock]

Here’s how I got it working. First I downloaded the molstar library, putting the files in docs:

curl -o docs/molstar.js https://molstar.org/viewer/molstar.js
curl -o docs/molstar.css https://molstar.org/viewer/molstar.css

Then I created the following page following the plugin documentation:

<link rel="stylesheet" type="text/css" href="molstar.css">

```js
import "./molstar.js";

const molstar = window.molstar;
```

<div id="app" style="position: relative; width: 800px; height: 600px;"></div>

```js echo
molstar.Viewer.create("app", {
  layoutIsExpanded: false,
  layoutShowControls: false,
  layoutShowRemoteState: false,
  layoutShowSequence: true,
  layoutShowLog: false,
  layoutShowLeftPanel: true,
  viewportShowExpand: true,
  viewportShowSelectionMode: false,
  viewportShowAnimation: false,
  pdbProvider: "rcsb",
  emdbProvider: "rcsb",
}).then(viewer => {
  viewer.loadPdb("7bv2");
  viewer.loadEmdb("EMD-30210", {detail: 6});
});
```

It looks like this:

You currently need to use import instead of a script tag, but see #1035. (And import is probably better anyway, since it’s async.)

[zachcp]

wow. you are..... amazing. fast and amazing.

[zachcp]

HI Good Morning @mbostock ,

I ran into an issue extending the above example to use a local file. For example if we add a local PDB and attempt to use it we get encounter an issue related to file not found. Can you point me to how to let Observable know about local static assets in this case?

thank you,
zach cp

curl -o docs/7BV2.pdb  https://files.rcsb.org/download/7BV2.pdb

molstar.Viewer.create("app", {
  layoutIsExpanded: false,
}).then((viewer) => {
    viewer.loadStructureFromUrl("7BV2.pdb", "pdb");   // <--  file is not found
});

[zachcp]

( theres a bunch of details that I can work out once I have a working example. This package does a LOT and was designed to retrieve files from Web APIs. I'm pretty sure theres knobs to turn those all off. )

[zachcp]

Would you like me to add an example to the documentation page?

[Fil]

I feel that this library is too advanced/niche for something that we'd want to have in the main documentation. But it's nice to have it documented here and elsewhere (hint: your blog?) to help future users find it.

[Fil]

I've updated the solution and added it to pangea (my big list of examples): https://observablehq.observablehq.cloud/pangea/party/molstar

[mbostock]

@Fil I’m seeing some errors in that example. You can’t use an HTML code block for this:

<link rel="stylesheet" type="text/css" href="npm:molstar/build/viewer/molstar.css">

An HTML code block is rendered client-side (because HTML code blocks are dynamic), so the npm: URL isn’t resolved, and then you see this error in the console:

Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME npm:molstar/build/viewer/molstar.css:1

I then see a separate error here:

FileAttachment("molstar/7bv2.pdb").href

I think the path to the file attachment is wrong. It should be:

FileAttachment("7bv2.pdb").href

[Fil]

Thanks for spotting the CSS error, this was my mistake: a last-minute change so I could display the code, and I did not verify. The missing file error was due to #1367; observable cloud deploy is case sensitive — the code was requesting 7Bv2.pdb but the file is named 7BV2.pdb.

[Fil]

I'm still seeing an error, which looks internal to molstar and does not seem to prevent it from working.

Error: Unexpected token. Expected data_, loop_, or data name.
    at t.f (molstar.49ad7967.js:2:2512771)

[zachcp]

You guys are fantastic.