The hunt method tables can be sorted again. There's no visual feedback in the table headers though.

src/core/gui/Table.ts

@@ -12,12 +12,14 @@ import Logger = require("js-logger");
 const logger = Logger.get("core/gui/Table");
 
 export type Column<T> = {
+    key?: string;
     title: string;
     fixed?: boolean;
     width: number;
     input?: boolean;
     text_align?: string;
     tooltip?: (value: T) => string;
+    sortable?: boolean;
     render_cell(value: T, disposer: Disposer): string | HTMLElement;
     footer?: {
         render_cell(): string;
@@ -25,10 +27,15 @@ export type Column<T> = {
     };
 };
 
+export enum SortDirection {
+    Asc,
+    Desc,
+}
+
 export type TableOptions<T> = WidgetOptions & {
     values: ListProperty<T>;
     columns: Column<T>[];
-    sort?(columns: Column<T>): void;
+    sort?(sort_columns: { column: Column<T>; direction: SortDirection }[]): void;
 };
 
 export class Table<T> extends Widget<HTMLTableElement> {
@@ -44,6 +51,8 @@ export class Table<T> extends Widget<HTMLTableElement> {
         this.values = options.values;
         this.columns = options.columns;
 
+        let sort_columns: { column: Column<T>; direction: SortDirection }[] = [];
+
         const thead_element = el.thead();
         const header_tr_element = el.tr();
 
@@ -51,8 +60,11 @@ export class Table<T> extends Widget<HTMLTableElement> {
         let has_footer = false;
 
         header_tr_element.append(
-            ...this.columns.map(column => {
+            ...this.columns.map((column, index) => {
-                const th = el.th({}, el.span({ text: column.title }));
+                const th = el.th(
+                    { data: { index: index.toString() } },
+                    el.span({ text: column.title }),
+                );
 
                 if (column.fixed) {
                     th.style.position = "sticky";
@@ -70,6 +82,50 @@ export class Table<T> extends Widget<HTMLTableElement> {
             }),
         );
 
+        const sort = options.sort;
+
+        if (sort) {
+            header_tr_element.onmousedown = e => {
+                if (e.target instanceof HTMLElement) {
+                    let element: HTMLElement = e.target;
+
+                    for (let i = 0; i < 5; i++) {
+                        if (element.dataset.index) {
+                            break;
+                        } else if (element.parentElement) {
+                            element = element.parentElement;
+                        } else {
+                            return;
+                        }
+                    }
+
+                    if (!element.dataset.index) return;
+
+                    const index = parseInt(element.dataset.index, 10);
+                    const column = this.columns[index];
+                    if (!column.sortable) return;
+
+                    const existing_index = sort_columns.findIndex(sc => sc.column === column);
+
+                    if (existing_index === 0) {
+                        const sc = sort_columns[0];
+                        sc.direction =
+                            sc.direction === SortDirection.Asc
+                                ? SortDirection.Desc
+                                : SortDirection.Asc;
+                    } else {
+                        if (existing_index !== -1) {
+                            sort_columns.splice(existing_index, 1);
+                        }
+
+                        sort_columns.unshift({ column, direction: SortDirection.Asc });
+                    }
+
+                    sort(sort_columns);
+                }
+            };
+        }
+
         thead_element.append(header_tr_element);
         this.tbody_element = el.tbody();
         this.element.append(thead_element, this.tbody_element);

src/core/gui/dom.ts

@@ -3,50 +3,30 @@ import { Observable } from "../observable/Observable";
 import { is_property } from "../observable/property/Property";
 import { SectionId } from "../model";
 
+type ElementAttributes = {
+    class?: string;
+    tab_index?: number;
+    text?: string;
+    title?: string;
+    data?: { [key: string]: string };
+};
+
 export const el = {
-    div: (
+    div: (attributes?: ElementAttributes, ...children: HTMLElement[]): HTMLDivElement =>
-        attributes?: {
+        create_element("div", attributes, ...children),
-            class?: string;
-            tab_index?: number;
-            text?: string;
-            data?: { [key: string]: string };
-        },
-        ...children: HTMLElement[]
-    ): HTMLDivElement => create_element("div", attributes, ...children),
 
-    span: (
+    span: (attributes?: ElementAttributes, ...children: HTMLElement[]): HTMLSpanElement =>
-        attributes?: {
+        create_element("span", attributes, ...children),
-            class?: string;
-            tab_index?: number;
-            text?: string;
-            data?: { [key: string]: string };
-        },
-        ...children: HTMLElement[]
-    ): HTMLSpanElement => create_element("span", attributes, ...children),
 
-    h2: (
+    h2: (attributes?: ElementAttributes, ...children: HTMLElement[]): HTMLHeadingElement =>
-        attributes?: {
+        create_element("h2", attributes, ...children),
-            class?: string;
-            tab_index?: number;
-            text?: string;
-            data?: { [key: string]: string };
-        },
-        ...children: HTMLElement[]
-    ): HTMLHeadingElement => create_element("h2", attributes, ...children),
 
-    p: (
+    p: (attributes?: ElementAttributes, ...children: HTMLElement[]): HTMLParagraphElement =>
-        attributes?: {
+        create_element("p", attributes, ...children),
-            class?: string;
-            text?: string;
-        },
-        ...children: HTMLElement[]
-    ): HTMLParagraphElement => create_element("p", attributes, ...children),
 
     a: (
-        attributes?: {
+        attributes?: ElementAttributes & {
-            class?: string;
             href?: string;
-            title?: string;
         },
         ...children: HTMLElement[]
     ): HTMLAnchorElement => {
@@ -60,47 +40,42 @@ export const el = {
         return element;
     },
 
-    table: (attributes?: {}, ...children: HTMLElement[]): HTMLTableElement =>
+    table: (attributes?: ElementAttributes, ...children: HTMLElement[]): HTMLTableElement =>
         create_element("table", attributes, ...children),
 
-    thead: (attributes?: {}, ...children: HTMLElement[]): HTMLTableSectionElement =>
+    thead: (attributes?: ElementAttributes, ...children: HTMLElement[]): HTMLTableSectionElement =>
         create_element("thead", attributes, ...children),
 
-    tbody: (attributes?: {}, ...children: HTMLElement[]): HTMLTableSectionElement =>
+    tbody: (attributes?: ElementAttributes, ...children: HTMLElement[]): HTMLTableSectionElement =>
         create_element("tbody", attributes, ...children),
 
-    tfoot: (attributes?: {}, ...children: HTMLElement[]): HTMLTableSectionElement =>
+    tfoot: (attributes?: ElementAttributes, ...children: HTMLElement[]): HTMLTableSectionElement =>
         create_element("tfoot", attributes, ...children),
 
-    tr: (attributes?: {}, ...children: HTMLElement[]): HTMLTableRowElement =>
+    tr: (attributes?: ElementAttributes, ...children: HTMLElement[]): HTMLTableRowElement =>
         create_element("tr", attributes, ...children),
 
     th: (
-        attributes?: { class?: string; text?: string; col_span?: number },
+        attributes?: ElementAttributes & { col_span?: number },
         ...children: HTMLElement[]
     ): HTMLTableHeaderCellElement => create_element("th", attributes, ...children),
 
     td: (
-        attributes?: { text?: string; col_span?: number },
+        attributes?: ElementAttributes & { col_span?: number },
         ...children: HTMLElement[]
     ): HTMLTableCellElement => create_element("td", attributes, ...children),
 
-    button: (attributes?: {}, ...children: HTMLElement[]): HTMLButtonElement =>
+    button: (attributes?: ElementAttributes, ...children: HTMLElement[]): HTMLButtonElement =>
         create_element("button", attributes, ...children),
 
-    textarea: (attributes?: {}, ...children: HTMLElement[]): HTMLTextAreaElement =>
+    textarea: (attributes?: ElementAttributes, ...children: HTMLElement[]): HTMLTextAreaElement =>
         create_element("textarea", attributes, ...children),
 };
 
 export function create_element<T extends HTMLElement>(
     tag_name: string,
-    attributes?: {
+    attributes?: ElementAttributes & {
-        class?: string;
-        tab_index?: number;
-        text?: string;
-        title?: string;
         href?: string;
-        data?: { [key: string]: string };
         col_span?: number;
     },
     ...children: HTMLElement[]

src/core/observable/property/list/SimpleListProperty.ts

@@ -194,6 +194,17 @@ export class SimpleListProperty<T> extends AbstractProperty<T[]>
         return removed;
     }
 
+    sort(compare: (a: T, b: T) => number): void {
+        this.values.sort(compare);
+
+        this.finalize_update({
+            type: ListChangeType.ListChange,
+            index: 0,
+            removed: this.values,
+            inserted: this.values,
+        });
+    }
+
     /**
      * Does the following in the given order:
      * - Updates value observers

src/core/observable/property/list/WritableListProperty.ts

@@ -14,4 +14,6 @@ export interface WritableListProperty<T> extends ListProperty<T>, WritableProper
     remove(...values: T[]): void;
 
     clear(): void;
+
+    sort(compare: (a: T, b: T) => number): void;
 }

src/hunt_optimizer/gui/MethodsForEpisodeView.ts

@@ -12,7 +12,7 @@ import "./MethodsForEpisodeView.css";
 import { Disposer } from "../../core/observable/Disposer";
 import { DurationInput } from "../../core/gui/DurationInput";
 import { Disposable } from "../../core/observable/Disposable";
-import { Table } from "../../core/gui/Table";
+import { SortDirection, Table } from "../../core/gui/Table";
 import { list_property } from "../../core/observable";
 
 export class MethodsForEpisodeView extends ResizableWidget {
@@ -33,20 +33,59 @@ export class MethodsForEpisodeView extends ResizableWidget {
             new Table({
                 class: "hunt_optimizer_MethodsForEpisodeView_table",
                 values: hunt_methods,
+                sort: sort_columns => {
+                    hunt_methods.sort((a, b) => {
+                        for (const { column, direction } of sort_columns) {
+                            let cmp = 0;
+
+                            switch (column.key) {
+                                case "method":
+                                    cmp = a.name.localeCompare(b.name);
+                                    break;
+
+                                case "time":
+                                    cmp = a.time.val.as("minutes") - b.time.val.as("minutes");
+                                    break;
+
+                                default:
+                                    {
+                                        const type = (NpcType as any)[column.key!];
+
+                                        if (type) {
+                                            cmp =
+                                                (a.enemy_counts.get(type) || 0) -
+                                                (b.enemy_counts.get(type) || 0);
+                                        }
+                                    }
+                                    break;
+                            }
+
+                            if (cmp !== 0) {
+                                return direction === SortDirection.Asc ? cmp : -cmp;
+                            }
+                        }
+
+                        return 0;
+                    });
+                },
                 columns: [
                     {
+                        key: "method",
                         title: "Method",
                         fixed: true,
                         width: 250,
+                        sortable: true,
                         render_cell(method: HuntMethodModel) {
                             return method.name;
                         },
                     },
                     {
+                        key: "time",
                         title: "Time",
                         fixed: true,
                         width: 60,
                         input: true,
+                        sortable: true,
                         render_cell(method: HuntMethodModel, disposer: Disposer) {
                             const time_input = disposer.add(new DurationInput(method.time.val));
 
@@ -61,9 +100,11 @@ export class MethodsForEpisodeView extends ResizableWidget {
                     },
                     ...this.enemy_types.map(enemy_type => {
                         return {
+                            key: NpcType[enemy_type],
                             title: npc_data(enemy_type).simple_name,
                             width: 90,
                             text_align: "right",
+                            sortable: true,
                             render_cell(method: HuntMethodModel) {
                                 const count = method.enemy_counts.get(enemy_type);
                                 return count == undefined ? "" : count.toString();

src/old/hunt_optimizer/ui/MethodsComponent.css

@@ -1,7 +0,0 @@
-.main {
-    flex: 1;
-}
-
-.timepicker :global(.ant-time-picker-icon) {
-    display: none;
-}

src/old/hunt_optimizer/ui/MethodsComponent.tsx

@@ -1,147 +0,0 @@
-import { TimePicker } from "antd";
-import { observer } from "mobx-react";
-import moment, { Moment } from "moment";
-import React, { Component, ReactNode } from "react";
-import { AutoSizer, Index, SortDirection } from "react-virtualized";
-import { hunt_method_store } from "../stores/HuntMethodStore";
-import { BigTable, Column, ColumnSort } from "../../core/ui/BigTable";
-import styles from "./MethodsComponent.css";
-import { Episode } from "../../../core/data_formats/parsing/quest/Episode";
-import {
-    ENEMY_NPC_TYPES,
-    npc_data,
-    NpcType,
-} from "../../../core/data_formats/parsing/quest/npc_types";
-import { HuntMethod } from "../domain";
-
-@observer
-export class MethodsComponent extends Component {
-    static columns: Column<HuntMethod>[] = (() => {
-        // Standard columns.
-        const columns: Column<HuntMethod>[] = [
-            {
-                key: "name",
-                name: "Method",
-                width: 250,
-                cell_renderer: method => method.name,
-                sortable: true,
-            },
-            {
-                key: "episode",
-                name: "Ep.",
-                width: 34,
-                cell_renderer: method => Episode[method.episode],
-                sortable: true,
-            },
-            {
-                key: "time",
-                name: "Time",
-                width: 50,
-                cell_renderer: method => <TimeComponent method={method} />,
-                class_name: "integrated",
-                sortable: true,
-            },
-        ];
-
-        // One column per enemy type.
-        for (const enemy_type of ENEMY_NPC_TYPES) {
-            columns.push({
-                key: NpcType[enemy_type],
-                name: npc_data(enemy_type).name,
-                width: 75,
-                cell_renderer: method => {
-                    const count = method.enemy_counts.get(enemy_type);
-                    return count == null ? "" : count.toString();
-                },
-                class_name: "number",
-                sortable: true,
-            });
-        }
-
-        return columns;
-    })();
-
-    render(): ReactNode {
-        const methods = hunt_method_store.methods.current.value;
-
-        return (
-            <section className={styles.main}>
-                <AutoSizer>
-                    {({ width, height }) => (
-                        <BigTable<HuntMethod>
-                            width={width}
-                            height={height}
-                            row_count={methods.length}
-                            columns={MethodsComponent.columns}
-                            fixed_column_count={3}
-                            record={this.record}
-                            sort={this.sort}
-                            update_trigger={hunt_method_store.methods.current.value}
-                        />
-                    )}
-                </AutoSizer>
-            </section>
-        );
-    }
-
-    private record = ({ index }: Index) => {
-        return hunt_method_store.methods.current.value[index];
-    };
-
-    private sort = (sorts: ColumnSort<HuntMethod>[]) => {
-        const methods = hunt_method_store.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 as any)[column.key];
-
-                    if (type) {
-                        cmp = (a.enemy_counts.get(type) || 0) - (b.enemy_counts.get(type) || 0);
-                    }
-                }
-
-                if (cmp !== 0) {
-                    return direction === SortDirection.ASC ? cmp : -cmp;
-                }
-            }
-
-            return 0;
-        });
-
-        hunt_method_store.methods.current.value = methods;
-    };
-}
-
-@observer
-class TimeComponent extends React.Component<{ method: HuntMethod }> {
-    render(): ReactNode {
-        const time = this.props.method.time;
-        const hour = Math.floor(time);
-        const minute = Math.round(60 * (time - hour));
-
-        return (
-            <TimePicker
-                className={styles.timepicker}
-                value={moment({ hour, minute })}
-                format="HH:mm"
-                size="small"
-                allowClear={false}
-                suffixIcon={<span />}
-                onChange={this.change}
-            />
-        );
-    }
-
-    private change = (time: Moment) => {
-        this.props.method.user_time = time.hour() + time.minute() / 60;
-    };
-}