Implement column sorting in the generic TreeView.

It's not used by any TreeView users yet.

The next commit will use it for the marker table.
The intention is to also use it for the function list.

Author: mstange

src/components/marker-table/index.tsx

@@ -6,7 +6,7 @@ import { PureComponent } from 'react';
 import memoize from 'memoize-immutable';
 
 import explicitConnect from '../../utils/connect';
-import { TreeView } from '../shared/TreeView';
+import { type SortableColumn, type Tree, TreeView } from '../shared/TreeView';
 import { MarkerTableEmptyReasons } from './MarkerTableEmptyReasons';
 import {
   getZeroAt,
@@ -50,7 +50,7 @@ type MarkerDisplayData = {
   details: string;
 };
 
-class MarkerTree {
+class MarkerTree implements Tree<MarkerDisplayData> {
   _getMarker: (param: MarkerIndex) => Marker;
   _markerIndexes: MarkerIndex[];
   _zeroAt: Milliseconds;
@@ -73,6 +73,10 @@ class MarkerTree {
     this._getMarkerLabel = getMarkerLabel;
   }
 
+  getSortableColumns(): SortableColumn[] {
+    return [];
+  }
+
   copyTable = (
     format: 'plain' | 'markdown',
     onExceeedMaxCopyRows: (rows: number, maxRows: number) => void
@@ -180,7 +184,7 @@ class MarkerTree {
   }
 
   getAllDescendants() {
-    return new Set();
+    return new Set<number>();
   }
 
   getParent(): MarkerIndex {
@@ -366,7 +370,7 @@ class MarkerTableImpl extends PureComponent<Props> {
         ) : (
           <TreeView
             maxNodeDepth={0}
-            tree={tree as any}
+            tree={tree}
             fixedColumns={this._fixedColumns}
             mainColumn={this._mainColumn}
             onSelectionChange={this._onSelectionChange}

src/components/shared/TreeView.css

@@ -112,12 +112,12 @@
 }
 
 .treeViewHeaderColumn {
-  position: relative;
   line-height: 15px;
   white-space: nowrap;
 }
 
 .treeViewHeaderColumn,
+.treeViewSortButton,
 .treeViewRowColumn,
 .treeViewRowScrolledColumns {
   box-sizing: border-box;
@@ -130,6 +130,31 @@
   text-overflow: ellipsis;
 }
 
+.treeViewSortButton {
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+}
+
+.treeViewSortButton:active:hover {
+  background-color: var(--clickable-ghost-active-background-color);
+}
+
+.treeViewSortButton.sortInactive::after {
+  content: ' ▲';
+  opacity: 0;
+}
+
+.treeViewSortButton.sortAscending::after {
+  content: ' ▲';
+}
+
+.treeViewSortButton.sortDescending::after {
+  content: ' ▼';
+}
+
 .treeViewHeaderColumnDivider,
 .treeViewRowColumnDivider {
   display: flex;