Fix several issues with Datatables (#3750)

This addresses several issues for the styling of Datatables Closes #3745 ## Styling The PR introduces a few custom CSS styles, overwriting some of the styles found in the bootstrap-4 extension of Datatables. ## Leaderboard The `dom` option is deprecated in Datatables. It had to be updated anyway to account for the new styling. This PR uses the new `layout` option in Datatables to set things up in a future-proof manner. There are four states, as shown below. #### Regular ![image](https://github.com/user-attachments/assets/7657b044-1b5d-4f87-97bc-042a3fc77fc9) #### Date & Additional Metrics ![image](https://github.com/user-attachments/assets/ce2f7ab3-b8e4-4823-a864-cfaf0fca4f4b) #### Date ![image](https://github.com/user-attachments/assets/65494f38-6651-40fa-85dc-d518a35da5c0) #### Additional Metrics ![image](https://github.com/user-attachments/assets/67774a01-80a9-4863-8b35-aa710c8332a4) ### Other It also consolidates a few common settings in Datatables: - Adds a default via-html-element-class selectable `"nonSortable"` column, employing it in one additional location. - Sets the default paging size to 50 (most common). - Sets the default type to `"string"` of client-side datatables, which indicates: do not transform content when searching/ordering. Also prevents unexpected styles from being applied because of 'automagically' detected content types.
comic · Dec 17, 2024 · 1739b40 · 1739b40
1 parent 9ce088a
commit 1739b40
Show file tree

Hide file tree

Showing 29 changed files with 109 additions and 136 deletions.
diff --git a/app/grandchallenge/admins/templates/admins/admins_list.html b/app/grandchallenge/admins/templates/admins/admins_list.html
@@ -29,7 +29,7 @@ <h2>Admins for {{ challenge.short_name }}</h2>
 {% endblock %}
 
 {% block tableExtraHeaders %}
-    <th>Remove</th>
+    <th class="nonSortable">Remove</th>
 {% endblock tableExtraHeaders %}
 
 {% block tableExtraBody %}

diff --git a/app/grandchallenge/algorithms/templates/algorithms/algorithmpermissionrequest_list.html b/app/grandchallenge/algorithms/templates/algorithms/algorithmpermissionrequest_list.html
@@ -36,7 +36,7 @@ <h2>Permission Requests for {{ algorithm.title }}</h2>
                 <th>Department</th>
                 <th>Location</th>
                 <th>Website</th>
-                <th>Status</th>
+                <th class="nonSortable">Status</th>
             </tr>
             </thead>
             <tbody>

diff --git a/app/grandchallenge/archives/templates/archives/archivepermissionrequest_list.html b/app/grandchallenge/archives/templates/archives/archivepermissionrequest_list.html
@@ -35,7 +35,7 @@ <h2>Permission Requests for {{ archive.title }}</h2>
                 <th>Department</th>
                 <th>Location</th>
                 <th>Website</th>
-                <th>Status</th>
+                <th class="nonSortable">Status</th>
             </tr>
             </thead>
             <tbody>

diff --git a/app/grandchallenge/challenges/static/js/challenges/challenge_costs_overview.mjs b/app/grandchallenge/challenges/static/js/challenges/challenge_costs_overview.mjs
@@ -1,14 +1,10 @@
 document.addEventListener("DOMContentLoaded", event => {
     $("#challengeCostsOverviewTable").DataTable({
-        order: [[2, "desc"]],
+        order: [
+            [2, "desc"],
+            [3, "desc"],
+        ],
         lengthChange: false,
         pageLength: 100,
-        columnDefs: [
-            {
-                targets: "datatables-non-sortable",
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });
diff --git a/app/grandchallenge/challenges/static/js/challenges/challengerequest_list_table.mjs b/app/grandchallenge/challenges/static/js/challenges/challengerequest_list_table.mjs
@@ -2,13 +2,5 @@ document.addEventListener("DOMContentLoaded", event => {
     $("#challengeRequestsTable").DataTable({
         order: [[3, "desc"]],
         lengthChange: false,
-        pageLength: 50,
-        columnDefs: [
-            {
-                targets: "datatables-non-sortable",
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });
diff --git a/app/grandchallenge/challenges/templates/challenges/challengerequest_list.html b/app/grandchallenge/challenges/templates/challenges/challengerequest_list.html
@@ -22,7 +22,7 @@ <h2>{% if not perms.challenges.change_challengerequest %}Your{% endif %} Challen
         <table class="table table-hover table-borderless table-sm w-100" id="challengeRequestsTable">
             <thead class="thead-light">
             <tr>
-                <th class="datatables-non-sortable"></th>
+                <th class="nonSortable"></th>
                 <th class="text-center">Acronym</th>
                 <th class="text-center">Creator</th>
                 <th class="text-center">Planned start date</th>

diff --git a/app/grandchallenge/challenges/views.py b/app/grandchallenge/challenges/views.py
@@ -268,9 +268,6 @@ def get_queryset(self):
             .with_available_compute()
             .with_most_recent_submission_datetime()
             .prefetch_related("phase_set")
-            .order_by(
-                F("most_recent_submission_datetime").desc(nulls_last=True)
-            )
         )
 
 

diff --git a/app/grandchallenge/core/static/css/base.scss b/app/grandchallenge/core/static/css/base.scss
@@ -18,6 +18,7 @@ $pagination-disabled-bg: lighten($blue, 15%) !default;
 @import "../vendored/bootswatch/dist/flatly/variables";
 @import "../vendored/bootstrap/scss/bootstrap";
 @import "../vendored/bootswatch/dist/flatly/bootswatch";
+@import "datatables";
 
 // Fix https://github.com/comic/grand-challenge.org/issues/1201
 .custom-select {

diff --git a/app/grandchallenge/core/static/css/datatables.scss b/app/grandchallenge/core/static/css/datatables.scss
@@ -0,0 +1,25 @@
+
+.dt-layout-start,
+.dt-layout-end {
+    padding-top: $spacer * 0.5;
+    padding-bottom: $spacer * 0.5;
+}
+
+.dt-container ul.pagination {
+    justify-content: right;
+}
+
+.dt-layout-full,
+.dt-layout-start,
+.dt-layout-end {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.dt-scroll-body {
+    border-bottom: none !important;
+}
+
+.dt-orderable-none .dt-column-order {
+    display: none;
+}
diff --git a/app/grandchallenge/core/static/js/datatables.defaults.mjs b/app/grandchallenge/core/static/js/datatables.defaults.mjs
@@ -1,12 +1,37 @@
 $.extend($.fn.dataTable.defaults, {
     scrollX: true,
+    lengthChange: false,
     language: {
         paginate: {
             next: "Next",
             previous: "Previous",
         },
     },
     pagingType: "simple_numbers",
+    columnDefs: [
+        {
+            // Prevents unexpected styling for dt-*-type datatypes
+            // Only applies to client-side tables
+            type: "string",
+            targets: "_all",
+        },
+        {
+            targets: "nonSortable",
+            searchable: false,
+            orderable: false,
+        },
+    ],
+    drawCallback: function () {
+        const api = this.api();
+        api.columns().every(function () {
+            if (this.orderable) {
+                this.header().setAttribute(
+                    "title",
+                    "Activate to sort. Hold Shift to sort by multiple columns.",
+                );
+            }
+        });
+    },
 });
 
 $(document).on("init.dt", () => {

diff --git a/app/grandchallenge/core/static/js/permission_request_display_table.mjs b/app/grandchallenge/core/static/js/permission_request_display_table.mjs
@@ -5,12 +5,5 @@ $(document).ready(() => {
             [0, "desc"],
         ],
         pageLength: 25,
-        columnDefs: [
-            {
-                targets: [-1],
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });
diff --git a/app/grandchallenge/core/static/js/sort_tables.js b/app/grandchallenge/core/static/js/sort_tables.js
@@ -1,11 +1,8 @@
 $(document).ready(() => {
     $("table.sortable").dataTable({
-        bJQueryUI: false,
-        sPaginationType: "full_numbers",
-        bPaginate: false,
-        bLengthChange: false,
-        bFilter: false,
-        bInfo: false,
-        bAutoWidth: false,
+        paginate: false,
+        lengthChange: false,
+        filter: false,
+        info: false,
     });
 });
diff --git a/app/grandchallenge/datatables/static/js/datatables/list.mjs b/app/grandchallenge/datatables/static/js/datatables/list.mjs
@@ -20,11 +20,7 @@ document.addEventListener("DOMContentLoaded", () => {
         pageLength: 25,
         serverSide: true,
         columnDefs: [
-            {
-                targets: "nonSortable",
-                searchable: false,
-                orderable: false,
-            },
+            ...$.fn.dataTable.defaults.columnDefs,
             {
                 className: `align-middle text-${textAlign}`,
                 targets: "_all",

diff --git a/app/grandchallenge/evaluation/static/js/evaluation/combined_ranks_table.mjs b/app/grandchallenge/evaluation/static/js/evaluation/combined_ranks_table.mjs
@@ -5,6 +5,5 @@ document.addEventListener("DOMContentLoaded", event => {
             [2, "asc"],
         ],
         lengthChange: false,
-        pageLength: 50,
     });
 });
diff --git a/app/grandchallenge/evaluation/static/js/evaluation/groundtruths_table.mjs b/app/grandchallenge/evaluation/static/js/evaluation/groundtruths_table.mjs
@@ -1,11 +1,3 @@
 $(document).ready(() => {
-    $("#groundtruthsTable").DataTable({
-        columnDefs: [
-            {
-                targets: "nonSortable",
-                searchable: false,
-                orderable: false,
-            },
-        ],
-    });
+    $("#groundtruthsTable").DataTable();
 });
diff --git a/app/grandchallenge/evaluation/static/js/evaluation/leaderboard.mjs b/app/grandchallenge/evaluation/static/js/evaluation/leaderboard.mjs
@@ -14,7 +14,6 @@ $(document).ready(() => {
         // The column index of the default sort, must match the table set up.
         order: [[0, "asc"]],
         lengthChange: false,
-        pageLength: 50,
         serverSide: true,
         ajax: {
             url: ".",
@@ -24,11 +23,7 @@ $(document).ready(() => {
             },
         },
         columnDefs: [
-            {
-                targets: "nonSortable",
-                searchable: false,
-                orderable: false,
-            },
+            ...$.fn.dataTable.defaults.columnDefs,
             {
                 targets: "toggleable",
                 visible: false,
@@ -37,7 +32,7 @@ $(document).ready(() => {
         ],
         ordering: true,
         autoWidth: false,
-        dom: getDataTablesDOMTemplate(),
+        layout: getDatatableLayout(),
         buttons: getDataTablesButtons(),
     });
 
@@ -61,31 +56,39 @@ $(document).ready(() => {
             }
         });
     }
-
-    if (displayLeaderboardDateButton === true) {
-        document.getElementById("compare-buttons-group").innerHTML += `
-            <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#leaderboardDateModal"
-                    title="Leaderboard history">
-                <i class="fas fa-history"></i>
-            </button>
-        `;
-    }
 });
 
-function getDataTablesDOMTemplate() {
-    let DOM = "<'row'<'col-12'f>>";
+function getDatatableLayout() {
+    const dateButton = $(`
+        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#leaderboardDateModal"
+                title="Leaderboard history">
+            <i class="fas fa-history"></i>
+        </button>
+    `);
 
-    if (
-        allowMetricsToggling === true ||
-        displayLeaderboardDateButton === true
-    ) {
-        DOM +=
-            "<'row'<'#compare-buttons-group.col-md-6'><'col px-0 text-right'B>>";
+    if (displayLeaderboardDateButton) {
+        if (!allowMetricsToggling) {
+            return {
+                topEnd: "search",
+                topStart: dateButton,
+            };
+        }
+        return {
+            top1End: "search",
+            topStart: dateButton,
+            topEnd: "buttons",
+        };
     }
 
-    DOM +=
-        "<'row'<'col-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>";
-    return DOM;
+    if (!allowMetricsToggling) {
+        return {
+            topEnd: "search",
+        };
+    }
+    return {
+        top1End: "search",
+        topEnd: "buttons",
+    };
 }
 
 function getDataTablesButtons() {

diff --git a/app/grandchallenge/evaluation/static/js/evaluation/methods_table.js b/app/grandchallenge/evaluation/static/js/evaluation/methods_table.js
@@ -1,11 +1,3 @@
 $(document).ready(() => {
-    $("#methodsTable").DataTable({
-        columnDefs: [
-            {
-                targets: "nonSortable",
-                searchable: false,
-                orderable: false,
-            },
-        ],
-    });
+    $("#methodsTable").DataTable();
 });
diff --git a/app/grandchallenge/evaluation/static/js/evaluation/phase_costs_overview.mjs b/app/grandchallenge/evaluation/static/js/evaluation/phase_costs_overview.mjs
@@ -3,12 +3,5 @@ document.addEventListener("DOMContentLoaded", event => {
         order: [[0, "asc"]],
         lengthChange: false,
         pageLength: 100,
-        columnDefs: [
-            {
-                targets: "datatables-non-sortable",
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });
diff --git a/app/grandchallenge/pages/static/pages/js/page_list.mjs b/app/grandchallenge/pages/static/pages/js/page_list.mjs
@@ -1,12 +1,5 @@
 $(document).ready(() => {
     $("#pagesTable").DataTable({
         pageLength: 10,
-        columnDefs: [
-            {
-                targets: [4, 5],
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });
diff --git a/app/grandchallenge/pages/templates/pages/page_list.html b/app/grandchallenge/pages/templates/pages/page_list.html
@@ -36,8 +36,8 @@ <h2>Pages for {{ challenge.short_name }}</h2>
                 <th>Title (in URL)</th>
                 <th>Display Title</th>
                 <th>Visible to</th>
-                <th>Edit</th>
-                <th>Delete</th>
+                <th class="nonSortable">Edit</th>
+                <th class="nonSortable">Delete</th>
             </tr>
             </thead>
             <tbody>

diff --git a/app/grandchallenge/participants/static/participants/js/registrationquestion_list.mjs b/app/grandchallenge/participants/static/participants/js/registrationquestion_list.mjs
@@ -2,12 +2,5 @@ $(document).ready(() => {
     $("#registrationQuestionsTable").DataTable({
         order: [[0, "asc"]],
         pageLength: 10,
-        columnDefs: [
-            {
-                targets: [3, 4],
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });
diff --git a/app/grandchallenge/participants/static/participants/js/registrationrequest_list.mjs b/app/grandchallenge/participants/static/participants/js/registrationrequest_list.mjs
@@ -2,12 +2,5 @@ $(document).ready(() => {
     $("#participantsTable").DataTable({
         order: [[0, "desc"]],
         pageLength: 10,
-        columnDefs: [
-            {
-                targets: [-1],
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });
diff --git a/app/grandchallenge/participants/static/participants/js/user_list.mjs b/app/grandchallenge/participants/static/participants/js/user_list.mjs
@@ -1,12 +1,5 @@
 $(document).ready(() => {
     $("#usersTable").DataTable({
         pageLength: 10,
-        columnDefs: [
-            {
-                targets: [-1],
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });