path: root/uploader/templates/phenotypes/add-phenotypes-base.html

{%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,
                use_bundle=use_bundle)}}">
    <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 id="search-pubmed-id-error"
              class="form-text text-muted text-danger hidden">
        </span><br />
        <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 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": _date.length > 1 ? months[_date[1].toLowerCase()] : "jan",
          "year": _date[0],
      };
  };

  var update_publication_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 fetch_publication_abstract = (pubmed_id, pub_details) => {
      $.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) => {
                     update_publication_details({
                         ...pub_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) => {},
                 "dataType": "xml"
             });
  };

  var fetch_publication_details = (pubmed_id, complete_thunks) => {
      error_display = $("#search-pubmed-id-error");
      error_display.text("");
      add_class(error_display, "hidden");
      $.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
                     hasError = (
                         Object.hasOwn(data, "error") ||
                             Object.hasOwn(data.result[pubmed_id], "error"));
                     if(hasError) {
                         error_display.text(
                             "There was an error fetching a publication with " +
                                 "the given PubMed ID! The error received " +
                                 "was: '" + (
                                     data.error ||
                                         data.result[pubmed_id].error) +
                                 "'. Please check ID you provided and try " +
                                 "again.");
                         remove_class(error_display, "hidden");
                     } else {
                         fetch_publication_abstract(
                             pubmed_id,
                             extract_details(pubmed_id, data.result));
                     }
                 },
                 "error": (jqXHR, textStatus, errorThrown) => {},
                 "complete": () => {
                     complete_thunks.forEach((thunk) => {thunk()});
                 },
                 "dataType": "json"
             });
  };

  $("#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;
      }

      search_button.disabled = true;
      // Fetch publication details
      fetch_publication_details(pubmed_id,
                                [() => {search_button.disabled = false;}]);
      return false;
  });
</script>

{%block more_javascript%}{%endblock%}
{%endblock%}