Skip to content

Commit

Permalink
Merge pull request #5 from jmbuhr/volumes
Browse files Browse the repository at this point in the history 
Volumes
  • Loading branch information
@jmbuhr
jmbuhr committed Aug 16, 2022
2 parents b73ab10 + 14274b5 commit 7192d5d
Show file tree
Hide file tree
Showing 6 changed files with 11,497 additions and 27 deletions.
52 changes: 45 additions & 7 deletions _extensions/molstar/molstar.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,11 +123,13 @@ local function createViewer(args)
local subs = {
appId = args.appId,
url = args.url,
urlExtension = args.urlExtension,
pdb = args.pdbId,
trajUrl = args.trajUrl,
trajExtension = args.trajExtension,
volumeUrl = args.volumeUrl,
volumeExtension = args.volumeExtension,
data = args.data,
fileExtension = args.fileExtension,
options = mergeMolstarOptions(args.userOptions)
}

Expand All @@ -141,15 +143,15 @@ local function createViewer(args)
end

if args.data then -- if we have embedded data, use it
viewerFunction = 'viewer.loadStructureFromData(`${data}`, format="${fileExtension}");'
viewerFunction = 'viewer.loadStructureFromData(`${data}`, format="${urlExtension}");'
elseif args.pdbId then -- fetch from rcsb pdbb if an ID is given
viewerFunction = 'viewer.loadPdb("${pdb}");'
elseif args.url and args.trajUrl then -- load topology + trajectory if both are given
viewerFunction = [[
viewer.loadTrajectory(
{
model: {
kind: "model-url", url: "${url}", format: "${fileExtension}"
kind: "model-url", url: "${url}", format: "${urlExtension}"
},
coordinates: {
kind: "coordinates-url", url: "${trajUrl}",
Expand All @@ -158,8 +160,22 @@ local function createViewer(args)
}
);
]]
elseif args.volumeUrl and args.volumeExtension then
viewerFunction = [[
viewer.loadStructureFromUrl("${url}", "${urlExtension}")
viewer.loadVolumeFromUrl(
{url: "${volumeUrl}",
format: "${volumeExtension}",
isBinary: false},
[{type: "absolute",
alpha: 1,
value: 0.001,
}
]
);
]]
else -- otherwise read from url (local or remote)
viewerFunction = 'viewer.loadStructureFromUrl("${url}", format="${fileExtension}");'
viewerFunction = 'viewer.loadStructureFromUrl("${url}", format="${urlExtension}");'
end

return f(wrapper(viewerFunction), subs)
Expand Down Expand Up @@ -193,7 +209,7 @@ return {

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

local molstarMeta = pandoc.utils.stringify(meta['molstar'])
local pdbContent
Expand All @@ -205,7 +221,7 @@ return {
appId = appId,
url = url,
data = pdbContent,
fileExtension = fileExtension,
urlExtension = urlExtension,
userOptions = kwargs
})
end,
Expand All @@ -225,9 +241,31 @@ return {
appId = appId,
url = url,
trajUrl = trajUrl,
fileExtension = fileExt(url),
urlExtension = fileExt(url),
trajExtension = fileExt(trajUrl),
userOptions = kwargs
})
end,

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

addDependencies()

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

return pandoc.RawBlock('html', createViewer {
appId = appId,
url = url,
volumeUrl = volumeUrl,
urlExtension = fileExt(url),
volumeExtension = fileExt(volumeUrl),
userOptions = kwargs
})
end,

}
52 changes: 34 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,10 @@
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: 1;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
Expand Down Expand Up @@ -58,7 +53,7 @@
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
Expand All @@ -71,7 +66,7 @@
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
Expand Down Expand Up @@ -107,7 +102,7 @@

<div id="quarto-content" class="page-columns page-rows-contents page-layout-article">
<div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
<nav id="TOC" role="doc-toc" class="toc-active">
<nav id="TOC" role="doc-toc">
<h2 id="toc-title">Table of contents</h2>

<ul>
Expand All @@ -118,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="#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">
<li><a href="#molstar-options" id="toc-molstar-options" class="nav-link" data-scroll-target="#molstar-options">Molstar options</a></li>
Expand Down Expand Up @@ -155,7 +151,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", {"emdbProvider":"rcsb","layoutShowControls":false,"layoutShowSequence":false,"pdbProvider":"rcsb","layoutShowRemoteState":false,"viewportShowAnimation":true,"viewportShowSelectionMode":false,"viewportShowExpand":true,"layoutIsExpanded":false,"layoutShowLog":false,"layoutShowLeftPanel":true}).then(viewer => {
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 => {
viewer.loadPdb("7sgl"); });
</script>

