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.

Sign up for GitHub

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

Jump to bottom

Volumes #5

Merged
merged 2 commits into from
Aug 16, 2022
Merged

Volumes #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
32c0597
add example files for volumes
jmbuhr Aug 16, 2022
14274b5
add mol-volume shortcut
jmbuhr Aug 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 45 additions & 7 deletions _extensions/molstar/molstar.lua
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

Loading