{% extends "humanization/designer_layout.html" %}
{% set title = result.input.name + " - Designer" %}

{% set MIN_SUBJ = result.oasis_params.min_fraction_subjects %}
{% set MIN_SAPIENS_SCORE = 0.01 %}
{% set MIN_FAMILY_FREQ = 0.005 %}
{% set RARE_FAMILY_FREQ = 0.01 %}

{%
  from 'humanization/humanize_alignment_component.html'
  import format_percent_subjects, format_aa_frequency with context
%}

{% macro format_aa_frequency_tooltip(v_germline_family, aa, freqs) %}
{% if freqs %}
  Frequency in {{ v_germline_family }}: {{ aa }}={{ format_aa_frequency(freqs.get(aa, 0) if freqs else none) }}
{% else %}
  Frequency for {{ v_germline_family }} not available
{% endif %}
{% endmacro %}


{% block main %}

<div class="row mt-3">
  <div class="col-sm-6">
    <h3>Antibody Designer <span class="text-secondary fw-light">{{ result.input.name }}</span></h3>
  </div>
  <div class="col-sm-6 d-print-none">
    <div class="mb-3 text-end dropdown">
      <a class="btn btn-primary dropdown-toggle" role="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
        Export
      </a>
      <ul class="dropdown-menu" aria-labelledby="exportDropdown">
        <li>
          <a class="dropdown-item" target="_blank"
               href="{{ url_for('biophi_humanization.humanize_detail_export_humanized_fasta', task_id=task_id) }}">FASTA</a>
        </li>
        <li>
          <a class="dropdown-item" target="_blank"
               href="{{ url_for('biophi_humanization.humanize_detail_export_alignment', task_id=task_id) }}">Alignment</a>
        </li>
        <li>
          <a class="dropdown-item" target="_blank"
               href="{{ url_for('biophi_humanization.humanize_detail_export_oasis_table', task_id=task_id) }}">OASis table</a>
        </li>
      </ul>
    </div>
  </div>
</div>


<div class="card-group mb-3" style="max-width: 750px;">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title fs-5 fw-light">
        <span class="fw-normal">{{ '{:.0%}'.format(result.humanized_humanness.get_oasis_identity(MIN_SUBJ)) }}</span>
        OASis identity
        <span class="text-secondary">
          ({{ '+{:.0%}'.format(result.humanized_humanness.get_oasis_identity(MIN_SUBJ) - result.parental_humanness.get_oasis_identity(MIN_SUBJ)) }})
         &nbsp;{{ info_icon('{}/{} peptides are considered human (are found in at least {:.0%} of human subjects)'.format(result.humanized_humanness.get_num_human_peptides(MIN_SUBJ), result.humanized_humanness.get_num_peptides(), MIN_SUBJ), s=22) }}
        </span>

      </h5>
      <p class="card-text text-secondary fs-small">
        This corresponds to the
        <span class="badge fw-normal bg-spectral{{ '{:.0f}'.format(result.humanized_humanness.get_oasis_percentile(MIN_SUBJ)*100) }}">
          {{ '{:.0%}'.format(result.humanized_humanness.get_oasis_percentile(MIN_SUBJ)) }}
        </span>
        percentile {{ info_icon('Percentile of OASis identity among therapeutic mAbs at the current prevalence threshold. Zero percentile corresponds to the least human and 100% percentile corresponds to the most human mAb in the clinic, including all clinical stage human, humanized and murine therapeutics.') }}
      </p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title fs-5 fw-light">
        <span class="fw-normal">{{ '{:.0%}'.format(result.humanized_humanness.get_germline_content()) }}</span>
        germline content
        <span class="text-secondary">
          ({{ '+{:.0%}'.format(result.humanized_humanness.get_germline_content() - result.parental_humanness.get_germline_content()) }})
          {{ info_icon('Sequence identity with nearest heavy and light human germline sequences', s=22) }}
        </span>
      </h5>
      <p class="card-text">
        {{ result.humanized_humanness.vh.v_germline_family }}<span class="text-secondary">{{ result.humanized_humanness.vh.v_germline_suffix }}</span>
        {% if result.humanized_humanness.vh and result.humanized_humanness.vl %}+{% endif %}
        {{ result.humanized_humanness.vl.v_germline_family }}<span class="text-secondary">{{ result.humanized_humanness.vl.v_germline_suffix }}</span>
      </p>
    </div>
  </div>
