Shortcode to embed proteins and trajectories with Mol*

Related tags

Learning resource quarto quarto-extension
Overview

Molstar (Mol*) Extension for Quarto

This extension provides shortcodes for molstar in quarto. Molstar can display macro-molecules such as proteins as well as molcular dynamics trajectories in an interactive viewer. You can see it in action e.g. in the RCSB Protein Data Base: https://www.rcsb.org/, where it provides the 3d view for entries. Follow me, if you want this right in your quarto reports (html only).

Installing

quarto install extension jmbuhr/quarto-molstar

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

Using

Usage examples are in index.qmd, which you can see rendered locally and served with GitHub pages here: https://jmbuhr.de/quarto-molstar/

Likewise, the example rendered as a revealjs presentation (presentation.qmd) is served here: https://jmbuhr.de/quarto-molstar/presentation.html

Limitations

  • No self-contained htmls: Molstar viewers for local files are empty when the file is not served by a webserver such as quarto preview or GitHub pages. This means it will not display your molecule when you simply open the rendered html with a browser, even if you set the html to be self-contained. The reason for this is the Same-origin Policy, a security measure in web browsers. It and similar policies prevent that one document can access resources it is not supposed to access. For example, an html document you downloaded is not allowed to execute code that reads personal files on your computer. This also prevents it from loading your molecules from local paths.
  • revealjs presentations now use iframes instead of a normal div to work around #1, which is why you might have to address those differently for custom styling if you plan to use the same source for html and reveal output.

Update Mol* (extension developement)

The js and css files where downloaded from the molstar web viewer in order to be up to date but also self-contained and functional without an internet connection.

wget https://molstar.org/viewer/molstar.js
wget https://molstar.org/viewer/molstar.css
Comments
  • quick styles are not contained to one viewer

    quick styles are not contained to one viewer

    Looks like with the addition of the example snapshot, which uses a quick style "Stylized", all other apps in the document use this style on startup as well. Changing the style in one app changes it for the other apps as well, as soon as they are hovered afterwards.

    Is this a bug or a feature?

    bug enhancement 
    opened by jmbuhr 5
  • Adding volume visualization

    Adding volume visualization

    I actually found that there is a function exposed in app.ts for displaying surfaces. I used the following code and was able to get something. The loadVolumeFromUrl could probably be adapted in the same way as you do for the other ones.

    test = html`<div id="test"></div>`
molstar.Viewer.create(test, {layoutIsExpanded: false, layoutShowControls: false}).then(viewer => {
viewer.loadStructureFromUrl("./traj.xyz", "xyz")
viewer.loadVolumeFromUrl(
    {url: './density.cube',
    format: 'cube',
    isBinary: false},
    [{type: "absolute",
     alpha: 1,
     value: 0.001, 
        }
        ]
    )
});

    Resolution is not great, but it seems to work, and the visualization can be adjusted later in the viewer

    image

    Archive.zip

    opened by kjelljorner 5
  • Added Snapshot Loading

    Added Snapshot Loading

    This adds ability for loading of snapshot files for Mol* either from URL or local file. Snapshots are useful for saving a particular setup or view between sessions of Mol*.

    opened by BradyAJohnston 3
  • viewer initially only shows black screen in revealjs

    viewer initially only shows black screen in revealjs

    Some viewers (not all) initially only show a black screen when embedded in a revealjs presentation. The app is correctly displayed after one of the following:

    • resize the window
    • click e.g. the options or full-screen button (buttons are visible, just not the protein)
    • enter / exit revealjs full screen (press F)

    When I used to embed molstar manually I would use iframes of an external html file, in which case the issue didn't seem to occur. So what is happening here?

    bug 
    opened by jmbuhr 1
  • molrender and molar support

    molrender and molar support

    Hi, Congratulations, great tool and it works nicely with quarto. Do you think it would be possible to add molrender and molAR capabilities to this extension? Thanks.

    opened by Izar-de-villasante 1
  • Local files aren't moved with website building.

    Local files aren't moved with website building.

    An issue I was running into while trying to get the snapshots working in #6 , was that when trialling it on a quarto blog, while the molstar.molj file was in the correct location with the original index.qmd document, upon actual rendering of the website with quarto render or quarto preview everything was copied to the docs folder, but the molstar.molj was left behind and thus broke the URL.

    Is there a way to mark specific files inside of the Lua / Pandoc to be treated as assets by Quarto? I assume that would fix the problem. Similar to what is done with images and other assets already inside of Quarto.

    opened by BradyAJohnston 8
