Skip to content

Commit

Permalink
update to developement molstar version
Browse files Browse the repository at this point in the history 
closes #10
  • Loading branch information
@jmbuhr
jmbuhr committed Aug 30, 2022
1 parent 5038ddd commit f7b677e
Show file tree
Hide file tree
Showing 7 changed files with 33 additions and 27 deletions.
2 changes: 1 addition & 1 deletion _extensions/molstar/assets/molstar.js
View file

Large diffs are not rendered by default.

38 changes: 22 additions & 16 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-1.0.35">
<meta name="generator" content="quarto-99.9.9">

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

Expand All @@ -11,10 +11,15 @@
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: 1;}
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 @@ -53,7 +58,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 { } /* BuiltIn */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
Expand All @@ -66,7 +71,7 @@
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.im { color: #008000; font-weight: bold; } /* 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 @@ -102,7 +107,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">
<nav id="TOC" role="doc-toc" class="toc-active">
<h2 id="toc-title">Table of contents</h2>

<ul>
Expand Down Expand Up @@ -153,7 +158,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", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
molstar.Viewer.create("app-7sgl", {"viewportShowSelectionMode":false,"layoutShowRemoteState":false,"layoutShowControls":false,"viewportShowExpand":true,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowAnimation":true,"layoutIsExpanded":false,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowLeftPanel":true}).then(viewer => {
viewer.loadPdb("7sgl"); });
</script>

Expand All @@ -164,7 +169,7 @@ <h2 class="anchored" data-anchor-id="alphafold-model.">AlphaFold model.</h2>
<p><code>{{&lt; mol-afdb Q8W3K0 &gt;}}</code></p>
<div id="app-Q8W3K0" class="molstar-app"></div>
<script type="text/javascript">
molstar.Viewer.create("app-Q8W3K0", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
molstar.Viewer.create("app-Q8W3K0", {"viewportShowSelectionMode":false,"layoutShowRemoteState":false,"layoutShowControls":false,"viewportShowExpand":true,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowAnimation":true,"layoutIsExpanded":false,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowLeftPanel":true}).then(viewer => {
viewer.loadAlphaFoldDb(afdb="Q8W3K0") });
</script>

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

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

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

Expand All @@ -208,7 +213,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", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
molstar.Viewer.create("app-./www/example.pdb./www/example.xtc", {"viewportShowSelectionMode":false,"layoutShowRemoteState":false,"layoutShowControls":false,"viewportShowExpand":true,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowAnimation":true,"layoutIsExpanded":false,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowLeftPanel":true}).then(viewer => {
viewer.loadTrajectory(
{
model: {
Expand All @@ -230,7 +235,7 @@ <h2 class="anchored" data-anchor-id="snapshot-file">snapshot file</h2>
<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", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
molstar.Viewer.create("app-./www/molstar.molj", {"viewportShowSelectionMode":false,"layoutShowRemoteState":false,"layoutShowControls":false,"viewportShowExpand":true,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowAnimation":true,"layoutIsExpanded":false,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowLeftPanel":true}).then(viewer => {
viewer.loadSnapshotFromUrl(url="./www/molstar.molj", "molj"); });
</script>

Expand All @@ -240,7 +245,7 @@ <h2 class="anchored" data-anchor-id="local-file-with-volume-information">local f
<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", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":true,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
molstar.Viewer.create("app-./www/traj.xyz./www/density.cube", {"viewportShowSelectionMode":false,"layoutShowRemoteState":false,"layoutShowControls":false,"viewportShowExpand":true,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowAnimation":true,"layoutIsExpanded":false,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowLeftPanel":true}).then(viewer => {
viewer.loadStructureFromUrl("./www/traj.xyz", "xyz")
viewer.loadVolumeFromUrl(
{url: "./www/density.cube",
Expand All @@ -267,7 +272,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", {"layoutShowRemoteState":false,"layoutShowSequence":false,"layoutIsExpanded":false,"viewportShowSelectionMode":false,"viewportShowAnimation":false,"layoutShowLeftPanel":true,"pdbProvider":"rcsb","emdbProvider":"rcsb","layoutShowLog":false,"viewportShowExpand":true,"layoutShowControls":false}).then(viewer => {
molstar.Viewer.create("app-7eqr", {"viewportShowSelectionMode":false,"layoutShowRemoteState":false,"layoutShowControls":false,"viewportShowExpand":true,"layoutShowLog":false,"emdbProvider":"rcsb","viewportShowAnimation":false,"layoutIsExpanded":false,"pdbProvider":"rcsb","layoutShowSequence":false,"layoutShowLeftPanel":true}).then(viewer => {
viewer.loadPdb("7eqr"); });
</script>

Expand Down Expand Up @@ -366,7 +371,8 @@ <h3 class="anchored" data-anchor-id="css">CSS</h3>
for (var i=0; i<noterefs.length; i++) {
const ref = noterefs[i];
tippyHover(ref, function() {
let href = ref.getAttribute('href');
// use id or data attribute instead here
let href = ref.getAttribute('data-footnote-href');
try { href = new URL(href).hash; } catch {}
const id = href.replace(/^#\/?/, "");
const note = window.document.getElementById(id);
Expand Down
4 changes: 2 additions & 2 deletions index_files/libs/bootstrap/bootstrap.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion index_files/libs/quarto-contrib/molstar-v3.13.0/molstar.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion molstar.js
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions presentation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,7 @@ <h2>RCSB PDB</h2>
<body>
<div id=&quot;app-7sgl&quot; class=&quot;molstar-app&quot;></div>
<script type=&quot;text/javascript&quot;>
molstar.Viewer.create(&quot;app-7sgl&quot;, {&quot;layoutIsExpanded&quot;:false,&quot;layoutShowLeftPanel&quot;:true,&quot;viewportShowAnimation&quot;:true,&quot;layoutShowLog&quot;:false,&quot;pdbProvider&quot;:&quot;rcsb&quot;,&quot;layoutShowSequence&quot;:false,&quot;viewportShowExpand&quot;:true,&quot;layoutShowControls&quot;:false,&quot;viewportShowSelectionMode&quot;:false,&quot;layoutShowRemoteState&quot;:false,&quot;emdbProvider&quot;:&quot;rcsb&quot;}).then(viewer => {
molstar.Viewer.create(&quot;app-7sgl&quot;, {&quot;layoutShowLeftPanel&quot;:true,&quot;layoutIsExpanded&quot;:false,&quot;emdbProvider&quot;:&quot;rcsb&quot;,&quot;viewportShowExpand&quot;:true,&quot;layoutShowLog&quot;:false,&quot;viewportShowAnimation&quot;:true,&quot;layoutShowRemoteState&quot;:false,&quot;viewportShowSelectionMode&quot;:false,&quot;layoutShowSequence&quot;:false,&quot;pdbProvider&quot;:&quot;rcsb&quot;,&quot;layoutShowControls&quot;:false}).then(viewer => {
viewer.loadPdb(&quot;7sgl&quot;); });
</script>
</body>
Expand All @@ -365,7 +365,7 @@ <h2>Local pdb file</h2>
<body>
<div id=&quot;app-./www/7sgl.pdb&quot; class=&quot;molstar-app&quot;></div>
<script type=&quot;text/javascript&quot;>
molstar.Viewer.create(&quot;app-./www/7sgl.pdb&quot;, {&quot;layoutIsExpanded&quot;:false,&quot;layoutShowLeftPanel&quot;:true,&quot;viewportShowAnimation&quot;:true,&quot;layoutShowLog&quot;:false,&quot;pdbProvider&quot;:&quot;rcsb&quot;,&quot;layoutShowSequence&quot;:false,&quot;viewportShowExpand&quot;:true,&quot;layoutShowControls&quot;:false,&quot;viewportShowSelectionMode&quot;:false,&quot;layoutShowRemoteState&quot;:false,&quot;emdbProvider&quot;:&quot;rcsb&quot;}).then(viewer => {
molstar.Viewer.create(&quot;app-./www/7sgl.pdb&quot;, {&quot;layoutShowLeftPanel&quot;:true,&quot;layoutIsExpanded&quot;:false,&quot;emdbProvider&quot;:&quot;rcsb&quot;,&quot;viewportShowExpand&quot;:true,&quot;layoutShowLog&quot;:false,&quot;viewportShowAnimation&quot;:true,&quot;layoutShowRemoteState&quot;:false,&quot;viewportShowSelectionMode&quot;:false,&quot;layoutShowSequence&quot;:false,&quot;pdbProvider&quot;:&quot;rcsb&quot;,&quot;layoutShowControls&quot;:false}).then(viewer => {
viewer.loadStructureFromUrl(&quot;./www/7sgl.pdb&quot;, format=&quot;pdb&quot;); });
</script>
</body>
Expand All @@ -387,7 +387,7 @@ <h2>pdb file from url</h2>
<body>
<div id=&quot;app-https://files.rcsb.org/download/7sgl.pdb&quot; class=&quot;molstar-app&quot;></div>
<script type=&quot;text/javascript&quot;>
molstar.Viewer.create(&quot;app-https://files.rcsb.org/download/7sgl.pdb&quot;, {&quot;layoutIsExpanded&quot;:false,&quot;layoutShowLeftPanel&quot;:true,&quot;viewportShowAnimation&quot;:true,&quot;layoutShowLog&quot;:false,&quot;pdbProvider&quot;:&quot;rcsb&quot;,&quot;layoutShowSequence&quot;:false,&quot;viewportShowExpand&quot;:true,&quot;layoutShowControls&quot;:false,&quot;viewportShowSelectionMode&quot;:false,&quot;layoutShowRemoteState&quot;:false,&quot;emdbProvider&quot;:&quot;rcsb&quot;}).then(viewer => {
molstar.Viewer.create(&quot;app-https://files.rcsb.org/download/7sgl.pdb&quot;, {&quot;layoutShowLeftPanel&quot;:true,&quot;layoutIsExpanded&quot;:false,&quot;emdbProvider&quot;:&quot;rcsb&quot;,&quot;viewportShowExpand&quot;:true,&quot;layoutShowLog&quot;:false,&quot;viewportShowAnimation&quot;:true,&quot;layoutShowRemoteState&quot;:false,&quot;viewportShowSelectionMode&quot;:false,&quot;layoutShowSequence&quot;:false,&quot;pdbProvider&quot;:&quot;rcsb&quot;,&quot;layoutShowControls&quot;:false}).then(viewer => {
viewer.loadStructureFromUrl(&quot;https://files.rcsb.org/download/7sgl.pdb&quot;, format=&quot;pdb&quot;); });
</script>
</body>
Expand All @@ -409,7 +409,7 @@ <h2>local xyz file</h2>
<body>
<div id=&quot;app-./www/example.xyz&quot; class=&quot;molstar-app&quot;></div>
<script type=&quot;text/javascript&quot;>
molstar.Viewer.create(&quot;app-./www/example.xyz&quot;, {&quot;layoutIsExpanded&quot;:false,&quot;layoutShowLeftPanel&quot;:true,&quot;viewportShowAnimation&quot;:true,&quot;layoutShowLog&quot;:false,&quot;pdbProvider&quot;:&quot;rcsb&quot;,&quot;layoutShowSequence&quot;:false,&quot;viewportShowExpand&quot;:true,&quot;layoutShowControls&quot;:false,&quot;viewportShowSelectionMode&quot;:false,&quot;layoutShowRemoteState&quot;:false,&quot;emdbProvider&quot;:&quot;rcsb&quot;}).then(viewer => {
molstar.Viewer.create(&quot;app-./www/example.xyz&quot;, {&quot;layoutShowLeftPanel&quot;:true,&quot;layoutIsExpanded&quot;:false,&quot;emdbProvider&quot;:&quot;rcsb&quot;,&quot;viewportShowExpand&quot;:true,&quot;layoutShowLog&quot;:false,&quot;viewportShowAnimation&quot;:true,&quot;layoutShowRemoteState&quot;:false,&quot;viewportShowSelectionMode&quot;:false,&quot;layoutShowSequence&quot;:false,&quot;pdbProvider&quot;:&quot;rcsb&quot;,&quot;layoutShowControls&quot;:false}).then(viewer => {
viewer.loadStructureFromUrl(&quot;./www/example.xyz&quot;, format=&quot;xyz&quot;); });
</script>
</body>
Expand All @@ -431,7 +431,7 @@ <h2>local pdb and trajectory</h2>
<body>
<div id=&quot;app-./www/example.pdb./www/example.xtc&quot; class=&quot;molstar-app&quot;></div>
<script type=&quot;text/javascript&quot;>
molstar.Viewer.create(&quot;app-./www/example.pdb./www/example.xtc&quot;, {&quot;layoutIsExpanded&quot;:false,&quot;layoutShowLeftPanel&quot;:true,&quot;viewportShowAnimation&quot;:true,&quot;layoutShowLog&quot;:false,&quot;pdbProvider&quot;:&quot;rcsb&quot;,&quot;layoutShowSequence&quot;:false,&quot;viewportShowExpand&quot;:true,&quot;layoutShowControls&quot;:false,&quot;viewportShowSelectionMode&quot;:false,&quot;layoutShowRemoteState&quot;:false,&quot;emdbProvider&quot;:&quot;rcsb&quot;}).then(viewer => {
molstar.Viewer.create(&quot;app-./www/example.pdb./www/example.xtc&quot;, {&quot;layoutShowLeftPanel&quot;:true,&quot;layoutIsExpanded&quot;:false,&quot;emdbProvider&quot;:&quot;rcsb&quot;,&quot;viewportShowExpand&quot;:true,&quot;layoutShowLog&quot;:false,&quot;viewportShowAnimation&quot;:true,&quot;layoutShowRemoteState&quot;:false,&quot;viewportShowSelectionMode&quot;:false,&quot;layoutShowSequence&quot;:false,&quot;pdbProvider&quot;:&quot;rcsb&quot;,&quot;layoutShowControls&quot;:false}).then(viewer => {
viewer.loadTrajectory(
{
model: {
Expand Down
2 changes: 1 addition & 1 deletion presentation_files/libs/quarto-contrib/molstar-v3.13.0/molstar.js
View file

Large diffs are not rendered by default.

0 comments on commit f7b677e

Please sign in to comment.