</div>

{% if result.humanized_humanness.vh %}
<h4 class="fw-light">Heavy chain</h4>
{{
  chain_designer(result, result.parental_humanness.vh, result.humanized_humanness.vh, result.humanization.vh, 'vh')
}}
{% endif %}

{% if result.humanized_humanness.vl %}
<h4 class="fw-light mt-3">Light chain</h4>
{{
  chain_designer(result, result.parental_humanness.vl, result.humanized_humanness.vl, result.humanization.vl, 'vl')
}}
{% endif %}

{% endblock %}

{% macro pos_tooltip(pos) %}
{{ pos.scheme.title() }} {{ pos }}
{% if pos.is_in_cdr() %}
  ({{ pos.get_region() }})
{% elif pos.cdr_definition == 'kabat' and pos.is_in_vernier() %}
  (Vernier zone)
{% endif %}
{% endmacro %}

{% macro mutation_tooltip(pos, current_aa, new_aa, backmutate=False) %}
{{ pos_tooltip(pos) }}
{% if current_aa != new_aa and new_aa != '-' %}
  {% if backmutate %}
  <br>{{ aa_name(new_aa) }}&nbsp;→&nbsp;{{ aa_name(current_aa) }}
  <br>Click to revert mutation
  {% else %}
  <br>Click to mutate
  <br>{{ aa_name(current_aa) }}&nbsp;→&nbsp;{{ aa_name(new_aa) }}
  {% endif %}
{% else %}
  <br>{{ aa_name(new_aa) }}
{% endif %}
{% endmacro %}

