Create new base templates for upload of phenotype.

Implement the common UI features, for fetching publication details.

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%}