Added help text to hunt optimizer.

src/ui/hunt-optimizer/WantedItemsComponent.less

@@ -9,3 +9,12 @@
     flex: 1;
     margin: 10px 0 0 -10px;
 }
+
+.ho-WantedItemsComponent-no-rows {
+    padding: 5px 20px;
+    color: @text-color-secondary;
+}
+
+.ho-WantedItemsComponent-help {
+    max-width: 500px;
+}

src/ui/hunt-optimizer/WantedItemsComponent.tsx

@@ -1,20 +1,34 @@
-import { Button, InputNumber, Select } from "antd";
+import { Button, InputNumber, Select, Popover } from "antd";
 import { observer } from "mobx-react";
 import React from "react";
 import { AutoSizer, Column, Table, TableCellRenderer } from "react-virtualized";
 import { huntOptimizerStore, WantedItem } from "../../stores/HuntOptimizerStore";
 import { itemStore } from "../../stores/ItemStore";
-import './WantedItemsComponent.css';
+import './WantedItemsComponent.less';
 
 @observer
 export class WantedItemsComponent extends React.Component {
+    state = {
+        helpVisible: false
+    }
+
     render() {
         // Make sure render is called on updates.
         huntOptimizerStore.wantedItems.slice(0, 0);
 
         return (
             <section className="ho-WantedItemsComponent">
-                <h3>Wanted Items</h3>
+                <h3>
+                    Wanted Items
+                    <Popover
+                        content={<Help />}
+                        trigger="click"
+                        visible={this.state.helpVisible}
+                        onVisibleChange={this.onHelpVisibleChange}
+                    >
+                        <Button icon="info-circle" type="link" />
+                    </Popover>
+                </h3>
                 <div>
                     <Select
                         value={undefined}
@@ -48,6 +62,7 @@ export class WantedItemsComponent extends React.Component {
                                 rowHeight={30}
                                 rowCount={huntOptimizerStore.wantedItems.length}
                                 rowGetter={({ index }) => huntOptimizerStore.wantedItems[index]}
+                                noRowsRenderer={this.noRowsRenderer}
                             >
                                 <Column
                                     label="Amount"
@@ -97,6 +112,39 @@ export class WantedItemsComponent extends React.Component {
     private tableRemoveCellRenderer: TableCellRenderer = ({ rowData }) => {
         return <Button type="link" icon="delete" onClick={this.removeWanted(rowData)} />;
     }
+
+    private noRowsRenderer = () => {
+        return (
+            <div className="ho-WantedItemsComponent-no-rows">
+                <p>
+                    Add some items with the above drop down and click "Optimize" to see the result on the right.
+                </p>
+            </div>
+        );
+    }
+
+    private onHelpVisibleChange = (visible: boolean) => {
+        this.setState({ helpVisible: visible });
+    }
+}
+
+function Help() {
+    return (
+        <div className="ho-WantedItemsComponent-help">
+            <p>
+                Add some items with the drop down and click "Optimize" to see the optimal set of method/difficulty/section ID combinations on the right.
+            </p>
+            <p>
+                At the moment a method is simply a quest run-through. Partial quest run-throughs are coming. View the list of methods on the "Methods" tab. Each method takes a certain amount of time, which affects the optimization result. Make sure the times are correct for you (at the moment times can't be changed, but this feature is coming).
+            </p>
+            <p>
+                Only enemy drops are considered. Box drops are coming.
+            </p>
+            <p>
+                The optimal result is calculated using linear optimization. The optimizer takes rare enemies and the fact that pan arms can be split in two into account.
+            </p>
+        </div>
+    )
 }
 
 @observer