Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revealjs MOLSTAR #14

Closed
HankewieDanke opened this issue Sep 14, 2023 · 15 comments
Closed

Revealjs MOLSTAR #14

HankewieDanke opened this issue Sep 14, 2023 · 15 comments

Comments

@HankewieDanke
Copy link
Contributor

HankewieDanke commented Sep 14, 2023

Hey,
I love this plugin for quarto.

But I have following issue:
Molstar does not load any structure when rendering quarto to revealjs.

See below a minimal working example for html (working) and revealjs export:

---
title: "t"
subtitle: 't'
author: "t"
date: "2023/09/15"
to: html
---

{{< mol-rcsb 1f16 >}}
---
title: "t"
subtitle: 't'
author: "t"
date: "2023/09/15"
format:
    revealjs:
        theme: [serif,style.css]
        smaller: true
to: revealjs
---

{{< mol-rcsb 1f16 >}}

Maybe I am doing something wrong?
Thank you for your help :)

quarto version: 1.3.450
plugin: v0.1.2

@jmbuhr
Copy link
Owner

jmbuhr commented Sep 14, 2023

You don't need the extra to: revealjs (this will be passed directly to pandoc, maybe it circumvents the filter), if you remove it, it works.
If you need more styling (by default the viewer might be a bit small in a presentation), check out https://github.com/jmbuhr/quarto-molstar/blob/main/presentation.qmd with https://github.com/jmbuhr/quarto-molstar/blob/main/presentation.css -> https://jmbuhr.de/quarto-molstar/presentation.html#/rcsb-pdb

@jmbuhr
Copy link
Owner

jmbuhr commented Sep 14, 2023

And thanks for the comprehensive reproducible example :)

@HankewieDanke
Copy link
Contributor Author

Thank you for the quick response :)
This is working for the mol-rcsb case, but I still have problems when using a local file with mol-url.
Are there any spezificities I have to watch out for in the pdb formating?

@jmbuhr
Copy link
Owner

jmbuhr commented Sep 15, 2023

This example is working for me: https://jmbuhr.de/quarto-molstar/presentation.html#/local-pdb-file
One step you can do for debugging is opening the developer tools (ctrl+shift+i in chromium bases browsers) and checking the console for things like:
image

This is what happens if I change the path to point to a non-existent file.

@jmbuhr
Copy link
Owner

jmbuhr commented Sep 15, 2023

If this issue doesn't appear locally but only when deploying a website/document it may be a case of: #7

I think quarto has recently added more functions for plugins to discover resources, so I should revisit this and add the resources automatically.

@jmbuhr
Copy link
Owner

jmbuhr commented Sep 15, 2023

If this doesn't work, can you send the pdb file? The pdb specification can indeed be a bit wild

@HankewieDanke
Copy link
Contributor Author

Thanks a lot will give it a try.

So, I tried (and made sure files exist).
Reusing the headers from above (w/o to: xxx line), the problem still exists.
If I render to standard HTML everything works but with revealjs, it does not (see below *.qmd file and image).

---
title: "t"
subtitle: 't'
author: "t"
date: "2023/09/15"
format:
    revealjs:
        theme: [serif,style.css]
        smaller: true
molstar: embed
---

{{< mol-url ./pdbs/1F16.pdb >}}

It is simply the pdb file of rcsb.org/structure/1f16.
Screenshot from 2023-09-15 15-50-26

The behaviour is the same w/ and w/o molstar:embed.

It is independent of 'locally' opening the file w/ browser or through a local standard webserver w/ python -m http.server.

As the PDB is directly from the rcsb, I fear it may not be a PDB spec problem (NMR structure w/ only protein).

@jmbuhr
Copy link
Owner

jmbuhr commented Sep 15, 2023

due to the cross origin policy mentioned in your screenshot, the pdb file will only be available if served from a webserver., not if you just open the html file with a browser. Can you confirm that it also works for you with quarto preview?
image

@jmbuhr
Copy link
Owner

jmbuhr commented Sep 15, 2023

For a presentation I would recommend to use quarto preview during the presentation as well, or upload to GitHub pages beforehand.

@jmbuhr
Copy link
Owner

jmbuhr commented Sep 15, 2023

And I may have misled you a bit with molstar: embed, as this option does not currently work with presentations due to some interaction with the iframes I have to create when it is a presentation.

@jmbuhr
Copy link
Owner

jmbuhr commented Sep 15, 2023

If you want to make it work with the simple python http server you'll have to server the whole directory, not just the html file:
image

@jmbuhr
Copy link
Owner

jmbuhr commented Sep 15, 2023

Of course, don't do that if there is anything in the folder you don't want to be publicly accessible, since this is exactly what the cross origin policy protects against ;)

@BradyAJohnston
Copy link
Contributor

Looks like they have improved some of their documentation for options: https://github.com/molstar/pdbe-molstar/wiki/1.-PDBe-Molstar-as-JS-plugin

@BradyAJohnston
Copy link
Contributor

Although I have just realised that this is the pdbe fork of molstar, which might be a good place to look for documentation for base molstar.

@HankewieDanke
Copy link
Contributor Author

Thanks a lot for all the help @jmbuhr, sorry for the late reply.
I guess the problem was again between chair and keyboard ;)

As most of the time I am presenting from my own laptop, I will just open a local webserver with the folder.
That was the trick that made it work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants