more dropdowns

5 files changed, 62 insertions, 6 deletions

diff --git a/app/client/common/select.component.js b/app/client/common/select.component.js
index 9ff60ce..3b008a3 100644
--- a/app/client/common/select.component.js
+++ b/app/client/common/select.component.js
@@ -15,10 +15,19 @@ class Select extends Component {
   }
   render() {
     const value = this.props.opt[this.props.name]
-    const options = this.props.options.map((key,i) => {
+    const options = (this.props.options || []).map((key,i) => {
+      let name, value
+      if (typeof key == 'string') {
+        name = key.length < 4 ? key.toUpperCase() : key
+        value = key
+      } else {
+        let frames = Math.round(key.count / 30) + ' s.'
+        name = key.name.replace(/_/g, ' ') + ' (' + frames + ')'
+        value = key.name
+      }
       return (
-        <option value={key} key={i}>
-          {capitalize(key)}
+        <option value={value} key={i}>
+          {name}
         </option>
       )
     })
diff --git a/app/client/live/actions.js b/app/client/live/actions.js
index 5ee030a..026788d 100644
--- a/app/client/live/actions.js
+++ b/app/client/live/actions.js
@@ -16,6 +16,11 @@ export const list_checkpoints = () => {
   return { type: 'LOADING_CHECKPOINTS', }
 }
 
+export const list_epochs = (path) => {
+  socket.list_epochs(path)
+  return { type: 'LOADING_EPOCHS', }
+}
+
 export const list_sequences = () => {
   socket.list_sequences()
   return { type: 'LOADING_SEQUENCES', }
diff --git a/app/client/live/index.js b/app/client/live/index.js
index c438e4b..5699266 100644
--- a/app/client/live/index.js
+++ b/app/client/live/index.js
@@ -16,8 +16,13 @@ class App extends Component {
     props.actions.list_checkpoints()
     props.actions.list_sequences()
   }
+  componentWillUpdate(nextProps) {
+    console.log('willupdate', nextProps.opt)
+    if (nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
+      this.props.actions.list_epochs(nextProps.opt.checkpoint_name)
+    }
+  }
   render(){
-    const props = this.props
     return (
       <div className='app'>
         <Player />
@@ -32,6 +37,21 @@ class App extends Component {
                 title='view mode'
                 options={['a','b','sequence','recursive']}
               />
+              <Select
+                name='checkpoint_name'
+                title='checkpoint'
+                options={this.props.checkpoints}
+              />
+              <Select
+                name='epoch'
+                title='epoch'
+                options={this.props.epochs}
+              />
+              <Select
+                name='sequence_name'
+                title='sequence'
+                options={this.props.sequences}
+              />
             </ParamGroup>
           </div>
           <div className='column'>
@@ -146,6 +166,10 @@ class App extends Component {
 }
 
 const mapStateToProps = state => ({
+  opt: state.live.opt,
+  checkpoints: state.live.checkpoints,
+  epochs: state.live.epochs,
+  sequences: state.live.sequences,
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
diff --git a/app/client/live/reducer.js b/app/client/live/reducer.js
index c667689..e14a039 100644
--- a/app/client/live/reducer.js
+++ b/app/client/live/reducer.js
@@ -5,6 +5,7 @@ const liveInitialState = {
   error: null,
   opt: {},
   checkpoints: [],
+  checkpoint_dir: ['latest'],
   sequences: [],
 }
 
@@ -38,6 +39,12 @@ const liveReducer = (state = liveInitialState, action) => {
         checkpoints: action.checkpoints,
       }
 
+    case 'LIST_CHECKPOINT_DIR':
+      return {
+        ...state,
+        checkpoint_dir: action.checkpoint_dir,
+      }
+
     case 'LIST_SEQUENCES':
       return {
         ...state,
diff --git a/app/client/socket.js b/app/client/socket.js
index 280e7fe..2650e0b 100644
--- a/app/client/socket.js
+++ b/app/client/socket.js
@@ -32,6 +32,12 @@ socket.on('res', (data) => {
         sequences: data.res,
       })
       break
+    case 'list_epochs':
+      store.dispatch({
+        type: 'LIST_EPOCHS',
+        sequences: data.res,
+      })
+      break
     default:
       break
   }
@@ -45,8 +51,8 @@ socket.on('frame', (data) => {
   img.onload = function() {
     URL.revokeObjectURL(url)
     const player = document.querySelector('.player canvas')
-    player.getContext('2d')
-    player.drawImage(img, 0, 0, player.width, player.height)
+    const ctx = player.getContext('2d')
+    ctx.drawImage(img, 0, 0, player.width, player.height)
     // player.innerHTML = ''
     // player.appendChild(img)
   }
@@ -58,6 +64,11 @@ export function list_checkpoints() {
     cmd: 'list_checkpoints',
   })
 }
+export function list_epochs() {
+  socket.emit('cmd', {
+    cmd: 'list_epochs',
+  })
+}
 export function list_sequences() {
   socket.emit('cmd', {
     cmd: 'list_sequences',