Add sort buttons (▲/▼) to TreeView columns

src/components/calltree/CallTree.js

@@ -6,7 +6,10 @@
 import React, { PureComponent } from 'react';
 import memoize from 'memoize-immutable';
 import explicitConnect from 'firefox-profiler/utils/connect';
-import { TreeView } from 'firefox-profiler/components/shared/TreeView';
+import {
+  TreeView,
+  ColumnSortState,
+} from 'firefox-profiler/components/shared/TreeView';
 import { CallTreeEmptyReasons } from './CallTreeEmptyReasons';
 import { Icon } from 'firefox-profiler/components/shared/Icon';
 import { getCallNodePathFromIndex } from 'firefox-profiler/profile-logic/profile-data';
@@ -85,6 +88,22 @@ class CallTreeImpl extends PureComponent<Props> {
   };
   _treeView: TreeView<CallNodeDisplayData> | null = null;
   _takeTreeViewRef = (treeView) => (this._treeView = treeView);
+  _sortedColumns = new ColumnSortState([]);
+
+  _compareColumn = (
+    first: CallNodeDisplayData,
+    second: CallNodeDisplayData,
+    column: number
+  ) => {
+    switch (column) {
+      case 2:
+        return second.rawTotal - first.rawTotal;
+      case 3:
+        return second.rawSelf - first.rawSelf;
+      default:
+        throw new Error('Invalid column');
+    }
+  };
 
   /**
    * Call Trees can have different types of "weights" for the data. Choose the
@@ -258,6 +277,10 @@ class CallTreeImpl extends PureComponent<Props> {
     }
   }
 
+  _onSort = (sortedColumns: ColumnSortState) => {
+    this._sortedColumns = sortedColumns;
+  };
+
   render() {
     const {
       tree,
@@ -294,6 +317,10 @@ class CallTreeImpl extends PureComponent<Props> {
         onKeyDown={this._onKeyDown}
         onEnterKey={this._onEnterOrDoubleClick}
         onDoubleClick={this._onEnterOrDoubleClick}
+        initialSortedColumns={this._sortedColumns}
+        onSort={this._onSort}
+        compareColumn={this._compareColumn}
+        sortableColumns={new Set([2, 3])}
       />
     );
   }

src/components/marker-table/index.js

@@ -8,7 +8,7 @@ import React, { PureComponent } from 'react';
 import memoize from 'memoize-immutable';
 
 import explicitConnect from '../../utils/connect';
-import { TreeView } from '../shared/TreeView';
+import { TreeView, ColumnSortState } from '../shared/TreeView';
 import { MarkerTableEmptyReasons } from './MarkerTableEmptyReasons';
 import {
   getZeroAt,
@@ -42,7 +42,9 @@ const MAX_DESCRIPTION_CHARACTERS = 500;
 
 type MarkerDisplayData = {|
   start: string,
+  rawStart: Milliseconds,
   duration: string | null,
+  rawDuration: Milliseconds | null,
   name: string,
   type: string,
 |};
@@ -113,17 +115,22 @@ class MarkerTree {
       }
 
       let duration = null;
+      let rawDuration: number | null = null;
       if (marker.incomplete) {
         duration = 'unknown';
       } else if (marker.end !== null) {
         duration = formatTimestamp(marker.end - marker.start);
+        // $FlowFixMe
+        rawDuration = marker.end - marker.start;
       }
 
       displayData = {
         start: _formatStart(marker.start, this._zeroAt),
         duration,
         name,
         type: getMarkerSchemaName(this._markerSchemaByName, marker),
+        rawDuration: rawDuration,
+        rawStart: marker.start,
       };
       this._displayDataByIndex.set(markerIndex, displayData);
     }
@@ -165,6 +172,7 @@ class MarkerTableImpl extends PureComponent<Props> {
   _onExpandedNodeIdsChange = () => {};
   _treeView: ?TreeView<MarkerDisplayData>;
   _takeTreeViewRef = (treeView) => (this._treeView = treeView);
+  _sortedColumns = new ColumnSortState([]);
 
   getMarkerTree = memoize((...args) => new MarkerTree(...args), { limit: 1 });
 
@@ -200,6 +208,33 @@ class MarkerTableImpl extends PureComponent<Props> {
     changeRightClickedMarker(threadsKey, selectedMarker);
   };
 
+  _compareColumn = (
+    first: MarkerDisplayData,
+    second: MarkerDisplayData,
+    column: number
+  ) => {
+    switch (column) {
+      case 1:
+        return second.rawStart - first.rawStart;
+      case 2:
+        if (first.rawDuration === null) {
+          return -1;
+        }
+        if (second.rawDuration === null) {
+          return 1;
+        }
+        return second.rawDuration - first.rawDuration;
+      case 3:
+        return first.type.localeCompare(second.type);
+      default:
+        throw new Error('Invalid column');
+    }
+  };
+
+  _onSort = (sortedColumns: ColumnSortState) => {
+    this._sortedColumns = sortedColumns;
+  };
+
   render() {
     const {
       getMarker,
@@ -210,7 +245,7 @@ class MarkerTableImpl extends PureComponent<Props> {
       markerSchemaByName,
       getMarkerLabel,
     } = this.props;
-    const tree = this.getMarkerTree(
+    const tree: MarkerTree = this.getMarkerTree(
       getMarker,
       markerIndexes,
       zeroAt,
@@ -243,6 +278,10 @@ class MarkerTableImpl extends PureComponent<Props> {
             contextMenuId="MarkerContextMenu"
             rowHeight={16}
             indentWidth={10}
+            initialSortedColumns={this._sortedColumns}
+            onSort={this._onSort}
+            compareColumn={this._compareColumn}
+            sortableColumns={new Set([1, 2, 3])}
           />
         )}
       </div>

src/components/shared/TreeView.css

@@ -132,6 +132,14 @@
   align-items: center;
 }
 
+.treeViewHeaderColumn.sortAscending::before {
+  content: '▲ ';
+}
+
+.treeViewHeaderColumn.sortDescending::before {
+  content: '▼ ';
+}
+
 .treeViewRowColumn.total,
 .treeViewRowColumn.totalPercent,
 .treeViewRowColumn.self,