JS fiddling complete. It seems to be working nicely.

Next step is to add the rRNA scan.
EdinburghGenomics · Nov 19, 2024 · 61161be · 61161be
1 parent f2e090e
commit 61161be
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 21 deletions.
diff --git a/templates/javascript.js.html b/templates/javascript.js.html
@@ -10,17 +10,34 @@
       crossorigin="anonymous">
 
 <!-- jQuery (of course) (still on v1 for some reason?) -->
-<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+<script src="https://code.jquery.com/jquery-1.12.4.min.js"
+        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
+        crossorigin="anonymous"></script>
 <!-- end: jQuery -->
 
 <!-- datatables stylesheets, code and extensions -->
-<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
-<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
+<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"
+      integrity="sha384-1UXhfqyOyO+W+XsGhiIFwwD3hsaHRz2XDGMle3b8bXPH5+cMsXVShDoHA3AH/y/p"
+      crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css"
+      integrity="sha384-+HuqSo2jltxblyQxEWXqMxros/OMTbQj97cQmCg02u0tDBM6ua+n6riJITcaYLZv"
+      crossorigin="anonymous">
 
-<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
+<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"
+        integrity="sha384-Z9D45cp3elqajO+xEyjRTIK1Gr3eYsXiyCPIKNog1sIQzpo2fqFDqFdADGiJjzOv"
+        crossorigin="anonymous"></script>
+<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"
+        integrity="sha384-6HTzjzs9z4e++DpwUslzHjPEQLurPtfOOr1EENaFoaLY2XTdteWLxIaTdSm+G+Z7"
+        crossorigin="anonymous"></script>
+<script src="https://cdn.datatables.net/plug-ins/2.1.8/api/order.neutral().js"
+        integrity="sha384-dho9HNp1pwYv1WBrN+xgu40W1pgZT5QjOHtUnGzrC21TUSMz1iJwfSK2o0PabTly"
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"
+        integrity="sha384-v9EFJbsxLXyYar8TvBV8zu5USBoaOC+ZB57GzCmQiWfgDIjS+wANZMP5gjwMLwGv"
+        crossorigin="anonymous"></script>
+<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"
+        integrity="sha384-MGofXzcROcQ3bZUqtn2mEI8nhXNmKZ9Qq4FcEapwT3JBKUlgVY+ngyYFNXXUgzSS"
+        crossorigin="anonymous"></script>
 <!-- end: datatables stylesheets, code & extensions -->
 
 <!-- Start fancybox2 HEAD section -->
@@ -70,8 +87,11 @@
             }
 
             /* And see if we have a "_groupby" column */
-            if( $(dtable.api().column(0).header()).text() == "_groupby"){
-                add_groupby(dtable, 0);
+            for(var n=0; n<dtable.api().columns()[0].length; n++){
+                if( $(dtable.api().column(n).header()).text() == "_groupby"){
+                    add_groupby(dtable, n);
+                    break;
+                }
             }
         });
         /* If there were any linkedfilter tables, select the first item */
@@ -253,9 +273,9 @@
 
     function add_groupby(dtable, groupColumn){
         // Based on https://datatables.net/examples/advanced_init/row_grouping.html
-        console.log("add_groupby()");
-        debugdtable = dtable;
-        debugdtableapi = dtable.api();
+        //console.log("add_groupby()");
+        //debugdtable = dtable;
+        //debugdtableapi = dtable.api();
 
         var api = dtable.api();
 
@@ -268,6 +288,8 @@
             var columns = api.columns()[0].length;
             var last = null;
 
+            // Allows for CSS styling to alter row widths.
+            dtable.addClass("groupbytable");
             api.column(groupColumn, { page: 'current' })
                 .data()
                 .each(function (group, i) {
@@ -287,11 +309,8 @@
         dtable.on('click', 'tr.groupby', function () {
             console.log("clickety");
             var currentOrder = api.order()[0];
-            if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
-                api.order([groupColumn, 'desc']).draw();
-            }
-            else {
-                api.order([groupColumn, 'asc']).draw();
+            if(currentOrder){
+                api.order.neutral().draw();
             }
         });
 

diff --git a/templates/local.css.html b/templates/local.css.html
@@ -78,15 +78,20 @@
     table.display { font-family: monospace; }
     table.display thead th { padding: 0px 16px; }
 
-    tr.groupby,
-    tr.groupby:hover {
+    table.groupbytable td:first-child,
+    table.groupbytable th:first-child{
+        width: 30% !important;
+    }
+
+    table.groupbytable tr.groupby,
+    table.groupbytable tr.groupby:hover {
         background-color: rgba(250, 190, 234, 0.9) !important;
         font-weight: bold;
         letter-spacing: 2px;
     }
 
-    :root.dark tr.groupby,
-    :root.dark tr.groupby:hover {
+    :root.dark table.groupbytable tr.groupby,
+    :root.dark table.groupbytable tr.groupby:hover {
         background-color: rgba(0, 0, 0, 0.75) !important;
     }