diff options
| -rw-r--r-- | uploader/phenotypes/views.py | 8 | ||||
| -rw-r--r-- | uploader/templates/phenotypes/sui-view-dataset.html | 215 | ||||
| -rw-r--r-- | uploader/templates/populations/sui-view-population.html | 156 |
3 files changed, 224 insertions, 155 deletions
diff --git a/uploader/phenotypes/views.py b/uploader/phenotypes/views.py index ead43ab..9df7d81 100644 --- a/uploader/phenotypes/views.py +++ b/uploader/phenotypes/views.py @@ -185,12 +185,6 @@ def with_dataset( def view_dataset(# pylint: disable=[unused-argument] species: dict, population: dict, dataset: dict, **kwargs): """View a specific dataset""" - if bool(request.args.get("streamlined_ui")): - # Redirect back to the "View Population" page for the time being. - return redirect(url_for("species.populations.view_population", - species_id=species["SpeciesId"], - population_id=population["Id"])) - with database_connection(app.config["SQL_URI"]) as conn: dataset = dataset_by_id( conn, species["SpeciesId"], population["Id"], dataset["Id"]) @@ -203,7 +197,7 @@ def view_dataset(# pylint: disable=[unused-argument] start_at = max(safe_int(request.args.get("start_at") or 0), 0) count = int(request.args.get("count") or 20) - return render_template("phenotypes/view-dataset.html", + return render_template(sui_template("phenotypes/view-dataset.html"), species=species, population=population, dataset=dataset, diff --git a/uploader/templates/phenotypes/sui-view-dataset.html b/uploader/templates/phenotypes/sui-view-dataset.html new file mode 100644 index 0000000..6a26004 --- /dev/null +++ b/uploader/templates/phenotypes/sui-view-dataset.html @@ -0,0 +1,215 @@ +{%extends "phenotypes/sui-base.html"%} +{%from "flash_messages.html" import flash_all_messages%} +{%from "macro-table-pagination.html" import table_pagination%} + +{%block title%}Phenotypes{%endblock%} + +{%block pagetitle%}Phenotypes{%endblock%} + +{%block lvl4_breadcrumbs%} +<li {%if activelink=="view-dataset"%} + class="breadcrumb-item active" + {%else%} + class="breadcrumb-item" + {%endif%}> + <a href="{{url_for('species.populations.phenotypes.view_dataset', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id)}}">View</a> +</li> +{%endblock%} + +{%block contents%} +{{flash_all_messages()}} + +<div class="row"> + <p>The basic dataset details are:</p> + + <table class="table"> + <thead> + <tr> + <th>Name</th> + <th>Full Name</th> + <th>Short Name</th> + </tr> + </thead> + + <tbody> + <tr> + <td>{{dataset.Name}}</td> + <td>{{dataset.FullName}}</td> + <td>{{dataset.ShortName}}</td> + </tr> + </tbody> + </table> +</div> + +<div class="row"> + <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="Add a bunch of phenotypes" + class="btn btn-primary">Add 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 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'])}}" + class="d-flex flex-row align-items-center flex-wrap" + style="display: inline;"> + <input type="submit" + title="Compute/Recompute the means for all phenotypes." + class="btn btn-info" + value="(rec/c)ompute means" + id="submit-frm-recompute-phenotype-means" /> + </form> + </div> + + <div class="col"> + <form id="frm-run-qtlreaper" + method="POST" + action="{{url_for( + 'species.populations.phenotypes.rerun_qtlreaper', + species_id=species['SpeciesId'], + population_id=population['Id'], + dataset_id=dataset['Id'])}}" + class="d-flex flex-row align-items-center flex-wrap" + style="display: inline;"> + <input type="submit" + title="Run/Rerun QTLReaper." + class="btn btn-info" + value="(re)run QTLReaper" + id="submit-frm-rerun-qtlreaper" /> + </form> + </div> +</div> + +<div class="row"> + <h2>Phenotype Data</h2> + + <p>Click on any of the phenotypes in the table below to view and edit that + phenotype's data.</p> + <p>Use the search to filter through all the phenotypes and find specific + phenotypes of interest.</p> +</div> + + +<div class="row"> + + <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> +{%endblock%} + + +{%block javascript%} +<script type="text/javascript" src="/static/js/urls.js"></script> + +<script type="text/javascript"> + $(function() { + 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-run-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%} diff --git a/uploader/templates/populations/sui-view-population.html b/uploader/templates/populations/sui-view-population.html index 6244f4d..a35eac6 100644 --- a/uploader/templates/populations/sui-view-population.html +++ b/uploader/templates/populations/sui-view-population.html @@ -73,76 +73,21 @@ 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> + <p>To view existing phenotype traits, or upload new ones, click the button below:</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="row"> <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> + <a href="{{url_for( + 'species.populations.phenotypes.list_datasets', + species_id=species.SpeciesId, + population_id=population.Id)}}" + title="View and upload phenotype traits" + class="btn btn-primary">Phenotypes</a> </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> @@ -179,89 +124,4 @@ {%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%} |