1 files changed, 47 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..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>
+    )
+  }
+}