diff options
Diffstat (limited to 'uploader/templates/populations')
| -rw-r--r-- | uploader/templates/populations/sui-base.html | 2 | ||||
| -rw-r--r-- | uploader/templates/populations/sui-view-population.html | 173 |
2 files changed, 152 insertions, 23 deletions
diff --git a/uploader/templates/populations/sui-base.html b/uploader/templates/populations/sui-base.html index cc01c9e..0ca5c59 100644 --- a/uploader/templates/populations/sui-base.html +++ b/uploader/templates/populations/sui-base.html @@ -6,7 +6,7 @@ <a href="{{url_for('species.populations.view_population', species_id=species['SpeciesId'], population_id=population['Id'])}}"> - {{population["FullName"]}} + {{population["Name"]}} </a> </li> {%endblock%} diff --git a/uploader/templates/populations/sui-view-population.html b/uploader/templates/populations/sui-view-population.html index 3bf8d0d..6244f4d 100644 --- a/uploader/templates/populations/sui-view-population.html +++ b/uploader/templates/populations/sui-view-population.html @@ -57,55 +57,95 @@ 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) - under consideration.</p> + 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> - <p>Please click the button below to provide the samples that will be used - in your data.</p> <a href="{{url_for('species.populations.samples.list_samples', species_id=species.SpeciesId, population_id=population.Id)}}" - title="Upload samples for population '{{population['Name']}}'" - class="btn btn-primary">Upload Samples</a> + 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"> - <p>Upload and manage phenotypes and publications for population - "<em>{{population.FullName}} ({{population.Name}})</em>" of species - "<em>{{species.FullName}} ({{species.Name}})</em>".</p> - <p class="text-danger">Tabs will not work nicely here. Maybe present - options e.g.: - </p> - <div class="row"> + <div class="row" style="margin-top: 0.3em;"> <div class="col"> - <a href="{{url_for('species.populations.phenotypes.view_dataset', + <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> - <!-- Go straight to upload form(s). --> - </div> - <div class="col"> - <a href="#" - title="List all existing phenotypes for this population." - class="btn btn-info not-implemented">list existing phenotypes</a> - <!-- Means and QTLReaper will be computed in this page. --> </div> <div class="col"> <a href="#" title="List all existing publications for this population." - class="btn btn-info not-implemented">list existing publications</a> + 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" @@ -136,3 +176,92 @@ {%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%} |