Column sorting

Author: mstange

src/components/calltree/CallTree.tsx

@@ -4,7 +4,10 @@
 import { 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 {
   getInvertCallstack,
@@ -98,6 +101,7 @@ class CallTreeImpl extends PureComponent<Props> {
   _treeView: TreeView<CallNodeDisplayData> | null = null;
   _takeTreeViewRef = (treeView: TreeView<CallNodeDisplayData> | null) =>
     (this._treeView = treeView);
+  _sortedColumns = new ColumnSortState([{ column: 'total', ascending: false }]);
 
   /**
    * Call Trees can have different types of "weights" for the data. Choose the
@@ -204,6 +208,10 @@ class CallTreeImpl extends PureComponent<Props> {
     handleCallNodeTransformShortcut(event, threadsKey, callNodeInfo, nodeIndex);
   };
 
+  _onSort = (sortedColumns: ColumnSortState) => {
+    this._sortedColumns = sortedColumns;
+  };
+
   _onEnterOrDoubleClick = (nodeId: IndexIntoCallNodeTable) => {
     const { tree, updateBottomBoxContentsAndMaybeOpen } = this.props;
     const bottomBoxInfo = tree.getBottomBoxInfoForCallNode(nodeId);
@@ -308,6 +316,8 @@ class CallTreeImpl extends PureComponent<Props> {
         onDoubleClick={this._onEnterOrDoubleClick}
         viewOptions={tableViewOptions}
         onViewOptionsChange={onTableViewOptionsChange}
+        initialSortedColumns={this._sortedColumns}
+        onColumnSortChange={this._onSort}
       />
     );
   }

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 { TreeView, ColumnSortState } from '../shared/TreeView';
 import { MarkerTableEmptyReasons } from './MarkerTableEmptyReasons';
 import {
   getZeroAt,
@@ -73,6 +73,16 @@ class MarkerTree {
     this._getMarkerLabel = getMarkerLabel;
   }
 
+  static _sortableColumns = [
+    { name: 'start', prefersDescending: false },
+    { name: 'duration', prefersDescending: true },
+    { name: 'name', prefersDescending: false },
+  ];
+
+  getSortableColumns(): any[] {
+    return MarkerTree._sortableColumns;
+  }
+
   copyTable = (
     format: 'plain' | 'markdown',
     onExceeedMaxCopyRows: (rows: number, maxRows: number) => void
@@ -167,12 +177,49 @@ class MarkerTree {
     copy(text);
   };
 
-  getRoots(): MarkerIndex[] {
+  getRoots(sort: ColumnSortState | null = null): MarkerIndex[] {
+    if (sort !== null) {
+      return sort.sortItemsHelper(
+        this._markerIndexes.slice(),
+        (first: MarkerIndex, second: MarkerIndex, column: string) => {
+          const firstValue = this._getSortValueForColumn(first, column);
+          const secondValue = this._getSortValueForColumn(second, column);
+          if (typeof firstValue === 'string') {
+            return firstValue.localeCompare(secondValue as string);
+          }
+          return (secondValue as number) - (firstValue as number);
+        }
+      );
+    }
     return this._markerIndexes;
   }
 
-  getChildren(markerIndex: MarkerIndex): MarkerIndex[] {
-    return markerIndex === -1 ? this.getRoots() : [];
+  _getSortValueForColumn(
+    markerIndex: MarkerIndex,
+    column: string
+  ): string | number {
+    const marker = this._getMarker(markerIndex);
+    switch (column) {
+      case 'start':
+        return marker.start;
+      case 'duration': {
+        if (marker.incomplete || marker.end === null) {
+          return -Infinity;
+        }
+        return marker.end - marker.start;
+      }
+      case 'name':
+        return marker.name;
+      default:
+        throw new Error('Invalid column ' + column);
+    }
+  }
+
+  getChildren(
+    markerIndex: MarkerIndex,
+    sort: ColumnSortState | null = null
+  ): MarkerIndex[] {
+    return markerIndex === -1 ? this.getRoots(sort) : [];
   }
 
   hasChildren(_markerIndex: MarkerIndex): boolean {
@@ -205,10 +252,11 @@ class MarkerTree {
       }
 
       let duration = null;
+      const markerEnd = marker.end;
       if (marker.incomplete) {
         duration = 'unknown';
-      } else if (marker.end !== null) {
-        duration = formatTimestamp(marker.end - marker.start);
+      } else if (markerEnd !== null) {
+        duration = formatTimestamp(markerEnd - marker.start);
       }
 
       displayData = {
@@ -278,6 +326,7 @@ class MarkerTableImpl extends PureComponent<Props> {
   _treeView: TreeView<MarkerDisplayData> | null = null;
   _takeTreeViewRef = (treeView: TreeView<MarkerDisplayData> | null) =>
     (this._treeView = treeView);
+  _sortedColumns = new ColumnSortState([{ column: 'start', ascending: true }]);
 
   getMarkerTree = memoize(
     (
@@ -330,6 +379,10 @@ class MarkerTableImpl extends PureComponent<Props> {
     changeSelectedMarker(threadsKey, selectedMarker, context);
   };
 
+  _onColumnSortChange = (sortedColumns: ColumnSortState) => {
+    this._sortedColumns = sortedColumns;
+  };
+
   _onRightClickSelection = (selectedMarker: MarkerIndex) => {
     const { threadsKey, changeRightClickedMarker } = this.props;
     changeRightClickedMarker(threadsKey, selectedMarker);
@@ -380,6 +433,8 @@ class MarkerTableImpl extends PureComponent<Props> {
             indentWidth={10}
             viewOptions={this.props.tableViewOptions}
             onViewOptionsChange={this.props.onTableViewOptionsChange}
+            initialSortedColumns={this._sortedColumns}
+            onColumnSortChange={this._onColumnSortChange}
           />
         )}
       </div>

src/components/shared/TreeView.css

@@ -123,6 +123,19 @@
   text-overflow: ellipsis;
 }
 
+.treeViewHeaderColumn.sortInactive::after {
+  content: ' ▲';
+  opacity: 0;
+}
+
+.treeViewHeaderColumn.sortDescending::after {
+  content: ' ▲';
+}
+
+.treeViewHeaderColumn.sortAscending::after {
+  content: ' ▼ ';
+}
+
 .treeViewColumnDivider {
   display: flex;
   width: 20px;