From dfbca424f0655779bcbcf56a88a1338e3af23739 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 4 Jun 2018 19:06:48 +0200
Subject: action divs

---
 app/client/modules/samplernn/samplernn.actions.js  | 19 +++++++++++----
 app/client/modules/samplernn/samplernn.datasets.js | 21 ++++++++---------
 app/client/modules/samplernn/samplernn.inspect.js  |  4 ----
 app/client/modules/samplernn/samplernn.reducer.js  |  4 ++++
 app/client/modules/samplernn/samplernn.results.js  | 18 ++++++++++++---
 app/client/modules/samplernn/samplernn.show.js     | 27 +++++++++++++++++++++-
 6 files changed, 68 insertions(+), 25 deletions(-)

(limited to 'app/client/modules')

diff --git a/app/client/modules/samplernn/samplernn.actions.js b/app/client/modules/samplernn/samplernn.actions.js
index e3e735f..fe73bf2 100644
--- a/app/client/modules/samplernn/samplernn.actions.js
+++ b/app/client/modules/samplernn/samplernn.actions.js
@@ -24,6 +24,7 @@ export const load_directories = (id) => (dispatch) => {
     const unsortedFolder = {
       id: 0,
       name: 'unsorted',
+      files: [],
       datasets: [],
     }
 
@@ -51,8 +52,13 @@ export const load_directories = (id) => (dispatch) => {
 
     // take all of the folders and put them in a lookup
     const folderLookup = folders.reduce((folderLookup, folder) => {
-      folderLookup[folder.id] = { id: folder.id, name: folder.name, folder, datasets: [] }
-      folder.datasets = []
+      folderLookup[folder.id] = {
+        id: folder.id,
+        name: folder.name,
+        folder,
+        files: [],
+        datasets: [],
+      }
       return folderLookup
     }, {
       unsorted: unsortedFolder
@@ -68,17 +74,21 @@ export const load_directories = (id) => (dispatch) => {
         file.name = (file.opt || {}).token || file.url
       }
       const name = (file.name || 'unsorted').split('.')[0]
-      const dataset = get_dataset(name, folderLookup[file.folder_id] || unsortedFolder, file.date || file.created_at)
+      const folder = folderLookup[file.folder_id] || unsortedFolder
+      const dataset = get_dataset(name, folder, file.date || file.created_at)
       if (file.url.match(file.name)) file.persisted = true
       dataset.input.push(file)
+      folder.files.push(file)
       return datasetLookup
     }, datasetLookup)
 
     // go over the generated files and add addl datasets (if the files were deleted)
     generatedFiles.map(file => {
       const pair = file.name.split('.')[0].split('-')
-      const dataset = get_dataset(pair[0], folderLookup[file.folder_id] || unsortedFolder, file.date || file.created_at)
+      const folder = folderLookup[file.folder_id] || unsortedFolder
+      const dataset = get_dataset(pair[0], folder, file.date || file.created_at)
       dataset.output.push(file)
+      folder.files.push(file)
       file.epoch = file.epoch || pair[1]
     })
 
@@ -145,7 +155,6 @@ export const load_directories = (id) => (dispatch) => {
         datasetLookup,
         folders, files,
         checkpoints,
-        builtDatasets,
         output,
       },
     })
