augmentation grid

3 files changed, 72 insertions, 0 deletions

diff --git a/app/client/common/augmentationGrid.component.js b/app/client/common/augmentationGrid.component.js
new file mode 100644
index 0000000..69bdc8a
--- /dev/null
+++ b/app/client/common/augmentationGrid.component.js
@@ -0,0 +1,37 @@
+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 rows = []
+    return (
+      <Group className='augmentationGrid'>
+        <ButtonGrid 
+          x={this.props.make}
+          y={this.props.take}
+          max={5000}
+          onHover={(x, y) => this.setState({ x, y })}
+          onClick={(x, y) => {
+            this.setState({ sum: this.state.sum + x * y })
+            this.props.onAugment(y, x)
+          }}
+        />
+        <Param title='Take'>{this.state.y}</Param>
+        <Param title='Make'>{this.state.x}</Param>
+        <Param title='Will add to dataset'>{this.state.x * this.state.y}</Param>
+        <Param title='Total added this epoch'>{this.state.sum}</Param>
+        <Button onClick={() => {
+          this.setState({ sum: 0 })
+          this.props.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..4b86d62
--- /dev/null
+++ b/app/client/common/buttonGrid.component.js
@@ -0,0 +1,32 @@
+import { h, Component } from 'preact'
+
+export default function ButtonGrid(props) {
+  const max = props.max || Infinity
+  return (
+    <table className='buttonGrid'>
+      <tr className='row'>
+        <th>{" "}</th>
+        {props.x.map(x => (
+          <th>{x}</th>
+        ))}
+      </tr>          
+      {props.y.map(y => (
+        <tr className='row'>
+          <th>{y}</th>
+          {props.x.map(x => (
+            <td>
+              {x * y > max ? " " :
+                <button
+                  onClick={() => props.onClick(x, y)}
+                  onMouseEnter={() => props.onHover(x, y)}
+                >
+                  {" "}
+                </button>
+              }
+            </td>
+          ))}
+        </tr>
+      ))}
+    </table>
+  )
+}
diff --git a/app/client/common/index.js b/app/client/common/index.js
index 13b3189..7448104 100644
--- a/app/client/common/index.js
+++ b/app/client/common/index.js
@@ -1,4 +1,6 @@
+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'
@@ -29,4 +31,5 @@ export {
   TextInput, NumberInput,
   Slider, Select, SelectGroup, Button, Checkbox,
   CurrentTask, TaskList,
+  ButtonGrid, AugmentationGrid,
 }
\ No newline at end of file