ENH: add a new action for contig quality control

conda-recipe/meta.yaml

@@ -20,6 +20,7 @@ requirements:
   - insilicoseq
   - mason
   - megahit ==1.2.9
+  - pyarrow
   - pysam {{ pysam }}
   - qiime2 >={{ qiime2 }}
   - q2-fondue >={{ q2_fondue }}

q2_assembly/__init__.py

@@ -7,6 +7,7 @@
 # ----------------------------------------------------------------------------
 
 from .bowtie2 import indexing, mapping
+from .contig_qc import qc
 from .filter import filter
 from .helpers import helpers
 from .iss import iss
@@ -21,6 +22,7 @@
     __version__ = "0.0.0+notfound"
 
 __all__ = [
+    "abundance",
     "indexing",
     "mapping",
     "iss",
@@ -30,4 +32,5 @@
     "spades",
     "helpers",
     "filter",
+    "qc"
 ]

q2_assembly/assets/contig_qc/css/styles.css

@@ -0,0 +1,157 @@
+body { font-family: 'Open Sans', Arial, sans-serif; background: #fff; }
+.dashboard-title { margin-top: 30px; margin-bottom: 30px; }
+.dashboard-row { margin-bottom: 30px; }
+.selector-row { margin-bottom: 20px; }
+.custom-dropdown { min-width: 180px; }
+.nav-tabs { padding-top: 10px;}
+
+#vega-contig-length, #vega-nx-curve, #vega-gc-content, #vega-cumulative-length {
+  min-width: 200px;
+  min-height: 200px;
+  width: 100%;
+}
+
+/* SPINKIT */
+
+/*
+The MIT License (MIT)
+
+Copyright (c) 2015-2020 Tobias Ahlin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+.spinner {
+  margin: 100px auto;
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+}
+
+.plot-spinner {
+  margin: 20px auto;
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+}
+
+.spinner > div,
+.plot-spinner > div {
+  background-color: #333;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+
+  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}
+
+/* Custom Legend Styles */
+.custom-legend-item {
+  cursor: pointer;
+  padding: 2px 5px;
+  border: 1px solid transparent; /* Border for spacing, becomes visible on selection */
+  border-radius: 4px;
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
+}
+
+.custom-legend-item:not(.selected) {
+  opacity: 0.6; /* Dim unselected items */
+}
+
+.custom-legend-item.selected {
+  border: 1px solid #007bff; /* Highlight selected items with a border */
+  opacity: 1;
+  font-weight: bold;
+}
+
+/* Ensure the color swatch and text are vertically aligned */
+.custom-legend-item > span {
+  vertical-align: middle;
+}
+
+
+/* Custom legend container */
+#custom-legend {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+/* Individual legend items */
+.custom-legend-item {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 15px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  opacity: 0.2;
+  transition: opacity 0.2s ease;
+}
+
+/* Highlight selected items */
+.custom-legend-item.selected {
+  opacity: 1;
+}
+
+/* Color swatch box */
+.legend-color-swatch {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  margin-right: 5px;
+}

q2_assembly/assets/contig_qc/grouped.html

@@ -0,0 +1,186 @@
+{% 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@6"></script>
+<script src="https://cdn.jsdelivr.net/npm/vega-lite@6"></script>
+<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></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 justify-content-center" style="margin-top: 20px;">
+    <div class="col-lg-10 col-xl-8">
+      <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 %}