case_update_terms.html

{% extends 'projectroles/base.html' %}

{% load rules %}
{% load crispy_forms_filters %}
{% load projectroles_tags %}
{% load projectroles_common_tags %}
{% load dict %}
{% load variants_tags %}

{% block title %}
  Update Case {{ case.name }}
{% endblock title %}

{% block head_extend %}
  {{ form.media }}
{% endblock head_extend %}

{% block navi_sub_project_extend %}
  <li class="breadcrumb-item"><a href="{% url "variants:case-list" project=project.sodar_uuid %}">Cases</a></li>
  <li class="breadcrumb-item"><a href="{% url "variants:case-detail" project=project.sodar_uuid case=object.sodar_uuid %}">{{ object.name }}</a></li>
  <li class="breadcrumb-item active">Update</li>
{% endblock %}

{% block projectroles %}
  {% get_app_setting 'userprofile' 'enable_project_uuid_copy' user=request.user as enable_uuid_copy %}

  <div class="row sodar-subtitle-container">
    <h3>Update Terms for Case {{ object.name }}</h3>

    <a role="submit" class="btn btn-link mr-2 sodar-pr-btn-title sodar-pr-btn-copy-uuid sodar-copy-btn"
       id="sodar-pr-btn-copy-uuid"
       data-clipboard-text="{{ object.sodar_uuid }}"
       title="Copy UUID to clipboard" data-toggle="tooltip" data-placement="top">
      <i class="iconify text-muted" data-icon="fa-solid:clipboard" aria-hidden="true"></i>
    </a>
  </div>

  <div class="container-fluid sodar-page-container">
    <p>
      Provide HPO, OMIM, and Orphanet terms for each individual in the family below.
      You can provide the terms as <code>HP:1234567</code>, <code>OMIM:123456</code>, and <code>ORPHA:123456</code>.
      Everything else will be ignored (the terms will be displayed with their description throughout the system, though).
    </p>

    {% if form.errors %}
      {% for error in form.non_field_errors %}
        <div class="alert alert-danger">
          <strong>{{ error|escape }}</strong>
        </div>
      {% endfor %}
    {% endif %}

    <form method="post">
      {% csrf_token %}
      {{ form|crispy }}

      <div class="row">
        <div class="btn-group ml-auto" role="group">
          <a role="button" class="btn btn-secondary"
             href="{{ request.session.real_referer }}">
            <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
          </a>
          <button type="submit" class="btn btn-primary">
            <span class="iconify" data-icon="mdi:check-bold" data-inline="false"></span>
              Update
          </button>
        </div>
      </div>
    </form>

    <div class="row">
      <div class="col-12 p-0 text-secondary">
        Below, you can find terms from previous queries (from all users for this case) for this case.
        {% if project.is_remote %}
          Because this project comes form SODAR, you can also query for the HPO terms from SODAR.
        {% endif %}
      </div>
      <div class="col-6 p-0">
        <strong class="small font-weight-bold">Query Terms</strong>
        <textarea class="form-control" rows="10">{% for term in terms_queries %}{% get_term_description term as term_description %}{{ term }}{% if term_description %} - {{ term_description }}{% else %} - UNKNOWN TERM{% endif %}
{% endfor %}
</textarea>
      </div>
      <div class="col-6">
        {% if project.is_remote %}
          <strong class="small font-weight-bold">SODAR Sample Sheet Terms</strong>
          <span class="btn btn-sm btn-secondary" id="load-upstream" data-state="initial">
            <i class="iconify" data-icon="fa-solid:cloud-download-alt" id="load-upstream-indicator"></i>
            Load from SODAR
          </span>
          <textarea class="form-control" rows="10" placeholder="The terms from SODAR will appear here." id="upstream-terms"></textarea>
        {% else %}
          <div class="font-italic text-center text-secondary align-middle">Project not from SODAR.</div>
        {% endif %}
      </div>
      <script type="application/javascript">
        $(document).ready(function() {
          // States for $("#load-upstream").data("state")
          //
          // "initial" -- on page load, after success/error
          // "running" -- while async request is running

          function onLoadUpstreamClick(e)
          {
            let btn = $("#load-upstream");
            if ($.inArray(btn.data("state"), ["initial", "error"]) !== -1) {
              // Update UI.
              let indicator = $("#load-upstream-indicator");
              indicator.attr("data-icon", "fa-solid:spinner");
              indicator.addClass("spin");
              btn.data("state", "loading");
              // Perform AJAX call.
              $.ajax({
                type: "GET",
                dataType: "json",
                url: "{% url "variants:case-fetch-upstream-terms" project=project.sodar_uuid case=object.sodar_uuid %}",
                success: function (result) {
                  let lines = [];
                  const sampleIds = Object.keys(result)
                  for (let index = 0; index < sampleIds.length; index++) {
                    const value = result[sampleIds[index]]
                    if (lines.length > 0) {
                      lines.push("")
                    }
                    lines.push("### " + value.name + " ###");
                    lines.push("");
                    const keys = ["hpo_terms", "omim_diseases", "orphanet_diseases"];
                    for (let i = 0; i < keys.length; ++i) {
                      for (let j = 0; j < value[keys[i]].length; ++j) {
                        let term = value[keys[i]][j];
                        lines.push(term.id + " - " + (term.description || "UNKNOWN TERM"));
                      }
                    }
                  }
                  indicator.attr("data-icon", "fa-solid:cloud-download-alt");
                  indicator.removeClass("spin");
                  btn.data("state", "initial");
                  $("#upstream-terms").val(lines.join("\n"))
                },
                error: function (jqXHR, textStatus, errorThrown) {
                  $("#upstream-terms").val("ERROR\n\nA problem occured while trying to query SODAR: " + textStatus + "\n\nERROR")
                  indicator.attr("data-icon", "fa-solid:cloud-download-alt");
                  indicator.removeClass("spin");
                  btn.data("state", "initial");
                }
              })
            }
          }

          $("#load-upstream").click(onLoadUpstreamClick);
        })
      </script>
    </div>
  </div>

  <script type="application/javascript">
	const HPO_INHERITANCE_MODE = Object.freeze([
	  ['HP:0000006', 'Autosomal dominant inheritance'],
	  ['HP:0000007', 'Autosomal recessive inheritance'],
	  ['HP:0001427', 'Mitochondrial inheritance'],
	  ['HP:0001423', 'X-linked dominant inheritance'],
	  ['HP:0001417', 'X-linked inheritance'],
	  ['HP:0001419', 'X-linked recessive inheritance']
	])
	const HPO_AGE_OF_ONSET = Object.freeze([
	  ['HP:0030674', 'Antenatal'],
	  ['HP:0011460', 'Embryonal'],
	  ['HP:0011461', 'Fetal'],
	  ['HP:0410280', 'Pediatric'],
	  ['HP:0003593', 'Infantile'],
	  ['HP:0011405', 'Childhood'],
	  ['HP:0003621', 'Juvenile'],
	  ['HP:0003581', 'Adult'],
	  ['HP:0003623', 'Neonatal'],
	  ['HP:0011462', 'Young adult'],
	  ['HP:0003596', 'Middle age'],
	  ['HP:0003584', 'Late'],
	  ['HP:0003577', 'Congenital']
	])

    function addImpl(arr, targetId, i) {
      const term = arr[i]
      const id = '#' + targetId
      const currVal = $(id).val()
      console.log(currVal)
      const newVal = currVal.trimEnd() + '\n' + term[0] + ' - ' + term[1] + '\n'
      $(id).val(newVal)
    }

    function addInheritance(targetId, i) {
      addImpl(HPO_INHERITANCE_MODE, targetId, i)
    }

    function addAgeOfOnset(targetId, i) {
      addImpl(HPO_AGE_OF_ONSET, targetId, i)
    }

    function buildInheritanceButton(targetId) {
      const entries = []
      for (let i = 0; i < HPO_INHERITANCE_MODE.length; ++i) {
        const inheritance = HPO_INHERITANCE_MODE[i][1]
        entries.push('<a class="dropdown-item" href="javascript:addInheritance(\'' + targetId + '\', ' + i + ')">' + inheritance + '</a>')
      }
      return $('<div class="dropdown show d-inline-block pl-3">' +
               '  <a class="btn btn-secondary btn-sm dropdown-toggle" href="#" role="button" data-toggle="dropdown">' +
               '    HPO Inheritance' +
               '  </a>' +
               '<div class="dropdown-menu">' + entries.join('') + '</div></div>')
    }
    function buildAgeOfOnsetButton(targetId) {
      const entries = []
      for (let i = 0; i < HPO_AGE_OF_ONSET.length; ++i) {
        const ageOfOnset = HPO_AGE_OF_ONSET[i][1]
        entries.push('<a class="dropdown-item" href="javascript:addAgeOfOnset(\'' + targetId + '\', ' + i + ')">' + ageOfOnset + '</a>')
      }
      return $('<div class="dropdown show d-inline-block pl-3">' +
               '  <a class="btn btn-secondary btn-sm dropdown-toggle" href="#" role="button" data-toggle="dropdown">' +
               '    HPO Age of Onset' +
               '  </a>' +
               '<div class="dropdown-menu">' + entries.join('') + '</div></div>')
    }

    $(document).ready(function() {
      $(".form-group").each(function(_, element) {
        if (element.id.startsWith("div_id_terms-")) {
          let name = element.id.slice("div_id_terms-".length)
          let termsId = "id_terms-" + name
          let labelElem = $(element).children('label').first()
          labelElem.append(buildInheritanceButton(termsId))
          labelElem.append(buildAgeOfOnsetButton(termsId))
        }
      })
    })
  </script>
{% endblock projectroles %}