Sorting in tabular view

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {

src/static/index.html

@@ -86,7 +86,7 @@
             </label>
         </div>
         <div class="wrapper">
-            <table>
+            <table id="tabular">
                 <thead>
                 <tr>
                     <th data-prop="id">ID</th>

src/static/js/tabular/index.js

@@ -3,16 +3,15 @@ import * as model from "../model";
 import { onSelectionUpdate, updateSelection, getSelection } from "../selection";
 
 let sorting = {
-    enabled: false,
     properties: ["entities", "0", "score"],
     order: 1
 };
 
 let sorter = (a, b) => {
     let i = 0;
     while (i < sorting.properties.length && typeof (a = a[sorting.properties[i]]) !== "undefined"
-    && typeof (b = b[sorting.properties[i]]) !== "undefined") { console.log(i); ++i }
-    return a > b ? -sorting.order : a === b ? 0 : sorting.order;
+    && typeof (b = b[sorting.properties[i]]) !== "undefined") { ++i }
+    return a > b ? sorting.order : a === b ? 0 : -sorting.order;
 };
 
 function updateSelected () {
@@ -38,12 +37,42 @@ function updateOthers () {
 
 }
 
+function updateAll () {
+    updateSelected();
+    updateOthers();
+}
+
 onSelectionUpdate(() => {
     if (!model.uiState.tabularToggled)
         return;
     updateSelected();
 });
 
+/**
+ * @this {HTMLElement} TH
+ */
+function columnClicked () {
+    let attr = this.getAttribute("data-prop"),
+        arr = attr.split(".");
+    if (attr === sorting.properties.join("."))
+        sorting.order = sorting.order === 1 ? -1 : sorting.order === -1 ? 0 : 1;
+    else
+        sorting.order = 1;
+    sorting.properties = arr;
+    updateAll();
+    updateHeaders(attr);
+}
+
+function updateHeaders (dataProp = undefined) {
+    [].slice.call(document.querySelectorAll("#tabular thead th")).forEach((th) => {
+        th.classList.remove("sort-up");
+        th.classList.remove("sort-down");
+        if (th.getAttribute("data-prop") !== dataProp)
+            return;
+        th.classList.toggle(`sort-${ sorting.order === 1 ? "up" : "down" }`, sorting.order !== 0);
+    });
+}
+
 export function init () {
 
     d3.select("#tableToggle")
@@ -61,4 +90,11 @@ export function init () {
         ));
     });
 
+    [].slice.call(document.querySelectorAll("#tabular thead th")).forEach((th) => {
+        if (!th.getAttribute("data-prop")) return;
+        th.addEventListener("click", columnClicked);
+    });
+
+    updateHeaders(sorting.properties.join("."));
+
 }

src/static/scss/tabular.scss

@@ -40,4 +40,16 @@ $headerHeight: 36px;
 
     }
 
+}
+
+#tabular th {
+
+    &.sort-up:after {
+        content: " ▼";
+    }
+
+    &.sort-down:after {
+        content: " ▲";
+    }
+
 }