Expand All @@ -166,7 +162,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", {"emdbProvider":"rcsb","layoutShowControls":false,"layoutShowSequence":false,"pdbProvider":"rcsb","layoutShowRemoteState":false,"viewportShowAnimation":true,"viewportShowSelectionMode":false,"viewportShowExpand":true,"layoutIsExpanded":false,"layoutShowLog":false,"layoutShowLeftPanel":true}).then(viewer => {
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 => {
viewer.loadStructureFromUrl("./www/7sgl.pdb", format="pdb"); });
</script>

Expand All @@ -177,7 +173,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", {"emdbProvider":"rcsb","layoutShowControls":false,"layoutShowSequence":false,"pdbProvider":"rcsb","layoutShowRemoteState":false,"viewportShowAnimation":true,"viewportShowSelectionMode":false,"viewportShowExpand":true,"layoutIsExpanded":false,"layoutShowLog":false,"layoutShowLeftPanel":true}).then(viewer => {
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 => {
viewer.loadStructureFromUrl("https://files.rcsb.org/download/7sgl.pdb", format="pdb"); });
</script>

Expand All @@ -188,7 +184,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", {"emdbProvider":"rcsb","layoutShowControls":false,"layoutShowSequence":false,"pdbProvider":"rcsb","layoutShowRemoteState":false,"viewportShowAnimation":true,"viewportShowSelectionMode":false,"viewportShowExpand":true,"layoutIsExpanded":false,"layoutShowLog":false,"layoutShowLeftPanel":true}).then(viewer => {
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 => {
viewer.loadStructureFromUrl("./www/example.xyz", format="xyz"); });
</script>

Expand All @@ -199,7 +195,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", {"emdbProvider":"rcsb","layoutShowControls":false,"layoutShowSequence":false,"pdbProvider":"rcsb","layoutShowRemoteState":false,"viewportShowAnimation":true,"viewportShowSelectionMode":false,"viewportShowExpand":true,"layoutIsExpanded":false,"layoutShowLog":false,"layoutShowLeftPanel":true}).then(viewer => {
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 => {
viewer.loadTrajectory(
{
model: {
Expand All @@ -214,6 +210,27 @@ <h2 class="anchored" data-anchor-id="local-pdb-and-trajectory">local pdb and tra
});
</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 => {
viewer.loadStructureFromUrl("./www/traj.xyz", "xyz")
viewer.loadVolumeFromUrl(
{url: "./www/density.cube",
format: "cube",
isBinary: false},
[{type: "absolute",
alpha: 1,
value: 0.001,
}
]
);
});
</script>

</section>
<section id="customization" class="level2">
<h2 class="anchored" data-anchor-id="customization">Customization</h2>
Expand All @@ -226,7 +243,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", {"emdbProvider":"rcsb","layoutShowControls":false,"layoutShowSequence":false,"pdbProvider":"rcsb","layoutShowRemoteState":false,"viewportShowAnimation":false,"viewportShowSelectionMode":false,"viewportShowExpand":true,"layoutIsExpanded":false,"layoutShowLog":false,"layoutShowLeftPanel":true}).then(viewer => {
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 => {
viewer.loadPdb("7eqr"); });
</script>

Expand Down Expand Up @@ -325,8 +342,7 @@ <h3 class="anchored" data-anchor-id="css">CSS</h3>
for (var i=0; i<noterefs.length; i++) {
const ref = noterefs[i];
tippyHover(ref, function() {
// use id or data attribute instead here
let href = ref.getAttribute('data-footnote-href');
let href = ref.getAttribute('href');
try { href = new URL(href).hash; } catch {}
const id = href.replace(/^#\/?/, "");
const note = window.document.getElementById(id);
Expand Down
8 changes: 8 additions & 0 deletions index.qmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,14 @@ Load a topology and a trajectory with:

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

## local file with volume information


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

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


## Customization

### Molstar options
Expand Down
4 changes: 2 additions & 2 deletions index_files/libs/bootstrap/bootstrap.min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 7192d5d

Please sign in to comment.