7 files changed, 54 insertions, 8 deletions
diff --git a/app/client/common/loading.component.js b/app/client/common/loading.component.js
new file mode 100644
index 0000000..f8033db
--- /dev/null
+++ b/app/client/common/loading.component.js
@@ -0,0 +1,12 @@
+import { h, Component } from 'preact'
+
+import Progress from './progress.component'
+
+export default function Loading({progress}) {
+  return (
+    <div className='loading'>
+      Loading<br/>
+      <Progress progress={progress} />
+    </div>
+  )
+}
diff --git a/app/client/common/progress.component.js b/app/client/common/progress.component.js
new file mode 100644
index 0000000..364f232
--- /dev/null
+++ b/app/client/common/progress.component.js
@@ -0,0 +1,16 @@
+import { h, Component } from 'preact'
+
+export default function Progress({progress}) {
+  const { i, n } = progress
+  const a = []
+  for (let j = 0; j < n; j++) {
+    a.push(
+      <div key={j} className={j < i ? 'x' : 'o'}></div>
+    )
+  }
+  return (
+    <div className='progress'>
+      {a}
+    </div>
+  )
+}
diff --git a/app/client/modules/samplernn/samplernn.actions.js b/app/client/modules/samplernn/samplernn.actions.js
index 343550e..e204382 100644
--- a/app/client/modules/samplernn/samplernn.actions.js
+++ b/app/client/modules/samplernn/samplernn.actions.js
@@ -17,6 +17,7 @@ export const load_directories = (id) => (dispatch) => {
     load_loss()(dispatch),
   ], (percent, i, n) => {
     console.log(percent + "%")
+    dispatch({ type: types.app.load_progress, progress: { i, n }})
   }).then(res => {
     // console.log(res)
     const [folders, files, tasks, datasets, results, output, lossReport] = res
@@ -262,12 +263,12 @@ export const fetch_url = (url) => (dispatch) => {
   }, { preempt: true, watch: true })
 }
 
-export const train_task_now = (dataset) => (dispatch) => {
+export const train_task_now = (dataset, epochs=1) => (dispatch) => {
   const task = {
     module: 'samplernn',
     activity: 'train',
     dataset: dataset,
-    epochs: 6,
+    epochs: epochs,
     opt: {
       sample_length: 44100 * 5,
       n_samples: 6,
diff --git a/app/client/modules/samplernn/samplernn.datasets.js b/app/client/modules/samplernn/samplernn.datasets.js
index 683d44a..c10a1db 100644
--- a/app/client/modules/samplernn/samplernn.datasets.js
+++ b/app/client/modules/samplernn/samplernn.datasets.js
@@ -8,6 +8,7 @@ import * as samplernnActions from './samplernn.actions'
 import DatasetForm from '../../dataset/dataset.form'
 import NewDatasetForm from '../../dataset/dataset.new'
 import { FileList, FileRow } from '../../common/fileList.component'
+import Loading from '../../common/loading.component'
 
 const samplernnModule = {
   name: 'samplernn',
@@ -62,7 +63,8 @@ class SampleRNNDatasets extends Component {
     const { samplernn, match, history } = this.props
     if (samplernn.loading) {
       // console.log('loading')
-      return <span>Loading</span>
+      console.log(samplernn.loading)
+      return <Loading progress={samplernn.progress} />
     }
     if (!samplernn.data.folders.length) {
       console.log('no folders, redirect to /new')
@@ -83,13 +85,13 @@ class SampleRNNDatasets extends Component {
     )
   }
   renderGroups(){
-    const { samplernn, onPickDataset } = this.props
+    const { samplernn, onPickDataset, actions } = this.props
     const folder = samplernn.folder
     const { mapFn, sortFn } = util.sort.orderByFn('date desc')
     const datasets = folder.datasets.map(mapFn).sort(sortFn).map(pair => {
       const dataset = pair[1]
       return (
-        <div className='row dataset' onClick={() => onPickDataset(dataset)}>
+        <div className='row dataset' onClick={() => onPickDataset && onPickDataset(dataset)}>
           {this.props.beforeRow && this.props.beforeRow(dataset)}
           <div className='col'>
             {!!dataset.input.length &&
@@ -102,8 +104,15 @@ class SampleRNNDatasets extends Component {
               />
             }
           </div>
-          <div className='col quiet'>
-            <div>{dataset.isBuilt ? 'cached' : ''}</div>
+          <div className='col quiet hiddenActions'>
+            <div class='subtext'>{dataset.isBuilt ? 'cached' : ''}</div>
+            <div class='actions'>
+              <span class='link' onClick={() => actions.train_task_now(dataset, 1)}>train</span>
+              <span class='link' onClick={() => actions.train_task_now(dataset, 2)}>2x</span>
+              <span class='link' onClick={() => actions.train_task_now(dataset, 4)}>4x</span>
+              <span class='link' onClick={() => actions.train_task_now(dataset, 6)}>6x</span>
+              <span class='link' onClick={() => actions.train_task_now(dataset, 18)}>18x</span>
+            </div>
           </div>
           <div className='col checkpoint'>
             {!!dataset.checkpoints.length &&
diff --git a/app/client/modules/samplernn/samplernn.reducer.js b/app/client/modules/samplernn/samplernn.reducer.js
index b294c2f..11a9d9e 100644
--- a/app/client/modules/samplernn/samplernn.reducer.js
+++ b/app/client/modules/samplernn/samplernn.reducer.js
@@ -2,6 +2,7 @@ import types from '../../types'
 
 const samplernnInitialState = {
   loading: true,
+  progress: { i: 0, n: 0 },
   error: null,
   folders: [],
   folder: {},
@@ -103,6 +104,12 @@ const samplernnReducer = (state = samplernnInitialState, action) => {
         lossReport: action.lossReport,
       }
 
+    case types.app.load_progress:
+      return {
+        ...state,
+        progress: action.progress
+      }
+
     default:
       return state
   }
diff --git a/app/client/types.js b/app/client/types.js
index a367891..c408d56 100644
--- a/app/client/types.js
+++ b/app/client/types.js
@@ -16,6 +16,7 @@ export default {
 	},
 	app: {
 		change_tool: "APP_CHANGE_TOOL",
+		load_progress: "APP_LOAD_PROGRESS",
 	},
 	folder: crud_type('folder', [
 	]),
diff --git a/app/client/util/index.js b/app/client/util/index.js
index 75992d9..14d4d6f 100644
--- a/app/client/util/index.js
+++ b/app/client/util/index.js
@@ -31,7 +31,7 @@ export const allProgress = (promises, progress_cb) => {
   promises.forEach((p) => {
     p.then((s) => {
       d += 1
-      progress_cb((d * 100) / promises.length, d, promises.length)
+      progress_cb(Math.floor((d * 100) / promises.length), d, promises.length)
       return s
     })
   })