{% extends 'tabbed.html' %}

{% block head %}
<title>Contig QC Dashboard (Vega-Lite)</title>
<script src="js/bootstrapMagic.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@5"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet"/>

{% endblock %}

{% block tabcontent %}
<div class="container-fluid">
  <div class="row" style="margin-top: 20px;">
    <div class="col-lg-12">
      <div class="card mb-4 border-muted">
        <div class="card-body p-3">
          <div class="card-text text-muted">
            This visualization shows summary contig quality metrics (contig count, N50, N90, total assembly length) for sample groups selected based on the metadata.
          </div>
          <div class="card-text text-muted" style="margin-top: 10px;">
            Pick a metadata category to group the samples by and a quality metric to be displayed on the Y axis.
          </div>
          <div class="row selector-row justify-content-left mb-10" style="margin-top: 10px; margin-bottom: 10px;">
            <div class="col-auto">
              <label for="boxCategoryDropdown" class="form-label fw-bold">Metadata category:</label>
              <select id="boxCategoryDropdown" class="form-select custom-dropdown">
                <!-- Options will be populated by JS -->
              </select>
            </div>
            <div class="col-auto">
              <label for="boxMetricDropdown" class="form-label fw-bold">Metric:</label>
              <select id="boxMetricDropdown" class="form-select custom-dropdown">
                <option value="count">Contig count</option>
                <option value="n50">N50</option>
                <option value="n90">N90</option>
                <option value="total_length">Total assembly length</option>
              </select>
            </div>
        </div>
    </div>
      </div>
      <div class="mx-6">
        <div class="row dashboard-row justify-content-center">
          <div class="col-12" id="boxplot-dashboard"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // --- Data injected from Python ---
  const categories = {{ categories | safe }};
  const values = {{ values | safe }};
  const sampleMetrics = {{ sample_metrics | safe }};
</script>

<script type="text/javascript">
  $(document).ready(function () {
    removeBS3refs();
    adjustTagsToBS3();

    // Populate boxplot category dropdown
    const boxCategoryDropdown = document.getElementById('boxCategoryDropdown');
    categories.forEach(cat => {
      const opt = document.createElement('option');
      opt.value = cat;
      opt.textContent = cat.charAt(0).toUpperCase() + cat.slice(1);
      boxCategoryDropdown.appendChild(opt);
    });
    // Set default boxplot category
    const initialCategory = categories[0];
    boxCategoryDropdown.value = initialCategory;



    function renderBoxplot(category, metric) {
      const metricTitles = {
        count: 'Contig count',
        n50: 'N50',
        n90: 'N90',
        total_length: 'Total assembly length'
      };
      const boxSpec = {
        $schema: 'https://vega.github.io/schema/vega-lite/v6.json',
        description: 'Boxplot of per-sample metrics by category',
        data: {values: sampleMetrics},
        width: 'container',
        height: 400,
        mark: {type: 'boxplot'},
        encoding: {
          x: {field: category, type: 'nominal', title: category.charAt(0).toUpperCase() + category.slice(1), "axis": {"labelAngle": 0}},
          y: {field: metric, type: 'quantitative', title: metricTitles[metric], "axis": {"format": "~s"}},
          color: {value: "teal", legend: {"disable": true}},
          tooltip: [
            {field: category, type: 'nominal'},
            {field: metric, type: 'quantitative'}
          ]
        },
        config: {
          boxplot: {median: {color: '#222', size: 3}},
          axis: {
            grid: true,
            gridColor: '#eaeaea',
            gridWidth: 1,
            tickColor: '#888',
            labelFont: 'Open Sans, Arial, sans-serif',
            labelFontSize: 14,
            titleFont: 'Open Sans, Arial, sans-serif',
            titleFontSize: 16,
            titleFontWeight: 'bold',
            domain: false
          },
          legend: {
            orient: 'right',
            labelFont: 'Open Sans, Arial, sans-serif',
            labelFontSize: 14,
            titleFont: 'Open Sans, Arial, sans-serif',
            titleFontSize: 15,
            symbolType: 'circle',
            symbolSize: 120
          },
          view: {
            stroke: '#eaeaea',
            strokeWidth: 1
          },
          title: {
            font: 'Open Sans, Arial, sans-serif',
            fontSize: 18,
            fontWeight: 'bold',
            anchor: 'middle',
            color: '#222'
          }
        },
        title: metricTitles[metric] + ' per Sample by ' + category.charAt(0).toUpperCase() + category.slice(1)
      };
      vegaEmbed('#boxplot-dashboard', boxSpec, {actions: true});
    }

    // Initial boxplot render
    renderBoxplot(initialCategory, 'count');
    document.getElementById('boxCategoryDropdown').addEventListener('change', function () {
      renderBoxplot(this.value, document.getElementById('boxMetricDropdown').value);
    });
    document.getElementById('boxMetricDropdown').addEventListener('change', function () {
      renderBoxplot(document.getElementById('boxCategoryDropdown').value, this.value);
    });



    // Render the boxplot using the injected spec
    // let vegaBoxplotView = null;
    // vegaEmbed('#boxplot-dashboard', vegaSpecGrouped, {actions: true}).then(res => {
    //   vegaBoxplotView = res.view;
    //   // Set initial params
    //   vegaBoxplotView.signal('box_category_param', boxCategoryDropdown.value)
    //                  .signal('box_metric_param', initialMetric)
    //                  .runAsync();
    //   // Listen for sample selection in the plots
    //   // vegaBoxplotView.addSignalListener('sample_select', (name, value) => {
    //   //   // No-op: sample selection in plot does not update dropdowns when 'sample' is not a filterable category
    //   // });
    // });

    // On dropdown change, update the Vega-Lite params
    // boxCategoryDropdown.addEventListener('change', function () {
    //   if (vegaBoxplotView) {
    //     vegaBoxplotView.signal('box_category_param', this.value).runAsync();
    //   }
    // });
    // boxMetricDropdown.addEventListener('change', function () {
    //   if (vegaBoxplotView) {
    //     vegaBoxplotView.signal('box_metric_param', this.value).runAsync();
    //   }
    // });
  });
</script>
{% endblock %}

{% block footer %}
{% set loading_selector = '#loading' %}
{% include 'js-error-handler.html' %}
{% endblock %}