Improve sorting

Author: alexanderbock

backend/frontend/src/components/SortableHeader.tsx

@@ -1,17 +1,21 @@
 import { Table } from '@mantine/core';
 
-import { SortColumn } from '../types';
+import { SortColumn, SortDirection } from '../types';
 
 interface Props {
   sortKey: SortColumn;
   label: string;
   onSort: (col: SortColumn) => void;
+  activeColumn?: SortColumn;
+  direction?: SortDirection;
 }
 
-export function SortableHeader({ sortKey, label, onSort }: Props) {
+export function SortableHeader({ sortKey, label, onSort, activeColumn, direction }: Props) {
+  const isActive = activeColumn === sortKey;
+  const indicator = isActive ? (direction === 'asc' ? ' ↑' : ' ↓') : '';
   return (
-    <Table.Th style={{ cursor: 'pointer' }} onClick={() => onSort(sortKey)}>
-      {label}
+    <Table.Th style={{ cursor: 'pointer', whiteSpace: 'nowrap' }} onClick={() => onSort(sortKey)}>
+      {label}{indicator}
     </Table.Th>
   );
 }

backend/frontend/src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
   Anchor,
@@ -17,7 +17,7 @@ import {
 import { SortableHeader } from '../components/SortableHeader';
 import { TestHistory } from '../components/TestHistory';
 import { TestRow } from '../components/TestRow';
-import { SortColumn, TestRecord } from '../types';
+import { SortColumn, SortDirection, TestRecord } from '../types';
 import { sortRecords } from '../utils';
 
 export default function Home() {
@@ -26,6 +26,8 @@ export default function Home() {
   const [selectedHardware, setSelectedHardware] = useState<Set<string>>(new Set());
   const [adminToken, setAdminToken] = useState('');
   const [selectedRecord, setSelectedRecord] = useState<TestRecord | null>(null);
+  const [sortCol, setSortCol] = useState<SortColumn>('pixelError');
+  const [sortDir, setSortDir] = useState<SortDirection>('desc');
 
   useEffect(() => {
     fetch('/api/test-records')
@@ -34,12 +36,13 @@ export default function Home() {
         const hardwares = [...new Set(data.map((r) => r.hardware))].sort();
         setAllHardware(hardwares);
         setSelectedHardware(new Set(hardwares));
-        setRecords(sortRecords(data, 'pixelError'));
+        setRecords(data);
       });
   }, []);
 
   function handleSort(column: SortColumn) {
-    setRecords((prev) => sortRecords(prev, column));
+    setSortDir((prev) => (column === sortCol ? (prev === 'asc' ? 'desc' : 'asc') : 'asc'));
+    setSortCol(column);
   }
 
   function toggleHardware(hw: string) {
@@ -74,7 +77,10 @@ export default function Home() {
     }
   }
 
-  const visibleRecords = records.filter((r) => selectedHardware.has(r.hardware));
+  const visibleRecords = useMemo(
+    () => sortRecords(records, sortCol, sortDir).filter((r) => selectedHardware.has(r.hardware)),
+    [records, sortCol, sortDir, selectedHardware]
+  );
 
   return (
     <Box>
@@ -142,16 +148,18 @@ export default function Home() {
       <Table striped highlightOnHover withColumnBorders stickyHeader>
         <Table.Thead>
           <Table.Tr>
-            <SortableHeader sortKey={'pixelError'} label={'Error'} onSort={handleSort} />
-            <SortableHeader sortKey={'group'} label={'Group'} onSort={handleSort} />
-            <SortableHeader sortKey={'name'} label={'Name'} onSort={handleSort} />
-            <SortableHeader sortKey={'hardware'} label={'Hardware'} onSort={handleSort} />
-            <SortableHeader sortKey={'timing'} label={'Timing'} onSort={handleSort} />
-            <SortableHeader sortKey={'commitHash'} label={'Commit'} onSort={handleSort} />
+            <SortableHeader sortKey={'pixelError'} label={'Error'} onSort={handleSort} activeColumn={sortCol} direction={sortDir} />
+            <SortableHeader sortKey={'group'} label={'Group'} onSort={handleSort} activeColumn={sortCol} direction={sortDir} />
+            <SortableHeader sortKey={'name'} label={'Name'} onSort={handleSort} activeColumn={sortCol} direction={sortDir} />
+            <SortableHeader sortKey={'hardware'} label={'Hardware'} onSort={handleSort} activeColumn={sortCol} direction={sortDir} />
+            <SortableHeader sortKey={'timing'} label={'Timing'} onSort={handleSort} activeColumn={sortCol} direction={sortDir} />
+            <SortableHeader sortKey={'commitHash'} label={'Commit'} onSort={handleSort} activeColumn={sortCol} direction={sortDir} />
             <SortableHeader
               sortKey={'timeStamp'}
               label={'Timestamp'}
               onSort={handleSort}
+              activeColumn={sortCol}
+              direction={sortDir}
             />
             <Table.Th>Candidate</Table.Th>
             <Table.Th>Reference</Table.Th>

backend/frontend/src/types.ts

@@ -21,3 +21,5 @@ export type SortColumn =
   | 'group'
   | 'name'
   | 'hardware';
+
+export type SortDirection = 'asc' | 'desc';

backend/frontend/src/utils.ts

@@ -1,4 +1,4 @@
-import { SortColumn, TestRecord } from './types';
+import { SortColumn, SortDirection, TestRecord } from './types';
 
 export function diffDisplay(diff: number): string {
   return `${Math.round(diff * 100000) / 1000}%`;
@@ -34,20 +34,22 @@ export function diffStyle(diff: number): { backgroundColor: string; color: strin
   else return { backgroundColor: '#cc0000', color: '#ffffff' };
 }
 
-export function sortRecords(records: TestRecord[], column: SortColumn): TestRecord[] {
+export function sortRecords(
+  records: TestRecord[],
+  column: SortColumn,
+  direction: SortDirection = 'asc'
+): TestRecord[] {
+  const sign = direction === 'asc' ? 1 : -1;
   return [...records].sort((a, b) => {
     if (column === 'group' || column === 'name' || column === 'hardware') {
-      return a[column] > b[column] ? 1 : -1;
+      return (a[column] > b[column] ? 1 : -1) * sign;
     }
     const aData = a.data[a.data.length - 1];
     const bData = b.data[b.data.length - 1];
     if (!aData || !bData) return 0;
     if (column === 'timeStamp') {
-      return new Date(aData.timeStamp) > new Date(bData.timeStamp) ? 1 : -1;
+      return (new Date(aData.timeStamp) > new Date(bData.timeStamp) ? 1 : -1) * sign;
     }
-    if (column === 'pixelError') {
-      return aData.pixelError < bData.pixelError ? 1 : -1;
-    }
-    return aData[column] > bData[column] ? 1 : -1;
+    return (aData[column] > bData[column] ? 1 : -1) * sign;
   });
 }