Releases(v0.1.2)

  • v0.1.2(Aug 30, 2022)

    What's Changed

    • Added Snapshot Loading by @BradyAJohnston in https://github.com/jmbuhr/quarto-molstar/pull/6
    • Added AlphaFold DB Shortcode by @BradyAJohnston in https://github.com/jmbuhr/quarto-molstar/pull/8

    Bugfixes

    • Switched to current development version of molstar.js to fix setting over spilling into other viewers (https://github.com/jmbuhr/quarto-molstar/issues/10)

    New Contributors

    • @BradyAJohnston made their first contribution in https://github.com/jmbuhr/quarto-molstar/pull/6

    Full Changelog: https://github.com/jmbuhr/quarto-molstar/compare/v0.1.1...v0.1.2

    Source code(tar.gz)
    Source code(zip)

  • v0.1.1(Aug 16, 2022)

    What's Changed

    You can now add volume information via mol-volumes.

    • Volumes by @jmbuhr in https://github.com/jmbuhr/quarto-molstar/pull/5

    Full Changelog: https://github.com/jmbuhr/quarto-molstar/compare/v0.1.0...v0.1.1

    Source code(tar.gz)
    Source code(zip)

  • v0.1.0(Aug 15, 2022)

    What's Changed

    • Correct molstarOptions to userOptions by @kjelljorner in https://github.com/jmbuhr/quarto-molstar/pull/2
    • Self contained by @jmbuhr in https://github.com/jmbuhr/quarto-molstar/pull/3

    New Contributors

    • @kjelljorner made their first contribution in https://github.com/jmbuhr/quarto-molstar/pull/2
    • @jmbuhr made their first contribution in https://github.com/jmbuhr/quarto-molstar/pull/3

    Full Changelog: https://github.com/jmbuhr/quarto-molstar/compare/v0.0.1...v0.1.0

    Source code(tar.gz)
    Source code(zip)

  • v0.0.1(Aug 1, 2022)

Owner
Jannik Buhr
Computational Biochemist
Jannik Buhr
GitHub https://jmbuhr.de/quarto-molstar/
Embed Twitter videos, polls, and more on Discord and Telegram

FixTweet Embed Twitter videos, polls, translations, & more on Discord and Telegram! Inspired by Robin Universe's TwitFix, rewritten in TypeScript as a

dangered wolf 160 Aug 17, 2022
A simple class to embed a panoramic view in a website from six pictures

htmlcubemap A simple class to embed a panoramic view in a website from six pictures. It uses CSS with transforms. Demo here Usage Just call from javas

Javi Agenjo 6 Dec 17, 2022
A cloudflare worker to use the user-agent for ~~rickrolling~~ without a discord embed

nextcord.gay A cloudflare worker to use the user-agent for rickrolling without a discord embed Build npm run build Find the output in ./dist/worker.mj

Oliver Wilkes 10 Oct 4, 2022
Embed Luckysheet (spreadsheet) into Logseq.

logseq-plugin-luckysheet 在 Logseq 中嵌入电子表格 Luckysheet。你也可以用它来维护一张 markdown 表格。 Embed Luckysheet (spreadsheet) into Logseq. You can also use it to maint

Seth Yuan 49 Jan 1, 2023
A CLI tool to embed interactive PUML diagrams to your github markdown files.

puml-for-markdown Simple CLI Usage Just run puml-for-markdown in any directory where you have markdown files and it will render links to PlantUML file

Daniel 208 Jan 3, 2023
A custom element that aims to make it easier to embed Spring '83 boards

<spring-board> element A custom element that makes it simple to embed Spring '83 boards! Usage If you are using <spring-board> in a client-side framew

Ryan Murphy 11 Jan 1, 2023
Embed panorama photos on your website with Panorama Viewer

#Panorama Viewer by Pete R. Embed interactive Panorama Pictures on your site with this simple plugin. Created by Pete R., Founder of Travelistly and B

Pete R. 474 Oct 8, 2022
Embed your NFT art anywhere, generate preview for oldschool platforms

Embed.Art Introduction Platform like twitter and facebook use meta tags to display preview when sharing url. The format these meta tags support are li

Ronan Sandford 12 Sep 26, 2022
bbystealer is the new modern discord token grabber & token stealer, with discord password & token even when it changes. Terms Educational purpose only. Reselling is forbidden. You can use the source code if you keep credits (in embed + in markdown), it has to be open-source. We are NOT responsible of anything you do with our software.

?? Premium - ?? Builder - ?? Features Authors GhostyXD#0202 Rundeun#1337 Contributors Florin#5231 Kokto#3333 bbystealer The new modern discord token g

null 4 Mar 16, 2023
my first javascript project .this is my discordBot repository and this bot can do kick and ban member of server , show member counter in status and more ... . i try to add some new feature to my discord bot latter and i hope this bot can help you 😊

discordBot my first javascript project .this is my discordBot repository and this bot can do kick and ban member of server , show member counter in st

fardin 8 Oct 18, 2022
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat

prashanth s 1 Dec 24, 2021
Recompo is a free and open-source project that is designed for customizability and speed and is easy to use and powerful.

About Recompo is a free and open-source project that is designed for customizability and speed and is easy to use and powerful Installation recompo is

recompo 4 Mar 20, 2022
A quick and easy to use security reconnaissance webapp tool, does OSINT, analysis and red-teaming in both passive and active mode. Written in nodeJS and Electron.

ᵔᴥᵔ RedJoust A quick and easy to use security reconnaissance webapp tool, does OSINT, analysis and red-teaming in both passive and active mode. Writte

Dave 17 Oct 31, 2022
An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.

An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.

KHITER Mohamed Achraf 6 Aug 20, 2022
The Space Travelers' Hub consists of Rockets, Missions, and the My Profile section. We worked with the real-live data from the SpaceX API in this project. And build a web application for a company that provides commercial and scientific space travel services. The application allows users to book rockets and join selected space missions.

Space Travelers Hub The Space Travelers' Hub consists of Rockets, Missions, and the My Profile section. We worked with the real-live data from the Spa

Ahmad Zamir Yousufi 3 Jun 28, 2022
A web app designed to keep track of activities that are done and those that are and not done. Users can add, delete, mark as completed and update the activities. Built with Javscript, html, css and webpack.e your activites

ToDoListApp A web app designed to help web keep track of activities that are done and those that are still pending. Users can add, delete, mark as com

Francis Wayungi 6 Dec 23, 2022
This is an educational and simple website that displays a list of books and allows you to add and remove books from that list built with HTML, CSS, JavaScript. The goal is to make it more organized by using modules and practice the ES6 syntax in the first Module

Awesome books ES6 This is a website that allows users to add and remove books from a list. This project is build using JavaScript objects Built With H

Mustafa Fahimy 7 Jul 21, 2022
Tiny JavaScript library (1kB) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Zero dependency tiny JavaScript library (1kB bytes) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Yurii De 11 Nov 8, 2022
A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Micheal Oguntayo 4 Oct 13, 2022