Skip to content

Commit

Permalink
Merge pull request #6 from BradyAJohnston/main
Browse files Browse the repository at this point in the history 
Added Snapshot Loading
  • Loading branch information
@jmbuhr
jmbuhr authored Aug 17, 2022
2 parents 7192d5d + 3850356 commit c74c619
Show file tree
Hide file tree
Showing 4 changed files with 778 additions and 8 deletions.
22 changes: 22 additions & 0 deletions _extensions/molstar/molstar.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,8 @@ local function createViewer(args)
trajExtension = args.trajExtension,
volumeUrl = args.volumeUrl,
volumeExtension = args.volumeExtension,
snapshotUrl = args.snapshotUrl,
snapshotExtension = args.snapshotExtension,
data = args.data,
options = mergeMolstarOptions(args.userOptions)
}
Expand Down Expand Up @@ -174,6 +176,8 @@ local function createViewer(args)
]
);
]]
elseif args.snapshotUrl and args.snapshotExtension then
viewerFunction = 'viewer.loadSnapshotFromUrl(url="${snapshotUrl}", "${snapshotExtension}");'
else -- otherwise read from url (local or remote)
viewerFunction = 'viewer.loadStructureFromUrl("${url}", format="${urlExtension}");'
end
Expand Down Expand Up @@ -225,6 +229,24 @@ return {
userOptions = kwargs
})
end,

['mol-snapshot'] = function(args, kwargs, meta)
if not quarto.doc.isFormat("html:js") then
return pandoc.Null()
end

addDependencies()

local url = pandoc.utils.stringify(args[1])
local appId = 'app-' .. url

return pandoc.RawBlock('html', createViewer {
appId = appId,
snapshotUrl = url,
snapshotExtension = fileExt(url),
userOptions = kwargs
})
end,

['mol-traj'] = function(args, kwargs)
if not quarto.doc.isFormat("html:js") then
Expand Down
28 changes: 20 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>

