Merge branch 'develop' into 'master'

Develop

See merge request !12

.gitlab-ci.yml

@@ -16,8 +16,8 @@ build:
 deploy:
   script:
   - singularity run 'docker://monachus/hugo' hugo
-  - singularity run 'docker://monachus/hugo' hugo deploy aws --maxDeletes -1
-  - aws s3 ls s3://www.strandlab.net/ --recursive | awk '{cmd="aws s3api put-object-acl --acl bucket-owner-full-control --bucket www.strandlab.net --key "$4; system(cmd)}'
+##  - singularity run 'docker://monachus/hugo' hugo deploy aws --maxDeletes -1
+##  - aws s3 ls s3://www.strandlab.net/ --recursive | awk '{cmd="aws s3api put-object-acl --acl bucket-owner-full-control --bucket www.strandlab.net --key "$4; system(cmd)}'
   artifacts:
     paths:
     - public

config.toml

-baseurl = "http://www.strandlab.net.s3-website.us-east-2.amazonaws.com/"
+baseurl = "http://www.strandlab.net"
 title = "Strand Lab"
 author = "Gervaise H. Henry"
 theme = "blackburn"

data/repository/filters.json

-[
-    {"id": "disease", "parent": "#", "text": "Disease Phenotype",  "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "disease.d", "parent":"disease", "text": "Donor (normal)"},
-    {"id": "disease.b", "parent":"disease", "text": "BPH"},
-    {"id": "disease.c", "parent":"disease", "text": "Prostate Cancer"},
-    {"id": "demographics", "parent": "#", "text": "Demographics",  "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "ethnicity", "parent":"demographics", "text": "Ethnicity", "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "ethn.aa", "parent":"ethnicity", "text": "African American"},
-    {"id": "ethn.as", "parent":"ethnicity", "text": "Asian"},
-    {"id": "ethn.ca", "parent":"ethnicity", "text": "Caucasian"},
-    {"id": "ethn.hi", "parent":"ethnicity", "text": "Hispanic"},
-    {"id": "ethn.uk", "parent":"ethnicity", "text": "Unknown Ethnicity"},
-    {"id": "age", "parent":"demographics", "text": "Age", "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "age.40", "parent":"age", "text": "<40yo"},
-    {"id": "age.50", "parent":"age", "text": "41-50yo"},
-    {"id": "age.60", "parent":"age", "text": "51-60yo"},
-    {"id": "age.70", "parent":"age", "text": "61-70yo"},
-    {"id": "age.80", "parent":"age", "text": "71-80yo"},
-    {"id": "age.90", "parent":"age", "text": "81-90yo"},
-    {"id": "age.100", "parent":"age", "text": "91+yo"},
-    {"id": "age.uk", "parent":"age", "text": "Unknown Age"},
-    {"id": "clinical", "parent":"#", "text": "Clinical Features", "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "bmi", "parent":"clinical", "text": "BMI", "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "bmi.uw", "parent":"bmi", "text": "Underweight"},
-    {"id": "bmi.nw", "parent":"bmi", "text": "Normal"},
-    {"id": "bmi.ow", "parent":"bmi", "text": "Overweight"},
-    {"id": "bmi.ob", "parent":"bmi", "text": "Obese"},
-    {"id": "bmi.vo", "parent":"bmi", "text": "Very Obese"},
-    {"id": "bmi.so", "parent":"bmi", "text": "Severely Obese"},
-    {"id": "bmi.uk", "parent":"bmi", "text": "Unknown BMI"},
-    {"id": "t2d", "parent":"clinical", "text": "Type 2 Diabetes", "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "t2d.y", "parent":"t2d", "text": "Yes"},
-    {"id": "t2d.n", "parent":"t2d", "text": "No"},
-    {"id": "t2d.uk", "parent":"t2d", "text": "Unknown"},
-    {"id": "bph", "parent":"clinical", "text": "BPH Features", "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "bphsurgery", "parent":"bph", "text": "BPH Surgery", "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "bphsurg.simp", "parent":"bphsurgery", "text": "Simple Prostatectomy"},
-    {"id": "bphsurg.turp", "parent":"bphsurgery", "text": "TURP"},
-    {"id": "bphsurg.uk", "parent":"bphsurgery", "text": "Unknown Surgery"},
-    {"id": "5ari", "parent":"bph", "text": "5ARI", "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "5ari.y", "parent":"5ari", "text": "Yes 5ARI"},
-    {"id": "5ari.n", "parent":"5ari", "text": "No 5ARI"},
-    {"id": "5ari.uk", "parent":"5ari", "text": "Unknown 5ARI"},
-    {"id": "5aril", "parent":"bph", "text": "5ARI Length (months)", "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "5aril.10", "parent":"5aril", "text": "<10mnths 5ARI"},
-    {"id": "5aril.20", "parent":"5aril", "text": "10-20mnths 5ARI"},
-    {"id": "5aril.30", "parent":"5aril", "text": "20+mnths 5ARI"},
-    {"id": "5aril.uk", "parent":"5aril", "text": "Unknown 5ARI"},
-    {"id": "5aril.na", "parent":"5aril", "text": "NA 5ARI"},
-    {"id": "prostatevol", "parent":"clinical", "text": "Prostate Volume", "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "prvol.low", "parent":"prostatevol", "text": "Low Volumne"},
-    {"id": "prvol.med", "parent":"prostatevol", "text": "Medium Volume"},
-    {"id": "prvol.hi", "parent":"prostatevol", "text": "High Volume"},
-    {"id": "prvol.vhi", "parent":"prostatevol", "text": "Very High Volume"},
-    {"id": "prvol.uk", "parent":"prostatevol", "text": "Unknown Volume"},
-    {"id": "repo", "parent":"#", "text": "Repository", "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "repo.pr", "parent":"repo", "text": "Prostate", "a_attr": { "class": "no_checkbox" }, "disabled": true},
-    {"id": "repo.pr.cry", "parent":"repo.pr", "text": "Pr Cryopreserved Cells"},
-    {"id": "repo.pr.ff", "parent":"repo.pr", "text": "Pr Flash Frozen Tissue"},
-    {"id": "repo.pr.ffpe", "parent":"repo.pr", "text": "Pr FFPE"},
-    {"id": "repo.pr.oct", "parent":"repo.pr", "text": "Pr OCT"},
-    {"id": "repo.bl", "parent":"repo", "text": "Bladder"},
-    {"id": "repo.sv", "parent":"repo", "text": "Seminal Vesicle"},
-    {"id": "repo.vd", "parent":"repo", "text": "Vas Deferencec"},
-    {"id": "repo.ut", "parent":"repo", "text": "Ureter"}
+[
+    {"id": "disease", "parent": "#", "text": "Disease Phenotype",  "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "disease.d", "parent":"disease", "text": "Donor (normal)"},
+    {"id": "disease.b", "parent":"disease", "text": "BPH"},
+    {"id": "disease.c", "parent":"disease", "text": "Prostate Cancer"},
+    {"id": "demographics", "parent": "#", "text": "Demographics",  "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "ethnicity", "parent":"demographics", "text": "Ethnicity", "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "ethn.aa", "parent":"ethnicity", "text": "African American"},
+    {"id": "ethn.as", "parent":"ethnicity", "text": "Asian"},
+    {"id": "ethn.ca", "parent":"ethnicity", "text": "Caucasian"},
+    {"id": "ethn.hi", "parent":"ethnicity", "text": "Hispanic"},
+    {"id": "ethn.uk", "parent":"ethnicity", "text": "Unknown Ethnicity"},
+    {"id": "age", "parent":"demographics", "text": "Age", "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "age.40", "parent":"age", "text": "<40yo"},
+    {"id": "age.50", "parent":"age", "text": "41-50yo"},
+    {"id": "age.60", "parent":"age", "text": "51-60yo"},
+    {"id": "age.70", "parent":"age", "text": "61-70yo"},
+    {"id": "age.80", "parent":"age", "text": "71-80yo"},
+    {"id": "age.90", "parent":"age", "text": "81-90yo"},
+    {"id": "age.100", "parent":"age", "text": "91+yo"},
+    {"id": "age.uk", "parent":"age", "text": "Unknown Age"},
+    {"id": "clinical", "parent":"#", "text": "Clinical Features", "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "bmi", "parent":"clinical", "text": "BMI", "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "bmi.uw", "parent":"bmi", "text": "Underweight"},
+    {"id": "bmi.nw", "parent":"bmi", "text": "Normal"},
+    {"id": "bmi.ow", "parent":"bmi", "text": "Overweight"},
+    {"id": "bmi.ob", "parent":"bmi", "text": "Obese"},
+    {"id": "bmi.vo", "parent":"bmi", "text": "Very Obese"},
+    {"id": "bmi.so", "parent":"bmi", "text": "Severely Obese"},
+    {"id": "bmi.uk", "parent":"bmi", "text": "Unknown BMI"},
+    {"id": "t2d", "parent":"clinical", "text": "Type 2 Diabetes", "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "t2d.y", "parent":"t2d", "text": "Yes"},
+    {"id": "t2d.n", "parent":"t2d", "text": "No"},
+    {"id": "t2d.uk", "parent":"t2d", "text": "Unknown"},
+    {"id": "bph", "parent":"clinical", "text": "BPH Features", "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "bphsurgery", "parent":"bph", "text": "BPH Surgery", "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "bphsurg.simp", "parent":"bphsurgery", "text": "Simple Prostatectomy"},
+    {"id": "bphsurg.turp", "parent":"bphsurgery", "text": "TURP"},
+    {"id": "bphsurg.uk", "parent":"bphsurgery", "text": "Unknown Surgery"},
+    {"id": "5ari", "parent":"bph", "text": "5ARI", "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "5ari.y", "parent":"5ari", "text": "Yes 5ARI"},
+    {"id": "5ari.n", "parent":"5ari", "text": "No 5ARI"},
+    {"id": "5ari.uk", "parent":"5ari", "text": "Unknown 5ARI"},
+    {"id": "5aril", "parent":"bph", "text": "5ARI Length (months)", "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "5aril.10", "parent":"5aril", "text": "<10mnths 5ARI"},
+    {"id": "5aril.20", "parent":"5aril", "text": "10-20mnths 5ARI"},
+    {"id": "5aril.30", "parent":"5aril", "text": "20+mnths 5ARI"},
+    {"id": "5aril.uk", "parent":"5aril", "text": "Unknown 5ARI"},
+    {"id": "5aril.na", "parent":"5aril", "text": "NA 5ARI"},
+    {"id": "prostatevol", "parent":"clinical", "text": "Prostate Volume", "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "prvol.low", "parent":"prostatevol", "text": "Low Volumne"},
+    {"id": "prvol.med", "parent":"prostatevol", "text": "Medium Volume"},
+    {"id": "prvol.hi", "parent":"prostatevol", "text": "High Volume"},
+    {"id": "prvol.vhi", "parent":"prostatevol", "text": "Very High Volume"},
+    {"id": "prvol.uk", "parent":"prostatevol", "text": "Unknown Volume"},
+    {"id": "repo", "parent":"#", "text": "Repository", "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "repo.pr", "parent":"repo", "text": "Prostate", "a_attr": { "class": "no_checkbox" }, "disabled": true},
+    {"id": "repo.pr.cry", "parent":"repo.pr", "text": "Pr Cryopreserved Cells"},
+    {"id": "repo.pr.ff", "parent":"repo.pr", "text": "Pr Flash Frozen Tissue"},
+    {"id": "repo.pr.ffpe", "parent":"repo.pr", "text": "Pr FFPE"},
+    {"id": "repo.pr.oct", "parent":"repo.pr", "text": "Pr OCT"},
+    {"id": "repo.bl", "parent":"repo", "text": "Bladder"},
+    {"id": "repo.sv", "parent":"repo", "text": "Seminal Vesicle"},
+    {"id": "repo.vd", "parent":"repo", "text": "Vas Deference"},
+    {"id": "repo.ut", "parent":"repo", "text": "Ureter"}
 ]
\ No newline at end of file

layouts/custom/hu.donor.deep.html

-{{ partial "header.html" . }}
-
-<div class="header">
-    <h1>{{ .Title }}</h1>
-    <h2>{{ .Description }}</h2>
-</div>
-<div class="content">
-    {{ .Content }}
-</div>
-
-<style>
-    .content {
-        margin: 0;
-        max-width: none;
-    }
-
-    .select {
-        float: top;
-        z-index: 1;
-        top: 0px;
-        background: #191818;
-        overflow-x: hidden;
-        padding: 8px 10px;
-    }
-
-    .columnS {
-        float: left;
-        text-align: center;
-        width: 50%;
-    }
-
-    .columnF {
-        float: left;
-        text-align: center;
-        width: 33.33%;
-    }
-
-    .row:after {
-        content: "";
-        display: table;
-        clear: both;
-    }
-
-    img {
-        max-width: 100%;
-        height: auto;
-    }
-
-    @media (max-width: 1000px) {
-        .columnS {
-            text-align: right;
-            width: 100%;
-        }
-
-        .columnF {
-            width: 100%;
-        }
-
-        br {
-            display: none;
-        }
-    }
-</style>
-
-<div class="content">
-    <div class="select">
-        <div class="columnS ui-widget">
-            <label for="gene" style="font-family:sans-serif; font-size:18px;"><b>Gene:</b></label>
-            <br>
-            <input id="gene" size="19">
-        </div>
-        <div class="columnS">
-            <label for="populations" style="font-size:18px;">
-                <b>Select a group of cell populations:</b>
-            </label>
-            <br>
-            <select name="populations" id="populations">
-                <option selected="selected" value="Population"> Cell Populations</option>
-                <option>Lineage</option>
-                <option value="Zone">Prostatic Zone</option>
-                <option>Patient</option>
-            </select>
-        </div>
-        <br>
-        <div style="text-align:center">
-            <button type="submit" id="analysis" class="btn btn-primary">Run Analysis</button>
-        </div>
-        <hr>
-        <div>
-            <span style="font-size:16px; font-weight:bold;">Experimental details:</span>
-            <br>
-            <span style="font-size:16px;">
-                Single Cell RNA-Sequencing was conducted on 32,194 cells from peripheral zone and transition zone from
-                the prostate of three 18-38 year old organ donors using the 10x Genomics platform. The cells were
-                clustered and identified by correlation of their transcriptomes to known cell types. Gene expression can
-                be compared by population identity, cell lineage, patient, or dissected prostatic zone. This data is the
-                result of additional sequencing done on the same samples post publication, and projected in UMAP space.
-            </span>
-        </div>
-    </div>
-    <div align="center">
-        <h1 id="label.gene">NO GENE SELECTED</h1>
-        <h2 id="label.populations"></h2>
-        <div class="columnF">
-            <h4 id="label.ClusterVis">
-                </h3>
-                <div class="img">
-                    <img id="img.ClusterVis" src="" />
-                </div>
-                <br>
-        </div>
-        <div class="columnF">
-            <h4 id="label.Feature">
-                </h3>
-                <div class="img">
-                    <img id="img.Feature" src="" />
-                </div>
-                <br>
-        </div>
-        <div class="columnF">
-            <h4 id="label.ViolinBox">
-                </h3>
-                <div class="img">
-                    <img id="img.ViolinBox" src="" />
-                </div>
-                <br>
-        </div>
-    </div>
-    <hr>
-    <div align="left">
-        <div><span style="font-size:18px; font-weight:bold;">Publication found at:</span></div>
-        <div><span style="font-size:16px;"> <a href="https://www.ncbi.nlm.nih.gov/pubmed/?term=30566875"
-                    target="_blank">Cell Reports</a></span></div>
-        <div><span style="font-size:18px; font-weight:bold;">Raw data found at:</span></div>
-        <div><span style="font-size:16px;"> <a href="https://www.ncbi.nlm.nih.gov/geo/query/acc.cgi?acc=GSE117403"
-                    target="_blank">GEO:
-                    GSE117403</a></span></div>
-        <div><span style="font-size:16px;"><a href="https://doi.org/10.25548/W-R8CM" target="_blank">GUDMAP:
-                    W-R8CM</a></span></div>
-    </div>
-</div>
-
-{{ partial "footer.html" . }}
-
-<head>
-    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
-    <style>
-        .ui-autocomplete {
-            max-height: 200px;
-            overflow-y: auto;
-            overflow-x: hidden;
-        }
-    </style>
-    <script>
-        $(function () {
-            $("#populations").selectmenu({ width: 230 });
-        });
-        $(function () {
-            var genes = {{ index .Site.Data.sc_data.hu_donor_pr_deep.genes }};
-            var selectedGene = $("#gene").autocomplete({
-                source: genes.genes,
-                maxResults: 10,
-                maxShowItems: 10,
-                minLength: 1,
-            });
-        });
-        $("#analysis").click(function (event) {
-            event.preventDefault();
-            var genes = {{ index .Site.Data.sc_data.hu_donor_pr_deep.genes }};
-            _gene = $("#gene").val().toUpperCase();
-            if ($.inArray(_gene, genes.genes) < 0) {
-                alert("Gene " + _gene + " not exist in the data.")
-                return
-            }
-            document.getElementById("label.gene").innerHTML = _gene
-            document.getElementById("label.populations").innerHTML = "Separated by " + $("#populations").val().toUpperCase()
-            document.getElementById("label.ClusterVis").innerHTML = "Cluster Visualization"
-            var img = document.getElementById("img.ClusterVis");
-            img.src = "https://s3.us-east-2.amazonaws.com/images.gse117403.deep/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/images.gse117403.deep/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/images.gse117403.deep/images/ViolinBox/" + $("#populations").val() + "/genes/" + _gene + "_1.png"
-            return (_gene)
-        });
-    </script>
+{{ partial "header.html" . }}
+
+<div class="header">
+    <h1>{{ .Title }}</h1>
+    <h2>{{ .Description }}</h2>
+</div>
+<div class="content">
+    {{ .Content }}
+</div>
+
+<style>
+    .content {
+        margin: 0;
+        max-width: none;
+    }
+
+    .select {
+        float: top;
+        z-index: 1;
+        top: 0px;
+        background: #191818;
+        overflow-x: hidden;
+        padding: 8px 10px;
+    }
+
+    .columnS {
+        float: left;
+        text-align: center;
+        width: 50%;
+    }
+
+    .columnF {
+        float: left;
+        text-align: center;
+        width: 33.33%;
+    }
+
+    .row:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+
+    @media (max-width: 1000px) {
+        .columnS {
+            text-align: right;
+            width: 100%;
+        }
+
+        .columnF {
+            width: 100%;
+        }
+
+        br {
+            display: none;
+        }
+    }
+</style>
+
+<div class="content">
+    <div class="select">
+        <div class="columnS ui-widget">
+            <label for="gene" style="font-family:sans-serif; font-size:18px;"><b>Gene:</b></label>
+            <br>
+            <input id="gene" size="19">
+        </div>
+        <div class="columnS">
+            <label for="populations" style="font-size:18px;">
+                <b>Select a group of cell populations:</b>
+            </label>
+            <br>
+            <select name="populations" id="populations">
+                <option selected="selected" value="Population"> Cell Populations</option>
+                <option>Lineage</option>
+                <option value="Zone">Prostatic Zone</option>
+                <option>Patient</option>
+            </select>
+        </div>
+        <br>
+        <div style="text-align:center">
+            <button type="submit" id="analysis" class="btn btn-primary">Run Analysis</button>
+        </div>
+        <hr>
+        <div>
+            <span style="font-size:16px; font-weight:bold;">Experimental details:</span>
+            <br>
+            <span style="font-size:16px;">
+                Single Cell RNA-Sequencing was conducted on 32,194 cells from peripheral zone and transition zone from
+                the prostate of three 18-38 year old organ donors using the 10x Genomics platform. The cells were
+                clustered and identified by correlation of their transcriptomes to known cell types. Gene expression can
+                be compared by population identity, cell lineage, patient, or dissected prostatic zone. This data is the
+                result of additional sequencing done on the same samples post publication, and projected in UMAP space.
+            </span>
+        </div>
+    </div>
+    <div align="center">
+        <h1 id="label.gene">NO GENE SELECTED</h1>
+        <h2 id="label.populations"></h2>
+        <div class="columnF">
+            <h4 id="label.ClusterVis">
+                </h3>
+                <div class="img">
+                    <img id="img.ClusterVis" src="" />
+                </div>
+                <br>
+        </div>
+        <div class="columnF">
+            <h4 id="label.Feature">
+                </h3>
+                <div class="img">
+                    <img id="img.Feature" src="" />
+                </div>
+                <br>
+        </div>
+        <div class="columnF">
+            <h4 id="label.ViolinBox">
+                </h3>
+                <div class="img">
+                    <img id="img.ViolinBox" src="" />
+                </div>
+                <br>
+        </div>
+    </div>
+    <hr>
+    <div align="left">
+        <div><span style="font-size:18px; font-weight:bold;">Publication found at:</span></div>
+        <div><span style="font-size:16px;"> <a href="https://www.ncbi.nlm.nih.gov/pubmed/?term=30566875"
+                    target="_blank">Cell Reports</a></span></div>
+        <div><span style="font-size:18px; font-weight:bold;">Raw data found at:</span></div>
+        <div><span style="font-size:16px;"> <a href="https://www.ncbi.nlm.nih.gov/geo/query/acc.cgi?acc=GSE117403"
+                    target="_blank">GEO:
+                    GSE117403</a></span></div>
+        <div><span style="font-size:16px;"><a href="https://doi.org/10.25548/W-R8CM" target="_blank">GUDMAP:
+                    W-R8CM</a></span></div>
+    </div>
+</div>
+
+{{ partial "footer.html" . }}
+
+<head>
+    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <style>
+        .ui-autocomplete {
+            max-height: 200px;
+            overflow-y: auto;
+            overflow-x: hidden;
+        }
+    </style>
+    <script>
+        $(function () {
+            $("#populations").selectmenu({ width: 230 });
+        });
+        $(function () {
+            var genes = {{ index .Site.Data.sc_data.hu_donor_pr_deep.genes }};
+            var selectedGene = $("#gene").autocomplete({
+                source: genes.genes,
+                maxResults: 10,
+                maxShowItems: 10,
+                minLength: 1,
+            });
+        });
+        $("#analysis").click(function (event) {
+            event.preventDefault();
+            var genes = {{ index .Site.Data.sc_data.hu_donor_pr_deep.genes }};
+            _gene = $("#gene").val().toUpperCase();
+            if ($.inArray(_gene, genes.genes) < 0) {
+                alert("Gene " + _gene + " not exist in the data.")
+                return
+            }
+            document.getElementById("label.gene").innerHTML = _gene
+            document.getElementById("label.populations").innerHTML = "Separated by " + $("#populations").val().toUpperCase()
+            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"
+            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"
+            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"
+            return (_gene)
+        });
+    </script>
 </head>
\ No newline at end of file