Improve sorting behavior by adding delay

lib/common/debounce.ts

@@ -0,0 +1,16 @@
+export default function debounce<T>(
+  func: (args: T[]) => void,
+  timeout: number
+): (arg: T) => void {
+  let timer: ReturnType<typeof setTimeout>;
+  let args: T[] = [];
+  return (arg: T) => {
+    args.push(arg);
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      const argscopy = args;
+      args = [];
+      func(argscopy);
+    }, timeout);
+  };
+}

ui/devices-page.ts

@@ -268,18 +268,14 @@ export const component: ClosureComponent = (): Component => {
       }
 
       function onSortChange(sortedAttrs): void {
-        let _sort = Object.assign({}, sort);
+        const _sort = {};
-        for (const [index, direction] of Object.entries(sortedAttrs)) {
+        for (const index of sortedAttrs) {
-          const param = memoizedGetSortable(attributes[index].parameter);
+          const param = memoizedGetSortable(
-          if (param) {
+            attributes[Math.abs(index) - 1].parameter
-            // Changing the priority of columns
+          );
-            delete _sort[param];
+          _sort[param] = Math.sign(index);
-            if (direction) _sort = Object.assign({ [param]: direction }, _sort);
         }
-        }
+        const ops = { sort: JSON.stringify(_sort) };
-
-        const ops = {};
-        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/devices", ops);
       }

ui/faults-page.ts

@@ -107,16 +107,10 @@ export const component: ClosureComponent = (): Component => {
       }
 
       function onSortChange(sortAttrs): void {
-        let _sort = Object.assign({}, sort);
+        const _sort = {};
-        for (const [index, direction] of Object.entries(sortAttrs)) {
+        for (const index of sortAttrs)
-          // Changing the priority of columns
+          _sort[attributes[Math.abs(index) - 1].id] = Math.sign(index);
-          delete _sort[attributes[index].id];
+        const ops = { sort: JSON.stringify(_sort) };
-          if (direction)
-            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
-        }
-
-        const ops = {};
-        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/faults", ops);
       }

ui/files-page.ts

@@ -151,16 +151,10 @@ export const component: ClosureComponent = (): Component => {
         sortAttributes[i] = sort[attributes[i].id] || 0;
 
       function onSortChange(sortAttrs): void {
-        let _sort = Object.assign({}, sort);
+        const _sort = {};
-        for (const [index, direction] of Object.entries(sortAttrs)) {
+        for (const index of sortAttrs)
-          // Changing the priority of columns
+          _sort[attributes[Math.abs(index) - 1].id] = Math.sign(index);
-          delete _sort[attributes[index].id];
+        const ops = { sort: JSON.stringify(_sort) };
-          if (direction)
-            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
-        }
-
-        const ops = {};
-        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/admin/files", ops);
       }

ui/index-table-component.ts

@@ -20,6 +20,7 @@
 import { ClosureComponent, Component, Children } from "mithril";
 import { m } from "./components";
 import { getIcon } from "./icons";
+import debounce from "../lib/common/debounce";
 
 interface Attribute {
   id?: string;
@@ -36,7 +37,7 @@ function renderTable(
   showMoreCallback: () => void,
   selected: Set<string>,
   sortAttributes: Record<string, any>,
-  onSortChange: (obj: Record<string, number>) => void,
+  onSort: (i: number) => void,
   downloadUrl?: string,
   valueCallback?: (attr: Attribute, record: Record<string, any>) => Children,
   actionsCallback?: Children | ((sel: Set<string>) => Children),
@@ -86,9 +87,9 @@ function renderTable(
     const sortable = m(
       "button",
       {
-        onclick: () => {
+        onclick: (e) => {
-          const direction = ((sortAttributes[i] + 2) % 3) - 1;
+          e.redraw = false;
-          return onSortChange({ [i]: direction });
+          onSort(i);
         },
       },
       symbol
@@ -213,7 +214,10 @@ function renderTable(
 
 const component: ClosureComponent = (): Component => {
   let selected = new Set<string>();
-
+  let sortingfunction: (events: number[]) => void;
+  const onSort = debounce((events: number[]) => {
+    sortingfunction(events);
+  }, 500);
   return {
     view: (vnode) => {
       const attributes = vnode.attrs["attributes"];
@@ -232,6 +236,20 @@ const component: ClosureComponent = (): Component => {
         const id = record["_id"] || record["DeviceID.ID"].value[0];
         if (selected.has(id)) _selected.add(id);
       }
+
+      sortingfunction = (events) => {
+        const sortArray = new Set(
+          Object.keys(sortAttributes)
+            .map((x) => (parseInt(x) + 1) * sortAttributes[x])
+            .filter((x) => x)
+        );
+        for (const num of events) {
+          if (sortArray.delete(num + 1)) sortArray.add(-(num + 1));
+          else if (!sortArray.delete((num + 1) * -1)) sortArray.add(num + 1);
+        }
+        onSortChange(Array.from(sortArray).reverse());
+      };
+
       selected = _selected;
 
       return renderTable(
@@ -241,7 +259,7 @@ const component: ClosureComponent = (): Component => {
         showMoreCallback,
         selected,
         sortAttributes,
-        onSortChange,
+        onSort,
         downloadUrl,
         valueCallback,
         actionsCallback,

ui/permissions-page.ts

@@ -205,16 +205,10 @@ export const component: ClosureComponent = (): Component => {
       }
 
       function onSortChange(sortAttrs): void {
-        let _sort = Object.assign({}, sort);
+        const _sort = {};
-        for (const [index, direction] of Object.entries(sortAttrs)) {
+        for (const index of sortAttrs)
-          // Changing the priority of columns
+          _sort[attributes[Math.abs(index) - 1].id] = Math.sign(index);
-          delete _sort[attributes[index].id];
+        const ops = { sort: JSON.stringify(_sort) };
-          if (direction)
-            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
-        }
-
-        const ops = {};
-        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/admin/permissions", ops);
       }

ui/presets-page.ts

@@ -190,16 +190,10 @@ export const component: ClosureComponent = (): Component => {
       }
 
       function onSortChange(sortAttrs): void {
-        let _sort = Object.assign({}, sort);
+        const _sort = {};
-        for (const [index, direction] of Object.entries(sortAttrs)) {
+        for (const index of sortAttrs)
-          // Changing the priority of columns
+          _sort[attributes[Math.abs(index) - 1].id] = Math.sign(index);
-          delete _sort[attributes[index].id];
+        const ops = { sort: JSON.stringify(_sort) };
-          if (direction)
-            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
-        }
-
-        const ops = {};
-        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/admin/presets", ops);
       }

ui/provisions-page.ts

@@ -173,16 +173,10 @@ export const component: ClosureComponent = (): Component => {
         sortAttributes[i] = sort[attributes[i].id] || 0;
 
       function onSortChange(sortAttrs): void {
-        let _sort = Object.assign({}, sort);
+        const _sort = {};
-        for (const [index, direction] of Object.entries(sortAttrs)) {
+        for (const index of sortAttrs)
-          // Changing the priority of columns
+          _sort[attributes[Math.abs(index) - 1].id] = Math.sign(index);
-          delete _sort[attributes[index].id];
+        const ops = { sort: JSON.stringify(_sort) };
-          if (direction)
-            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
-        }
-
-        const ops = {};
-        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/admin/provisions", ops);
       }

ui/users-page.ts

@@ -186,16 +186,10 @@ export const component: ClosureComponent = (): Component => {
       }
 
       function onSortChange(sortAttrs): void {
-        let _sort = Object.assign({}, sort);
+        const _sort = {};
-        for (const [index, direction] of Object.entries(sortAttrs)) {
+        for (const index of sortAttrs)
-          // Changing the priority of columns
+          _sort[attributes[Math.abs(index) - 1].id] = Math.sign(index);
-          delete _sort[attributes[index].id];
+        const ops = { sort: JSON.stringify(_sort) };
-          if (direction)
-            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
-        }
-
-        const ops = {};
-        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/admin/users", ops);
       }

ui/virtual-parameters-page.ts

@@ -173,16 +173,10 @@ export const component: ClosureComponent = (): Component => {
         sortAttributes[i] = sort[attributes[i].id] || 0;
 
       function onSortChange(sortAttrs): void {
-        let _sort = Object.assign({}, sort);
+        const _sort = {};
-        for (const [index, direction] of Object.entries(sortAttrs)) {
+        for (const index of sortAttrs)
-          // Changing the priority of columns
+          _sort[attributes[Math.abs(index) - 1].id] = Math.sign(index);
-          delete _sort[attributes[index].id];
+        const ops = { sort: JSON.stringify(_sort) };
-          if (direction)
-            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
-        }
-
-        const ops = {};
-        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/admin/virtualParameters", ops);
       }