5 files changed, 53 insertions, 6 deletions

diff --git a/app/client/common/select.component.js b/app/client/common/select.component.js
index 3b008a3..cfe4ebf 100644
--- a/app/client/common/select.component.js
+++ b/app/client/common/select.component.js
@@ -12,6 +12,7 @@ class Select extends Component {
     clearTimeout(this.timeout)
     let new_value = e.target.value
     this.props.actions.set_param(this.props.name, new_value)
+    this.props.onChange && this.props.onChange(new_value)
   }
   render() {
     const value = this.props.opt[this.props.name]
diff --git a/app/client/live/actions.js b/app/client/live/actions.js
index 026788d..eb0a2ff 100644
--- a/app/client/live/actions.js
+++ b/app/client/live/actions.js
@@ -25,3 +25,13 @@ export const list_sequences = () => {
   socket.list_sequences()
   return { type: 'LOADING_SEQUENCES', }
 }
+
+export const load_sequence = (sequence) => {
+  socket.load_sequence(sequence)
+  return { type: 'LOADING_SEQUENCE', }
+}
+
+export const load_epoch = (checkpoint, epoch) => {
+  socket.load_epoch(checkpoint, epoch)
+  return { type: 'LOADING_CHECKPOINT', }
+}
diff --git a/app/client/live/index.js b/app/client/live/index.js
index 5699266..44cc70b 100644
--- a/app/client/live/index.js
+++ b/app/client/live/index.js
@@ -15,12 +15,28 @@ class App extends Component {
     props.actions.get_params()
     props.actions.list_checkpoints()
     props.actions.list_sequences()
+    this.changeCheckpoint = this.changeCheckpoint.bind(this)
+    this.changeEpoch = this.changeEpoch.bind(this)
+    this.changeSequence = this.changeSequence.bind(this)
   }
   componentWillUpdate(nextProps) {
     console.log('willupdate', nextProps.opt)
-    if (nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
+    if (! nextProps.epochs || nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
       this.props.actions.list_epochs(nextProps.opt.checkpoint_name)
     }
+    if (! nextProps.epochs || nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
+      this.props.actions.list_epochs(nextProps.opt.checkpoint_name)
+    }
+  }
+  changeCheckpoint(checkpoint_name){
+    this.props.actions.load_epoch(checkpoint_name, 'latest')
+  }
+  changeEpoch(epoch_name){
+    this.props.actions.load_epoch(this.props.opt.checkpoint_name, epoch_name)
+  }
+  changeSequence(sequence){
+    console.log('got sequence', sequence)
+    this.props.actions.load_sequence(sequence)
   }
   render(){
     return (
@@ -41,16 +57,19 @@ class App extends Component {
                 name='checkpoint_name'
                 title='checkpoint'
                 options={this.props.checkpoints}
+                onChange={this.changeCheckpoint}
               />
               <Select
                 name='epoch'
                 title='epoch'
                 options={this.props.epochs}
+                onChange={this.changeEpoch}
               />
               <Select
                 name='sequence_name'
                 title='sequence'
                 options={this.props.sequences}
+                onChange={this.changeSequence}
               />
             </ParamGroup>
           </div>
diff --git a/app/client/live/reducer.js b/app/client/live/reducer.js
index e14a039..f774d3e 100644
--- a/app/client/live/reducer.js
+++ b/app/client/live/reducer.js
@@ -37,13 +37,16 @@ const liveReducer = (state = liveInitialState, action) => {
       return {
         ...state,
         checkpoints: action.checkpoints,
+        epochs: [],
       }
 
-    case 'LIST_CHECKPOINT_DIR':
+    case 'LIST_EPOCHS':
       return {
         ...state,
-        checkpoint_dir: action.checkpoint_dir,
-      }
+        epochs: action.epochs.map(a => [ a == 'latest' ? Infinity : a, a ])
+                      .sort((a,b) => a[0] - b[0])
+                      .map(a => a[1])
+    }
 
     case 'LIST_SEQUENCES':
       return {
diff --git a/app/client/socket.js b/app/client/socket.js
index 2650e0b..992d714 100644
--- a/app/client/socket.js
+++ b/app/client/socket.js
@@ -35,7 +35,7 @@ socket.on('res', (data) => {
     case 'list_epochs':
       store.dispatch({
         type: 'LIST_EPOCHS',
-        sequences: data.res,
+        epochs: data.res,
       })
       break
     default:
@@ -64,9 +64,10 @@ export function list_checkpoints() {
     cmd: 'list_checkpoints',
   })
 }
-export function list_epochs() {
+export function list_epochs(checkpoint_name) {
   socket.emit('cmd', {
     cmd: 'list_epochs',
+    payload: checkpoint_name,
   })
 }
 export function list_sequences() {
@@ -74,6 +75,19 @@ export function list_sequences() {
     cmd: 'list_sequences',
   })
 }
+export function load_epoch(checkpoint_name, epoch) {
+  console.log(">> SWITCH CHECKPOINT", checkpoint_name, epoch)
+  socket.emit('cmd', {
+    cmd: 'load_epoch',
+    payload: checkpoint_name + ':' + epoch,
+  })
+}
+export function load_sequence(sequence) {
+  socket.emit('cmd', {
+    cmd: 'load_sequence',
+    payload: sequence,
+  })
+}
 export function get_params() {
   socket.emit('cmd', {
     cmd: 'get_params',