{% macro chain_designer(result, parental_humanness, humanized_humanness, humanization, id) %}
  <div class="mb-3 font-monospace text-nowrap fs-smaller designer-line designer-parental-line">
    {% for pos, aa, non_human_peptides in parental_humanness.get_positional_humanness(MIN_SUBJ)
    %}{% set num_non_human = (non_human_peptides | length)
    %}{% set peptide = parental_humanness.get_peptide(pos, edges=True)
    %}{% set freqs = parental_humanness.germline_family_residue_frequency.get(pos)
    %}<a {% if aa != humanized_humanness.chain[pos] %} href="{{ url_for_arg(pos=pos, aa=aa, relative=True) }}" data-pos="{{ pos }}" {% endif %}
         class="{% if aa != humanized_humanness.chain[pos] %}designer-mut
         {% if pos.is_in_cdr() or (pos.cdr_definition == 'kabat' and pos.is_in_vernier()) %}designer-mut-important{% endif %}{% endif %}"
         data-bs-toggle="tooltip" data-tooltip-classes="tooltip-medium" data-bs-html="true"
         title="Parental {{ mutation_tooltip(pos, humanized_humanness.chain[pos], aa, backmutate=True) }}"

            style="{% if pos.is_in_cdr() %}border-bottom: 3px solid #777777; {% elif pos.cdr_definition == 'kabat' and pos.is_in_vernier() %}border-bottom: 3px solid #cccccc;{% endif %}
            background-color: rgb(255, {{ 255 - num_non_human**0.80 * 30 }}, {{ 255 - num_non_human**0.65 * 40 }});">{{ aa }}</a>{%
    endfor %}
    Parental
  </div>
  <div class="mb-3 font-monospace text-nowrap fs-smaller designer-line designer-result-line">
    {% for pos, aa, non_human_peptides in humanized_humanness.get_positional_humanness(MIN_SUBJ)
    %}{% set num_non_human = (non_human_peptides | length)
    %}{% set peptide = humanized_humanness.get_peptide(pos, edges=True)
    %}{% set freqs = humanized_humanness.germline_family_residue_frequency.get(pos)
    %}<span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" data-tooltip-classes="tooltip-medium" data-result-pos="{{ pos }}"
            class="{% if aa != parental_humanness.chain[pos] %}designer-mut{% endif %} {% if not freqs or freqs.get(aa, 0) < RARE_FAMILY_FREQ %}oasis-seq-aa-rare{% endif %}"
             title="Result {{ pos_tooltip(pos) }}<br>{{ aa_name(aa) }}<br>Click to enter mutation"
            style="background-color: rgb(255, {{ 255 - num_non_human**0.80 * 30 }}, {{ 255 - num_non_human**0.65 * 40 }});"
          >{{ aa }}</span>{%
    endfor %}
    Result
  </div>
  <ul class="nav nav-pills designer-pills mb-3" id="pills-tab-{{ id }}" role="tablist" style="margin-left: 200px;">
    <li class="nav-item" role="presentation">
      <button class="nav-link {% if not tab or tab == 'sapiens' %}active{% endif %}" id="pills-sapiens-tab-{{ id }}" data-bs-toggle="pill" data-bs-target="#pills-sapiens-{{ id }}"
              type="button" role="tab" aria-controls="pills-sapiens-{{ id }}" aria-selected="true">
        Sapiens score
        {{ info_icon('Suggest mutations based on confidence score predicted by Sapiens deep learning method. Corresponds to probability of seeing given residue in the context of the given sequence in human OAS repertoires.', delay=500) }}
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link {% if tab == 'freq' %}active{% endif %}" id="pills-freq-tab-{{ id }}" data-bs-toggle="pill" data-bs-target="#pills-freq-{{ id }}"
              type="button" role="tab" aria-controls="pills-freq-{{ id }}" aria-selected="false">
        Frequency at position
        {{ info_icon('Suggest mutations based on residue frequency at each {} position in {} antibodies from human OAS repertoires.'.format(result.humanization_params.scheme.title(), humanized_humanness.v_germline_family), delay=500) }}
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link {% if tab == 'germline' %}active{% endif %}" id="pills-germline-tab-{{ id }}" data-bs-toggle="pill" data-bs-target="#pills-germline-{{ id }}"
              type="button" role="tab" aria-controls="pills-germline-{{ id }}" aria-selected="false">
        Germline sequences
        {{ info_icon('Suggest mutations based on nearest human germline sequences.', delay=500) }}
      </button>
    </li>
  </ul>
  <div class="tab-content" id="pills-tabContent-{{ id }}">
    <div class="tab-pane {% if not tab or tab == 'sapiens' %}show active{% endif %}" id="pills-sapiens-{{ id }}" role="tabpanel" aria-labelledby="pills-sapiens-tab-{{ id }}">
      <div class="mb-2 font-monospace text-nowrap fs-smaller">
        {% for scores in humanization.get_top_scores(5, next=True) %}
          <div class="suggested-mutations designer-line">
            {% for pos, aa, score in scores
            %}{% if score > MIN_SAPIENS_SCORE %}<a
                  {% if aa != humanized_humanness.chain[pos] %} href="{{ url_for_arg(pos=pos, aa=aa, tab='sapiens', relative=True) }}" data-pos="{{ pos }}" {% endif %}
                  data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom"
                  title="{{ mutation_tooltip(pos, humanized_humanness.chain[pos], aa) }}
                  <br>{{ '{:.0%}'.format(score) }} Sapiens score"
                  style="background: rgb({{255-score**0.5*100}},{{255-score**0.5*150}},{{255}});"
            >{{ aa if humanized_humanness.chain[pos] != aa else '·' }}</a>{% else %}<span></span>{% endif %}{%
            endfor %}
            Top #{{ loop.index }} score
          </div>
        {% endfor %}
      </div>
    </div>
    <div class="tab-pane {% if tab == 'freq' %}show active{% endif %}" id="pills-freq-{{ id }}" role="tabpanel" aria-labelledby="pills-freq-tab-{{ id }}">
      <div class="mb-2 font-monospace text-nowrap fs-smaller">
        {% for freqs in humanized_humanness.get_top_freqs(5) %}
          <div class="suggested-mutations designer-line">
            {% for pos, aa, freq in freqs
            %}{% if freq > MIN_FAMILY_FREQ %}<a
                  {% if aa != humanized_humanness.chain[pos] %} href="{{ url_for_arg(pos=pos, aa=aa, tab='freq', relative=True) }}" data-pos="{{ pos }}" {% endif %}
                  data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom"
                  title="{{ mutation_tooltip(pos, humanized_humanness.chain[pos], aa) }}
                  <br>{{ '{:.0%}'.format(freq) }} frequency in {{ humanized_humanness.v_germline_family }}"
                  style="background: rgb({{255-freq**0.5*255}},{{255-freq**0.5*100}},{{255-freq**0.5*100}});"
                >{{ aa if humanized_humanness.chain[pos] != aa else '·' }}</a>{% else %}<span></span>{% endif %}{%
            endfor %}
            Top #{{ loop.index }} frequency
          </div>
        {% endfor %}
      </div>
    </div>
    <div class="tab-pane {% if tab == 'germline' %}show active{% endif %}" id="pills-germline-{{ id }}" role="tabpanel" aria-labelledby="pills-germline-tab-{{ id }}">
        <div class="mb-2 font-monospace text-nowrap fs-smaller">
          {% set v_germlines = humanized_humanness.get_v_germline_chains(5) %}
          {% set j_germlines = humanized_humanness.get_j_germline_chains(5) %}
          {% for i in range(v_germlines | length) %}
            <div class="designer-line">
              {% for (imgt_pos, seq_aa), (pos, _) in zip(humanized_humanness.imgt_chain, humanized_humanness.chain)
              %}{% set germline_aa = v_germlines[i][imgt_pos] or j_germlines[i][imgt_pos] or '-' %}<a
                    data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" title="{{ mutation_tooltip(pos, seq_aa, germline_aa) }}"
                    {% if germline_aa != "-" and germline_aa != seq_aa %} href="{{ url_for_arg(pos=pos, aa=germline_aa, tab='germline', relative=True) }}" data-pos="{{ pos }}"{% endif %}
                    style="background:rgb(200, 255, 200); {% if pos.is_in_cdr() %}opacity: 0.6;{% endif %}"
                >{{ germline_aa if humanized_humanness.chain[pos] != germline_aa else '·' }}</a>{%
              endfor %}
              {{ v_germlines[i].name }}, {{ j_germlines[i].name }}
            </div>
          {% endfor %}
        </div>
    </div>
  </div>

