{% extends 'base.html' %}

{% block head %}
  <script src="js/vega.min.js"></script>
  <script src="js/vega-embed.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/spinkit.css">
{% endblock %}

{% block content %}
{% if filtered_ids is defined %}
<div class="row">
  <p class="alert alert-warning col-md-12">
    The following features have been omitted because they contained non-numeric results:
    <strong>{{ filtered_ids }}</strong>
  </p>
</div>
{% endif %}
<div class="row">
  <div class="col-lg-8">
    <h3>ANCOM Volcano Plot</h3>
    <div id="toolbar"></div>
    {% if vega_spec is defined %}
    <div id="plot">
      <div id="loading" class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
    </div>
    {% else %}
    <p>Unable to generate volcano plot</p>
    {% endif %}
  </div>
</div>

<hr>

<div class="row">
  <div class="col-lg-6">
    <h4>ANCOM statistical results</h4>
    {% if significant_features is defined %}
      <div class="table-responsive">
        {{ significant_features }}
      </div>

      <a href="ancom.tsv" target="_blank" rel="noopener noreferrer" class="btn btn-default">
        Download table as TSV
      </a>
    {% else %}
      <p class="alert alert-warning">No significant features found</p>
    {% endif %}
  </div>
</div>

<hr>

<div class="row">
  <div class="col-lg-12">
    <h4>Percentile abundances of features by group</h4>
    {% if percent_abundances is defined %}
      <div class="table-responsive">
        {{ percent_abundances }}
      </div>

      <a href="percent-abundances.tsv" target="_blank" rel="noopener noreferrer" class="btn btn-default">
        Download table as TSV
      </a>
    {% else %}
      <p class="alert alert-warning">No significant features found</p>
    {% endif %}
  </div>
</div>
{% endblock %}

{# TODO: move this footer into q2templates (someday) #}
{% block footer %}
{% set loading_selector = '#loading' %}
{% include 'js-error-handler.html' %}
{% if vega_spec is defined %}
<script id="spec" type="application/json">{{ vega_spec }}</script>
<script type="text/javascript">
  $(document).ready(function() {
    var spec = JSON.parse(document.getElementById('spec').innerHTML);

    // Try and come up with a good initial estimate of plot dimensions,
    // based on the browser dimensions.
    var width = $('#plot').width() / 1.5;
    var opts = {width: width, height: width / 2};

    vegaEmbed('#plot', spec, opts).then(function(result) {
      result.view.logLevel(vega.Warn);
      // Stash the view object in global namespace for debugging purposes.
      // Check out https://vega.github.io/vega/docs/api/debugging/
      // for more details.
      window.v = result.view;
    }).catch(function(error) {
      // From 'js-error-handler.html'
      handleErrors([error], $('#plot'));
    });

    // Clean up the vega-embed toolbar
    var toolbar = $('div .vega-actions').detach();
    toolbar.addClass('btn-group');
    toolbar.children('a').each(function() {
      // NOTE: We're just skipping this bit until we get the plot working with
      // Vega 5
      if(this.innerHTML == "Open in Vega Editor"){
        this.remove()
        return true
      }
      $(this).addClass('btn btn-default');
    });
    $('<a href="data.tsv" target="_blank" rel="noopener noreferrer" class="btn btn-default">Export as TSV</a>')
      .prependTo(toolbar);
    toolbar.appendTo('#toolbar');

    // Util to mutate elements in-place
    function cleanupEl(el, label, form_el) {
      var e = $(el + ' .vega-bind');
      e.children('span').replaceWith('<label>' + label + '&nbsp;</label');
      if (form_el !== undefined) {
        e.children(form_el).addClass('form-control');
      }
    }
  });
</script>
{% endif %}
{% endblock %}