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

{% block scripts %}
  <!-- Toggle a hidden element -->
  <script>
    let ALL_COLLAPSED = true;

    function toggler(short_name_key) {
      /**
       * Toggle the info list elements by changing their class.
       */
      // Find the group associated with this heading.
      let el = document.getElementById(short_name_key + "_group");

      // Toggle the group class between the invisible one and the visible one.
      if ( el.classList.contains("group") )
        el.classList.replace("group", "group_shown");
      else
        el.classList.replace("group_shown", "group");
    }

    async function getPubmedInfoByPMID(pmid) {
      /**
       * Get the Pubmed title and author from Entrez.
       */
      // Trim the PMID because it may have a lot of spaces in it.
      let id = pmid.trim();

      // Get the data from entrez in JSON format.
      const entrez_url = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi';
      let url = `${entrez_url}?id=${id}&retmode=json&db=pubmed`;
      const resp = await fetch(url, {method: 'POST'});
      if (resp.status !== 200)
        return "Failed to load.";
      const data = await resp.json();

      // Extract and format the title from the result.
      const pmd = data.result[id];
      let auth_str = '';
      let n = 0;
      if (pmd.authors)
        for (let author of pmd.authors) {
          if (n > 2) {
            auth_str += ', ...';
            break;
          }
          auth_str += author.name;
          if (n < pmd.authors.length) {
            auth_str += ', ';
          }
          n += 1;
        }
      return `${auth_str}, "${pmd.title}", ${pmd.source}, ${pmd.pubdate}`;
    }

    function setPMIDlinkTitle(pmid, link_tag) {
      // Modify link hover text
      getPubmedInfoByPMID(pmid).then(title => link_tag.title = title);
    }

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

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

      // Expand all; set ALL_COLLAPSED = false;
      let show = ALL_COLLAPSED;
      if (ALL_COLLAPSED) {
        ALL_COLLAPSED = false;
        expColBtn.textContent = 'Collapse All';
        // Collapse all; set ALL_COLLAPSED = true;
      } else {
        ALL_COLLAPSED = true;
        expColBtn.textContent = 'Expand All';
      }

      // Loop all tags
      let old_c, new_c;
      if (show) {
        old_c = "group";
        new_c = "group_shown";
      } else {
        old_c = "group_shown";
        new_c = "group";
      }

      let elements = document.getElementsByClassName(old_c);
      let elem_arr = Array();
      for (let el of elements) {
        elem_arr.push(el);
      }
      elem_arr.forEach(el => {
        el.classList.replace(old_c, new_c);
      });
    }

    window.onload = function() {
      // Check if expand_all is true in query string
      let query_string = window.location.search;
      let url_params = new URLSearchParams(query_string);
      let expand_all = url_params.get('expand_all');
      if (expand_all === 'true') {
        expandCollapseAll();
      }
      {% if add_full_text_search_link %}
      // Populate text fragment in Full Text search for PMC journal
      var elements = document.querySelectorAll('.full_text_search');
      for (elem_idx = 0 ;elem_idx < elements.length ;elem_idx++ ) {
        var element = elements[elem_idx];
        var span = document.createElement('span');  
        span.innerHTML = decodeURIComponent(element.dataset.sentence);
        var text = span.innerText;
        var searchText = "";
        var words = [];
        var temp_words= text.split(" ");
        for(var idx = 0; idx < temp_words.length ; idx++){
          if(!temp_words[idx].includes("XREF"))
            words.push(temp_words[idx]);
        }
        if(words.length<7)
          searchText = encodeURIComponent(text);        
        else{
          for(var idx = 0; idx < 6 && idx < words.length ; idx++){
            searchText += " " + encodeURIComponent(words[idx]);
          }        
          var secondLastWord = "";
          if(words.length>7)
            secondLastWord = words[words.length - 2] + " ";
          var lastWord = words[words.length - 1];
          if(lastWord.endsWith("."))
            lastWord = lastWord.substring(0,lastWord.length-1)
          searchText += "," + encodeURIComponent(secondLastWord + lastWord);
        }
        element.href += "#:~:text="+ searchText.trim()        
      }
      {% endif %}
    };
  </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 {
    }

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

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

    .group, .group-shown {
    }

    .group {
        display: none;
    }

    .bars {
      border-right: #0d5aa7 solid 1px;
    }

    .super_group_heading, .group_heading, .statement, .evidence {
    }

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

    .evidence-text {
      margin-right: 5px;
      margin-left: 5px;
    }

    .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;
    }

    .badge-belief {
        background-color: #ffc266;
        color: #FFFFFF;
    }

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

    .curation_toggle {
        cursor: pointer;
    }

    .pmid_link, .pmcid_link, .doi_link {
      display: block;
    }
    
  </style>
{% endblock %}


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