<meta charset="utf-8">
<meta name="generator" content="quarto-99.9.9">
<meta name="generator" content="quarto-1.0.35">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Expand Down Expand Up @@ -113,6 +113,7 @@ <h2 id="toc-title">Table of contents</h2>
<li><a href="#pdb-file-from-url" id="toc-pdb-file-from-url" class="nav-link" data-scroll-target="#pdb-file-from-url">pdb file from url</a></li>
<li><a href="#local-xyz-file" id="toc-local-xyz-file" class="nav-link" data-scroll-target="#local-xyz-file">local xyz file</a></li>
<li><a href="#local-pdb-and-trajectory" id="toc-local-pdb-and-trajectory" class="nav-link" data-scroll-target="#local-pdb-and-trajectory">local pdb and trajectory</a></li>
<li><a href="#snapshot-file" id="toc-snapshot-file" class="nav-link" data-scroll-target="#snapshot-file">snapshot file</a></li>
<li><a href="#local-file-with-volume-information" id="toc-local-file-with-volume-information" class="nav-link" data-scroll-target="#local-file-with-volume-information">local file with volume information</a></li>
<li><a href="#customization" id="toc-customization" class="nav-link" data-scroll-target="#customization">Customization</a>
<ul class="collapse">
Expand Down Expand Up @@ -151,7 +152,7 @@ <h2 class="anchored" data-anchor-id="rcsb-pdb">RCSB PDB</h2>
<p><code>{{&lt; mol-rcsb 7sgl &gt;}}</code></p>
<div id="app-7sgl" class="molstar-app"></div>
<script type="text/javascript">
molstar.Viewer.create("app-7sgl", {"layoutIsExpanded":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"viewportShowAnimation":true,"viewportShowSelectionMode":false,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowExpand":true,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowRemoteState":false}).then(viewer => {
molstar.Viewer.create("app-7sgl", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
viewer.loadPdb("7sgl"); });
</script>

Expand All @@ -162,7 +163,7 @@ <h2 class="anchored" data-anchor-id="local-pdb-file">Local pdb file</h2>
<p><code>{{&lt; mol-url ./www/7sgl.pdb &gt;}}</code></p>
<div id="app-./www/7sgl.pdb" class="molstar-app"></div>
<script type="text/javascript">
molstar.Viewer.create("app-./www/7sgl.pdb", {"layoutIsExpanded":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"viewportShowAnimation":true,"viewportShowSelectionMode":false,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowExpand":true,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowRemoteState":false}).then(viewer => {
molstar.Viewer.create("app-./www/7sgl.pdb", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
viewer.loadStructureFromUrl("./www/7sgl.pdb", format="pdb"); });
</script>

Expand All @@ -173,7 +174,7 @@ <h2 class="anchored" data-anchor-id="pdb-file-from-url">pdb file from url</h2>
<p><code>{{&lt; mol-url https://files.rcsb.org/download/7sgl.pdb &gt;}}</code></p>
<div id="app-https://files.rcsb.org/download/7sgl.pdb" class="molstar-app"></div>
<script type="text/javascript">
molstar.Viewer.create("app-https://files.rcsb.org/download/7sgl.pdb", {"layoutIsExpanded":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"viewportShowAnimation":true,"viewportShowSelectionMode":false,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowExpand":true,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowRemoteState":false}).then(viewer => {
molstar.Viewer.create("app-https://files.rcsb.org/download/7sgl.pdb", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
viewer.loadStructureFromUrl("https://files.rcsb.org/download/7sgl.pdb", format="pdb"); });
</script>

Expand All @@ -184,7 +185,7 @@ <h2 class="anchored" data-anchor-id="local-xyz-file">local xyz file</h2>
<p><code>{{&lt; mol-url ./www/example.xyz &gt;} }</code></p>
<div id="app-./www/example.xyz" class="molstar-app"></div>
<script type="text/javascript">
molstar.Viewer.create("app-./www/example.xyz", {"layoutIsExpanded":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"viewportShowAnimation":true,"viewportShowSelectionMode":false,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowExpand":true,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowRemoteState":false}).then(viewer => {
molstar.Viewer.create("app-./www/example.xyz", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
viewer.loadStructureFromUrl("./www/example.xyz", format="xyz"); });
</script>

Expand All @@ -195,7 +196,7 @@ <h2 class="anchored" data-anchor-id="local-pdb-and-trajectory">local pdb and tra
<p><code>{{&lt; mol-traj ./www/example.pdb ./www/example.xtc &gt;}}</code></p>
<div id="app-./www/example.pdb./www/example.xtc" class="molstar-app"></div>
<script type="text/javascript">
molstar.Viewer.create("app-./www/example.pdb./www/example.xtc", {"layoutIsExpanded":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"viewportShowAnimation":true,"viewportShowSelectionMode":false,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowExpand":true,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowRemoteState":false}).then(viewer => {
molstar.Viewer.create("app-./www/example.pdb./www/example.xtc", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
viewer.loadTrajectory(
{
model: {
Expand All @@ -210,13 +211,24 @@ <h2 class="anchored" data-anchor-id="local-pdb-and-trajectory">local pdb and tra
});
</script>

</section>
<section id="snapshot-file" class="level2">
<h2 class="anchored" data-anchor-id="snapshot-file">snapshot file</h2>
<p>Load a snapshot file, to share a saved Mol* session which will save aesthetic parameters and scene setup.</p>
<p><code>{{&lt; mol-snapshot ./www/molstar.molj &gt;}}</code></p>
<div id="app-./www/molstar.molj" class="molstar-app"></div>
<script type="text/javascript">
molstar.Viewer.create("app-./www/molstar.molj", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
viewer.loadSnapshotFromUrl(url="./www/molstar.molj", "molj"); });
</script>

</section>
<section id="local-file-with-volume-information" class="level2">
<h2 class="anchored" data-anchor-id="local-file-with-volume-information">local file with volume information</h2>
<p><code>{{&lt; mol-volume ./www/traj.xyz ./www/density.cube &gt;}}</code></p>
<div id="app-./www/traj.xyz./www/density.cube" class="molstar-app"></div>
<script type="text/javascript">
molstar.Viewer.create("app-./www/traj.xyz./www/density.cube", {"layoutIsExpanded":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"viewportShowAnimation":true,"viewportShowSelectionMode":false,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowExpand":true,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowRemoteState":false}).then(viewer => {
molstar.Viewer.create("app-./www/traj.xyz./www/density.cube", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":true,"layoutShowRemoteState":false}).then(viewer => {
viewer.loadStructureFromUrl("./www/traj.xyz", "xyz")
viewer.loadVolumeFromUrl(
{url: "./www/density.cube",
Expand All @@ -243,7 +255,7 @@ <h3 class="anchored" data-anchor-id="molstar-options">Molstar options</h3>
<p><code>{{&lt; mol-rcsb 7eqr viewportShowAnimation=false &gt;}}</code></p>
<div id="app-7eqr" class="molstar-app"></div>
<script type="text/javascript">
molstar.Viewer.create("app-7eqr", {"layoutIsExpanded":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"viewportShowAnimation":false,"viewportShowSelectionMode":false,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowExpand":true,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowRemoteState":false}).then(viewer => {
molstar.Viewer.create("app-7eqr", {"layoutShowLog":false,"viewportShowExpand":true,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"layoutShowLeftPanel":true,"layoutShowControls":false,"layoutShowSequence":false,"emdbProvider":"rcsb","pdbProvider":"rcsb","viewportShowAnimation":false,"layoutShowRemoteState":false}).then(viewer => {
viewer.loadPdb("7eqr"); });
</script>

Expand Down
9 changes: 9 additions & 0 deletions index.qmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,15 @@ 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 >}}}`

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

## local file with volume information


Expand Down
Loading

0 comments on commit c74c619

Please sign in to comment.