Add PdPgb

content/sc.data/PdPgb.md

+---
+title: "Human Normal and BPH Prostate"
+description: "Single-Cell RNA-sequencing Data"
+name: "Human Normal and BPH Prostate"
+date: 2020-02-22T20:10:33-06:00
+draft: true
+weight: "2"
+type: "custom"
+layout: "hu.PdPgb"
+current: true
+---

layouts/custom/hu.PdPgb.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: 33.33%;
+    }
+
+    .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: 1250px) {
+        .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="Region">Prostatic Region</option>
+                <option>Phenotype</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="dis">Distal Prostate</option>
+                <option value="prx">Proximal Prostate</option>
+                <option value="nor">Normal Prostate</option>
+                <option value="bph">BPH Prostate</option>
+            </select>
+        </div>
+        <br>
+        <div style="text-align:left">
+            <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>
+        <h3 id="label.group"></h3>
+        <div class="columnF">
+            <h4 id="label.ClusterVis">
+                </h3>
+                <div data-proofer-ignore class="img">
+                    <img id="img.ClusterVis" src="" />
+                </div>
+                <br>
+        </div>
+        <div class="columnF">
+            <h4 id="label.Feature">
+                </h3>
+                <div data-proofer-ignore class="img">
+                    <img id="img.Feature" src="" />
+                </div>
+                <br>
+        </div>
+        <div class="columnF">
+            <h4 id="label.ViolinBox">
+                </h3>
+                <div data-proofer-ignore 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://doi.org/10.1101/2020.02.19.937615"
+                    target="_blank">bioRxiv</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://doi.org/10.1101/2020.02.19.937615"
+                    target="_blank">Human Normal Prostate GEO: GSEXXX</a></span></div>
+                    <div><span style="font-size:16px;"> <a href="https://doi.org/10.1101/2020.02.19.937615"
+                        target="_blank">Human Glandular BPH Prostate GEO: GSEXXX</a></span></div>
+        <div><span style="font-size:16px;"><a href="https://www.gudmap.org/chaise/record/#2/RNASeq:Study/RID=16-WPBT" target="_blank">Normal Human Prostate GUDMAP:
+            16-WPBT</a></span></div>
+        <div><span style="font-size:16px;"><a href="https://www.gudmap.org/chaise/record/#2/RNASeq:Study/RID=16-WPBW" target="_blank">Glandular BPH Human Prostate GUDMAP:
+            16-WPBW</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: 220, height: 1 });
+        });
+        $(function () {
+            $("#group").selectmenu({ width: 220 });
+        });
+        $(function () {
+            var genes = {{ index .Site.Data.sc_data.hu.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.genes }};
+            _gene = $("#gene").val().toUpperCase();
+            if ($.inArray(_gene, genes.genes) < 0) {
+                if (_gene == "") {
+                    alert("No Gene Selected.")
+                } else {
+                    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.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-1.amazonaws.com/data.images.pdpgb/" + $("#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-1.amazonaws.com/data.images.pdpgb/" + $("#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-1.amazonaws.com/data.images.pdpgb/" + $("#group").val() + "/images/ViolinBox/" + $("#populations").val() + "/genes/" + _gene + "_1.png"
+            return (_gene)
+        });
+    </script>
+</head>
\ No newline at end of file