Merge pull request #11 from corredD/me_tours

Mesoscale explorer example index.html updated with currently available tours.

me/examples/index.html

@@ -110,7 +110,51 @@ <h1>Mesoscale Explorer &mdash; BETA</h1>
             <div class="offset-by-two eight columns"
                 style="display: flex; flex-direction: column; justify-content: center; align-items: center; ">
                 <div style="text-align: justify; margin: 5px">
-                    A Mol* app for exploring mesoscale models. This is a BETA version. The larger models may crash your browser with an out-of-memory exception. Generally best viewed on desktops with a dedicated GPU. Use the "Graphics" dropdown in the right panel to trade quality for performance.
+                    <a href="https://molstar.org/me/">A Mol* app for exploring mesoscale models</a>. This is a BETA version. The larger models may crash your browser with an out-of-memory exception. Generally best viewed on desktops with a dedicated GPU. Use the "Graphics" dropdown in the right panel to trade quality for performance.
+                    Check here the <a href="https://molstar.org/me/docs/">documentation</a>. 
+                </div>
+            </div>
+        </div>
+
+        <div class="row" style="text-align: center; margin-top: 60px">
+            <div class="twelve columns">        
+                <h4 class="hero-heading" style="margin-bottom: 40px"><b>Guide Tour Examples</b></h4>
+                <div class="row" id="tours">
+                    <script>
+                        fetch('tour.json')
+                            .then(r => r.json())
+                            .then(l => {
+                                const row = document.getElementById('tours');
+                                let examples;
+                                l.forEach((e, i) => {
+                                    if (i % 4 === 0) {
+                                        examples = document.createElement('div');
+                                        examples.className = 'examples';
+                                        row.appendChild(examples);
+                                    }
+
+                                    const div = document.createElement('div');
+                                    div.className = 'tooltip';
+                                    examples.appendChild(div);
+
+                                    const a = document.createElement('a');
+                                    a.href = `https://molstar.org/me/?example=${e.id}&hide-controls=1`;
+                                    a.target = '_blank';
+                                    a.title = e.label;
+                                    div.appendChild(a);
+
+                                    const img = document.createElement('img');
+                                    img.src = e.image;
+                                    img.alt = e.label;
+                                    a.appendChild(img);
+
+                                    const p = document.createElement('div');
+                                    p.className = 'tooltip-info';
+                                    p.innerHTML = e.link ? `${e.description}<br/><a href=${e.link} target='_blank'>Source</a>` : e.description;
+                                    div.appendChild(p);
+                                });
+                            });
+                    </script>
                 </div>
             </div>
         </div>

me/examples/list.json

@@ -13,7 +13,7 @@
         "label": "Petworld SARS-CoV-2",
         "url": "./examples/sarscov2_2-no_bonds.bcif",
         "type": "bcif",
-        "description": "Petworld model of SARS-CoV-2. Authors: Kornel Ozvoldik and Elmar Krieger.",
+        "description": "Petworld model of SARS-CoV-2, 13.539 million atoms. Authors: Kornel Ozvoldik and Elmar Krieger.",
         "link": "http://download.yasara.org/petworld/sarscov2/index.html",
         "image": "./img/petworld-sarscov2.png"
     },
@@ -23,7 +23,7 @@
         "label": "Petworld mushroom-type postsynapse",
         "url": "https://d39ulgwcl2k1f0.cloudfront.net/me/petworld/postsynmushroom_2-no_bonds.bcif",
         "type": "bcif",
-        "description": "Petworld model of the postsynapse made of 2.4 billion atoms and includes protein filaments, endosomes and the mitochondrial envelope. Based on previous work by Helm et al. (doi: 10.1038/s41593-021-00874-w).",
+        "description": "Petworld model of the postsynapse made of 1.4 billion atoms and includes protein filaments, endosomes and the mitochondrial envelope. Based on previous work by Helm et al. (doi: 10.1038/s41593-021-00874-w).",
         "link": "http://download.yasara.org/petworld/postsynmushroom/index.html",
         "image": "./img/petworld-postsynmushroom.png"
     },
