6 files changed, 110 insertions, 5 deletions

diff --git a/app/client/common/augmentationGrid.component.js b/app/client/common/augmentationGrid.component.js
new file mode 100644
index 0000000..af77f6c
--- /dev/null
+++ b/app/client/common/augmentationGrid.component.js
@@ -0,0 +1,47 @@
+import { h, Component } from 'preact'
+
+import Group from './group.component'
+import Param from './param.component'
+import Button from './button.component'
+import ButtonGrid from './buttonGrid.component'
+
+export default class AugmentationGrid extends Component {
+  state = {
+    x: 0, y: 0, sum: 0,
+  }
+  render() {
+    let {
+      make, take, checkpoint,
+      onTrain, onAugment,
+    } = this.props
+    let {
+      x, y, sum
+    } = this.state
+    let rows = []
+    return (
+      <Group className='augmentationGrid'>
+        <ButtonGrid 
+          x={make}
+          y={take}
+          max={5000}
+          onHover={(x, y) => this.setState({ x, y })}
+          onClick={(x, y) => {
+            this.setState({ sum: sum + x * y })
+            onAugment(y, x)
+          }}
+        />
+        <Param title='Name'>{checkpoint.name}</Param>
+        <Param title='Take'>{y}</Param>
+        <Param title='Make'>{x}</Param>
+        <Param title='Will add to dataset'>{x * y}</Param>
+        <Param title='Total added this epoch'>{sum}</Param>
+        <Param title='Sequence length'>{checkpoint.sequenceCount}</Param>
+        <Param title='Dataset size'>{checkpoint.datasetCount}</Param>
+        <Button onClick={() => {
+          this.setState({ sum: 0 })
+          onTrain()
+        }}>Train</Button>
+      </Group>
+    )
+  }
+}
diff --git a/app/client/common/buttonGrid.component.js b/app/client/common/buttonGrid.component.js
new file mode 100644
index 0000000..6c7c105
--- /dev/null
+++ b/app/client/common/buttonGrid.component.js
@@ -0,0 +1,51 @@
+import { h, Component } from 'preact'
+
+export default class ButtonGrid extends Component {
+  state = {
+    x: 0, y: 0,
+  }
+
+  render() {
+    const {
+      x: _x,
+      y: _y,
+    } = this.state
+    const {
+      x: X,
+      y: Y,
+      max = Infinity,
+      onClick,
+      onHover,
+    } = this.props
+    return (
+      <table className='buttonGrid'>
+        <tr className='row'>
+          <th>{" "}</th>
+          {X.map(x => (
+            <th className={x === _x && 'bold'}>{x}</th>
+          ))}
+        </tr>          
+        {Y.map(y => (
+          <tr className='row'>
+            <th className={y === _y && 'bold'}>{y}</th>
+            {X.map(x => (
+              <td>
+                {x * y > max ? " " :
+                  <button
+                    onClick={() => onClick(x, y)}
+                    onMouseEnter={() => {
+                      this.setState({ x, y })
+                      onHover(x, y)
+                    }}
+                  >
+                    {" "}
+                  </button>
+                }
+              </td>
+            ))}
+          </tr>
+        ))}
+      </table>
+    )
+  }
+}
diff --git a/app/client/common/currentTask.component.js b/app/client/common/currentTask.component.js
index a4d9750..3c71a88 100644
--- a/app/client/common/currentTask.component.js
+++ b/app/client/common/currentTask.component.js
@@ -22,10 +22,10 @@ function CurrentTask ({ cpu, gpu, processor }) {
   const { last_message, pid, task } = p
   const { activity, epoch, epochs, dataset, module } = task
   return (
-    <div>
+    <div className='currentTask'>
       #{pid}: <b>{module} {activity}</b> <i>{dataset}</i>
-      {epochs
-        ? <span>{epoch} epoch{util.courtesy_s(epoch)}</span>
+      {!!epochs
+        ? <span>{epochs} epoch{util.courtesy_s(epochs)}</span>
         : ""}
       {epoch
         ? <span>(currently #{epoch})</span>
diff --git a/app/client/common/index.js b/app/client/common/index.js
index 13b3189..e6baafc 100644
--- a/app/client/common/index.js
+++ b/app/client/common/index.js
@@ -1,4 +1,7 @@
+import AudioPlayer from './audioPlayer/audioPlayer.component'
+import AugmentationGrid from './augmentationGrid.component'
 import Button from './button.component'
+import ButtonGrid from './buttonGrid.component'
 import Checkbox from './checkbox.component'
 import CurrentTask from './currentTask.component'
 import { FileList, FileRow } from './fileList.component'
@@ -22,11 +25,12 @@ import * as Views from './views'
 
 export {
   Views,
-  Loading, Progress, Header,
+  Loading, Progress, Header, AudioPlayer,
   FolderList, FileList, FileRow, FileUpload,
   Gallery, Player,
   Group, ParamGroup, Param,
   TextInput, NumberInput,
   Slider, Select, SelectGroup, Button, Checkbox,
   CurrentTask, TaskList,
+  ButtonGrid, AugmentationGrid,
 }
\ No newline at end of file
diff --git a/app/client/common/taskList.component.js b/app/client/common/taskList.component.js
index 710753f..c1ed38a 100644
--- a/app/client/common/taskList.component.js
+++ b/app/client/common/taskList.component.js
@@ -27,7 +27,7 @@ class TaskList extends Component {
       const task = pair[1]
       const { dataset } = task
       let dataset_link, label = dataset;
-      console.log(task)
+      // console.log(task)
       switch (task.activity) {
         case 'train':
           if (task.epoch === 0) {
diff --git a/app/client/common/textInput.component.js b/app/client/common/textInput.component.js
index d429944..d3b16ad 100644
--- a/app/client/common/textInput.component.js
+++ b/app/client/common/textInput.component.js
@@ -34,6 +34,9 @@ class TextInput extends Component {
             value={this.state.changed ? this.state.value : this.props.value}
             onInput={this.handleInput}
             onKeydown={this.handleKeydown}
+            autofocus={this.props.autofocus}
+            autoComplete={this.props.autocomplete}
+            autoCapitalize={this.props.autocapitalize || 'off'}
             placeholder={this.props.placeholder}
             autofocus={this.props.autofocus}
             className={this.props.className || ''}