timeline stuff working

3 files changed, 64 insertions, 39 deletions

diff --git a/app/client/common/timeline.component.js b/app/client/common/timeline.component.js
index 3008c37..d3739b1 100644
--- a/app/client/common/timeline.component.js
+++ b/app/client/common/timeline.component.js
@@ -53,7 +53,7 @@ export default class Timeline extends Component {
     const len = sequence.length - 1
     const start = { frame: sequence[0], i: 0 }
     const end = { frame: sequence[len], i: len }
-    const width = Math.sqrt(clamp(sequence.length / 15000, 0.2, 1.0)) * Math.min(window.innerWidth - 40, 1000)
+    const width = Math.sqrt(clamp(sequence.length / 15000, 0.3, 1.0)) * Math.min(window.innerWidth - 40, 1000)
     const ratio = width / sequence.length
     setTimeout(() => this.computeOffset())
     this.setState({
diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
index 6aade36..1641976 100644
--- a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
@@ -72,9 +72,10 @@ class Pix2PixHDTrain extends Component {
     if (this.props.pix2pixhd.loading) {
       return <Loading progress={this.props.pix2pixhd.progress} />
     }
-    const { pix2pixhd, match, history, queue } = this.props
+    const { pix2pixhd, match, history } = this.props
     const { folderLookup, datasetLookup } = (pix2pixhd.data || {})
     const folder = (folderLookup || {})[pix2pixhd.folder_id] || {}
+    const { checkpoint } = pix2pixhd
     // console.log(pix2pixhd)
 
     const checkpointGroups = Object.keys(folderLookup).map(id => {
@@ -122,19 +123,29 @@ class Pix2PixHDTrain extends Component {
             </Group>
           </div>
         </div>
-        <div>
-          <Group title='Sequence Editor'>
-            <SequenceEditor
-              module={pix2pixhdModule}
-              checkpoint={this.props.pix2pixhd.checkpoint}
-            />
-          </Group>
-        </div>
+        {checkpoint && checkpoint.sequence && checkpoint.sequence.length
+          ? this.renderEditor()
+          : checkpoint && <div>Sequence empty, augmentation impossible</div>}
+      </div>
+    )
+  }
+
+  renderEditor(){
+    const { pix2pixhd, queue } = this.props
+    const { checkpoint } = pix2pixhd
+    return (
+      <div>
+        <Group title='Sequence Editor'>
+          <SequenceEditor
+            module={pix2pixhdModule}
+            checkpoint={checkpoint}
+          />
+        </Group>
         <div className='columns'>
           <div className='column'>
             <Group title='Augmentation Grid'>
               <AugmentationGrid
-                checkpoint={this.props.pix2pixhd.checkpoint}
+                checkpoint={checkpoint}
                 take={[1,2,3,4,5,10,15,20,25,50,75,100,200,300,400,500,1000]}
                 make={[1,2,3,4,5,10,15,20,25,50,75,100,200,]}
                 onAugment={(augment_take, augment_make) => {
@@ -153,7 +164,7 @@ class Pix2PixHDTrain extends Component {
                       augment_make: 149,
                       no_symlinks: true,
                       mov: true,
-                      folder_id: this.props.pix2pixhd.data.resultsFolder.id
+                      folder_id: pix2pixhd.data.resultsFolder.id
                     })
                   }, 250)
                 }}
@@ -191,7 +202,7 @@ class Pix2PixHDTrain extends Component {
                     ...this.state,
                     no_symlinks: true,
                     mov: true,
-                    folder_id: this.props.pix2pixhd.data.resultsFolder.id
+                    folder_id: 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 3bf2d63..06f3889 100644
--- a/app/client/modules/pix2pixhd/views/sequence.editor.js
+++ b/app/client/modules/pix2pixhd/views/sequence.editor.js
@@ -5,7 +5,7 @@ import { Route, Link } from 'react-router-dom'
 
 import util from '../../../util'
 
-import { FileViewer, Timeline, Param, Button } from '../../../common'
+import { FileViewer, Timeline, Param, Button, Group, TextInput } from '../../../common'
 
 import actions from '../../../actions'
 
@@ -13,6 +13,7 @@ const initialState = {
   dir: '/',
   cursor: null,
   selection: null,
+  title: null,
 }
 
 /*
@@ -64,6 +65,7 @@ class SequenceEditor extends Component {
     console.log(checkpoint)
     this.setState({
       ...initialState,
+      title: checkpoint.name + '_v_' + Date.now()
     })
   }
 
@@ -77,35 +79,47 @@ class SequenceEditor extends Component {
 
   render() {
     const { app, checkpoint } = this.props
-    const { cursor, selection } = this.state
+    const { cursor, selection, title } = this.state
     const path = "sequences/" + checkpoint.name
     return (
-      <div className='sequenceEditor'>
-        <Timeline
-          sequence={checkpoint.sequence}
-          onCursor={this.handleCursor}
-          onSelect={this.handleSelect}
-        />
-        <Frame label='Cursor' path={path} frame={cursor} />
-        {selection && selection.start && 
-          <Frame label='Selection Start' path={path} frame={selection.start} />
-        }
-        {selection && selection.end && 
-          <Frame label='Selection End' path={path} frame={selection.end} />
-        }
-        {selection &&
-          <div className='form'>
-            <Param
-              title='Selection length'
-            >{selection.end.i - selection.start.i}{' frames'}</Param>
-            <Param
-              title='Duration'
-            >{util.frameTimestamp(selection.end.i - selection.start.i)}</Param>
-            <Button
-              title='Create a new dataset?'
-            >Create</Button>
+      <div className='sequenceEditor row'>
+        {selection
+        ? <div className='form'>
+            <Group title='New dataset'>
+              <Param title='Selection length'>
+                {selection.end.i - selection.start.i}{' frames'}
+              </Param>
+              <Param title='Duration'>
+                {util.frameTimestamp(selection.end.i - selection.start.i)}
+              </Param>
+              <TextInput
+                title='Title dataset'
+                value={title}
+                onInput={title => this.setState({ title })}
+              />
+              <Button
+                title='Create a new dataset?'
+              >Create</Button>
+            </Group>
           </div>
+        : <div className='form'><Group title='New dataset'>Please select some frames</Group></div>
         }
+        <div className='rows'>
+          <div className='row'>
+            <Frame label='Cursor' path={path} frame={cursor} />
+            {selection && selection.start && 
+              <Frame label='Selection Start' path={path} frame={selection.start} />
+            }
+            {selection && selection.end && 
+              <Frame label='Selection End' path={path} frame={selection.end} />
+            }
+          </div>
+          <Timeline
+            sequence={checkpoint.sequence}
+            onCursor={this.handleCursor}
+            onSelect={this.handleSelect}
+          />
+        </div>
       </div>
     )
   }