diff options
Diffstat (limited to 'uploader/templates/populations/sui-view-population.html')
| -rw-r--r-- | uploader/templates/populations/sui-view-population.html | 267 |
1 files changed, 267 insertions, 0 deletions
diff --git a/uploader/templates/populations/sui-view-population.html b/uploader/templates/populations/sui-view-population.html new file mode 100644 index 0000000..6244f4d --- /dev/null +++ b/uploader/templates/populations/sui-view-population.html @@ -0,0 +1,267 @@ +{%extends "populations/sui-base.html"%} +{%from "macro-step-indicator.html" import step_indicator%} +{%from "populations/macro-display-population-card.html" import display_sui_population_card%} + +{%block contents%} +<div class="row"> + <h2 class="heading">{{population.FullName}} ({{population.Name}})</h2> +</div> + +<div class="row"> + <ul class="nav nav-tabs" id="population-actions"> + <li class="nav-item presentation"> + <button class="nav-link" + id="samples-tab" + data-bs-toggle="tab" + data-bs-target="#samples-content" + type="button" + role="tab" + aria-controls="samples-content" + aria-selected="true">Samples</button></li> + <li class="nav-item presentation"> + <button class="nav-link active" + id="phenotypes-tab" + data-bs-toggle="tab" + data-bs-target="#phenotypes-content" + type="button" + role="tab" + aria-controls="phenotypes-content" + aria-selected="false">Phenotypes</button></li> + {%if view_under_construction%} + <li class="nav-item presentation"> + <button class="nav-link" + id="genotypes-tab" + data-bs-toggle="tab" + data-bs-target="#genotypes-content" + type="button" + role="tab" + aria-controls="genotypes-content" + aria-selected="false">Genotypes</button></li> + <li class="nav-item presentation"> + <button class="nav-link" + id="expression-data-tab" + data-bs-toggle="tab" + data-bs-target="#expression-data-content" + type="button" + role="tab" + aria-controls="expression-data-content" + aria-selected="false">Expression-Data</button></li> + {%endif%} + </ul> +</div> + +<div class="row"> + <div class="tab-content" id="populations-tabs-content"> + <div class="tab-pane fade" + id="samples-content" + role="tabpanel" + aria-labelledby="samples-content-tab"> + <p>Think of a <strong>"sample"</strong> as say a single case or individual + in the experiment. It could even be a single strain (where applicable). + </p> + <p>This is a convenience feature for when you want to upload phenotypes to + the system, but do not have the genotypes data ready yet.</p> + <a href="{{url_for('species.populations.samples.list_samples', + species_id=species.SpeciesId, + population_id=population.Id)}}" + title="View and upload samples for population '{{population['Name']}}'" + class="btn btn-primary">Manage Samples</a> + </div> + + <div class="tab-pane fade show active" + id="phenotypes-content" + role="tabpanel" + aria-labelledby="phenotypes-content-tab"> + + <div class="row" style="margin-top: 0.3em;"> + <div class="col"> + <a href="{{url_for('species.populations.phenotypes.add_phenotypes', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id)}}" + title="Upload phenotype data for population '{{population['Name']}}'" + class="btn btn-primary">Upload new Phenotypes</a> + </div> + <div class="col"> + <a href="#" + title="List all existing publications for this population." + class="btn btn-primary not-implemented">view publications</a> + <!-- Maybe, actually filter publications by population? --> + <!-- Provide other features for publications on loaded page. --> + </div> + </div> + + <div class="row" style="margin-top: 1em;"> + <h3> Phenotypes in Population "{{population.FullName}} ({{population.Name}})"</h3> + + <p>The table below lists the phenotypes that already exist for + population "<em>{{population.FullName}} ({{population.Name}})</em>" of + species "<em>{{species.FullName}} ({{species.Name}})</em>".</p> + + <div class="row phenotypes-list-actions"> + <div class="col"> + <form id="frm-recompute-phenotype-means" + method="POST" + action="{{url_for( + 'species.populations.phenotypes.recompute_means', + species_id=species['SpeciesId'], + population_id=population['Id'], + dataset_id=dataset['Id'])}}"> + <input id="submit-frm-recompute-phenotype-means" + class="btn btn-info" + type="submit" + title="Compute/Recompute the means for selected phenotypes (or all phenotypes if none selected)." + value="(Rec/C)ompute means" /> + </form> + </div> + <div class="col"> + <form id="frm-rerun-qtlreaper" + method="POST" + action="{{url_for( + 'species.populations.phenotypes.rerun_qtlreaper', + species_id=species['SpeciesId'], + population_id=population['Id'], + dataset_id=dataset['Id'])}}"> + <input id="submit-frm-rerun-qtlreaper" + class="btn btn-info" + type="submit" + title="Run/Rerun QTLReaper for selected phenotypes (or all phenotypes if none selected)." + value="(rer/r)un QTLReaper" /> + </form> + </div> + </div> + + <table id="tbl-phenotypes-list" class="table compact stripe cell-border"> + <thead> + <tr> + <th></th> + <th>Index</th> + <th>Record</th> + <th>Description</th> + </tr> + </thead> + + <tbody></tbody> + </table> + </div> + </div> + + <div class="tab-pane fade" + id="genotypes-content" + role="tabpanel" + aria-labelledby="genotypes-content-tab"> + <p>This allows you to upload the data that concerns your genotypes.</p> + <p>Any samples/individuals/cases/strains that do not already exist in the + system will be added. This does not delete any existing data.</p> + <a href="{{url_for('species.populations.genotypes.list_genotypes', + species_id=species.SpeciesId, + population_id=population.Id)}}" + title="Upload genotype information for the '{{population.FullName}}' population of the '{{species.FullName}}' species." + class="btn btn-primary">upload genotypes</a> + </div> + <div class="tab-pane fade" id="expression-data-content" role="tabpanel" aria-labelledby="expression-data-content-tab"> + <p>Upload expression data (mRNA data) for this population.</p> + <a href="#" title="" class="btn btn-primary">upload genotypes</a> + </div> + </div> +</div> +{%endblock%} + +{%block sidebarcontents%} +<div class="row"> + <p>Each tab presents a feature that's available at the population level. + Select the tab that allows you to continue with your task.</p> +</div> +{{display_sui_population_card(species, population)}} +{%endblock%} + + + + +{%block javascript%} +<script type="text/javascript" src="/static/js/urls.js"></script> + +<script type="text/javascript"> + $(function() { + /** JS to build list of phenotypes table. **/ + var species_id = {{species.SpeciesId}}; + var population_id = {{population.Id}}; + var dataset_id = {{dataset.Id}}; + var dataset_name = "{{dataset.Name}}"; + var data = {{phenotypes | tojson}}; + + var dtPhenotypesList = buildDataTable( + "#tbl-phenotypes-list", + data, + [ + { + data: function(pheno) { + return `<input type="checkbox" name="selected-phenotypes" ` + + `id="chk-selected-phenotypes-${pheno.InbredSetCode}_${pheno.xref_id}" ` + + `value="${pheno.InbredSetCode}_${pheno.xref_id}" ` + + `class="chk-row-select" />` + } + }, + {data: "sequence_number"}, + { + data: function(pheno, type, set, meta) { + var spcs_id = {{species.SpeciesId}}; + var pop_id = {{population.Id}}; + var dtst_id = {{dataset.Id}}; + var url = buildURLFromCurrentURL( + (`/species/${spcs_id}` + + `/populations/${pop_id}` + + `/phenotypes/datasets/${dtst_id}` + + `/phenotype/${pheno.xref_id}`)); + return `<a href="${url.toString()}" target="_blank">` + + `${pheno.InbredSetCode}_${pheno.xref_id}` + + `</a>`; + } + }, + { + data: function(pheno) { + return (pheno.Post_publication_description || + pheno.Original_description || + pheno.Pre_publication_description); + } + } + ], + { + select: "multi+shift", + layout: { + top1Start: { + pageLength: { + text: "Show _MENU_ of _TOTAL_" + } + }, + topStart: "info", + top1End: null + }, + rowId: function(pheno) { + return `${pheno.InbredSetCode}_${pheno.xref_id}`; + } + }); + + + $("#submit-frm-rerun-qtlreaper").on( + "click", + function(event) { + // (Re)run the QTLReaper script for selected phenotypes. + event.preventDefault(); + var form = $("#frm-rerun-qtlreaper"); + form.find(".dynamically-added-element").remove(); + dtPhenotypesList.rows({selected: true}).nodes().each((node, index) => { + _cloned = $(node).find(".chk-row-select").clone(); + _cloned.removeAttr("id"); + _cloned.removeAttr("class"); + _cloned.attr("style", "display: none;"); + _cloned.attr("data-type", "dynamically-added-element"); + _cloned.attr("class", "dynamically-added-element checkbox"); + _cloned.prop("checked", true); + form.append(_cloned); + }); + form.submit(); + }); + }); +</script> +{%endblock%} |