diff options
Diffstat (limited to 'uploader/templates/genotypes')
| -rw-r--r-- | uploader/templates/genotypes/add-genotypes-records-base.html | 39 | ||||
| -rw-r--r-- | uploader/templates/genotypes/add-genotypes-records-csv.html | 146 | ||||
| -rw-r--r-- | uploader/templates/genotypes/base.html | 7 | ||||
| -rw-r--r-- | uploader/templates/genotypes/create-dataset.html | 4 | ||||
| -rw-r--r-- | uploader/templates/genotypes/index.html | 200 | ||||
| -rw-r--r-- | uploader/templates/genotypes/list-genotypes.html | 227 | ||||
| -rw-r--r-- | uploader/templates/genotypes/macro-display-dataset-card.html | 24 |
7 files changed, 416 insertions, 231 deletions
diff --git a/uploader/templates/genotypes/add-genotypes-records-base.html b/uploader/templates/genotypes/add-genotypes-records-base.html new file mode 100644 index 0000000..bf3812f --- /dev/null +++ b/uploader/templates/genotypes/add-genotypes-records-base.html @@ -0,0 +1,39 @@ +{%extends "genotypes/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} + +{%block title%}Genotypes{%endblock%} + +{%block pagetitle%}Genotypes{%endblock%} + +{%block contents%} + +<div class="row"> + <form id="frm-add-genotypes-records" + method="POST" + enctype="multipart/form-data" + action="{{url_for( + 'species.populations.genotypes.add_genotype_records', + species_id=species.SpeciesId, population_id=population.Id, + dataset_id=dataset.Id)}}" + data-resumable-target="{{url_for('files.resumable_upload_post')}}"> + <legend>Add New Genotype Records</legend> + + {%block frm_add_genotypes_records_elements%}{%endblock%} + + <div class="form-group"> + <input type="submit" + value="upload genotypes" + class="btn btn-primary" /> + </div> + </form> +</div> + +<div class="row"> + <h2 class="heading" id="page-documentation">Help</h2> + {%block page_documentation%}{%endblock%} +</div> +{%endblock%} + + +{%block javascript%} +{%endblock%} diff --git a/uploader/templates/genotypes/add-genotypes-records-csv.html b/uploader/templates/genotypes/add-genotypes-records-csv.html new file mode 100644 index 0000000..58dbe81 --- /dev/null +++ b/uploader/templates/genotypes/add-genotypes-records-csv.html @@ -0,0 +1,146 @@ +{%extends "genotypes/add-genotypes-records-base.html"%} +{%from "phenotypes/macro-display-preview-table.html" import display_preview_table%} +{%from "macro-csv-fields.html" import display_csv_fields, display_csv_fields_documentation%} +{%from "phenotypes/macro-display-resumable-elements.html" import display_resumable_elements%} + +{%block frm_add_genotypes_records_elements%} +<div class="form-text help-block"> + <p>You can add new genotype records here.</p> +</div> + +{{display_csv_fields()}} + +<div class="form-group"> + <div class="non-resumable-elements"> + <label for="finput-genotypes-records-file" class="form-label"> + genotypes records</label> + <input id="finput-genotypes-records-file" + name="genotypes-records-file" + class="form-control" + type="file" + data-preview-table="tbl-preview-geno-records" + required="required" /> + <span class="form-text text-muted"> + Provide a file that contains only the genotypes records, + <a href="#docs-file-genotypes-records-csv" + title="Documentation of the genotypes records file format."> + the documentation for the expected format of the file</a>.</span> + </div> + {{display_resumable_elements( + "resumable-genotypes-records-file", + "Genotypes records", + '<p>Drag and drop the CSV file here, that contains the genotype records you + want to add.</p> + + <p>Please see the + <a href="#docs-file-genotypes-records" + title="Documentation of the genotypes records data file format."> + "Genotypes records" documentation</a> section below for more + information on the expected format of the file provided here.</p>')}} + {{display_preview_table("tbl-preview-geno-records", "genotypes records")}} +</div> + +<div class=""> + <h4 class="subheading">Genotype Encoding</h4> + <div class="form-text help-block"> + <p>The symbols in your genotype file need to be mapped to known values to + enable mapping.</p> + </div> + + <div class="form-group"> + <div class="row mb-3"> + <label for="txt-geno-encoding-mat" + class="col-form-label col-sm-2">Maternal</label> + <div class="col-sm-10"> + <div class="input-group"> + <input type="text" + maxlength="3" + id="txt-geno-encoding-mat" + name="geno_encoding_mat" + class="form-control" /> + <div class="input-group-append"> + <span class="input-group-text">Value = -1</span> + </div> + </div> + </div> + <span class="form-text text-muted col-sm-12"> + Enter the symbol in your file that represents the allele inherited from + the mother. This allele will be mapped to the value -1.</span> + </div> + </div> + + <div class="form-group"> + <div class="row mb-3"> + <label for="txt-geno-encoding-pat" + class="col-form-label col-sm-2">Paternal</label> + <div class="col-sm-10"> + <div class="input-group"> + <input type="text" + maxlength="3" + id="txt-geno-encoding-pat" + name="geno_encoding_pat" + class="form-control" /> + <div class="input-group-append"> + <span class="input-group-text">Value = 1</span> + </div> + </div> + </div> + <span class="form-text text-muted"> + Enter the symbol in your file that represents the allele inherited from + the father. This allele will be mapped to the value 1.</span> + </div> + </div> + + <div class="form-group"> + <div class="row mb-3"> + <label for="txt-geno-encoding-het" + class="col-form-label col-sm-2">Heterozygous (value = 0)</label> + <div class="col-sm-10"> + <div class="input-group"> + <input type="text" + maxlength="3" + id="txt-geno-encoding-het" + name="geno_encoding_het" + class="form-control" /> + <div class="input-group-append"> + <span class="input-group-text">Value = 0</span> + </div> + </div> + </div> + <span class="form-text text-muted"> + Enter the symbol in your file that represents the allele inherited from + both parents. This allele will be mapped to the value 0.</span> + </div> + </div> +</div> +{%endblock%} + +{%block page_documentation%} +{{super()}} + +<h3 class="sub-heading">CSV file metadata</h3> +{{display_csv_fields_documentation()}} +{%endblock%} + +{%block javascript%} +{{super()}} +<script src="{{url_for('base.node_modules', + filename='resumablejs/resumable.js')}}"></script> +<script src="/static/js/files.js"></script> + +<script type="text/javascript"> + $(function(evt) { + + var preview_tables_to_elements_map = { + "#tbl-preview-geno-records": "#finput-genotypes-records-file", + }; + + makeResumableObject( + form_id="frm-add-genotypes-records", + file_input_id="finput-genotypes-records-file", + resumable_element_id="resumable-genotypes-records-file", + preview_table_id="tbl-preview-geno-records", + filetypes=["csv", "tsv", "txt", "geno"]); + }); +</script> +{%endblock%} diff --git a/uploader/templates/genotypes/base.html b/uploader/templates/genotypes/base.html index 8d1b951..c2abc63 100644 --- a/uploader/templates/genotypes/base.html +++ b/uploader/templates/genotypes/base.html @@ -1,10 +1,11 @@ {%extends "populations/base.html"%} {%from "populations/macro-display-population-card.html" import display_sui_population_card%} +{%from "genotypes/macro-display-dataset-card.html" import display_dataset_card%} {%block breadcrumbs%} {{super()}} <li class="breadcrumb-item"> - <a href="{{url_for('species.populations.genotypes.list_genotypes', + <a href="{{url_for('species.populations.genotypes.index', species_id=species['SpeciesId'], population_id=population['Id'])}}"> genotype @@ -14,5 +15,9 @@ {%block sidebarcontents%} +{%if dataset is defined and dataset is not none%} +{{display_dataset_card(species, population, dataset)}} +{%else%} {{display_sui_population_card(species, population)}} +{%endif%} {%endblock%} diff --git a/uploader/templates/genotypes/create-dataset.html b/uploader/templates/genotypes/create-dataset.html index ff174fb..7f435a1 100644 --- a/uploader/templates/genotypes/create-dataset.html +++ b/uploader/templates/genotypes/create-dataset.html @@ -40,9 +40,7 @@ readonly="readonly" /> <small class="form-text text-muted"> <p>This is a short representative, but constrained name for the genotype - dataset.<br /> - It is used internally by the Genenetwork system. Do not change this - value.</p> + dataset. It is used internally by GeneNetwork.</p> </small> </div> diff --git a/uploader/templates/genotypes/index.html b/uploader/templates/genotypes/index.html new file mode 100644 index 0000000..1c3483d --- /dev/null +++ b/uploader/templates/genotypes/index.html @@ -0,0 +1,200 @@ +{%extends "genotypes/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} + +{%block title%}Genotypes{%endblock%} + +{%block pagetitle%}Genotypes{%endblock%} + +{%block contents%} +{{flash_all_messages()}} + + +{%if dataset is defined and dataset is not none%} + +<div class="row"> + <h2>Genotype Data</h2> + + <div class="row"> + <div class="col"> + <p> + <a href="{{url_for( + 'species.populations.genotypes.add_genotype_records', + species_id=species.SpeciesId, population_id=population.Id, + dataset_id=dataset.Id)}}" + class="btn btn-primary"> + Add genotype records + </a> + </p> + </div> + </div> + + <div class="table-responsive"> + <table id="tbl-genotype-records" class="table compact stripe cell-border"> + <thead> + <tr> + <th title="">#</th> + <th title="">Index</th> + <th title="Locus of marker on the chromosome">Locus</th> + <th title="Chromosome">Chr</th> + <th title="Physical location of marker in centimorgans">cM</th> + <th title="Physical location of marker in megabasepairs">Mb</th> + {%for sample in samples%} + <th title="Data for sample {{sample}}">{{sample}}</th> + {%endfor%} + </tr> + </thead> + + <tbody> + {%for record in genotype_records%} + <tr> + <td> + <input type="checkbox" + id="chk-geno-record-{{record.Id}}" + name="geno_record_id" + value="{{record.Id}}" /> + </td> + <td>{{record.index}}</td> + <td>{{record.Name}}</td> + <td>{{record.Chr}}</td> + <td>{{record.cM}}</td> + <td>{{record.Mb}}</td> + {%for sample in samples%} + <td>{{record.data[sample]}}</td> + {%endfor%} + </tr> + {%else%} + <tr> + <td colspan="6" class="text-info"> + There are no records + </td> + </tr> + {%endfor%} + </tbody> + </table> + </div> +</div> + +<div class="row"> + <h2>Genotype Encoding</h2> + <p>The numerical values in the table above are mapped from the following allele symbols:</p> + + <table class="table"> + <thead> + <tr> + <th>Allele Type</th> + <th>Allele Symbol</th> + <th>Mapped To</th> + </tr> + </thead> + + <tbody> + {%for row in genocode%} + <tr> + <td {%if row.AlleleType == 'mat'%} + title="Maternal allele" + {%elif row.AlleleType == "pat"%} + title="Paternal allele" + {%elif row.AlleleType == "het"%} + title="Heterozygous allele" + {%else%} + title="Unknown allele" + {%endif%}> + {{row.AlleleType}}</td> + <td>{{row.AlleleSymbol}}</td> + <td>{{row.DatabaseValue if row.DatabaseValue is not none}}</td> + </tr> + {%else%} + <tr> + <td colspan="3" class="text-info"> + There is no genotype encoding defined for this data. + </td> + </tr> + {%endfor%} + </tbody> + </table> +</div> + +{%else%} + +<div class="row"> + <p>We need to create a dataset to hold the genotype information for this + species/population, before we can proceed to upload the genotype data.</p> + <p>Please click the button below to create the dataset.</p> + + <div class="col"> + <a href="{{url_for('species.populations.genotypes.create_dataset', species_id=species.SpeciesId, population_id=population.Id)}}" + class="btn btn-primary">create genotype dataset</a> + </div> +</div> + +{%endif%} + +{%endblock%} + + +{%block javascript%} +<script type="text/javascript"> + $(function() { + var genoRecordsUrl = "{{url_for('species.populations.genotypes.index', species_id=species.SpeciesId, population_id=population.Id)}}"; + + var dtGenotypeRecords = false; + fetch(genoRecordsUrl, { + method: "POST", + headers: { + "Accept": "application/json", + "Content-Type": "application/json" + }, + body: JSON.stringify({}) + }) + .then(response => response.json()) + .then(recordsData => { + var records = recordsData.genotype_records; + var samples = recordsData.samples_order; + var columns = [ + { + data: function(record) { + return `<input type="checkbox"` + + `id="chk-geno-record-` + record.Id + `"` + + `name="geno_record_id"` + + `value="` + record.Id + `"` + + ` />`; + } + }, + {data: "index"}, + {data: "Name"}, + {data: "Chr"}, + {data: "cM"}, + {data: "Mb"} + ].concat(samples.map((sample) => { + return {data: (record) => record.data[sample]}; + })); + + dtGenotypeRecords = buildDataTable( + "#tbl-genotype-records", + [], + columns, + { + serverSide: true, + ajax: { + url: genoRecordsUrl, + dataSrc: "genotype_records", + recordsTotal: "total_genotype_records", + recordsFiltered: "fetched_genotype_records" + }, + paging: true, + scroller: true, + scrollY: "50vh", + scrollCollapse: false, + layout: { + top: "info", + topStart: null, + topEnd: null, + bottom: null, + bottomStart: null, + bottomEnd: null + } + }); + }); + }); +</script> +{%endblock%} diff --git a/uploader/templates/genotypes/list-genotypes.html b/uploader/templates/genotypes/list-genotypes.html deleted file mode 100644 index a7e8ba4..0000000 --- a/uploader/templates/genotypes/list-genotypes.html +++ /dev/null @@ -1,227 +0,0 @@ -{%extends "genotypes/base.html"%} -{%from "flash_messages.html" import flash_all_messages%} - -{%block title%}Genotypes{%endblock%} - -{%block pagetitle%}Genotypes{%endblock%} - -{%block contents%} -{{flash_all_messages()}} - -<div class="row"> - <h2>Genotype Encoding</h2> - <p> - The genotype encoding used for the "{{population.FullName}}" population from - the "{{species.FullName}}" species is as shown in the table below. - </p> - <table class="table"> - - <thead> - <tr> - <th>Allele Type</th> - <th>Allele Symbol</th> - <th>Allele Value</th> - </tr> - </thead> - - <tbody> - {%for row in genocode%} - <tr> - <td>{{row.AlleleType}}</td> - <td>{{row.AlleleSymbol}}</td> - <td>{{row.DatabaseValue if row.DatabaseValue is not none else "NULL"}}</td> - </tr> - {%else%} - <tr> - <td colspan="7" class="text-info"> - <span class="glyphicon glyphicon-exclamation-sign"></span> - There is no explicit genotype encoding defined for this population. - </td> - </tr> - {%endfor%} - </tbody> - </table> - - {%if genocode | length < 1%} - <div class="col"> - <a href="#add-genotype-encoding" - title="Add a genotype encoding system for this population" - class="btn btn-primary not-implemented"> - define genotype encoding - </a> - </div> - {%endif%} -</div> - -<div class="row"> - <h2>Genotype Dataset</h2> -</div> - -{%if dataset is not none%} - -<div class="row"> - <h3>Dataset Details</h3> - <table class="table"> - <thead> - <tr> - <th>Name</th> - <th>Full Name</th> - </tr> - </thead> - - <tbody> - <tr> - <td>{{dataset.Name}}</td> - <td><a href="{{url_for('species.populations.genotypes.view_dataset', - species_id=species.SpeciesId, - population_id=population.Id, - dataset_id=dataset.Id)}}" - title="View details regarding and manage dataset '{{dataset.FullName}}'" - target="_blank"> - {{dataset.FullName}}</a></td> - </tr> - </tbody> - </table> - - <p> - To see more information regarding this dataset (e.g. which markers have - sample allele data, the allele data itself, etc) click on the "Full Name" - link above.</p> -</div> - -<div class="row"> - <h3>Genotype Markers</h3> -</div> - -<div class="row"> - <p> - The table below lists all of the markers that exist for species - {{species.SpeciesName}} ({{species.FullName}}), regardless of whether - (or not) we have corresponding sample allele data for a particular marker. - </p> - <table id="tbl-genetic-markers" class="table compact stripe cell-border"> - <thead> - <tr> - <th title="">#</th> - <th title="">Index</th> - <th title="">Marker Name</th> - <th title="Chromosome">Chr</th> - <th title="Physical location of the marker in megabasepairs"> - Location (Mb)</th> - <th title="">Source</th> - <th title="">Source2</th> - </thead> - - <tbody> - {%for marker in markers%} - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - {%endfor%} - </tbody> - </table> -</div> - -{%else%} - -<div class="row"> - <p> - Your genotype data will need to be under a dataset. Unfortunately there is - currently no dataset defined for this population. - </p> - - <p class="text-warning"> - <span class="glyphicon glyphicon-exclamation-sign"></span> - Click the button below to define the genotype dataset for this population. - </p> - <p> - <a href="{{url_for('species.populations.genotypes.create_dataset', - species_id=species.SpeciesId, - population_id=population.Id)}}" - title="Create a new genotype dataset for the '{{population.FullName}}' population for the '{{species.FullName}}' species." - class="btn btn-primary"> - create new genotype dataset</a></p> -</div> - -{%endif%} - -<div class="row"> - <h2>Notes</h2> - <div class="row text-danger"> - <h3>Genetic Markers: Some Important Concepts to Consider/Remember</h3> - <ul> - <li>Reference vs. Non-reference alleles</li> - <li>In <em>GenoCode</em> table, items are ordered by <strong>InbredSet</strong></li> - </ul> - <h3>Possible references</h3> - <ul> - <li>https://mr-dictionary.mrcieu.ac.uk/term/genotype/</li> - <li>https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7363099/</li> - </ul> - </div> - - <div class="row text-warning"> - <h3>Genotype Dataset</h3> - <p> - <span class="glyphicon glyphicon-exclamation-sign"></span> - <strong>NOTE</strong>: Currently the GN2 (and related) system(s) expect a - single genotype dataset per population. If there is more than one, the - system apparently fails in unpredictable ways. - </p> - </div> -</div> - -{%endblock%} - - -{%block javascript%} -<script type="text/javascript"> - - $(function() { - var dtGeneticMarkers = buildDataTable( - "#tbl-genetic-markers", - [], - [ - { - data: function(marker) { - return `<input type="checkbox" name="selected-markers" ` + - `id="chk-selected-markers-${marker.Id}-${marker.GenoFreezeId}" ` + - `value="${marker.Id}_${marker.GenoFreezeId}" ` + - `class="chk-row-select" />`; - } - }, - {data: 'index'}, - {data: "Name", searchable: true}, - {data: "Chr", searchable: true}, - {data: "Mb", searchable: true}, - {data: "Source", searchable: true}, - {data: "Source2", searchable: true} - ], - { - ajax: { - url: "{{url_for('species.populations.genotypes.list_markers', species_id=species.SpeciesId, population_id=population.Id, dataset_id=dataset.Id)}}", - dataSrc: "markers" - }, - paging: true, - scroller: true, - scrollY: "50vh", - scrollCollapse: true, - layout: { - top: "info", - topStart: null, - topEnd: null, - bottom: null, - bottomStart: null, - bottomEnd: null - } - }); - }); - -</script> -{%endblock%} diff --git a/uploader/templates/genotypes/macro-display-dataset-card.html b/uploader/templates/genotypes/macro-display-dataset-card.html new file mode 100644 index 0000000..2b197d4 --- /dev/null +++ b/uploader/templates/genotypes/macro-display-dataset-card.html @@ -0,0 +1,24 @@ +{%from "populations/macro-display-population-card.html" import display_sui_population_card%} + +{%macro display_dataset_card(species, population, dataset)%} +{{display_sui_population_card(species, population)}} +<div class="row"> + <table class="table"> + <caption>Current genotype dataset</caption> + <tbody> + <tr> + <th>Name</th> + <td>{{dataset.Name}}</td> + </tr> + <tr> + <th>Full Name</th> + <td>{{dataset.FullName}}</td> + </tr> + <tr> + <th>Short Name</th> + <td>{{dataset.ShortName}}</td> + </tr> + </tbody> + </table> +</div> +{%endmacro%} |