@@ -32,7 +32,7 @@
         "label": "Petworld stubby-type postsynapse",
         "url": "https://d39ulgwcl2k1f0.cloudfront.net/me/petworld/postsynstubby_2-no_bonds.bcif",
         "type": "bcif",
-        "description": "Petworld model of the postsynapse made of 2.4 billion atoms and includes protein filaments and endosomes. Based on previous work by Helm et al. (doi: 10.1038/s41593-021-00874-w).",
+        "description": "Petworld model of the postsynapse made of 2.9 billion atoms and includes protein filaments and endosomes. Based on previous work by Helm et al. (doi: 10.1038/s41593-021-00874-w).",
         "link": "http://download.yasara.org/petworld/postsynstubby/index.html",
         "image": "./img/petworld-postsynstubby.png"
     },
@@ -41,7 +41,7 @@
         "label": "Petworld presynaptic bouton",
         "url": "https://d39ulgwcl2k1f0.cloudfront.net/me/petworld/presynapse_2-no_bonds.bcif",
         "type": "bcif",
-        "description": "Petworld model of the presynaptic bouton is made of 3.7 billion atoms and includes protein filaments, endosomes, the mitochondrial envelope and 307 glutamatergic vesicles. Based on previous work by Wilhelm et al. (doi: 10.1126/science.1252884).",
+        "description": "Petworld model of the presynaptic bouton is made of 3.07 billion atoms and includes protein filaments, endosomes, the mitochondrial envelope and 307 glutamatergic vesicles. Based on previous work by Wilhelm et al. (doi: 10.1126/science.1252884).",
         "link": "http://download.yasara.org/petworld/presynapse/index.html",
         "image": "./img/petworld-presynapse.png"
     },
@@ -63,21 +63,39 @@
         "link": "http://download.yasara.org/petworld/synvesicle/index.html",
         "image": "./img/petworld-synvesicle.png"
     },
-
+    {
+        "id": "machineryoflife",
+        "label": "Machinery Of Life",
+        "url": "https://mesoscope.scripps.edu/explorer/examples/machineryoflife.bcif",
+        "type": "bcif",
+        "description": "Machinery Of Life by David Goodsell and Ludovic Autin. This model is based on the book 'The Machinery of Life' by David Goodsell. The model includes the ribosome, RNA polymerase, DNA polymerase, and other molecular machines.",
+        "link":"https://cdn.rcsb.org/pdb101/molecular-machinery/",
+        "image": "./img/cellpack-machinery.png"
+    },
     {
         "id": "cellpack-hiv1",
         "label": "CellPack HIV",
         "url": "./examples/hiv1_cellpack_atom_instances.bcif",
         "type": "bcif",
         "description": "CellPack HIV model by Ludovic Autin et al.",
+        "link":"https://pubs.rsc.org/en/content/articlelanding/2014/fd/c4fd00017j",
         "image": "./img/cellpack-hiv1.png"
     },
+    {
+        "id": "cellpack-exosome",
+        "label": "CellPack Exosome",
+        "url": "https://mesoscope.scripps.edu/explorer/examples/cellpack_feb2024_exosome.bcif",
+        "type": "bcif",
+        "description": "CellPack Exosome model by Julia Jimenez, and Ludovic Autin et al. (doi:10.5210/jbc.v43i2.10331).",
+	"link": "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC9139774/",
+        "image": "./img/cellpack-exosome.png"
+    },
     {
         "id": "cellpack-mg",
         "label": "CellPack MG",
         "url": "https://d39ulgwcl2k1f0.cloudfront.net/me/cellpack/MG_1184_cellpack_atom_instances.bcif",
         "type": "bcif",
-        "description": "CellPack model of an entire Mycoplasma genitalium cell. Authors: Martina Maritan, and Ludovic Autin et al. (doi: 10.1016/j.jmb.2021.167351).",
+        "description": "CellPack model of an entire Mycoplasma genitalium cell. Authors: Martina Maritan, and Julia Jim�nez et al. (doi:10.1016/j.jmb.2021.167351).",
         "link": "https://ccsb.scripps.edu/gallery/mycoplasma_model/",
         "image": "./img/cellpack-mg.png"
     },
