{% extends 'base.html' %}

{% block title %}q2-longitudinal : volatility{% endblock %}

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

<div class="row">
  <div class="col-lg-8">
    <h3>Volatility Control Chart</h3>
    <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>
  </div>
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-12">
        <h3>Plot Controls</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12" id="toolbar"></div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        Click the individual group value labels in the legend to toggle
        their visibility in the displayed plot.
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-lg-6" id="group-column"></div>
      <div class="col-lg-6" id="metric-column"></div>
    </div>

    <div class="row">
      <div class="col-lg-12" id="color-scheme"></div>
    </div>

    <div class="row">
      <div class="col-lg-3" id="toggle-error-bars"></div>
      <div class="col-lg-3" id="toggle-global-mean"></div>
      <div class="col-lg-6" id="toggle-global-control-limits"></div>
    </div>

    <div class="row">
      <div class="col-lg-6" id="mean-line-thickness"></div>
      <div class="col-lg-6" id="spaghetti-line-thickness"></div>
    </div>

    <div class="row">
      <div class="col-lg-6" id="mean-line-opacity"></div>
      <div class="col-lg-6" id="spaghetti-line-opacity"></div>
    </div>

    <div class="row">
      <div class="col-lg-6" id="mean-symbol-size"></div>
      <div class="col-lg-6" id="spaghetti-symbol-size"></div>
    </div>

    <div class="row">
      <div class="col-lg-6" id="mean-symbol-opacity"></div>
      <div class="col-lg-6" id="spaghetti-symbol-opacity"></div>
    </div>

    {% if is_feat_vol_plot %}
    <div class="well">

      <div class="row">
        <div class="col-lg-12">
          <h3 style="margin-top:0px;">Feature Stats Subplot Controls</h3>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <p>
            The bar charts display descriptive statistics for all features
            available in the volatility control chart. Click on a bar to view the
            volatility plot for that metric. Hover over a bar to display the
            metric's name and values for each available statistic. Features can
            also be selected using the grey circles running along the y-axes.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <a href="feature_metadata.tsv" target="_blank" rel="noopener noreferrer" class="btn btn-default">
            Export Stats as TSV
          </a>
        </div>
      </div>

      <hr>

      <div class="row">
        <div class="col-lg-6" id="metric-stats-left"></div>
        <div class="col-lg-6" id="sort-stats"></div>
      </div>

      <div class="row">
        <div class="col-lg-6" id="metric-stats-right"></div>
        <div class="col-lg-6" id="sort-stats-dir"></div>
      </div>
    </div>
    {% endif %}

  </div>
</div>
{% endblock %}

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

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

    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');
      }
    }

    // Configuring Vega-generated bound HTML elements is less than ideal, so we
    // do some manual cleanup here, dynamically. Order matters here.
    cleanupEl('#group-column', 'Group column', 'select');
    cleanupEl('#metric-column', 'Metric column', 'select');
    cleanupEl('#color-scheme', 'Color scheme', 'select');
    cleanupEl('#toggle-error-bars', 'Show error bars');
    cleanupEl('#toggle-global-mean', 'Show global mean');
    cleanupEl('#toggle-global-control-limits', 'Show global control limits');
    $('#toggle-global-control-limits').append('<p>+/- 2x and 3x standard deviations from global mean</p>');
    cleanupEl('#mean-line-thickness', 'Mean line width');
    cleanupEl('#spaghetti-line-thickness', 'Spaghetti line width');
    cleanupEl('#mean-line-opacity', 'Mean line opacity');
    cleanupEl('#spaghetti-line-opacity', 'Spaghetti line opacity');
    cleanupEl('#mean-symbol-size', 'Mean scatter size');
    cleanupEl('#spaghetti-symbol-size', 'Spaghetti scatter size');
    cleanupEl('#mean-symbol-opacity', 'Mean scatter opacity');
    cleanupEl('#spaghetti-symbol-opacity', 'Spaghetti scatter opacity');
    cleanupEl('#metric-stats-left', 'Left metric', 'select');
    cleanupEl('#metric-stats-right', 'Right metric', 'select');
    cleanupEl('#sort-stats', 'Sort by', 'select');
    cleanupEl('#sort-stats-dir', 'Sort order', 'select');
  });
</script>
{% endblock %}
