{% extends "indra/template.html" %}

{% block scripts %}
  <!-- Toggle a hidden element -->
  <script>
    const pubmed_fetch = "https://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi";
    let ALL_COLLAPSED = true;

    function toggler(short_name_key) {
      $("#" + short_name_key + "_group").toggle();
      let header = "#" + short_name_key + "_heading";
      $(header).show();
    }

    function getPubMedMETAxmlByPMID(pmid) {
      let params_dict = {
        'db': 'pubmed',
        'retmode': 'xml',
        'rettype': 'docsum',
        'id': pmid
      };
      return $.ajax({
        url: pubmed_fetch,
        type: "POST",
        dataType: "xml",
        data: params_dict,
      });
    }

    function pmidXML2dict(XML) {
      let xml_dict = {};
      for (let child of XML.children) {
        let name = child.getAttribute("Name");
        let type = child.getAttribute("Type");
        if (child.hasChildNodes() && type === "List") {
          let innerItems;
          // Javascript can't really do nice recursive functions...
          // special cases for "History" and "ArticleIds" which has unique inner Names
          if (name === "ArticleIds" || name === "History") {
            let innerDict = {};
            for (c of child.children) {
              innerDict[c.getAttribute("Name")] = c.textContent;
            }
            innerItems = innerDict;
          } else {
            let innerList = [];
            for (c of child.children) {
              innerList.push(c.textContent);
            }
            innerItems = innerList;
          }
          xml_dict[name] = innerItems
        } else if (child.tagName === "Item") {
          // Here just get the inner strings
          xml_dict[name] = child.textContent;
        } else if (child.tagName === "Id") {
          // Special case
          xml_dict["Id"] = child.textContent;
        } else {
          if (!xml_dict["no_key"]) {
            xml_dict["no_key"] = [child.textContent]
          } else {
            xml_dict["no_key"].push(child.textContent)
          }
        }
      }
      return xml_dict;
    }

    // Modify link hover text
    function setPMIDlinkTitle(pmid, link_tag) {
      let pubmed_xml_promise = getPubMedMETAxmlByPMID(pmid);
      pubmed_xml_promise.then(responseXML => {
        const docsum_xml = responseXML.getElementsByTagName('DocSum')[0];
        const pmd = pmidXML2dict(docsum_xml);
        const nAuthors = pmd.AuthorList.length;
        let authorsStr;
        if (nAuthors > 3)
          authorsStr = `${pmd.AuthorList[0]}, ... ${pmd.AuthorList[nAuthors - 1]}`;
        else
          authorsStr = pmd.AuthorList.join(", ");

        // Shortened journal name is in .Source, while full name is in .FullJournalName
        link_tag.title = `${authorsStr}, "${pmd.Title}", ${pmd.Source}, ${pmd.SO}`;
      })
    }

    // Loop all pmid link nodes and set title
    function populatePMIDlinkTitles() {
      let pmid_link_array = document.getElementsByClassName("pmid_link");
      for (link_obj of pmid_link_array) {
        pmid = link_obj.textContent;
        setPMIDlinkTitle(pmid, link_obj)
      }
    }

    // Expand/collapse all
    function expandCollapseAll() {
      let expColBtn = document.getElementById('expand-collapse-all');
      let setCss = '';

      // Expand all; set ALL_COLLAPSED = false;
      if (ALL_COLLAPSED) {
        setCss = 'display: block;';
        ALL_COLLAPSED = false;
        expColBtn.textContent = 'Collapse All';
        // Collapse all; set ALL_COLLAPSED = true;
      } else {
        setCss = 'display: none;';
        ALL_COLLAPSED = true;
        expColBtn.textContent = 'Expand All';
      }

      // Loop all tags
      for (tag of document.getElementsByClassName('group')) {
        tag.style.cssText = setCss
      }
    }
  </script>
  <style>
    {% for category, data in source_colors %}
      {% for source, font_color in data['sources'].items() %}
        .source-{{ source }} {
          background-color: {{ font_color }};
          color: {{ data['color'] }};
        }
      {% endfor %}
    {% endfor %}

    .badge-source {
      font-size: 8pt;
      margin: 0;
    }

    .statements-header {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      background-color: white;
      z-index: 10;
      padding-top: 5px;
    }

    .nvp {
        padding-left: 0;
        padding-right: 0;
    }

    .src-api {
        overflow-x: hidden;
    }

    .group, .group-shown {
        padding: 5px;
        margin: 5px;
    }

    .group {
        display: none;
        border-left: #0d5aa7 solid 1px;
        border-right: #0d5aa7 solid 1px;
    }

    .super_group_heading, .group_heading, .statement, .evidence {
        padding: 2px;
        padding-left: 5px;
        margin: 2px;
        position: sticky;
        border-radius: 2px;
    }

    .evidence, .evidence-text {
        margin-bottom: 10px;
    }

    .evidence-text {
        border-top: #cfcfcf solid 1px;
        padding-top: 0.5em;
    }

    .super_group_heading, .group_heading {
        cursor: pointer;
    }

    .super_group_heading:hover, .group_heading:hover {
        background-color: #f2f2f2;
    }

    .badge-subject {
        background-color: #4a36aa;
        color: #FFFFFF;
    }

    .badge-object {
        background-color: #2d8e4c;
        color: #FFFFFF;
    }

    .badge-other {
        background-color: #606060;
        color: #FFFFFF;
    }

    .curation-row {
        overflow-y: hidden;
    }

    .curation_toggle {
        cursor: pointer;
    }
  </style>
{% endblock %}


