split out datasets folder

11 files changed, 429 insertions, 322 deletions

diff --git a/app/client/api/util.js b/app/client/api/util.js
index e561ca4..6500979 100644
--- a/app/client/api/util.js
+++ b/app/client/api/util.js
@@ -12,4 +12,4 @@ htmlClassList.remove('loading')
 
 function randint(n) { return Math.floor(Math.random()*n) }
 
-document.body.style.background = 'linear-gradient(' + (randint(40)+40) + 'deg, #fde, #ffe)'
+document.body.style.backgroundImage = 'linear-gradient(' + (randint(40)+40) + 'deg, #fde, #ffe)'
diff --git a/app/client/dataset/dataset.actions.js b/app/client/dataset/dataset.actions.js
new file mode 100644
index 0000000..f42e15c
--- /dev/null
+++ b/app/client/dataset/dataset.actions.js
@@ -0,0 +1,17 @@
+// import socket from '../socket'
+import types from '../types'
+
+export const uploadFiles = (files) => {
+  return { type: types.dataset.upload_files }
+}
+export const fetchURL = (url) => {
+  return { type: types.dataset.fetch_url }
+}
+
+// export const uploadFiles = (files) => {
+//   return dispatch => {
+//     // return { type: types.dataset.upload_files }
+//   }
+// }
+
+// export const fetchURL = (url) => { type: types.dataset.fetch_url }
diff --git a/app/client/dataset/dataset.component.js b/app/client/dataset/dataset.component.js
new file mode 100644
index 0000000..e6c1bfd
--- /dev/null
+++ b/app/client/dataset/dataset.component.js
@@ -0,0 +1,152 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { actions, parser } from '../api'
+
+import Group from '../common/group.component'
+import Param from '../common/param.component'
+import FileList from '../common/fileList.component'
+import FileUpload from '../common/fileUpload.component'
+import TextInput from '../common/textInput.component'
+
+class Dataset extends Component {
+  constructor(props){
+    super()
+    this.handleName = this.handleName.bind(this)
+    this.handleUpload = this.handleUpload.bind(this)
+    this.handleURL = this.handleURL.bind(this)
+    this.pickFile = this.pickFile.bind(this)
+  }
+  handleName(name) {
+    const { module, folder } = this.props
+    if (! folder.id) {
+      this.props.actions.folder.create({
+        // username... should get added inside the API
+        module: module.name,
+        datatype: module.datatype,
+        activity: 'dataset',
+        name
+      })
+    } else {
+      this.props.actions.folder.update({
+        id: folder.id,
+        module: module.name,
+        datatype: module.datatype,
+        activity: 'dataset',
+        name
+      })
+    }
+  }
+  handleUpload(file) {
+    const { module, folder } = this.props
+    const fd = new FormData()
+    fd.append('file', file)
+    this.props.actions.folder.upload(fd, {
+      id: folder.id,
+      module: module.name,
+      activity: 'file',
+      epoch: 0,
+      processed: false,
+      generated: false,
+    })
+  }
+  handleURL(url) {
+    // name url
+    // mime datatype
+    // duration analysis
+    // size activity
+    // opt created_at updated_at
+    parser.parse(url, media => {
+      if (!media) return
+      console.log('media', media)
+      this.props.actions.file.create({
+        folder_id: this.props.folder.id,
+        module: this.props.module.name,
+        activity: 'url',
+        duration: parseInt(media.duration) || 0,
+        epoch: 0,
+        processed: false,
+        generated: false,
+        opt: media,
+        url
+      })
+    })
+  }
+  pickFile(file){
+    console.log('pick', file)
+    this.props.onPick && this.props.onPick(file)
+  }
+  render(){
+    const {
+      loading, status, error,
+      module, title, folder, files,
+      canRename, canUpload, canAddURL, canDeleteFile,
+      linkFiles,
+      fileOptions, pickFile
+    } = this.props
+    // sort files??
+    return (
+      <div className='dataset'>
+        <div className='params row'>
+          <div className='column'>
+            <Group title={title || 'Dataset'}>
+              {canRename
+              ? this.renderFolderNameInput(folder.name)
+              : <Param title='Dataset name'>{folder.name}</Param>}
+              {folder.id && canUpload && this.renderUploadInput()}
+              {folder.id && canAddURL && this.renderURLInput()}
+            </Group>
+          </div>
+        </div>
+        <div className='params col'>
+          <div class='row heading'>
+            {files.length ? 
+              <h3>Files</h3> :
+              <h4>No files</h4>}
+            <div>{(loading || error) && status}</div>
+          </div>
+          <FileList
+            files={files}
+            options={fileOptions}
+            onClick={pickFile}
+            canDelete={canDeleteFile}
+            linkFiles={linkFiles}
+          />
+        </div>
+      </div>
+    )
+  }
+  renderFolderNameInput(name){
+    return <TextInput
+      title='Dataset name'
+      value={name}
+      onSave={this.handleName}
+    />
+  }
+  renderUploadInput(){
+    return <FileUpload
+      title='Upload a file'
+      mime='image.*'
+      onUpload={this.handleUpload}
+    />
+  }
+  renderURLInput(){
+    return <TextInput
+      title='Fetch a URL'
+      placeholder='http://'
+      onSave={this.handleURL}
+    />
+  }
+}
+
+const mapStateToProps = state => state.dataset
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: {
+    folder: bindActionCreators(actions.folder, dispatch),
+    file: bindActionCreators(actions.file, dispatch),
+  }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Dataset)
diff --git a/app/client/dataset/dataset.reducer.js b/app/client/dataset/dataset.reducer.js
new file mode 100644
index 0000000..c7a2e26
--- /dev/null
+++ b/app/client/dataset/dataset.reducer.js
@@ -0,0 +1,136 @@
+import types from '../types'
+
+const datasetInitialState = {
+  loading: false,
+  error: null,
+  status: '',
+}
+
+const datasetReducer = (state = datasetInitialState, action) => {
+  console.log(action)
+  switch(action.type) {
+    case types.socket.connect:
+      return {
+        ...state,
+      }
+    case types.task.task_begin:
+      return {
+        ...state,
+      }
+    case types.task.task_finish:
+      return {
+        ...state,
+      }
+
+    case types.folder.index:
+      return {
+        ...state,
+        folders: action.data,
+        folder: action.data[0],
+      }
+    case types.folder.update:
+      return state
+    case types.file.index:
+      return {
+        ...state,
+        files: action.data
+      }
+
+    case types.folder.upload_loading:
+      return {
+        ...state,
+        upload: {
+          loading: true,
+          status: 'Loading...',
+        },
+      }
+    case types.folder.upload_error:
+      return {
+        ...state,
+        upload: {
+          loading: false,
+          status: 'Error uploading :(',
+        },
+      }
+    case types.folder.upload_progress:
+      console.log(action)
+      return {
+        ...state,
+        upload: {
+          loading: true,
+          status: 'Upload progress ' + action.percent + '%',
+        },
+      }
+    case types.folder.upload_waiting:
+      console.log(action)
+      return {
+        ...state,
+        upload: {
+          loading: true,
+          status: 'Waiting for server to finish processing...',
+        },
+      }
+    case types.file.create_loading:
+      return {
+        ...state,
+        upload: {
+          loading: true,
+          status: 'Creating file...'
+        }
+      }
+    case types.file.create:
+      console.log('booo')
+      if (state.folder.id === action.data.folder_id) {
+        return {
+          ...state,
+          files: [action.data].concat(state.files),
+          upload: {
+            loading: false,
+            status: 'File created',
+          },
+        }
+      } else {
+        return {
+          ...state,
+          upload: {
+            loading: false,
+            status: 'created',
+          },
+        }
+      }
+    case types.folder.upload_complete:
+      console.log(action)
+      if (state.folder.id === action.folder) {
+        return {
+          ...state,
+          files: [action.files].concat(state.files),
+          upload: {
+            loading: false,
+            status: 'Upload complete',
+          },
+        }
+      } else {
+        return {
+          ...state,
+          upload: {
+            loading: false,
+            status: 'Upload complete',
+          },
+        }
+      }
+    case types.socket.status:
+      return datasetSocket(state, action.data)
+    default:
+      return state
+  }
+}
+
+const datasetSocket = (state, action) => {
+  console.log(action)
+  switch (action.key) {
+    default:  
+      return state
+  }
+}
+
+export default datasetReducer
diff --git a/app/client/modules/samplernn/datasets.component.js b/app/client/modules/samplernn/datasets.component.js
deleted file mode 100644
index f1e4d71..0000000
--- a/app/client/modules/samplernn/datasets.component.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import { h, Component } from 'preact'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import { actions, parser } from '../../api'
-import * as taskActions from '../../task/task.actions'
-import * as systemActions from '../../system/system.actions'
-  // folderActions.index({ module: 'samplernn' })
-  // folderActions.show(12)
-  // folderActions.create({ module: 'samplernn', name: 'foo' })
-  // folderActions.update(12, { module: 'pix2pix' })
-  // folderActions.destroy(12, { confirm: true })
-  // folderActions.upload(12, form_data)
-
-import Group from '../../common/group.component'
-import Slider from '../../common/slider.component'
-import Select from '../../common/select.component'
-import Button from '../../common/button.component'
-import FileList from '../../common/fileList.component'
-import FileUpload from '../../common/fileUpload.component'
-import TextInput from '../../common/textInput.component'
-
-class SampleRNNDatasets extends Component {
-  constructor(props){
-    super()
-    // fetch file list
-    this.handleName = this.handleName.bind(this)
-    this.handleUpload = this.handleUpload.bind(this)
-    this.handleURL = this.handleURL.bind(this)
-    this.fetchURL = this.fetchURL.bind(this)
-    this.fileOptions = this.fileOptions.bind(this)
-    this.pickFile = this.pickFile.bind(this)
-    props.actions.folder.index({ module: 'samplernn' })
-    props.actions.file.index({ module: 'samplernn' })
-  }
-  handleName(name) {
-    const folder = this.props.samplernn.folder
-    if (! folder.id) {
-      this.props.actions.folder.create({
-        //     username... should get added inside the API
-        module: 'samplernn',
-        activity: 'dataset',
-        datatype: 'audio',
-        name
-      })
-    } else {
-      this.props.actions.folder.update({
-        id: folder.id,
-        module: 'samplernn',
-        activity: 'dataset',
-        datatype: 'audio',
-        name
-      })
-    }
-  }
-  handleUpload(file) {
-    const folder = this.props.samplernn.folder
-    const fd = new FormData()
-    fd.append('file', file)
-    this.props.actions.folder.upload(fd, {
-      id: folder.id,
-      module: 'samplernn',
-      activity: 'url',
-      epoch: 0,
-      processed: false,
-      generated: false,
-    })
-  }
-  handleURL(url) {
-    // name url
-    // mime datatype
-    // duration analysis
-    // size activity
-    // opt created_at updated_at
-    parser.parse(url, media => {
-      if (!media) return
-      console.log('media', media)
-      const folder = this.props.samplernn.folder
-      this.props.actions.file.create({
-        folder_id: folder.id,
-        module: 'samplernn',
-        activity: 'url',
-        epoch: 0,
-        processed: false,
-        generated: false,
-        opt: media,
-        url
-      })
-    })
-  }
-  fetchURL(url) {
-    console.log(url)
-    this.props.actions.task.start_task({
-      activity: 'fetch',
-      module: 'samplernn',
-      dataset: 'test',
-      epochs: 1,
-      opt: { url }
-    }, { preempt: true, watch: true })
-  }
-  pickFile(file){
-    console.log('pick', file)
-  }
-  fileOptions(file){
-    console.log(file)
-    if (file.activity === 'url' && !file.dataset) {
-      if (this.props.runner.cpu.status !== 'IDLE') {
-        return (
-          <div className='gray'>
-            fetching...
-          </div>
-        )
-      } else {
-        return (
-          <div className='link' onClick={() => this.fetchURL(file.url)}>
-            fetch
-          </div>
-        )
-      }
-    }
-    return (
-      <div>
-        <div className='link' onClick={() => this.train(file)}>train</div>
-        {file.epoch == 0 && <div className='epochs'>{file.epochs} ep.</div>}
-      </div>
-    )
-  }
-  render(){
-    const { samplernn } = this.props
-    console.log(samplernn.upload)
-    // sort files??
-    return (
-      <div className='app'>
-        <div className='heading'>
-          <h3>SampleRNN</h3>
-        </div>
-        <div className='params row'>
-          <div className='column'>
-            <Group title='Dataset'>
-              <TextInput
-                title='Dataset name'
-                value={samplernn.folder.name}
-                onSave={this.handleName}
-              />
-              {samplernn.folder.id &&
-                <FileUpload
-                  title='Upload a file'
-                  mime='image.*'
-                  onUpload={this.handleUpload}
-                />
-              }
-              {samplernn.folder.id &&
-                <TextInput
-                  title='Fetch a URL'
-                  placeholder='http://'
-                  onSave={this.handleURL}
-                />
-              }
-            </Group>
-          </div>
-        </div>
-        <div className='params col'>
-          <div class='row heading'>
-            {samplernn.files.length ? 
-              <h3>Files</h3> :
-              <h4>No files</h4>}
-            <div>{samplernn.upload.loading && samplernn.upload.status}</div>
-          </div>
-          <FileList
-            files={samplernn.files}
-            options={this.fileOptions}
-            onClick={this.pickFile}
-            showDelete
-            linkFiles
-          />
-        </div>
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  samplernn: state.module.samplernn,
-  runner: state.system.runner,
-  task: state.task,
-})
-
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  actions: {
-    folder: bindActionCreators(actions.folder, dispatch),
-    file: bindActionCreators(actions.file, dispatch),
-    task: bindActionCreators(taskActions, dispatch),
-    system: bindActionCreators(systemActions, dispatch),
-  }
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNDatasets)
diff --git a/app/client/modules/samplernn/index.js b/app/client/modules/samplernn/index.js
index e098c2e..afb5263 100644
--- a/app/client/modules/samplernn/index.js
+++ b/app/client/modules/samplernn/index.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact'
 import { Route, Link } from 'react-router-dom'
