{% extends "base.html" %}
{% block content %}
  <div class="section">
    <div class="toc card">
      <h3>Table of contents</h3>
      <ol>
        <li><a href="#summary">Summary</a></li>
        <li><a href="#tree">Input tree</a></li>
        <li><a href="#root-to-tip">Root-to-tip regression</a></li>
        <li><a href="#convergent">Convergent mutations</a></li>
        <li><a href="#reversions">Reversions</a></li>
        <li><a href="#immune">Signatures of human immune editing</a></li>
      </ol>
    </div>

    <div id="summary" class="card">
      <h3>1. Summary</h3>
      <p>Tips: {{ summary.tips }}</p>
      <p>Tree height: {{ summary.tree_height }}</p>
      <p>Tips with date information: {{ summary.tips_with_dates }} / {{ summary.tips }}
        {%- if summary.tips_missing_dates > 0 %} &mdash; <strong>{{ summary.tips_missing_dates }} tip(s) missing date and excluded from root-to-tip</strong>{% endif %}</p>
    </div>

    <div id="tree" class="card">
      <h3>2. Input tree</h3>
      {% if tree_plot_html %}
        <p class="caption">Tree rooting: {{ tree_rooting_method }}. Use the dropdown to colour tips by trait and the slider to expand the tree vertically.</p>
        <p>
        Further explore this tree in <a href="https://artic-network.github.io/peartree/" target="_blank" rel="noopener noreferrer">PearTree</a>.
        </p>
        <div id="tree-plot-container">
          {{ tree_plot_html | safe }}
        </div>
      {% else %}
        <p>No interactive tree available, tree failed to render.</p>
      {% endif %}
    </div>
    {% if tree_plot_html %}
      <script>
        (function () {
          var container = document.getElementById('tree-plot-container');
          if (!container || !window.Plotly) return;
          var plot = container.querySelector('.js-plotly-plot');
          if (!plot) return;

          function syncHeight() {
            var height = (plot.layout && plot.layout.height) ? plot.layout.height : plot.clientHeight;
            if (height) {
              container.style.height = height + 'px';
            }
          }

          plot.on('plotly_afterplot', syncHeight);
          plot.on('plotly_animated', syncHeight);
          syncHeight();
        })();
      </script>
    {% endif %}

    <div id="root-to-tip" class="card">
      <h3>3. Root-to-tip regression</h3>
      <p>Root-to-tip regression can be used to visually assess the temporal signal in the phylogenetic tree. It plots the genetic distance from the root against the sampling dates of the sequences.</p>
      <p>
        Primer: the slope is the estimated evolutionary rate (substitutions/site/year, using decimal-year dates), the x-intercept estimates tMRCA,
        R² is the fraction of variation explained by the regression, and r is the Pearson correlation coefficient.
        These values are sensitive to tree rooting, so an incorrect root placement can shift the inferred rate, tMRCA, and fit statistics.
      </p>
      {% if root_to_tip_stats %}
        <p>
          Slope (rate, subs/site/year): {{ "%.2e"|format(root_to_tip_stats.slope) }} |
          tMRCA (x-intercept, decimal year): {{ root_to_tip_stats.tmrca }} |
          R²: {{ "%.3f"|format(root_to_tip_stats.r_squared) }} |
          r: {{ "%.3f"|format(root_to_tip_stats.correlation) }}
        </p>
      {% endif %}
      {% if root_to_tip_plot_html %}
        {{ root_to_tip_plot_html | safe }}
      {% else %}
        <p>No root-to-tip regression plot available.</p>
      {% endif %}
      {% if tips_missing_dates_table %}
        <div style="margin-top:1.2rem;">
          <h4>Tips missing date information ({{ tips_missing_dates_count }})</h4>
          <p>The following tips could not be assigned a date from the tip label (via the <code>--tip-fields</code> date field or the last field of the label).
          They are excluded from root-to-tip regression.
          {% if tips_with_dates_count > 0 %}Root-to-tip is plotted using the remaining {{ tips_with_dates_count }} dated tip(s).{% endif %}
          </p>
          <div class="table-wrap table-scroll">
            <table class="datatable">
              <thead>
                <tr>
                  {% for header in tips_missing_dates_table.headers %}
                    <th>{{ header }}</th>
                  {% endfor %}
                </tr>
              </thead>
              <tbody>
                {% for row in tips_missing_dates_table.rows %}
                  <tr>
                    {% for cell in row %}
                      <td>{{ cell }}</td>
                    {% endfor %}
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      {% endif %}
    </div>



    <div id="convergent" class="card">
      <h3>4. Convergent mutations</h3>
      <p>
        Convergent mutations are mutations that have independently arisen multiple times across the tree.<br>
        Large numbers of convergent SNPs can indicate convergent evolution (real) OR alignment/reconstruction errors (artifacts).
      </p> 
      {% if convergent_table %}
        <div class="table-wrap table-scroll">
          <table class="datatable">
            <thead>
              <tr>
                {% for header in convergent_table.headers %}
                  <th>{{ header }}</th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for row in convergent_table.rows %}
                <tr>
                  {% for cell in row %}
                    <td>{{ cell }}</td>
                  {% endfor %}
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p>Ancestral state reconstruction files must be supplied to check for convergent mutations.</p>
        <p>No convergent mutations flagged.</p>
      {% endif %}
    </div>

    <div id="reversions" class="card">
      <h3>5. Reversions</h3>
      <p>Reversions are mutations that revert to a previous state observed in the tree.</p>
      <p>If assembly references are supplied, reversions can flag potential assembly errors.</p>
      {% if reversion_table %}
        <div class="table-wrap table-scroll">
          <table class="datatable">
            <thead>
              <tr>
                {% for header in reversion_table.headers %}
                  <th>{{ header }}</th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for row in reversion_table.rows %}
                <tr>
                  {% for cell in row %}
                    <td>{{ cell }}</td>
                  {% endfor %}
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p>Ancestral state reconstruction files must be supplied to check for reversions.</p>
        <p>No reversions flagged.</p>
      {% endif %}
    </div>

    <div id="immune" class="card">
      <h3>6. Signatures of human immune editing</h3>
      <p>Signatures of human immune editing are mutations that may be influenced by the host immune system. Raccoon can check for signatures of ADAR editing (clusters of T->C mutations) and APOBEC editing (TC->TT and GA->AA mutations).</p>
      {% if immune_editing_table %}
        <div class="table-wrap table-scroll">
          <table class="datatable">
            <thead>
              <tr>
                {% for header in immune_editing_table.headers %}
                  <th>{{ header }}</th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for row in immune_editing_table.rows %}
                <tr>
                  {% for cell in row %}
                    <td>{{ cell }}</td>
                  {% endfor %}
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p>Ancestral state reconstruction files must be supplied to check for signatures of immune editing.</p>
        <p>No immune editing signatures flagged.</p>
      {% endif %}
    </div>
  </div>
{% endblock %}