{% endmacro %}

{% block scripts %}

    <script>
        document.querySelectorAll('[data-pos]').forEach(elem => elem.addEventListener('mouseover', function (event) {
            var targetPos = elem.getAttribute('data-pos')
            document.querySelectorAll('[data-result-pos]').forEach(function(elem) {
                var pos = elem.getAttribute('data-result-pos')
                if (pos == targetPos) {
                  elem.classList.add('active')
                } else {
                  elem.classList.remove('active')
                }
            })
        }))
        document.querySelectorAll('[data-pos]').forEach(elem => elem.addEventListener('mouseout', function (event) {
            document.querySelectorAll('[data-result-pos]').forEach(function(elem) {
                elem.classList.remove('active')
            })
        }))
        var designerLinks = document.querySelectorAll('.designer-line a[href]');
        designerLinks.forEach(target => target.addEventListener('click', function (event) {
            if(target.hasAttribute('href')) {
              designerLinks.forEach(function(elem) {
                if (target != elem) {
                  elem.removeAttribute('href')
                }
              })
              addOverlay();
            }
        }))
        document.querySelectorAll('[data-result-pos]').forEach(target => target.addEventListener('click', function (event) {
            var targetPos = target.getAttribute('data-result-pos')
            var previousAA = target.innerHTML
            var aa = prompt('Enter mutation at ' + targetPos + ' ' + previousAA + ':')
            if (aa != null && aa != '') {
              if (aa.length > 1) {
                alert('Invalid amino acid: '+aa);
              } else {
                window.location.href = '?pos='+targetPos+'&aa='+aa {% if result_index %}+'&index={{ result_index }}'{% endif %}
                addOverlay();
              }
            }
        }))

        function addOverlay() {
          var overlayElem = document.createElement('div');
          overlayElem.classList.add('loading-overlay')
          document.body.appendChild(overlayElem);
        }

        // Remove overlay at pageshow (Safari keeps showing overlay after back button press)
        window.addEventListener('pageshow', function(){
            document.querySelectorAll('.loading-overlay').forEach(elem => elem.remove())
        });

    </script>

{% endblock %}
