Add cell group filter for Pd deep

Closes #1 (closed)

layouts/custom/hu.donor.deep.html

@@ -26,7 +26,7 @@
     .columnS {
         float: left;
         text-align: center;
-        width: 50%;
+        width: 33.33%;
     }
 
     .columnF {
@@ -46,7 +46,7 @@
         height: auto;
     }
 
-    @media (max-width: 1000px) {
+    @media (max-width: 1250px) {
         .columnS {
             text-align: right;
             width: 100%;
@@ -75,14 +75,25 @@
             </label>
             <br>
             <select name="populations" id="populations">
-                <option selected="selected" value="Population"> Cell Populations</option>
+                <option selected="selected" value="Population">Cell Populations</option>
                 <option>Lineage</option>
                 <option value="Zone">Prostatic Zone</option>
                 <option>Patient</option>
             </select>
         </div>
+        <div class="columnS">
+            <label for="group" style="font-size:18px;">
+                <b>Select a group of cell to display:</b>
+            </label>
+            <br>
+            <select name="group" id="group">
+                <option selected="selected" value="all">All Cells</option>
+                <option value="epi">Epithelia Only</option>
+                <option value="st">Stroma Only</option>
+            </select>
+        </div>
         <br>
-        <div style="text-align:center">
+        <div style="text-align:left">
             <button type="submit" id="analysis" class="btn btn-primary">Run Analysis</button>
         </div>
         <hr>
@@ -101,6 +112,7 @@
     <div align="center">
         <h1 id="label.gene">NO GENE SELECTED</h1>
         <h2 id="label.populations"></h2>
+        <h3 id="label.group"></h3>
         <div class="columnF">
             <h4 id="label.ClusterVis">
                 </h3>
@@ -157,6 +169,9 @@
         $(function () {
             $("#populations").selectmenu({ width: 230 });
         });
+        $(function () {
+            $("#group").selectmenu({ width: 230 });
+        });
         $(function () {
             var genes = {{ index .Site.Data.sc_data.hu_donor_pr_deep.genes }};
             var selectedGene = $("#gene").autocomplete({
@@ -176,15 +191,16 @@
             }
             document.getElementById("label.gene").innerHTML = _gene
             document.getElementById("label.populations").innerHTML = "Separated by " + $("#populations").val().toUpperCase()
+            document.getElementById("label.group").innerHTML = $("#group").val().toUpperCase() + " CELLS"
             document.getElementById("label.ClusterVis").innerHTML = "Cluster Visualization"
             var img = document.getElementById("img.ClusterVis");
-            img.src = "https://s3.us-east-2.amazonaws.com/data.images.gse117403.deep/images/" + $("#populations").val() + "/umap.png"
+            img.src = "https://s3.us-east-2.amazonaws.com/data.images.gse117403.deep/" + $("#group").val() + "/images/" + $("#populations").val() + "/umap.png"
             document.getElementById("label.Feature").innerHTML = "Feature Plot"
             var img = document.getElementById("img.Feature");
-            img.src = "https://s3.us-east-2.amazonaws.com/data.images.gse117403.deep/images/umap/" + "genes/" + _gene + "_1.png"
+            img.src = "https://s3.us-east-2.amazonaws.com/data.images.gse117403.deep/" + $("#group").val() + "/images/umap/" + "genes/" + _gene + "_1.png"
             document.getElementById("label.ViolinBox").innerHTML = "Violin Box Plot"
             var img = document.getElementById("img.ViolinBox");
-            img.src = "https://s3.us-east-2.amazonaws.com/data.images.gse117403.deep/images/ViolinBox/" + $("#populations").val() + "/genes/" + _gene + "_1.png"
+            img.src = "https://s3.us-east-2.amazonaws.com/data.images.gse117403.deep/" + $("#group").val() + "/images/ViolinBox/" + $("#populations").val() + "/genes/" + _gene + "_1.png"
             return (_gene)
         });
     </script>