An error occurred while loading the file. Please try again.
-
Gervaise Henry authored037eddb7
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
data.html 6.56 KiB
{{ 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: 1000px) {
.columnS {
text-align: right;
width: 100%;
}
.columnF {
width: 100%;
}
br {
display: none;
}
}
</style>
<body>
<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="lineage" style="font-size:18px;"><b>Select a cell lineage to
display:</b></label>
<br>
<select name="lineage" id="lineage">
<option selected="selected" value="all">All Cells</option>
<option value="epi">Epithelial Cells Only</option>
<option value="st">Stromal Cells Only</option> </select>
</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>Lineage</option>
<option>Patient</option>
<option selected="selected" value="Populations"> Cell Populations</option>
<option value="Zone">Prostatic Zone</option>
</select>
</div>
<br>
<button type="submit" id="analysis" class="btn btn-primary">Run Analysis</button>
<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.</span>
</div>
</div>
<div align="center">
<h1 id="label.gene">NO GENE SELECTED</h1>
<h2 id="label.lineage"></h2>
<h3 id="label.populations"></h3>
<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>
</body>
<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(){
$("#lineage" ).selectmenu({width: 230});
});
$(function(){
$("#populations" ).selectmenu({width: 230});
});
$(function(){
var genes = {{ index .Site.Data.scRNAseq_huPr_D.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.scRNAseq_huPr_D.genes }};
_gene = $("#gene").val().toUpperCase();
if($.inArray(_gene,genes.genes) < 0){
alert("Gene "+ _gene +" not exist in the data.")
return
}
<!-- alert(_gene) -->
document.getElementById("label.gene").innerHTML = _gene
document.getElementById("label.lineage").innerHTML = $("#lineage").val().toUpperCase() + " Cells"
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="/images/scRNAseq_huPr_D/png/ID/" + $("#lineage").val() + "/" + $("#populations").val() + "/ClusterVis.png"
document.getElementById("label.Feature").innerHTML = "Feature Plot"
var img = document.getElementById("img.Feature");
img.src="/images/scRNAseq_huPr_D/png/Feature/" + $("#lineage").val() + "/genes/" + _gene + ".png"
document.getElementById("label.ViolinBox").innerHTML = "Violin Box Plot"
var img = document.getElementById("img.ViolinBox");
img.src="/images/scRNAseq_huPr_D/png/ViolinBox/" + $("#lineage").val() + "/" + $("#populations").val() + "/" + _gene + ".png"
return(_gene)
});
</script>
</head>
{{ partial "footer.html" . }}