Selection table: fix sorting of color table

This was likely broken when introducing new visibility columns. Also,
the sorting column selection has been made more robust by using column
names rather than index values.

Fixes #2283

Author: tomka

django/applications/catmaid/static/js/widgets/selection-table.js

@@ -1321,20 +1321,23 @@
       orderCellsTop: true,
       columns: [
         {
+          "name": "index",
           "type": "text",
           "visible": false,
           "render": function(data, type, row, meta) {
             return row.index + '';
           }
         },
         {
+          "name": "remove",
           "orderable": false,
           "className": "dt-center cm-center",
           "render": function(data, type, row, meta) {
             return '<i class="fa fa-remove fa-fw clickable action-remove" alt="Remove" title="Remove"></i>';
           }
         },
         {
+          "name": "name",
           "type": "text",
           "render": {
             "display": (data, type, row, meta) => {
@@ -1349,59 +1352,68 @@
           }
         },
         {
+          "name": "review",
           "type": "text",
           "render": function(data, type, row, meta) {
             return row.reviewPercentage + "%";
           }
         },
         {
+          "name": "selected",
           "render": function(data, type, row, meta) {
             return createCheckbox('selected', row.skeleton);
           }
         },
         {
+          "name": "pre_visible",
           "orderable": false,
           "visible": this.showVisibilityControls,
           "render": function(data, type, row, meta) {
             return createCheckbox('pre_visible', row.skeleton);
           }
         },
         {
+          "name": "post_visible",
           "orderable": false,
           "visible": this.showVisibilityControls,
           "render": function(data, type, row, meta) {
             return createCheckbox('post_visible', row.skeleton);
           }
         },
         {
+          "name": "desmo_visible",
           "orderable": false,
           "visible": this.showVisibilityControls,
           "render": function(data, type, row, meta) {
             return createCheckbox('desmosome_visible', row.skeleton);
           }
         },
         {
+          "name": "mito_visible",
           "orderable": false,
           "visible": this.showVisibilityControls,
           "render": function(data, type, row, meta) {
             return createCheckbox('mitochondrion_visible', row.skeleton);
           }
         },
         {
+          "name": "text_visible",
           "orderable": false,
           "visible": this.showVisibilityControls,
           "render": function(data, type, row, meta) {
             return createCheckbox('text_visible', row.skeleton);
           }
         },
         {
+          "name": "meta_visible",
           "orderable": false,
           "visible": this.showVisibilityControls,
           "render": function(data, type, row, meta) {
             return createCheckbox('meta_visible', row.skeleton);
           }
         },
         {
+          "name": "color",
           "type": "hslcolor",
           "className": "dt-center cm-center",
           "render": {
@@ -1418,6 +1430,7 @@
           }
         },
         {
+          "name": "actions",
           "orderable": false,
           "render": function(data, type, row, meta) {
             return '<i class="fa fa-tag fa-fw clickable action-annotate" ' +
@@ -1635,17 +1648,18 @@
    * Re-apply current order to skeleton list.
    */
   SelectionTable.prototype.reapplyOrder = function() {
-    var col = this.order[0][0];
+    const columnIndex = this.order[0][0];
+    const column = this.gui.datatable.settings().init().columns[columnIndex].name;
     var desc = 'desc' === this.order[0][1];
 
     // Use only first level sort
-    if (2 === col) { // Name
+    if ('name' === column) {
       this.sortByName(desc);
-    } else if (3 === col) { // Review
+    } else if ('review' === column) {
       this.sortByReview(desc);
-    } else if (4 === col) { // Selected
+    } else if ('selected' === column) {
       this.sortBySelected(desc);
-    } else if (10 === col) { // Color
+    } else if ('color' === column) {
       this.sortByColor(desc);
     }
   };