Refactor of mGAP overview page (#135)

* Refactor of mGAP overview page

Author: bbimber

mGAP/resources/views/overview.html

@@ -10,35 +10,52 @@
         });
     })(jQuery);
 </script>
+
+<script>
+    $( function() {
+        $( "i.mgap-help" ).on("click", function(e){
+            const el = $(e.target);
+            const videoName = el.attr('data-video');
+            const title = el.attr('data-video-title');
+
+            LDK.Assert.assertNotEmpty('Missing data-video attribute.', videoName);
+
+            mGAP.Utils.showVideoDialog(videoName, title);
+        });
+    } );
+</script>
 <div class="colDiv">
     <div style="flex: 1;margin-right: 20px;">
         Non-human primates, such as Rhesus macaques, are a powerful genetic model of human disease.  mGAP seeks to fill several major voids to promote genomic analyses and the study of human genetic disease in this key pre-clinical model.
         The database provides open access to rhesus macaque genomic and phenotypic data.  Our dataset was originally generated using animals from the large, pedigreed colony of Indian-origin rhesus macaques housed at the Oregon National Primate Research Center (ONPRC); however, it has
-        since <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mGap-externalData.view">been expanded to include data from other National Primate Research Centers and NHP colonies.</a>. Below are the key features of mGAP:
+        since <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mGap-externalData.view">been expanded to include data from other National Primate Research Centers and NHP colonies.</a>.
+        <br><br>
+        <span style="font-weight: bold">NEW: Click the video icons (<i class="fa-solid fa-video mgap-help"></i>) in order to load help videos, or <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mGap-tutorials.view">view our tutorials page</a> for more detail.</span>
         <br>
-        <h4 style="text-decoration: underline;">Short Variant Catalog:</h4>
+        <h4><span style="text-decoration: underline">Short Variant Catalog:</span> <img style="vertical-align: sub" width="40px" src="<%=contextPath%>/mgap/images/SNV.png" alt="SNV"></h4>
         The primary dataset generated by mGAP is a catalog of short variants (summarized to the right). Raw sequence data are <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mgap-dataProcessing.view">analyzed using a vetted pipeline</a> designed to produce high-confidence genotype calls.
         The resulting variants are <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mgap-annotation.view">annotated using a wide range of data sources</a>, including predicted function, overlap with regulatory elements and association with phenotypes and diseases.
         <br>
         <ul style="padding-top: 10px;">
-            <li>Use the <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mGap-genomeBrowser.view?">Genome Browser</a> to view and search data</li>
-<!--            <li>Use our new <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mGap-genomeBrowser.view?target=variantSearch">Full-text Search</a> tool to query variants based on gene, or using our <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mgap-annotation.view">extensive annotations</a></li>-->
-            <li>View our list of <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mGap-variantList.view">Predicted Damaging Variants</a>, which is a list of predicted high-impact or disease associated variants, generated from each release</li>
+            <li>Use the <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mGap-genomeBrowser.view?">Genome Browser</a> to view and search data. <i class="fa-solid fa-video mgap-help" data-video="genome-browser"></i></li>
+             <li>Use our new <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mGap-genomeBrowser.view?target=variantSearch">Full-text Search</a> tool to query variants based on gene, or using our <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mgap-annotation.view">extensive annotations</a> <i class="fa-solid fa-video mgap-help" data-video="variant-search"></i></li>
+            <li>View our list of <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mGap-variantList.view">Predicted Damaging Variants</a>, which is a list of predicted high-impact or disease associated variants, generated from each release <i class="fa-solid fa-video mgap-help" data-video="high-impact-variants"></i></li>
             <li>Unlike many datasets, mGAP has genotype-level data, <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/project-begin.view?pageId=clinical">often connected to living animals from pedigreed breeding colonies</a></li>
             <li>Download raw data, including <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/project-begin.view?pageId=datasets">sequence data</a> and <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/project-begin.view?pageId=variants">variant data</a></li>
         </ul>
 
-        <h4 style="text-decoration: underline;">Structural Variant Catalog:</h4>
+        <h4><span style="text-decoration: underline;">Structural Variant Catalog:</span> <img style="vertical-align: sub" width="40px" src="<%=contextPath%>/mgap/images/SV.png" alt="SV"></h4>
         We have released a draft dataset with structural variants generated from PacBio sequencing of 44 Rhesus macaques. These data complement the short variant catalog by detecting categories of variants not readily accomplished with short read Illumina data.
         <br>
         <ul style="padding-top: 10px;">
             <li>Use the <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mGap-genomeBrowser.view?activeTracks=mGAP Structural Variants 1.0">Genome Browser</a> to view and search structural variant data</li>
         </ul>
 
-        <h4 style="text-decoration: underline;">NHP Models of Human Disease:</h4>
+        <h4><span style="text-decoration: underline;">NHP Models of Human Disease:</span> <img style="vertical-align: sub" width="40px" src="<%=contextPath%>/mgap/images/phenotypes.png" alt="Phenotypes"></h4>
         NHPs serve as essential pre-clinical models for a range of human diseases. The mGAP site supports this work by providing information about published NHP disease/phenotype models, and by providing summaries of the annotated variant catalog to help identify novel disease-associated variants.
         <br>
         <ul style="padding-top: 10px;">
+            <li>Tutorial on searching phenotypes and variants <i class="fa-solid fa-video mgap-help" data-video="phenotypes_and_models"></i></li>
             <li>View our list of <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/project-begin.view?pageId=model">Published NHP Disease Models</a></li>
             <li>View the list of <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mgap-phenotypeList.view">Genes and OMIM diseases/phenotypes</a> where predicted damaging variants were detected</li>
             <li>View our list of <a class="mgap-link" href="<%=contextPath%><%=containerPath%>/mGap-variantList.view">Predicted Damaging Variants</a>, which is a list of predicted high-impact or disease associated variants, generated from each release</li>
@@ -48,7 +65,7 @@ <h4 style="text-decoration: underline;">NHP Models of Human Disease:</h4>
 
     <div id="mgap-graph-outer" style="width: 350px;border: 1px;border-color: black; border-style: solid;padding: 10px;">
 
-        <h4 style="font-style: italic;margin-top: 0px;">Summary of Current Release:</h4>
+        <h4 style="font-style: italic;margin-top: 0;">Summary of Current Release:</h4>
         <br>
         <div id="mgap-release-table"></div>
 

mGAP/resources/views/overview.view.xml

@@ -6,5 +6,8 @@
         <dependency path="ldk.context"/>
         <dependency path="internal/jQuery"/>
         <dependency path="https://cdn.plot.ly/plotly-latest.min.js"/>
+        <dependency path="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"/>
+        <dependency path="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"/>
+        <dependency path="https://kit.fontawesome.com/d2fb21907d.js"/>
     </dependencies>
 </view>

mGAP/resources/views/tutorials.html

@@ -0,0 +1,38 @@
+<script type="text/javascript">
+    (function($){
+        $( document ).ready(function() {
+            const videos = [{
+                Title: 'Overview',
+                src: 'overview',
+            },{
+                Title: 'Genome Browser Overview',
+                src: 'genome-browser',
+            },{
+                Title: 'Phenotypes and Phenotype Searches',
+                src: 'phenotypes-and-models',
+            },{
+                Title: 'Using the Variant Table',
+                src: 'mgap-table-view-tutorial',
+            }]
+
+            // $('#tileview').dxTileView({
+            //     items: videos,
+            //     height: 390,
+            //     baseItemHeight: 120,
+            //     baseItemWidth: 185,
+            //     itemMargin: 10,
+            //     itemTemplate(itemData, itemIndex, itemElement) {
+            //         const $image = $('<div>')
+            //                 .addClass('image')
+            //                 .css('background-image', `url(${itemData.src})`);
+            //
+            //         itemElement
+            //                 .append(`<div>${itemData.Title}</div>`)
+            //                 .append($image);
+            //     },
+            // });
+        });
+    })(jQuery);
+</script>
+
+<div id="tileview">Videos will be added shortly</div>

mGAP/resources/views/tutorials.view.xml

@@ -0,0 +1,11 @@
+<view xmlns="http://labkey.org/data/xml/view" title="mGAP Tutorials">
+    <permissions>
+        <permission name="read"/>
+    </permissions>
+    <dependencies>
+        <dependency path="ldk.context"/>
+        <dependency path="internal/jQuery"/>
+        <dependency path="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"/>
+        <dependency path="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"/>
+    </dependencies>
+</view>

mGAP/resources/web/mGAP/Utils.js

@@ -227,6 +227,24 @@ mGAP.Utils = (function($){
             var ctx = LABKEY.getModuleContext('mgap') || {};
 
             return ctx['mgapReleaseVersion'];
+        },
+
+        showVideoDialog: function(videoName, title) {
+            const videoURL = LABKEY.ActionURL.getContextPath() + '/mgap/videos/' + videoName + ".mp4";
+
+            $('<div>' +
+                    '<video width="100%" controls>' +
+                    'Your browser does not support the video tag.' +
+                    '<source src="' + videoURL + '" type="video/mp4" />' +
+                    '</video>' +
+                    '</div>').dialog({
+                width: '60%',
+                modal: true,
+                title: title || 'mGAP Help',
+                close: function(event, ui) {
+                    $(this).remove();
+                }
+            });
         }
     }
 })(jQuery);

mGAP/resources/web/mGAP/mgap.css

@@ -8,6 +8,6 @@ html {
     font-size: 14px; !important;
 }
 
-.mgap-help {
+.mgap-video-icon {
     cursor: help;
 }