diff --git a/app/client/modules/samplernn/samplernn.datasets.js b/app/client/modules/samplernn/samplernn.datasets.js
index d29cf6a..b4f0c12 100644
--- a/app/client/modules/samplernn/samplernn.datasets.js
+++ b/app/client/modules/samplernn/samplernn.datasets.js
@@ -72,9 +72,9 @@ class SampleRNNDatasets extends Component {
     if (!folder || !folder.name) return
     return (
       <div class='rows params datasets'>
-        <div class='row dataset'>
+        <div class='row row-heading dataset'>
           <div class='col'>input</div>
-          <div class='col'></div>
+          <div class='col'>status</div>
           <div class='col'>checkpoint</div>
           <div class='col'>output</div>
         </div>
@@ -83,11 +83,14 @@ class SampleRNNDatasets extends Component {
     )
   }
   renderGroups(){
-    const { samplernn, onPickDataset, onPickFile, actions } = this.props
+    const { samplernn, runner, onPickDataset, onPickFile, datasetActions } = this.props
     const folder = samplernn.folder
     const { mapFn, sortFn } = util.sort.orderByFn('date desc')
+    const moduleOnGPU = runner.gpu.task.module === samplernnModule.name
     const datasets = folder.datasets.map(mapFn).sort(sortFn).map(pair => {
       const dataset = pair[1]
+      const isProcessing = moduleOnGPU && runner.gpu.task.dataset === dataset
+      const status = isProcessing ? util.gerund(runner.gpu.task.activity) : ''
       return (
         <div className='row dataset' onClick={() => onPickDataset && onPickDataset(dataset)}>
           {this.props.beforeRow && this.props.beforeRow(dataset)}
@@ -103,15 +106,9 @@ class SampleRNNDatasets extends Component {
               />
             }
           </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 className={'col quiet ' + (dataset.isBuilt ? 'built' : 'not_built')}>
+            {status}
+            {this.props.datasetActions && this.props.datasetActions(dataset)}
           </div>
           <div className='col checkpoint'>
             {!!dataset.checkpoints.length &&
diff --git a/app/client/modules/samplernn/samplernn.inspect.js b/app/client/modules/samplernn/samplernn.inspect.js
index f21d618..b5315d7 100644
--- a/app/client/modules/samplernn/samplernn.inspect.js
+++ b/app/client/modules/samplernn/samplernn.inspect.js
@@ -72,10 +72,6 @@ class SampleRNNInspect extends Component {
           title='Files'
           files={samplernn.data.files}
         />
-        <FileList
-          title='Datasets'
-          files={samplernn.data.builtDatasets}
-        />
         <FileList
           title='Checkpoints'
           files={samplernn.data.checkpoints}
diff --git a/app/client/modules/samplernn/samplernn.reducer.js b/app/client/modules/samplernn/samplernn.reducer.js
index 11a9d9e..929205e 100644
--- a/app/client/modules/samplernn/samplernn.reducer.js
+++ b/app/client/modules/samplernn/samplernn.reducer.js
@@ -61,6 +61,10 @@ const samplernnReducer = (state = samplernnInitialState, action) => {
           loading: false,
           folder: {
             ...state.folder,
+            files: [
+              ...state.folder.files,
+              action.data,
+            ],
             datasets: [
               ...state.folder.datasets,
               {
diff --git a/app/client/modules/samplernn/samplernn.results.js b/app/client/modules/samplernn/samplernn.results.js
index 7e71197..85720cd 100644
--- a/app/client/modules/samplernn/samplernn.results.js
+++ b/app/client/modules/samplernn/samplernn.results.js
@@ -5,6 +5,8 @@ import { connect } from 'react-redux'
 
 import * as util from '../../util'
 import * as samplernnActions from './samplernn.actions'
+import * as audioPlayerActions from '../../common/audioPlayer/audioPlayer.actions'
+import Loading from '../../common/loading.component'
 
 import { FileList, FileRow } from '../../common/fileList.component'
 
@@ -43,7 +45,7 @@ class SampleRNNResults extends Component {
     )
   }
   render(){
-    if (this.props.samplernn.loading) return <span>Loading</span>
+    if (this.props.samplernn.loading) return <Loading progress={this.props.samplernn.progress} />
     const { folderLookup } = this.props.samplernn.data
     // const { folderLookup } = samplernn
 
@@ -69,15 +71,21 @@ class SampleRNNResults extends Component {
             files={bestRenders}
             orderBy='date desc'
             fields={'name date epoch size'}
+            onClick={(file, e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              console.log('picked a file', file)
+              this.handlePick(file)
+            }}
           />
         </div>
       )
     })
 
     return (
-      <div className='app'>
+      <div className='app top left'>
         <div className='heading'>
-          <h2>SampleRNN</h2>
+          <h1>SampleRNN Results</h1>
         </div>
         <div class='rows params renders'>
           <Link to='/samplernn/new/'>new dataset</Link>
@@ -87,6 +95,9 @@ class SampleRNNResults extends Component {
       </div>
     )
   }
+  handlePick(file){
+    this.props.audioPlayer.play(file)
+  }
 }
 
 const mapStateToProps = state => ({
@@ -97,6 +108,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
   actions: bindActionCreators(samplernnActions, dispatch),
+  audioPlayer: bindActionCreators(audioPlayerActions, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNResults)
diff --git a/app/client/modules/samplernn/samplernn.show.js b/app/client/modules/samplernn/samplernn.show.js
index 2d27b8d..ee3e8c9 100644
--- a/app/client/modules/samplernn/samplernn.show.js
+++ b/app/client/modules/samplernn/samplernn.show.js
@@ -6,6 +6,7 @@ import * as util from '../../util'
 import * as samplernnActions from './samplernn.actions'
 import * as audioPlayerActions from '../../common/audioPlayer/audioPlayer.actions'
 
+import Loading from '../../common/loading.component'
 import DatasetForm from '../../dataset/dataset.form'
 import NewDatasetForm from '../../dataset/dataset.new'
 import { FileList, FileRow } from '../../common/fileList.component'
@@ -24,7 +25,7 @@ class SampleRNNShow extends Component {
     return (
       <div className='app'>
         <div class='heading'>
-          <h1>{folder ? folder.name : 'Loading...'}</h1>
+          <h1>{folder ? folder.name : <Loading />}</h1>
         </div>
         {folder && folder.name && folder.name !== 'unsorted' &&
           <DatasetForm
@@ -42,10 +43,34 @@ class SampleRNNShow extends Component {
             console.log('picked a file', file)
             this.handlePick(file)
           }}
+          datasetActions={(dataset) => this.datasetActions(dataset)}
         />
       </div>
     )
   }
+  datasetActions(dataset){
+    const actions = props.actions.samplernn
+    return (
+      <div>
+        <div class={'actions'}>
+          <span class='link' onClick={() => actions.train_task(dataset, 1)}>train</span>
+          <span class='link' onClick={() => actions.train_task(dataset, 2)}>2x</span>
+          <span class='link' onClick={() => actions.train_task(dataset, 4)}>4x</span>
+          <span class='link' onClick={() => actions.train_task(dataset, 6)}>6x</span>
+          <span class='link' onClick={() => actions.train_task(dataset, 18)}>18x</span>
+        </div>
+        {dataset.isBuilt
+        ? <div class='subtext'>
+            {'fetched '}
+            <span class='link' onClick={() => actions.clear_cache_task(dataset)}>rm</span>
+          </div>
+        : <div class='subtext'>
+            <span class='link' onClick={() => actions.fetch_task(dataset)}>fetch</span>
+          </div>
+        }
+      </div>
+    )
+  }
   handlePick(file){
     this.props.audioPlayer.play(file)
   }
-- 
cgit v1.2.3-70-g09d2