@@ -99,4 +117,4 @@
         "link": "https://github.com/ccsb-scripps/ISG",
         "image": "./img/cellpack-isg_mature.png"
     }
-]
+]

me/examples/tour.json

@@ -0,0 +1,57 @@
+[
+    {
+        "id": "machineryoflife-tour",
+        "label": "Machinery of life : A Tour of the Protein Data Bank",
+        "url": "https://mesoscope.scripps.edu/explorer/tours/machineryoflife.molx",
+        "type": "molx",
+        "description": "Guided Tour of representative structure in the Protein Data Bank. Tour: Ludovic Autin, David Goodsell",
+        "link": "https://cdn.rcsb.org/pdb101/molecular-machinery/",
+        "image": "./img/cellpack-machinery.png"
+    },
+    {
+        "id": "petworld-hiv-tour",
+        "label": "Petworld HIV Tour",
+        "url": "https://mesoscope.scripps.edu/explorer/tours/HIV_draft_tour.molx",
+        "type": "molx",
+        "description": "Guided Tour of Petworld HIV virion model consisting of 37.7 million atoms that carries two at the dimerization initiation sequence coupled RNA strands inside the capsid core particle. Model: Kornel Ozvoldik, Elmar Krieger. Tour: Ludovic Autin, David Goodsell",
+        "link": "http://download.yasara.org/petworld/hiv/index.html",
+        "image": "./img/petworld-hiv.png"
+    },
+    {
+        "id": "petworld-sarscov2-tour",
+        "label": "Petworld SARS-CoV-2 Tour",
+        "url": "https://mesoscope.scripps.edu/explorer/tours/PetWorld_SarsCov2.molx",
+        "type": "molx",
+        "description": "Guided Tour of Petworld model of SARS-CoV-2. Authors: Kornel Ozvoldik and Elmar Krieger. Tour: Ludovic Autin, David Goodsell",
+        "link": "http://download.yasara.org/petworld/sarscov2/index.html",
+        "image": "./img/petworld-sarscov2.png"
+    },
+    {
+        "id": "cellpack-exosome-tour",
+        "label": "cellPACK Exosome Tour",
+        "url": "https://mesoscope.scripps.edu/explorer/tours/CellPACK_Exosome_Tour.molx",
+        "type": "molx",
+        "description": "Guided Tour of cellPACK Exosome model. Julia Jimenez, Ludovic Autin, David Goodsell",
+        "link": "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC9139774/",
+        "image": "./img/cellpack-exosome.png"
+    },
+    {
+        "id": "cellpack-hiv-tour",
+        "label": "cellPACK HIV Tour",
+        "url": "https://mesoscope.scripps.edu/explorer/tours/CellPACK_HIV_Tour.molx",
+        "type": "molx",
+        "description": "Guided Tour of cellPACK HIV virion model consisting. Ludovic Autin, David Goodsell",
+        "link": "https://ccsb.scripps.edu/latticenucleoid/HIVnucleoid/",
+        "image": "./img/cellpack-hiv-tour.png"
+    },
+
+    {
+        "id": "cellpack-mg-tour",
+        "label": "CellPack Mycoplasma Genitalium Tour",
+        "url": "https://mesoscope.scripps.edu/explorer/tours/CellPACK_MG_Tour.molx",
+        "type": "molx",
+        "description": "Guided Tour of Mycoplasma Genitalium. Ludovic Autin, David Goodsell, Martina Maritan",
+        "link": "https://ccsb.scripps.edu/gallery/mycoplasma_model/",
+        "image": "./img/cellpack-mg.png"
+    }
+]