Allow default sort

Squash of MultiQC#1667

CHANGELOG.md

@@ -55,6 +55,12 @@
 - Add timezone to time in reports
 - Add nix flake support
 - Added automatic tweet about new releases
+- Upgraded jquery tablesorter plugin to v2
+- Allow specifying default sort columns for tables
+
+### New Modules
+
+_nothing yet.._
 
 ### Module updates
 

CSP.txt

@@ -4,6 +4,7 @@
 script-src 'self'
     # v1.13
     'sha256-Yz8frRqxu+ckJJ0Haj9Ywhe/Siomzpq9D/Xe1WX1LrQ=' # multiqc_tables.js
+    'sha256-dtGH1XcAyKopMui5x20KnPxuGuSx9Rs6piJB/4Oqu6I=' # jquery.tablesorter.min.js
 
     # v1.12
     'sha256-iV6CFHoCJq7rXjscXMmCioPf05AIE/ZU98tHigtrnoE=' # multiqc.js after 9800862

docs/plots.md

@@ -617,6 +617,22 @@ headers[tablecol] = {
 }
 ```
 
+### Specifying sorting of columns
+
+You can specify multiple columns to sort by. In `custom_plot_config`, for each plot, you can add a `defaultsort` option. Here is an example:
+
+```
+custom_plot_config:
+  table_data-plot:
+    defaultsort:
+      - column: "Starting Amount (ng)"
+        direction: desc
+      - column: "Mean Insert Length"
+        direction: asc
+```
+
+Direction must be `asc` or `desc`.
+
 ## Beeswarm plots (dot plots)
 
 Beeswarm plots work from the exact same data structure as tables, so the

multiqc/plots/table.py

@@ -356,9 +356,12 @@ def make_table(dt):
     html += """
         <div id="{tid}_container" class="mqc_table_container">
             <div class="table-responsive mqc-table-responsive {cc}">
-                <table id="{tid}" class="table table-condensed mqc_table" data-title="{title}">
+                <table id="{tid}" class="table table-condensed mqc_table" data-title="{title}" data-sortlist="{sortlist}">
         """.format(
-        tid=table_id, title=table_title, cc=collapse_class
+        tid=table_id,
+        title=table_title,
+        cc=collapse_class,
+        sortlist=_get_sortlist(dt),
     )
 
     # Build the header row
@@ -430,3 +433,31 @@ def make_table(dt):
         report.saved_raw_data[fn] = dt.raw_vals
 
     return html
+
+
+def _get_sortlist(dt):
+    defaultsort = dt.pconfig.get("defaultsort")
+    if defaultsort is None:
+        return ""
+
+    headers = dt.get_headers_in_order()
+    sortlist = []
+
+    # defaultsort is a list of {column, direction} objects
+    for d in defaultsort:
+        # the idx first el of the triple is not actualy unique, it's the bucket
+        # so we must enumerate ourselves here
+        try:
+            idx = next(idx for idx, (_, k, header) in enumerate(headers) if k == d["column"])
+        except StopIteration:
+            logger.warning(
+                "Tried to sort by column '%s', but column was not found. Available columns: %s",
+                d["column"],
+                [k for (_, k, _) in headers],
+            )
+            return ""
+        idx += 1  # to account for col1_header
+        direction = 0 if d["direction"] == "asc" else 1
+        sortlist.append([idx, direction])
+
+    return str(sortlist)

multiqc/templates/default/assets/css/default_multiqc.css

@@ -674,7 +674,7 @@ input.form-control[type="color"] {
 .mqc_table thead td {
   background-color: #ffffff;
 }
-.mqc_table thead th:after {
+.mqc_table thead th .tablesorter-header-inner:after {
   content: "";
   display: inline-block;
   width: 0;
@@ -684,14 +684,14 @@ input.form-control[type="color"] {
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
 }
-.mqc_table thead th.headerSortDown:after {
+.mqc_table thead th.tablesorter-headerAsc .tablesorter-header-inner:after {
   border-bottom: 4px dashed;
 }
-.mqc_table thead th.headerSortUp:after {
+.mqc_table thead th.tablesorter-headerDesc .tablesorter-header-inner:after {
   border-top: 4px dashed;
 }
-.mqc_table thead th.headerSortDown,
-.mqc_table thead th.headerSortUp {
+.mqc_table thead th.tablesorter-headerAsc,
+.mqc_table thead th.tablesorter-headerDesc {
   background-color: #ededed;
   color: #1ca8dd;
   border-bottom: 2px solid #1ca8dd;