{% macro badges(src_counts) -%}
  {% if src_counts %}
    {% for _, color_dict in source_colors %}
      {% if loop.index0 > 0 %}
        <span class="badge badge-source">|</span>
      {% endif %}
      {% for src in color_dict['sources'].keys() %}
        {% if src_counts.get(src) %}
          <span class="badge badge-source source-{{ src }}"
              title="{{ src }}">
      {{ src_counts.get(src) }}
      </span>
        {% endif %}
      {% endfor %}
    {% endfor %}
  {% endif %}
{%- endmacro %}

{% block header_desc %}
  This page allows you to curate the loaded statements. For more information
  please see the
  <a href="https://indra.readthedocs.io/en/latest/tutorials/html_curation.html"
     target="_blank">manual</a>.
{% endblock %}

{% block body %}
  <div class="statements-header">
    <div class="row">
      <div class="col">
        <h3 {% if metadata %}
          title="{% for n, v in metadata.items() %}{{ n }}: {{ v }}
{% endfor %}"
        {% endif %}>
          Statements
        </h3>
      </div>
      <div class="col text-right">
        <button id="expand-collapse-all" type="button"
            class="btn btn-primary"
            onclick="expandCollapseAll()">
          Expand All
        </button>
      </div>
    </div>
    {% if source_key_dict %}
      <div class="row justify-content-md-center">
        <div class="col-1 text-right">
          {{ source_colors[0][0] }}
        </div>
        <div class="col col-auto text-center">
          {{ badges(source_key_dict) }}
        </div>
        <div class="col-1 text-left">
          {{ source_colors[1][0] }}
        </div>
      </div>
    {% endif %}
    <hr>
  </div>
  {% for results in stmt_data.values() %}
    {% set i_pair = loop.index0 %}
    {% if stmt_data.values()|length > 1 %}
      <div class="row super_group_heading"
         id="tl-{{ results['html_key'] }}"
         onclick="toggler('tl-{{ results['html_key'] }}')">
        <div class="col nvp">
          <h5 class="align-middle">
            {{ results['label'] }}
          </h5>
        </div>
        <div class="col text-right nvp">
          {{ badges(results['source_counts']) }}
        </div>
      </div>
      <div class="group" id="tl-{{ results['html_key'] }}_group">
    {% else %}
      <div class="group-shown" id="tl-{{ results['html_key'] }}_group">
    {% endif %}
        <div class="container nvp">
        {% for group_dict in results['stmts_formatted'] %}
          {% set i_type = loop.index0 %}
          {% if results['stmts_formatted']|length > 1 %}
            <div class="row group_heading"
               onclick="toggler('{{ group_dict['short_name_key'] }}');"
               id="{{ group_dict['short_name_key'] }}_heading">
              <div class="col nvp">
                <h5 class="align-middle">{{ group_dict['short_name'] }}</h5>
              </div>
              <div class="col text-right nvp">
                {{ badges(group_dict['src_counts']) }}
              </div>
            </div>
            <div class="row group" id="{{ group_dict['short_name_key'] }}_group">
          {% else %}
            <div class="row group-shown" id="{{ group_dict['short_name_key'] }}_group">
          {% endif %}
              <div class="container nvp">
              {% for stmt_info in group_dict['stmt_info_list'] %}
                {% set i_stmt = loop.index0 %}
                <a name="{{ stmt_info['hash'] }}"></a>
                <div class="row statement">
                  <div class="col text-left nvp">
                    <h5 class="align-middle">
                      {{ stmt_info['english'] }}
                      <a href="{% if db_rest_url %}{{ db_rest_url }}/from_hash/{{ stmt_info['hash'] }}?format=html{% else %}#{% endif %}"
                         {% if db_rest_url %}target="_blank"{% endif %}>
                        <small class="badge badge-secondary badge-pill">{{ stmt_info['evidence_count'] }}</small>
                      </a>
                    </h5>
                  </div>
                  <div class="col text-right nvp">
                    {{ badges(stmt_info['source_count']) }}
                  </div>
                </div>
                <div class="row evidence">
                  <div class="container" id="stmt-{{ i_pair }}-{{ i_type }}-{{ i_stmt }}"
                       data-stmt_hash="{{ stmt_info['hash'] }}">
                    {% for ev in stmt_info['evidence'] %}
                      <div class="row evidence-text" data-source_hash="{{ ev['source_hash'] }}"
                           style="border-bottom: 1px solid #FFFFFF;"
                           id="ev-{{ i_pair }}-{{ i_type }}-{{ i_stmt }}-{{ loop.index0 }}">

                        <div class="col-1">
                            <div class="row">
                                <div class="col-3 nvp curation_toggle"
                                     id="ev-{{ i_pair }}-{{ i_type }}-{{ i_stmt }}-{{ loop.index0 }}-click"
                                     data-parent_id="ev-{{ i_pair }}-{{ i_type }}-{{ i_stmt }}-{{ loop.index0 }}">
                                    <a href="{% if db_rest_url %}{{ db_rest_url }}/from_hash/{{ stmt_info['hash'] }}?format=html{% else %}#{% endif %}"
                                       {% if db_rest_url %}target="_blank"{% endif %}>
                                        &#10166;
                                    </a>
                                </div>
                                <div class="col-9 nvp src-api"
                                     title="{{ ev['source_api'] }}">
                                    {{ ev['source_api'] }}
                                </div>
                            </div>
                        </div>
                        <div class="col-10">
                          {% if ev['text'] %}
                            "{{ ev['text'] }}"
                          {% else %}
                            <i>No evidence text available</i>
                          {% endif %}
                        </div>
                        <div class="col-1 text-right">
                          {% if ev['pmid'] %}
                            <a class="pmid_link"
                               title="Hover again to see info"
                               onmouseover="setPMIDlinkTitle(this.textContent, this); this.onmouseover=null;"
                               href='https://www.ncbi.nlm.nih.gov/pubmed/{{ ev["pmid"] }}'
                               target="_blank">
                              {{ ev['pmid'] }}</a>
                          {% elif 'pmid' in ev['text_refs'] and ev['text_refs']['pmid'] %}
                            <a class="pmid_link"
                               title="Hover again to see info"
                               onmouseover="setPMIDlinkTitle(this.textContent, this); this.onmouseover=null;"
                               href='https://www.ncbi.nlm.nih.gov/pubmed/{{ ev["text_refs"]["pmid"] }}'
                               target="_blank">
                              {{ ev['text_refs']['pmid'] }}</a>
                          {% endif %}

                          {% if 'pmcid' in ev['text_refs'] and ev['text_refs']['pmcid'] %}
                            | <a class="pmcid_link"
                               href='https://www.ncbi.nlm.nih.gov/pmc/articles/{{ ev["text_refs"]["pmcid"] }}'
                               target="_blank">PMC</a>
                          {% endif %}

                          {% if 'doi' in ev['text_refs'] and ev['text_refs']['doi'] %}
                            | <a class="doi_link"
                               href='https://dx.doi.org/{{ ev["text_refs"]["doi"] }}'
                               target="_blank">DOI</a>
                          {% endif %}
                        </div>
                      </div>
                    {% endfor %}
                  </div> <!-- container -->
                </div> <!-- row evidence -->
              {% endfor %}
             </div> <!-- PA Statement container -->
           </div> <!-- PA Statement group -->
         {% endfor %}
       </div> <!-- container -->
     </div> <!-- type groups -->
  {% endfor %}
{% endblock %}