diff options
Diffstat (limited to 'uploader/templates/phenotypes')
| -rw-r--r-- | uploader/templates/phenotypes/create-dataset.html | 6 | ||||
| -rw-r--r-- | uploader/templates/phenotypes/index.html | 15 | ||||
| -rw-r--r-- | uploader/templates/phenotypes/list-datasets.html | 9 | ||||
| -rw-r--r-- | uploader/templates/phenotypes/select-population.html | 12 | ||||
| -rw-r--r-- | uploader/templates/phenotypes/view-dataset.html | 142 |
5 files changed, 142 insertions, 42 deletions
diff --git a/uploader/templates/phenotypes/create-dataset.html b/uploader/templates/phenotypes/create-dataset.html index 93de92f..8e45491 100644 --- a/uploader/templates/phenotypes/create-dataset.html +++ b/uploader/templates/phenotypes/create-dataset.html @@ -74,8 +74,10 @@ {%endif%} required="required" /> <small class="form-text text-muted"> - <p>A longer, descriptive name for the dataset — useful for humans. - </p></small> + <p>A longer, descriptive name for the dataset. The name is meant for use + by humans, and therefore, it should be clear what the dataset contains + from the name.</p> + </small> </div> <div class="form-group"> diff --git a/uploader/templates/phenotypes/index.html b/uploader/templates/phenotypes/index.html index 0c691e6..689c28e 100644 --- a/uploader/templates/phenotypes/index.html +++ b/uploader/templates/phenotypes/index.html @@ -11,16 +11,11 @@ {{flash_all_messages()}} <div class="row"> - <p>This section deals with phenotypes that - <span class="text-warning"> - <span class="glyphicon glyphicon-exclamation-sign"></span> - … what are the characteristics of these phenotypes? …</span></p> - <p>Select the species to begin the process of viewing/uploading data about - your phenotypes</p> + {{select_species_form(url_for("species.populations.phenotypes.index"), species)}} </div> +{%endblock%} -<div class="row"> - {{select_species_form(url_for("species.populations.phenotypes.index"), - species)}} -</div> + +{%block javascript%} +<script type="text/javascript" src="/static/js/species.js"></script> {%endblock%} diff --git a/uploader/templates/phenotypes/list-datasets.html b/uploader/templates/phenotypes/list-datasets.html index 2eaf43a..2cf2c7f 100644 --- a/uploader/templates/phenotypes/list-datasets.html +++ b/uploader/templates/phenotypes/list-datasets.html @@ -48,9 +48,12 @@ </tbody> </table> {%else%} - <p class="text-warning"> - <span class="glyphicon glyphicon-exclamation-sign"></span> - There is no dataset for this population!</p> + <p>Phenotypes need to go into a dataset. We do not currently have a dataset + for species <strong>'{{species["FullName"]}} ({{species["Name"]}})'</strong> + phenotypes.</p> + + <p>Do, please, create a new dataset by clicking on the "Create Dataset" button + below and following the prompts/instructions.</p> <p><a href="{{url_for('species.populations.phenotypes.create_dataset', species_id=species.SpeciesId, population_id=population.Id)}}" diff --git a/uploader/templates/phenotypes/select-population.html b/uploader/templates/phenotypes/select-population.html index eafd4a7..48c19b1 100644 --- a/uploader/templates/phenotypes/select-population.html +++ b/uploader/templates/phenotypes/select-population.html @@ -11,18 +11,16 @@ {%block contents%} {{flash_all_messages()}} -<div class="row"> - <p>Select the population for your phenotypes to view and manage the phenotype - datasets that relate to it.</p> -</div> <div class="row"> - {{select_population_form(url_for("species.populations.phenotypes.select_population", - species_id=species.SpeciesId), - populations)}} + {{select_population_form(url_for("species.populations.phenotypes.select_population", species_id=species.SpeciesId), species, populations)}} </div> {%endblock%} {%block sidebarcontents%} {{display_species_card(species)}} {%endblock%} + +{%block javascript%} +<script type="text/javascript" src="/static/js/populations.js"></script> +{%endblock%} diff --git a/uploader/templates/phenotypes/view-dataset.html b/uploader/templates/phenotypes/view-dataset.html index 4f2b79b..fa1044b 100644 --- a/uploader/templates/phenotypes/view-dataset.html +++ b/uploader/templates/phenotypes/view-dataset.html @@ -5,11 +5,6 @@ {%block title%}Phenotypes{%endblock%} -{%block css%} -<link rel="stylesheet" - href="{{url_for('base.datatables', filename='css/jquery.dataTables.css')}}" /> -{%endblock%} - {%block pagetitle%}Phenotypes{%endblock%} {%block lvl4_breadcrumbs%} @@ -61,10 +56,21 @@ <div class="row"> <h2>Phenotype Data</h2> - <table id="tbl-phenotypes-list" class="table"> + + <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> @@ -81,17 +87,29 @@ {%block javascript%} -<script src="{{url_for('base.datatables', - filename='js/jquery.dataTables.js')}}"></script> <script type="text/javascript"> $(function() { - $("#tbl-phenotypes-list").DataTable({ - responsive: true, - data: {{phenotypes | tojson}}, - columns: [ - {data: "sequence_number"}, + 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}}; @@ -104,13 +122,97 @@ `</a>`; } }, - {data: function(pheno) { - return (pheno.Post_publication_description || - pheno.Original_description || - pheno.Pre_publication_description); - }} - ] - }); + { + data: function(pheno) { + return (pheno.Post_publication_description || + pheno.Original_description || + pheno.Pre_publication_description); + } + } + ], + { + select: "multi+shift", + layout: { + top2: { + buttons: [ + { + extend: "selectAll", + className: "btn btn-info", + titleAttr: "Click to select ALL records in the table." + }, + { + extend: "selectNone", + className: "btn btn-info", + titleAttr: "Click to deselect ANY selected record(s) in the table." + }, + { + text: "Bulk Edit (Download Data)", + action: (event, dt, node, config) => { + var phenoids = []; + var selected = dt.rows({selected: true, page: "all"}).data(); + for(var idx = 0; idx < selected.length; idx++) { + phenoids.push({ + phenotype_id: selected[idx].Id, + xref_id: selected[idx].xref_id + }); + } + if(phenoids.length == 0) { + alert("No record selected. Nothing to do!"); + return false; + } + $.ajax( + (`/species/${species_id}/populations/` + + `${population_id}/phenotypes/datasets/` + + `${dataset_id}/download`), + { + method: "POST", + data: JSON.stringify(phenoids), + xhrFields: { + responseType: "blob" + }, + success: (data, textStatus, jqXHR) => { + var link = document.createElement("a"); + uri = window.URL.createObjectURL(data); + link.href = uri; + link.download = `${dataset_name}_data.tsv`; + + document.body.appendChild(link); + link.click(); + window.URL.revokeObjectURL(uri); + link.remove(); + }, + error: (jQXHR, textStatus, errorThrown) => { + console.log("Experienced an error: ", textStatus); + console.log("The ERROR: ", errorThrown); + }, + contentType: "application/json" + }); + }, + className: "btn btn-info", + titleAttr: "Click to download data for editing." + }, + { + text: "Bulk Edit (Upload Data)", + action: (event, dt, node, config) => { + alert("Not implemented yet!") + }, + className: "btn btn-info", + titleAttr: "Click to upload edited data you got by clicking the `Bulk Edit (Download Data)` button." + } + ] + }, + top1Start: { + pageLength: { + text: "Show _MENU_ of _TOTAL_" + } + }, + topStart: "info", + top1End: null + }, + rowId: function(pheno) { + return `${pheno.InbredSetCode}_${pheno.xref_id}`; + } + }); }); </script> {%endblock%} |