move fetch functionality into fileviweer

2 files changed, 37 insertions, 15 deletions

diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
index 957b068..ae46fdb 100644
--- a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
@@ -19,6 +19,7 @@ import NewDatasetForm from '../../../dataset/dataset.new'
 import UploadStatus from '../../../dataset/upload.status'
 
 import DatasetComponent from '../../../dataset/dataset.component'
+import SequenceEditor from './sequence.editor'
 
 import pix2pixhdModule from '../pix2pixhd.module'
 
@@ -34,7 +35,7 @@ class Pix2PixHDTrain extends Component {
       augment_make: 20,
     }
   }
-  componentWillMount(){
+  componentDidMount(){
     const id = this.props.match.params.id || localStorage.getItem('pix2pixhd.last_id')
     console.log('load dataset:', id)
     const { match, pix2pixhd, actions } = this.props
@@ -47,9 +48,14 @@ class Pix2PixHDTrain extends Component {
     } else {
       this.props.history.push('/pix2pixhd/new/')
     }
+    const dataset = localStorage.getItem('pix2pixhd.last_dataset')
+    if (dataset) {
+      this.setState({ checkpoint_name: dataset })
+    }
   }
   componentDidUpdate(prevProps, prevState){
     if (prevState.checkpoint_name !== this.state.checkpoint_name) {
+      localStorage.setItem('pix2pixhd.last_dataset', this.state.checkpoint_name)
       this.setState({ epoch: 'latest' })
       this.props.actions.list_epochs(this.state.checkpoint_name)
       this.props.actions.count_dataset(this.state.checkpoint_name)
@@ -114,6 +120,19 @@ class Pix2PixHDTrain extends Component {
                 value={this.state.epoch}
               />
             </Group>
+          </div>
+        </div>
+        <div>
+          <Group title='Sequence Editor'>
+            <SequenceEditor
+              module={pix2pixhdModule}
+              dataset={this.state.checkpoint_name}
+              checkpoint={this.props.pix2pixhd.checkpoint}
+            />
+          </Group>
+        </div>
+        <div className='columns'>
+          <div className='column'>
             <Group title='Augmentation Grid'>
               <AugmentationGrid
                 checkpoint={this.props.pix2pixhd.checkpoint}
@@ -132,7 +151,7 @@ class Pix2PixHDTrain extends Component {
                     this.props.remote.augment_task(this.state.checkpoint_name, {
                       ...this.state,
                       augment_take: 10,
-                      augment_make: 150,
+                      augment_make: 149,
                       no_symlinks: true,
                       mov: true,
                       folder_id: this.props.pix2pixhd.data.resultsFolder.id
diff --git a/app/client/modules/pix2pixhd/views/sequence.editor.js b/app/client/modules/pix2pixhd/views/sequence.editor.js
index 9693805..a749df9 100644
--- a/app/client/modules/pix2pixhd/views/sequence.editor.js
+++ b/app/client/modules/pix2pixhd/views/sequence.editor.js
@@ -3,9 +3,9 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { Route, Link } from 'react-router-dom'
 
-import { Loading, FileList, FileViewer } from '../../common'
+import { Loading, FileList, FileViewer } from '../../../common'
 
-import actions from '../actions'
+import actions from '../../../actions'
 
 class SequenceEditor extends Component {
   state = {
@@ -14,7 +14,12 @@ class SequenceEditor extends Component {
     loading: true
   }
   componentDidMount() {
-    this.fetch(this.state.dir)
+    this.fetch(this.props.dataset)
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.dataset !== prevProps.dataset) {
+      this.fetch(this.props.dataset)
+    }
   }
   handlePick(file) {
     console.log(file)
@@ -26,22 +31,13 @@ class SequenceEditor extends Component {
   }
   fetch(dir) {
     console.log('fetch', dir)
-    const { tool: module } = this.props.app
+    const { name: module } = this.props.module.name
     this.setState({ dir, file: null, loading: true })
     actions.socket.list_directory({ module, dir }).then(files => {
       console.log(files)
       this.setState({ dir, files, loading: false })
     })
   }
-  fetchFile(fn) {
-    console.log('fetch file', fn)
-    const { tool: module } = this.props.app
-    this.setState({ file: null, loadingFile: true })
-    actions.socket.read_file({ module, fn }).then(file => {
-      console.log(file)
-      this.setState({ file, loadingFile: false })
-    })
-  }
   render() {
     const { app } = this.props
     const {
@@ -49,6 +45,13 @@ class SequenceEditor extends Component {
       loadingFile, file,
     } = this.state
     console.log(this.props, this.state)
+    return (
+      <div className='sequenceEditor'>
+        <div className='timeline'>
+          <div className='selection'></div>
+        </div>
+      </div>
+    )
     // return (
     //   <div className='app browser'>
     //     <h1>{dir}{dir[dir.length-1] !== '/' && '/'}</h1>