group sequences/checkpoints by folder

6 files changed, 141 insertions, 25 deletions

diff --git a/app/client/common/index.js b/app/client/common/index.js
index 3981fa7..025b56c 100644
--- a/app/client/common/index.js
+++ b/app/client/common/index.js
@@ -13,6 +13,7 @@ import ParamGroup from './paramGroup.component'
 import Player from './player.component'
 import Progress from './progress.component'
 import Select from './select.component'
+import SelectGroup from './selectGroup.component'
 import Slider from './slider.component'
 import TextInput from './textInput.component'
 import * as Views from './views'
@@ -23,6 +24,6 @@ export {
   FolderList, FileList, FileRow, FileUpload,
   Gallery, Player,
   Group, ParamGroup, Param,
-  TextInput, Slider, Select, Button, Checkbox,
+  TextInput, Slider, Select, SelectGroup, Button, Checkbox,
   CurrentTask,
 }
\ No newline at end of file
diff --git a/app/client/common/selectGroup.component.js b/app/client/common/selectGroup.component.js
new file mode 100644
index 0000000..b653fdf
--- /dev/null
+++ b/app/client/common/selectGroup.component.js
@@ -0,0 +1,66 @@
+import { h, Component } from 'preact'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+class SelectGroup extends Component {
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+  }
+  handleChange(e){
+    clearTimeout(this.timeout)
+    let new_value = e.target.value
+    if (new_value === 'PLACEHOLDER') return
+    this.props.onChange && this.props.onChange(this.props.name, new_value)
+  }
+  render() {
+    const currentValue = this.props.live ? this.props.opt[this.props.name] : this.props.value
+    let lastValue
+    const options = (this.props.options || []).map((group, i) => {
+      const groupName = group.name
+      const children = group.options.map(key => {
+        let name = key.length < 2 ? key.toUpperCase() : key
+        let value = key.replace(/_/g, ' ')
+        lastValue = value
+        return (
+          <option value={value} key={value}>
+            {value}
+          </option>
+        )
+      })
+      return (
+        <optgroup label={groupName} key={groupName}>
+          {children}
+        </optgroup>
+      )
+    })
+    return (
+      <div className='select param'>
+        <label>
+          <span>{this.props.title}</span>
+          <select
+            onChange={this.handleChange}
+            value={currentValue || lastValue}
+          >
+            {this.props.placeholder && <option value="PLACEHOLDER">{this.props.placeholder}</option>}
+            {options}
+          </select>
+        </label>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+function capitalize(s){
+  return (s || "").replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
+}
+
+const mapStateToProps = (state, props) => ({
+  opt: props.opt || state.live.opt,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SelectGroup)
diff --git a/app/client/live/live.reducer.js b/app/client/live/live.reducer.js
index 7fd7667..dfdf7ee 100644
--- a/app/client/live/live.reducer.js
+++ b/app/client/live/live.reducer.js
@@ -11,6 +11,7 @@ const liveInitialState = {
     recurse_roll: 0, rotate: 0, scale: 0, process_frac: 0.5,
     view_mode: 'b',
   },
+  all_checkpoints: [],
   checkpoints: [],
   epochs: ['latest'],
   sequences: [],
@@ -57,7 +58,15 @@ const liveReducer = (state = liveInitialState, action) => {
         epochs: [],
       }
 
+    case types.socket.list_all_checkpoints:
+      return {
+        ...state,
+        all_checkpoints: action.all_checkpoints,
+        epochs: [],
+      }
+
     case types.socket.list_epochs:
+      console.log(action)
       if (action.epochs === "not found") return { ...state, epochs: [] }
       return {
         ...state,
diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.live.js b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
index b127e23..41ff7e5 100644
--- a/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 
 import {
   ParamGroup, Param, Player, Group,
-  Slider, Select, TextInput, Button, Loading
+  Slider, SelectGroup, Select, TextInput, Button, Loading
 } from '../../../common/'
 
 import { startRecording, stopRecording, saveFrame, toggleFPS } from '../../../live/player'
@@ -39,6 +39,7 @@ class Pix2PixHDLive extends Component {
   }
   componentWillUpdate(nextProps) {
     if (nextProps.opt.checkpoint_name && nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
+      console.log('listing epochs')
       this.props.actions.live.list_epochs('pix2pixhd', nextProps.opt.checkpoint_name)
     }
   }
@@ -101,6 +102,44 @@ class Pix2PixHDLive extends Component {
     if (this.props.pix2pixhd.loading) {
       return <Loading />
     }
+    const { folderLookup, datasetLookup, sequences } = this.props.pix2pixhd.data
+
+    const sequenceLookup = sequences.reduce((a,b) => {
+      a[b.name] = true
+      return a
+    }, {})
+
+    const sequenceGroups = Object.keys(folderLookup).map(id => {
+      const folder = this.props.pix2pixhd.data.folderLookup[id]
+      if (folder.name === 'results') return
+      const datasets = folder.datasets.map(name => {
+        const sequence = sequenceLookup[name]
+        if (sequence) {
+          return name
+        }
+        return null
+      }).filter(n => !!n)
+      return {
+        name: folder.name,
+        options: datasets.sort(),
+      }
+    }).filter(n => !!n && !!n.options.length).sort((a,b) => a.name.localeCompare(b.name))
+
+    const checkpointGroups = Object.keys(folderLookup).map(id => {
+      const folder = this.props.pix2pixhd.data.folderLookup[id]
+      if (folder.name === 'results') return
+      const datasets = folder.datasets.map(name => {
+        const dataset = datasetLookup[name]
+        if (dataset.checkpoints.length) {
+          return name
+        }
+        return null
+      }).filter(n => !!n)
+      return {
+        name: folder.name,
+        options: datasets.sort(),
+      }
+    }).filter(n => !!n && !!n.options.length).sort((a,b) => a.name.localeCompare(b.name))
     return (
       <div className='app live centered'>
         <Player width={424} height={256} fullscreen={this.props.fullscreen} />
@@ -116,16 +155,16 @@ class Pix2PixHDLive extends Component {
                 options={['a','b','sequence','recursive']}
                 onChange={this.props.actions.live.set_param}
               />
-              <Select live
+              <SelectGroup live
                 name='sequence_name'
                 title='sequence'
-                options={this.props.pix2pixhd.data.sequences.map(file => file.name)}
+                options={sequenceGroups}
                 onChange={this.changeSequence}
               />
-              <Select live
+              <SelectGroup live
                 name='checkpoint_name'
                 title='checkpoint'
-                options={this.props.pix2pixhd.data.checkpoints.map(file => file.name)}
+                options={checkpointGroups}
                 onChange={this.changeCheckpoint}
               />
               <Select live
diff --git a/app/client/socket/socket.actions.js b/app/client/socket/socket.actions.js
index e15dda2..78b0517 100644
--- a/app/client/socket/socket.actions.js
+++ b/app/client/socket/socket.actions.js
@@ -1,24 +1,13 @@
 import uuidv1 from 'uuid/v1'
 import { socket } from './socket.connection'
 
-export function run_system_command(opt) {
-  return syscall_async('run_system_command', opt)
-}
-export function disk_usage(opt) {
-  return syscall_async('run_system_command', { cmd: 'du', ...opt })
-}
-export function list_directory(opt) {
-  return syscall_async('list_directory', opt).then(res => res.files)
-}
-export function list_sequences(opt) {
-  return syscall_async('list_sequences', opt).then(res => res.sequences)
-}
-export function run_script(opt) {
-  return syscall_async('run_script', opt)
-}
-export function upload_file(opt) {
-  return syscall_async('upload_file', opt)
-}
+export const run_system_command = opt => syscall_async('run_system_command', opt)
+export const disk_usage         = opt => syscall_async('run_system_command', { cmd: 'du', ...opt })
+export const list_directory     = opt => syscall_async('list_directory', opt).then(res => res.files)
+export const list_sequences     = opt => syscall_async('list_sequences', opt).then(res => res.sequences)
+export const run_script         = opt => syscall_async('run_script', opt)
+export const upload_file        = opt => syscall_async('upload_file', opt)
+
 export const syscall_async = (tag, payload, ttl=10000) => {
   ttl = payload.ttl || ttl
   return new Promise( (resolve, reject) => {
diff --git a/app/client/socket/socket.live.js b/app/client/socket/socket.live.js
index fc53eb3..a1a7a3f 100644
--- a/app/client/socket/socket.live.js
+++ b/app/client/socket/socket.live.js
@@ -27,6 +27,12 @@ socket.on('res', (data) => {
         checkpoints: data.res,
       })
       break
+    case 'list_all_checkpoints':
+      dispatch({
+        type: types.socket.list_all_checkpoints,
+        checkpoints: data.res,
+      })
+      break
     case 'list_epochs':
       dispatch({
         type: types.socket.list_epochs,
@@ -53,10 +59,16 @@ export function list_checkpoints(module) {
     payload: module,
   })
 }
+export function list_all_checkpoints(module) {
+  socket.emit('cmd', {
+    cmd: 'list_all_checkpoints',
+    payload: module,
+  })
+}
 export function list_epochs(module, checkpoint_name) {
   socket.emit('cmd', {
     cmd: 'list_epochs',
-    payload: module + '/' + checkpoint_name,
+    payload: (module === 'pix2pix' || module === 'pix2wav') ? module + '/' + checkpoint_name : checkpoint_name,
   })
 }
 export function list_sequences(module) {