Hunt methods are now sortable.

src/Loadable.ts

@@ -58,6 +58,10 @@ export class Loadable<T> {
         return this._value;
     }
 
+    set value(value: T) {
+        this._value = value;
+    }
+
     /**
      * This property returns valid data as soon as possible.
      * If the Loadable is uninitialized a data load will be triggered, otherwise the current value will be returned.

src/stores/HuntMethodStore.ts

@@ -37,6 +37,7 @@ class HuntMethodStore {
             }
 
             // Filter out some quests.
+            /* eslint-disable no-fallthrough */
             switch (quest.id) {
                 // The following quests are left out because their enemies don't drop anything.
                 case 31:   // Black Paper's Dangerous Deal

src/ui/BigTable.less

@@ -29,11 +29,20 @@
 }
 
 .DataTable-header {
+    user-select: none;
     background-color: lighten(@component-background, 12%);
     font-weight: bold;
 
     & .DataTable-cell {
         border-right: solid 1px @border-color-base;
+
+        &.sortable {
+            cursor: pointer;
+        }
+
+        & .DataTable-sort-indictator {
+            fill: currentColor;
+        }
     }
 }
 

src/ui/BigTable.tsx

@@ -1,8 +1,9 @@
 import React, { ReactNode } from "react";
-import { GridCellRenderer, Index, MultiGrid } from "react-virtualized";
+import { GridCellRenderer, Index, MultiGrid, SortDirectionType, SortDirection } from "react-virtualized";
 import "./BigTable.less";
 
 export type Column<T> = {
+    key?: string,
     name: string,
     width: number,
     cellRenderer: (record: T) => ReactNode,
@@ -13,8 +14,11 @@ export type Column<T> = {
      * "number" and "integrated" have special meaning.
      */
     className?: string,
+    sortable?: boolean
 }
 
+export type ColumnSort<T> = { column: Column<T>, direction: SortDirectionType }
+
 /**
  * A table with a fixed header. Optionally has fixed columns and a footer.
  * Uses windowing to support large amounts of rows and columns.
@@ -33,8 +37,11 @@ export class BigTable<T> extends React.Component<{
     /**
      * When this changes, the DataTable will re-render.
      */
-    updateTrigger?: any
+    updateTrigger?: any,
+    sort?: (sortColumns: Array<ColumnSort<T>>) => void
 }> {
+    private sortColumns = new Array<ColumnSort<T>>();
+
     render() {
         return (
             <div
@@ -68,6 +75,7 @@ export class BigTable<T> extends React.Component<{
     private cellRenderer: GridCellRenderer = ({ columnIndex, rowIndex, style }) => {
         const column = this.props.columns[columnIndex];
         let cell: ReactNode;
+        let sortIndicator: ReactNode;
         let title: string | undefined;
         const classes = ['DataTable-cell'];
 
@@ -78,6 +86,30 @@ export class BigTable<T> extends React.Component<{
         if (rowIndex === 0) {
             // Header row
             cell = title = column.name;
+
+            if (column.sortable) {
+                classes.push('sortable');
+
+                const sort = this.sortColumns[0];
+
+                if (sort && sort.column === column) {
+                    if (sort.direction === SortDirection.ASC) {
+                        sortIndicator = (
+                            <svg className="DataTable-sort-indictator" width="18" height="18" viewBox="0 0 24 24">
+                                <path d="M7 14l5-5 5 5z"></path>
+                                <path d="M0 0h24v24H0z" fill="none"></path>
+                            </svg>
+                        );
+                    } else {
+                        sortIndicator = (
+                            <svg className="DataTable-sort-indictator" width="18" height="18" viewBox="0 0 24 24">
+                                <path d="M7 10l5 5 5-5z"></path>
+                                <path d="M0 0h24v24H0z" fill="none"></path>
+                            </svg>
+                        );
+                    }
+                }
+            }
         } else {
             // Record or footer row
             if (column.className) {
@@ -105,17 +137,39 @@ export class BigTable<T> extends React.Component<{
             classes.push('custom');
         }
 
+        const onClick = rowIndex === 0 && column.sortable
+            ? () => this.headerClicked(column)
+            : undefined;
+
         return (
             <div
                 className={classes.join(' ')}
                 key={`${columnIndex}, ${rowIndex}`}
                 style={style}
                 title={title}
+                onClick={onClick}
             >
                 {typeof cell === 'string' ? (
                     <span className="DataTable-cell-text">{cell}</span>
                 ) : cell}
+                {sortIndicator}
             </div>
         );
     }
+
+    private headerClicked = (column: Column<T>) => {
+        const oldIndex = this.sortColumns.findIndex(sc => sc.column === column);
+        let old = oldIndex === -1 ? undefined : this.sortColumns.splice(oldIndex, 1)[0];
+
+        const direction = oldIndex === 0 && old!.direction === SortDirection.ASC
+            ? SortDirection.DESC
+            : SortDirection.ASC
+
+        this.sortColumns.unshift({ column, direction });
+        this.sortColumns.splice(10);
+
+        if (this.props.sort) {
+            this.props.sort(this.sortColumns);
+        }
+    }
 }

src/ui/hunt-optimizer/MethodsComponent.tsx

@@ -2,11 +2,11 @@ import { TimePicker } from "antd";
 import { observer } from "mobx-react";
 import moment, { Moment } from "moment";
 import React from "react";
-import { AutoSizer, Index } from "react-virtualized";
+import { AutoSizer, Index, SortDirection } from "react-virtualized";
 import { Episode, HuntMethod } from "../../domain";
-import { EnemyNpcTypes } from "../../domain/NpcType";
+import { EnemyNpcTypes, NpcType } from "../../domain/NpcType";
 import { huntMethodStore } from "../../stores/HuntMethodStore";
-import { BigTable, Column } from "../BigTable";
+import { BigTable, Column, ColumnSort } from "../BigTable";
 import "./MethodsComponent.css";
 
 @observer
@@ -15,26 +15,33 @@ export class MethodsComponent extends React.Component {
         // Standard columns.
         const columns: Column<HuntMethod>[] = [
             {
+                key: 'name',
                 name: 'Method',
                 width: 250,
                 cellRenderer: (method) => method.name,
+                sortable: true,
             },
             {
+                key: 'episode',
                 name: 'Ep.',
                 width: 34,
                 cellRenderer: (method) => Episode[method.episode],
+                sortable: true,
             },
             {
+                key: 'time',
                 name: 'Time',
                 width: 50,
                 cellRenderer: (method) => <TimeComponent method={method} />,
                 className: 'integrated',
+                sortable: true,
             },
         ];
 
         // One column per enemy type.
         for (const enemy of EnemyNpcTypes) {
             columns.push({
+                key: enemy.code,
                 name: enemy.name,
                 width: 75,
                 cellRenderer: (method) => {
@@ -42,6 +49,7 @@ export class MethodsComponent extends React.Component {
                     return count == null ? '' : count.toString();
                 },
                 className: 'number',
+                sortable: true,
             });
         }
 
@@ -62,6 +70,8 @@ export class MethodsComponent extends React.Component {
                             columns={MethodsComponent.columns}
                             fixedColumnCount={3}
                             record={this.record}
+                            sort={this.sort}
+                            updateTrigger={huntMethodStore.methods.current.value}
                         />
                     )}
                 </AutoSizer>
@@ -72,6 +82,38 @@ export class MethodsComponent extends React.Component {
     private record = ({ index }: Index) => {
         return huntMethodStore.methods.current.value[index];
     }
+
+    private sort = (sorts: ColumnSort<HuntMethod>[]) => {
+        const methods = huntMethodStore.methods.current.value.slice();
+
+        methods.sort((a, b) => {
+            for (const { column, direction } of sorts) {
+                let cmp = 0;
+
+                if (column.key === 'name') {
+                    cmp = a.name.localeCompare(b.name);
+                } else if (column.key === 'episode') {
+                    cmp = a.episode - b.episode;
+                } else if (column.key === 'time') {
+                    cmp = a.time - b.time;
+                } else if (column.key) {
+                    const type = NpcType.byCode(column.key);
+
+                    if (type) {
+                        cmp = (a.enemyCounts.get(type) || 0) - (b.enemyCounts.get(type) || 0);
+                    }
+                }
+
+                if (cmp !== 0) {
+                    return direction === SortDirection.ASC ? cmp : -cmp;
+                }
+            }
+
+            return 0;
+        });
+
+        huntMethodStore.methods.current.value = methods;
+    }
 }
 
 @observer