-import SampleRNNDatasets from './datasets.component'
+import SampleRNNDatasets from './samplernn.datasets'
 
 function router () {
   return (
diff --git a/app/client/modules/samplernn/samplernn.actions.js b/app/client/modules/samplernn/samplernn.actions.js
index 1e0e3a6..aa9603b 100644
--- a/app/client/modules/samplernn/samplernn.actions.js
+++ b/app/client/modules/samplernn/samplernn.actions.js
@@ -1,18 +1,2 @@
 import socket from '../../socket'
 import types from '../../types'
-
-export const uploadFiles = (files) => {
-  return { type: types.samplernn.upload_files }
-}
-export const fetchURL = (url) => {
-  return { type: types.samplernn.fetch_url }
-}
-
-export const uploadFiles = (files) => {
-  return dispatch => {
-    // return { type: types.samplernn.upload_files }
-
-  }
-}
-
-// export const fetchURL = (url) => { type: types.samplernn.fetch_url }
diff --git a/app/client/modules/samplernn/samplernn.datasets.js b/app/client/modules/samplernn/samplernn.datasets.js
new file mode 100644
index 0000000..5f15dbc
--- /dev/null
+++ b/app/client/modules/samplernn/samplernn.datasets.js
@@ -0,0 +1,109 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { actions, parser } from '../../api'
+import * as taskActions from '../../task/task.actions'
+import * as systemActions from '../../system/system.actions'
+
+import Dataset from '../../dataset/dataset.component'
+
+import Group from '../../common/group.component'
+import Slider from '../../common/slider.component'
+import Select from '../../common/select.component'
+import Button from '../../common/button.component'
+import FileList from '../../common/fileList.component'
+import TextInput from '../../common/textInput.component'
+
+class SampleRNNDatasets extends Component {
+  constructor(props){
+    super()
+    // fetch file list
+    this.fileOptions = this.fileOptions.bind(this)
+    this.pickFile = this.pickFile.bind(this)
+    props.actions.folder.index({ module: 'samplernn' })
+    props.actions.file.index({ module: 'samplernn' })
+  }
+  pickFile(file){
+    console.log('pick', file)
+  }
+  fileOptions(file){
+    console.log(file)
+    if (file.activity === 'url' && !file.dataset) {
+      if (this.props.runner.cpu.status !== 'IDLE') {
+        return (
+          <div className='gray'>
+            fetching...
+          </div>
+        )
+      } else {
+        return (
+          <div className='link' onClick={() => this.fetchURL(file.url)}>
+            fetch
+          </div>
+        )
+      }
+    }
+    return (
+      <div>
+        <div className='link' onClick={() => this.train(file)}>train</div>
+        {file.epoch == 0 && <div className='epochs'>{file.epochs} ep.</div>}
+      </div>
+    )
+  }
+  fetchURL(url) {
+    console.log(url)
+    this.props.actions.task.start_task({
+      activity: 'fetch',
+      module: 'samplernn',
+      dataset: 'test',
+      epochs: 1,
+      opt: { url }
+    }, { preempt: true, watch: true })
+  }
+  render(){
+    const { samplernn } = this.props
+    console.log(samplernn.upload)
+    // sort files??
+    const module = {
+      name: 'samplernn',
+      datatype: 'audio',
+    }
+    return (
+      <div className='app'>
+        <div className='heading'>
+          <h3>SampleRNN</h3>
+        </div>
+        <Dataset
+          canRename
+          canUpload
+          canAddURL
+          canDeleteFile
+          linkFiles
+          fileOptions={this.fileOptions}
+          onPick={this.handlePick}
+          module={module}
+          folder={samplernn.input.folder}
+          files={samplernn.input.files}
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  samplernn: state.module.samplernn,
+  runner: state.system.runner,
+  task: state.task,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: {
+    folder: bindActionCreators(actions.folder, dispatch),
+    file: bindActionCreators(actions.file, dispatch),
+    task: bindActionCreators(taskActions, dispatch),
+    system: bindActionCreators(systemActions, dispatch),
+  }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNDatasets)
diff --git a/app/client/modules/samplernn/samplernn.reducer.js b/app/client/modules/samplernn/samplernn.reducer.js
index efd31f5..b3b58c3 100644
--- a/app/client/modules/samplernn/samplernn.reducer.js
+++ b/app/client/modules/samplernn/samplernn.reducer.js
@@ -3,23 +3,22 @@ import types from '../../types'
 const samplernnInitialState = {
   loading: false,
   error: null,
-  folder: {},
   folders: [],
-  files: [],
+  datasets: [],
   results: [],
-  upload: {
-    loading: false,
-    status: '',
+  input: {
+    folder: {},
+    files: [],
+  },
+  output: {
+    folder: {},
+    files: [],
   },
 }
 
 const samplernnReducer = (state = samplernnInitialState, action) => {
   console.log(action)
   switch(action.type) {
-    case types.socket.connect:
-      return {
-        ...state,
-      }
     case types.task.task_begin:
       return {
         ...state,
@@ -29,102 +28,6 @@ const samplernnReducer = (state = samplernnInitialState, action) => {
         ...state,
       }
 
-    case types.folder.index:
-      return {
-        ...state,
-        folders: action.data,
-        folder: action.data[0],
-      }
-    case types.folder.update:
-      return state
-    case types.file.index:
-      return {
-        ...state,
-        files: action.data
-      }
-
-    case types.folder.upload_loading:
-      return {
-        ...state,
-        upload: {
-          loading: true,
-          status: 'Loading...',
-        },
-      }
-    case types.folder.upload_error:
-      return {
-        ...state,
-        upload: {
-          loading: false,
-          status: 'Error uploading :(',
-        },
-      }
-    case types.folder.upload_progress:
-      console.log(action)
-      return {
-        ...state,
-        upload: {
-          loading: true,
-          status: 'Upload progress ' + action.percent + '%',
-        },
-      }
-    case types.folder.upload_waiting:
-      console.log(action)
-      return {
-        ...state,
-        upload: {
-          loading: true,
-          status: 'Waiting for server to finish processing...',
-        },
-      }
-    case types.file.create_loading:
-      return {
-        ...state,
-        upload: {
-          loading: true,
-          status: 'Creating file...'
-        }
-      }
-    case types.file.create:
-    console.log('booo')
-      if (state.folder.id === action.data.folder_id) {
-        return {
-          ...state,
-          files: [action.data].concat(state.files),
-          upload: {
-            loading: false,
-            status: 'File created',
-          },
-        }
-      } else {
-        return {
-          ...state,
-          upload: {
-            loading: false,
-            status: 'created',
-          },
-        }
-      }
-    case types.folder.upload_complete:
-      console.log(action)
-      if (state.folder.id === action.folder) {
-        return {
-          ...state,
-          files: [action.files].concat(state.files),
-          upload: {
-            loading: false,
-            status: 'Upload complete',
-          },
-        }
-      } else {
-        return {
-          ...state,
-          upload: {
-            loading: false,
-            status: 'Upload complete',
-          },
-        }
-      }
     case types.socket.status:
       return samplernnSocket(state, action.data)
     default:
diff --git a/app/client/store.js b/app/client/store.js
index 108ac83..77001d6 100644
--- a/app/client/store.js
+++ b/app/client/store.js
@@ -9,6 +9,7 @@ import { routerReducer } from 'react-router-redux'
 import systemReducer from './system/system.reducer'
 import dashboardReducer from './dashboard/dashboard.reducer'
 import liveReducer from './live/live.reducer'
+import datasetReducer from './dataset/dataset.reducer'
 import taskReducer from './task/task.reducer'
 import { moduleReducer } from './modules/module.reducer'
 
@@ -16,6 +17,7 @@ const appReducer = combineReducers({
   system: systemReducer,
   dashboard: dashboardReducer,
   live: liveReducer,
+  dataset: datasetReducer,
   task: taskReducer,
   router: routerReducer,
   module: moduleReducer,
diff --git a/app/client/types.js b/app/client/types.js
index c8fa26f..ad9613f 100644
--- a/app/client/types.js
+++ b/app/client/types.js
@@ -65,13 +65,14 @@ export default {
 		saving_video: 'SAVING_VIDEO',
 		save_video: 'SAVE_VIDEO',
 	},
-	samplernn: {
-		// dataset uploading
+	dataset: {
 		upload_files: 'UPLOAD_FILES',
 		file_progress: 'FILE_PROGRESS',
 		file_uploaded: 'FILE_UPLOADED',
 		fetch_url: 'FETCH_URL',
 		fetch_progress: 'FETCH_PROGRESS',
+	},
+	samplernn: {
 		// queue and train
 		// update checkpoint settings
 		// reset checkpoint settings