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: 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="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: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://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 () {
            $("#group").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.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/" + $("#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/" + $("#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/" + $("#group").val() + "/images/ViolinBox/" + $("#populations").val() + "/genes/" + _gene + "_1.png"
            return (_gene)
        });
    </script>
</head>