diff options
Diffstat (limited to 'uploader/templates/genotypes/index.html')
| -rw-r--r-- | uploader/templates/genotypes/index.html | 194 |
1 files changed, 181 insertions, 13 deletions
diff --git a/uploader/templates/genotypes/index.html b/uploader/templates/genotypes/index.html index b50ebc5..1c3483d 100644 --- a/uploader/templates/genotypes/index.html +++ b/uploader/templates/genotypes/index.html @@ -1,32 +1,200 @@ {%extends "genotypes/base.html"%} {%from "flash_messages.html" import flash_all_messages%} -{%from "species/macro-select-species.html" import select_species_form%} {%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"> - <p> - This section allows you to upload genotype information for your experiments, - in the case that you have not previously done so. - </p> - <p> - We'll need to link the genotypes to the species and population, so do please - go ahead and select those in the next two steps. - </p> + <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"> - {{select_species_form(url_for("species.populations.genotypes.index"), - species)}} + <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" src="/static/js/species.js"></script> +<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%} |