aboutsummaryrefslogtreecommitdiff
path: root/uploader/templates/phenotypes
diff options
context:
space:
mode:
authorFrederick Muriuki Muriithi2024-12-12 16:33:20 -0600
committerFrederick Muriuki Muriithi2024-12-12 16:33:20 -0600
commit7dfdefe42f243615567415a2d437647a9a6a12f4 (patch)
tree79ff2cdf03259d871f9b65de2c452abc66a07311 /uploader/templates/phenotypes
parent84e4267377627f27ba60cc4fcbf3137f9b3e9c13 (diff)
downloadgn-uploader-7dfdefe42f243615567415a2d437647a9a6a12f4.tar.gz
Create new base templates for upload of phenotype.
Implement the common UI features, for fetching publication details.
Diffstat (limited to 'uploader/templates/phenotypes')
-rw-r--r--uploader/templates/phenotypes/add-phenotypes-base.html314
1 files changed, 314 insertions, 0 deletions
diff --git a/uploader/templates/phenotypes/add-phenotypes-base.html b/uploader/templates/phenotypes/add-phenotypes-base.html
new file mode 100644
index 0000000..7de3fc8
--- /dev/null
+++ b/uploader/templates/phenotypes/add-phenotypes-base.html
@@ -0,0 +1,314 @@
+{%extends "phenotypes/base.html"%}
+{%from "flash_messages.html" import flash_all_messages%}
+{%from "macro-table-pagination.html" import table_pagination%}
+{%from "phenotypes/macro-display-pheno-dataset-card.html" import display_pheno_dataset_card%}
+
+{%block title%}Phenotypes{%endblock%}
+
+{%block pagetitle%}Phenotypes{%endblock%}
+
+{%block lvl4_breadcrumbs%}
+<li {%if activelink=="add-phenotypes"%}
+ class="breadcrumb-item active"
+ {%else%}
+ class="breadcrumb-item"
+ {%endif%}>
+ <a href="{{url_for('species.populations.phenotypes.add_phenotypes',
+ species_id=species.SpeciesId,
+ population_id=population.Id,
+ dataset_id=dataset.Id)}}">Add Phenotypes</a>
+</li>
+{%endblock%}
+
+{%block contents%}
+{{flash_all_messages()}}
+
+<div class="row">
+ <form id="frm-add-phenotypes"
+ method="POST"
+ enctype="multipart/form-data"
+ action="{{url_for('species.populations.phenotypes.add_phenotypes',
+ species_id=species.SpeciesId,
+ population_id=population.Id,
+ dataset_id=dataset.Id)}}">
+ <legend>Add New Phenotypes</legend>
+
+ <div class="form-text help-block">
+ {%block frm_add_phenotypes_documentation%}{%endblock%}
+ <p><strong class="text-warning">This will not update any existing phenotypes!</strong></p>
+ </div>
+
+ {%block frm_add_phenotypes_elements%}{%endblock%}
+
+ <div class="checkbox">
+ <label>
+ <input id="chk-published" type="checkbox" name="published?" />
+ These phenotypes are published</label>
+ </div>
+
+ <fieldset id="fldset-publication-info" class="hidden">
+ <legend>Publication Information</legend>
+ <div class="form-group">
+ <label for="txt-pubmed-id" class="form-label">Pubmed ID</label>
+ <div class="input-group">
+ <input id="txt-pubmed-id" name="pubmed-id" type="text"
+ class="form-control" />
+ <span class="input-group-btn">
+ <button id="btn-search-pubmed-id" class="btn btn-info">Search</button>
+ </span>
+ </div>
+ <span class="form-text text-muted">
+ Enter your publication's PubMed ID above and click "Search" to search
+ for some (or all) of the publication details requested below.
+ </span>
+ </div>
+
+ <div class="form-group">
+ <label for="txt-publication-authors" class="form-label">Authors</label>
+ <input id="txt-publication-authors" name="publication-authors"
+ type="text" class="form-control" />
+ <span class="form-text text-muted">
+ Enter the authors in the following format &hellip;</span>
+ </div>
+
+ <div class="form-group">
+ <label for="txt-publication-title" class="form-label">
+ Publication Title</label>
+ <input id="txt-publication-title" name="publication-title" type="text"
+ class="form-control" />
+ <span class="form-text text-muted">
+ Enter your publication's title.</span>
+ </div>
+
+ <div class="form-group">
+ <label for="txt-publication-abstract" class="form-label">
+ Publication Abstract</label>
+ <textarea id="txt-publication-abstract" name="publication-abstract"
+ class="form-control" rows="10"></textarea>
+ <span class="form-text text-muted">
+ Enter the abstract for your publication.</span>
+ </div>
+
+ <div class="form-group">
+ <label for="txt-publication-journal" class="form-label">Journal</label>
+ <input id="txt-publication-journal" name="journal" type="text"
+ class="form-control" />
+ <span class="form-text text-muted">
+ Enter the name of the journal where your work was published.</span>
+ </div>
+
+ <div class="form-group">
+ <label for="txt-publication-volume" class="form-label">Volume</label>
+ <input id="txt-publication-volume" name="publication-volume" type="text"
+ class="form-control" />
+ <span class="form-text text-muted">
+ Enter the volume in the following format &hellip;</span>
+ </div>
+
+ <div class="form-group">
+ <label for="txt-publication-pages" class="form-label">Pages</label>
+ <input id="txt-publication-pages" name="publication-pages" type="text"
+ class="form-control" />
+ <span class="form-text text-muted">
+ Enter the journal volume where your work was published.</span>
+ </div>
+
+ <div class="form-group">
+ <label for="txt-publication-month" class="form-label">
+ Publication Month</label>
+ <select id="select-publication-month" name="publication-month"
+ class="form-control">
+ {%for month in monthnames%}
+ <option value="{{month | lower}}"
+ {%if current_month | lower == month | lower%}
+ selected="selected"
+ {%endif%}>{{month | capitalize}}</option>
+ {%endfor%}
+ </select>
+ <span class="form-text text-muted">
+ Select the month when the work was published.
+ <span class="text-danger">
+ This cannot be before, say 1600 and cannot be in the future!</span></span>
+ </div>
+
+ <div class="form-group">
+ <label for="txt-publication-year" class="form-label">Publication Year</label>
+ <input id="txt-publication-year" name="publication-year" type="text"
+ class="form-control" value="{{current_year}}" />
+ <span class="form-text text-muted">
+ Enter the year your work was published.
+ <span class="text-danger">
+ This cannot be before, say 1600 and cannot be in the future!</span>
+ </span>
+ </div>
+ </fieldset>
+
+ <div class="form-group">
+ <input type="submit"
+ value="upload phenotypes"
+ class="btn btn-primary" />
+ </div>
+ </form>
+</div>
+
+<div class="row">
+ {%block page_documentation%}{%endblock%}
+</div>
+
+{%endblock%}
+
+{%block sidebarcontents%}
+{{display_pheno_dataset_card(species, population, dataset)}}
+{%endblock%}
+
+
+{%block javascript%}
+<script type="text/javascript">
+ var remove_class = (element, classvalue) => {
+ new_classes = (element.attr("class") || "").split(" ").map((val) => {
+ return val.trim();
+ }).filter((val) => {
+ return ((val !== classvalue) &&
+ (val !== ""))
+ }).join(" ");
+
+ if(new_classes === "") {
+ element.removeAttr("class");
+ } else {
+ element.attr("class", new_classes);
+ }
+ };
+
+ var add_class = (element, classvalue) => {
+ remove_class(element, classvalue);
+ element.attr("class", (element.attr("class") || "") + " " + classvalue);
+ };
+
+ $("#chk-published").on("click", (event) => {
+ pub_details = $("#fldset-publication-info")
+ if(event.target.checked) {
+ // display the publication details
+ remove_class(pub_details, "hidden");
+ } else {
+ // hide the publication details
+ add_class(pub_details, "hidden");
+ }
+ });
+
+ var extract_details = (pubmed_id, details) => {
+ var months = {
+ "jan": "January",
+ "feb": "February",
+ "mar": "March",
+ "apr": "April",
+ "may": "May",
+ "jun": "June",
+ "jul": "July",
+ "aug": "August",
+ "sep": "September",
+ "oct": "October",
+ "nov": "November",
+ "dec": "December"
+ };
+ var _date = details[pubmed_id].pubdate.split(" ");
+ return {
+ "authors": details[pubmed_id].authors.map((authobj) => {
+ return authobj.name;
+ }),
+ "title": details[pubmed_id].title,
+ "journal": details[pubmed_id].fulljournalname,
+ "volume": details[pubmed_id].volume,
+ "pages": details[pubmed_id].pages,
+ "month": months[_date[1].toLowerCase()],
+ "year": _date[0],
+ };
+ };
+
+ var update_publication_details = (details) => {
+ console.log("Updating with the following details:", details);
+ Object.entries(details).forEach((entry) => {;
+ switch(entry[0]) {
+ case "authors":
+ $("#txt-publication-authors").val(entry[1].join(", "));
+ break;
+ case "month":
+ $("#select-publication-month")
+ .children("option")
+ .each((index, child) => {
+ child.selected = child.value == entry[1].toLowerCase();
+ });
+ default:
+ $("#txt-publication-" + entry[0]).val(entry[1]);
+ break;
+ }
+ });
+ };
+
+ var freds_variable = undefined;
+ $("#btn-search-pubmed-id").on("click", (event) => {
+ event.preventDefault();
+ var search_button = event.target;
+ var pubmed_id = $("#txt-pubmed-id").val().trim();
+ remove_class($("#txt-pubmed-id").parent(), "has-error");
+ if(pubmed_id == "") {
+ add_class($("#txt-pubmed-id").parent(), "has-error");
+ return false;
+ }
+
+ var flag_pub_details = false;
+ var flag_pub_abstract = false;
+ var enable_button = () => {
+ search_button.disabled = !(flag_pub_details && flag_pub_abstract);
+ };
+ search_button.disabled = true;
+ // Fetch publication details
+ $.ajax("https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi",
+ {
+ "method": "GET",
+ "data": {"db": "pubmed", "id": pubmed_id, "format": "json"},
+ "success": (data, textStatus, jqXHR) => {
+ // process and update publication details
+ update_publication_details(extract_details(
+ pubmed_id, data.result));
+ },
+ "error": (jqXHR, textStatus, errorThrown) => {},
+ "complete": () => {
+ flag_pub_details = true;
+ enable_button();
+ },
+ "dataType": "json"
+ });
+ // Fetch the abstract
+ $.ajax("https://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi",
+ {
+ "method": "GET",
+ "data": {
+ "db": "pubmed",
+ "id": pubmed_id,
+ "rettype": "abstract",
+ "retmode": "xml"
+ },
+ "success": (data, textStatus, jqXHR) => {
+ // process and update the abstract...
+ freds_variable = data;
+ console.log("ABSTRACT DETAILS:", data);
+ update_publication_details({
+ "abstract": Array.from(data
+ .getElementsByTagName(
+ "Abstract")[0]
+ .children)
+ .map((elt) => {return elt.textContent.trim();})
+ .join("\r\n")
+ });
+ },
+ "error": (jqXHR, textStatus, errorThrown) => {},
+ "complete": (jqXHR, textStatus) => {
+ flag_pub_abstract = true;
+ enable_button();
+ },
+ "dataType": "xml"
+ });
+ return false;
+ });
+</script>
+{%endblock%}