From 70b4cc5adcef18d498b539579ecfa626aa5e6c18 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 30 Aug 2018 22:59:28 +0200 Subject: group sequences/checkpoints by folder --- app/client/common/index.js | 3 +- app/client/common/selectGroup.component.js | 66 ++++++++++++++++++++++ app/client/live/live.reducer.js | 9 +++ .../modules/pix2pixhd/views/pix2pixhd.live.js | 49 ++++++++++++++-- app/client/socket/socket.actions.js | 25 +++----- app/client/socket/socket.live.js | 14 ++++- 6 files changed, 141 insertions(+), 25 deletions(-) create mode 100644 app/client/common/selectGroup.component.js 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 ( + + ) + }) + return ( + + {children} + + ) + }) + return ( +
+ + {this.props.children} +
+ ) + } +} + +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 } + 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 (
@@ -116,16 +155,16 @@ class Pix2PixHDLive extends Component { options={['a','b','sequence','recursive']} onChange={this.props.actions.live.set_param} /> - file.name)} + options={checkpointGroups} onChange={this.changeCheckpoint} />