{% macro belief_badge(belief_score) -%}
  <small
      class="badge badge-pill badge-belief"
      title="Belief score for this statement">{{ belief_score }}</small>
{%- 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 and simple %}

    <div class="row justify-content-md-center">
    {# Might want to have a look at
       https://getbootstrap.com/docs/4.5/layout/grid/#stacked-to-horizontal #}
      <div class="col col-auto text-center">
        {{ badges(source_key_dict, available_sources, show_only_available, header=true) }}
      </div>
    </div>

  {% endif %}

    <hr>
  </div>

  {% for results in stmt_data.values() %}
    {% set i_pair = loop.index0 %}

  <span class="agent-pair">

    {% 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-auto nvp">
        <h5 class="align-middle">{{ results['label'] }}</h5>
      </div>
      <div class="col text-right nvp">
        {{ badges(results['source_counts'], available_sources) }}
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="group" id="tl-{{ results['html_key'] }}_group">

    {% else %}

    <div class="row">
      <div class="col">
        <div class="group-shown" id="tl-{{ results['html_key'] }}_group">

    {% endif %}

          <div class="container bars nvp">

    {% for group_dict in results['stmts_formatted'] %}
      {% set i_type = loop.index0 %}

            <span class="relation">

      {% 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-auto text-left nvp">
                    <h5>{{ group_dict['short_name'] }}</h5>
                </div>
                <div class="col text-right nvp">
                  {{ badges(group_dict['src_counts'], available_sources) }}
                </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="col">
                  <div class="container bars 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 group_heading"
                         onclick="toggler( '{{ group_dict['short_name_key'] }}-{{ stmt_info['hash'] }}' )"
                         id="{{ group_dict['short_name_key'] }}-{{ stmt_info['hash'] }}_heading">
                      <div class="col-auto text-left nvp">
                        <h5>
                          {{ 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>
                          {% if show_belief %}
                            {{ belief_badge(stmt_info['belief']) }}
                          {% endif %}
                        </h5>
                      </div>
                      <div class="col text-right nvp">
                        {{ badges(stmt_info['source_count'], available_sources) }}
                      </div>
                    </div>  <!-- end statement heading row -->
                    <div class="row group"
                         id="{{ group_dict['short_name_key'] }}-{{ stmt_info['hash'] }}_group">
                      <div class="col">
                        <div class="container bars" id="stmt-{{ i_pair }}-{{ i_type }}-{{ i_stmt }}"
                             data-stmt_hash="{{ stmt_info['hash'] }}">

        {% for ev in stmt_info['evidence'] %}

                          <div class="evidence">
                            <hr>
                            <div class="row evidence-text" data-source_hash="{{ ev['source_hash'] }}"
                                 id="ev-{{ i_pair }}-{{ i_type }}-{{ i_stmt }}-{{ loop.index0 }}">
                              <div class="col-1">
                                <div class="row">
                                  <div class="col-3 nvm 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>
                                {% if ev.get('source_url') %}
                                  <a href="{{ ev['source_url'] }}" target="_blank"
                                {% else %}
                                  <div
                                {% endif %}
                                      class="col-9 nvm src-api"
                                      title="{{ ev['source_api'] }}">
                                      {{ ev['source_api'] }}
                                {% if ev.get('source_url') %}
                                  </a>
                                {% else %}
                                  </div>
                                {% endif %}
                                </div>
                              </div>

          {% if add_full_text_search_link %}

                              <div class="col-9">

          {% else %}

                              <div class="col-10">

          {% endif %}
          {% if ev['text'] %}

                                  "{{ ev['text'] }}"

          {% else %}

                                  <i>No evidence text available</i>

          {% endif %}

                              </div>

          {% if add_full_text_search_link %}

                              <div class="col-2 text-right">

          {% else %}

                              <div class="col-1 text-right">

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

          {% elif 'PMCID' in ev['text_refs'] and ev['text_refs']['PMCID'] %}
            {% if add_full_text_search_link and 'pmcid' in ev and ev['pmcid'] %}

                                <a class="full_text_search"
                                   data-sentence= '{{ev["text"]|urlencode}}'
                                   href="https://www.ncbi.nlm.nih.gov/pmc/articles/{{ ev["pmcid"] }}" target=_blank rel=noopener >Full-Text Search: {{ev['pmcid']}}</a>
                                <span style="cursor:default" title="This link will search for and highlight the sentence in the full-text article. Works with Chrome 80+">  &#9432;</span>

            {% else %}

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

            {% endif %}
          {% elif '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>

          {% elif 'CLINICALTRIALS' in ev['text_refs'] and ev['text_refs']['CLINICALTRIALS'] %}

                                | <a class="clinical_trials_link"
                                     href='https://identifiers.org/clinicaltrials:{{ ev["text_refs"]["CLINICALTRIALS"] }}'
                                     target="_blank">{{ ev["text_refs"]["CLINICALTRIALS"] }}</a>

          {% endif %}
          {% if add_full_text_search_link and 'pmcid' in ev and ev['pmcid'] %}

                                <a class="full_text_search"
                                   data-sentence= '{{ev["text"]|urlencode}}'
                                   href="https://www.ncbi.nlm.nih.gov/pmc/articles/{{ ev["pmcid"] }}" target=_blank rel=noopener >Full-Text Search: {{ev['pmcid']}}</a>
                                <span style="cursor:default" title="This link will search for and highlight the sentence in the full-text article. Works with Chrome 80+">  &#9432;</span>

          {% endif %}

                              </div> <!-- end ID col -->
                            </div> <!-- end row -->
                          </div> <!-- end evidence -->

        {% endfor %}

                        </div> <!-- end stmt container -->
                      </div> <!-- end stmt col -->
                    </div> <!-- end stmt row -->

      {% endfor %}

                  </div> <!-- end relation (stmt list) container -->
                </div> <!-- end relation col -->
              </div> <!-- end relation row -->
            </span> <!-- end relation -->

    {% endfor %}

          </div> <!-- end agent pair (relation list) container -->
        </div> <!-- end agent pair group -->
      </div> <!-- end agent pair col -->
    </div> <!-- end agent pair row -->
  </span> <!-- end agent pair span -->

  {% endfor %}
{% endblock %}