From 15d5cea9d1d94a6893ef1a55a916e68a182e5394 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 21 Sep 2018 22:49:55 +0200
Subject: browser is just a component

---
 app/client/browser/browser.actions.js              |  3 -
 app/client/browser/browser.component.js            | 90 ----------------------
 app/client/browser/browser.reducer.js              | 40 ----------
 app/client/common/browser.component.js             | 89 +++++++++++++++++++++
 app/client/common/index.js                         |  3 +-
 app/client/index.jsx                               |  3 +-
 .../modules/pix2pixhd/views/pix2pixhd.train.js     | 54 ++++++-------
 .../modules/pix2pixhd/views/sequence.editor.js     | 89 +++++++++++++++++++++
 app/client/store.js                                |  2 -
 9 files changed, 208 insertions(+), 165 deletions(-)
 delete mode 100644 app/client/browser/browser.actions.js
 delete mode 100644 app/client/browser/browser.component.js
 delete mode 100644 app/client/browser/browser.reducer.js
 create mode 100644 app/client/common/browser.component.js
 create mode 100644 app/client/modules/pix2pixhd/views/sequence.editor.js

(limited to 'app')

diff --git a/app/client/browser/browser.actions.js b/app/client/browser/browser.actions.js
deleted file mode 100644
index 81b9c7c..0000000
--- a/app/client/browser/browser.actions.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import types from '../types'
-import actions from '../actions'
-import util from '../util'
diff --git a/app/client/browser/browser.component.js b/app/client/browser/browser.component.js
deleted file mode 100644
index 076b4b4..0000000
--- a/app/client/browser/browser.component.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import { h, Component } from 'preact'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { Route, Link } from 'react-router-dom'
-
-import { Loading, FileList, FileViewer } from '../common'
-
-import actions from '../actions'
-
-class Browser extends Component {
-  state = {
-    dir: '/',
-    module: 'pix2pixhd',
-    files: [],
-    loading: true
-  }
-  componentDidMount() {
-    this.fetch(this.state.dir)
-  }
-  handlePick(file) {
-    console.log(file)
-    if (file.dir) {
-      this.fetch([this.state.dir, file.name].join('/').replace('//','/'))
-    } else {
-      this.fetchFile([this.state.dir, file.name].join('/').replace('//','/'))
-    }
-  }
-  fetch(dir) {
-    console.log('fetch', dir)
-    const { module } = this.state
-    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 { module } = this.state
-    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 {
-      loading, dir, module, files,
-      loadingFile, file,
-    } = this.state
-    console.log(this.props, this.state)
-    return (
-      <div className='app browser'>
-        <h1>{dir}{dir[dir.length-1] !== '/' && '/'}</h1>
-        {app.tool}<br/>
-        {loading && <Loading />}
-        <FileList
-          files={files}
-          groupDirectories
-          parentDirectory={dir !== '/'}
-          orderBy='name asc'
-          fields={'name datetime size'}
-          onClick={(file, e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            console.log('picked a result', file)
-            this.handlePick(file)
-          }}
-          onClickParent={e => {
-            console.log('navigate up')
-            this.fetch(this.state.dir.split('/').slice(0, -1).join('/') || '/')
-          }}
-        />
-        {loadingFile && <Loading />}
-        {file && <FileViewer file={file} />}
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  app: state.system.app,
-})
-
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  actions: bindActionCreators({}, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(Browser)
diff --git a/app/client/browser/browser.reducer.js b/app/client/browser/browser.reducer.js
deleted file mode 100644
index 099176f..0000000
--- a/app/client/browser/browser.reducer.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import types from '../types'
-
-import moment from 'moment/min/moment.min'
-let FileSaver = require('file-saver')
-
-const browserInitialState = {
-  loading: false,
-  progress: null,
-  error: null,
-  data: {},
-  images: [
-  ],
-  files: [
-  ]
-}
-
-const browserReducer = (state = browserInitialState, action) => {
-  switch(action.type) {
-    case types.app.load_progress:
-      if (!action.data || action.data.module !== 'browser') {
-        return state
-      }
-      return {
-        ...state,
-        loading: true,
-        progress: action.progress,
-      }
-    case types.app.load:
-      return {
-        ...state,
-        loading: false,
-        error: null,
-        data: action.data,
-      }
-    default:
-      return state
-  }
-}
-
-export default browserReducer
diff --git a/app/client/common/browser.component.js b/app/client/common/browser.component.js
new file mode 100644
index 0000000..50b31cf
--- /dev/null
+++ b/app/client/common/browser.component.js
@@ -0,0 +1,89 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Route, Link } from 'react-router-dom'
+
+import { Loading, FileList, FileViewer } from '../common'
+
+import actions from '../actions'
+
+class Browser extends Component {
+  state = {
+    dir: '/',
+    files: [],
+    loading: true
+  }
+  componentDidMount() {
+    this.fetch(this.state.dir)
+  }
+  handlePick(file) {
+    console.log(file)
+    if (file.dir) {
+      this.fetch([this.state.dir, file.name].join('/').replace('//','/'))
+    } else {
+      this.fetchFile([this.state.dir, file.name].join('/').replace('//','/'))
+    }
+  }
+  fetch(dir) {
+    console.log('fetch', dir)
+    const { tool: module } = this.props.app
+    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 {
+      loading, dir, files,
+      loadingFile, file,
+    } = this.state
+    console.log(this.props, this.state)
+    return (
+      <div className='app browser'>
+        <h1>{dir}{dir[dir.length-1] !== '/' && '/'}</h1>
+        {app.tool}<br/>
+        {loading && <Loading />}
+        <FileList
+          files={files}
+          groupDirectories
+          parentDirectory={dir !== '/'}
+          orderBy='name asc'
+          fields={'name datetime size'}
+          onClick={(file, e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            console.log('picked a result', file)
+            this.handlePick(file)
+          }}
+          onClickParent={e => {
+            console.log('navigate up')
+            this.fetch(this.state.dir.split('/').slice(0, -1).join('/') || '/')
+          }}
+        />
+        {loadingFile && <Loading />}
+        {file && <FileViewer file={file} />}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  app: state.system.app,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators({}, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Browser)
diff --git a/app/client/common/index.js b/app/client/common/index.js
index ffb852d..e120597 100644
--- a/app/client/common/index.js
+++ b/app/client/common/index.js
@@ -1,5 +1,6 @@
 import AudioPlayer from './audioPlayer/audioPlayer.component'
 import AugmentationGrid from './augmentationGrid.component'
+import Browser from './browser.component'
 import Button from './button.component'
 import ButtonGrid from './buttonGrid.component'
 import Checkbox from './checkbox.component'
@@ -28,7 +29,7 @@ export {
   Views,
   Loading, Progress, Header, AudioPlayer,
   FolderList, FileList, FileRow, FileUpload, FileViewer,
-  Gallery, Player,
+  Gallery, Player, Browser,
   Group, ParamGroup, Param,
   TextInput, NumberInput,
   Slider, Select, SelectGroup, Button, Checkbox,
diff --git a/app/client/index.jsx b/app/client/index.jsx
index 2b28ac1..cda528c 100644
--- a/app/client/index.jsx
+++ b/app/client/index.jsx
@@ -7,10 +7,9 @@ import * as socket from './socket'
 import util from './util'
 
 import Auth from './auth'
-import { Header, AudioPlayer } from './common'
+import { Header, Browser, AudioPlayer } from './common'
 import System from './system/system.component'
 import Dashboard from './dashboard/dashboard.component'
-import Browser from './browser/browser.component'
 import modules from './modules'
 
 const module_list = Object.keys(modules).map(name => {
diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
index 06caa5a..957b068 100644
--- a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
@@ -114,6 +114,33 @@ class Pix2PixHDTrain extends Component {
                 value={this.state.epoch}
               />
             </Group>
+            <Group title='Augmentation Grid'>
+              <AugmentationGrid
+                checkpoint={this.props.pix2pixhd.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) => {
+                  this.props.remote.augment_task(this.state.checkpoint_name, {
+                    ...this.state,
+                    augment_take,
+                    augment_make,
+                  })
+                }}
+                onTrain={() => {
+                  this.props.remote.train_task(this.state.checkpoint_name, pix2pixhd.folder_id, 1)
+                  setTimeout(() => { // auto-generate epoch demo
+                    this.props.remote.augment_task(this.state.checkpoint_name, {
+                      ...this.state,
+                      augment_take: 10,
+                      augment_make: 150,
+                      no_symlinks: true,
+                      mov: true,
+                      folder_id: this.props.pix2pixhd.data.resultsFolder.id
+                    })
+                  }, 250)
+                }}
+              />
+            </Group>
             <Group title='Augment'>
               <NumberInput
                 name="augment_take"
@@ -151,33 +178,6 @@ class Pix2PixHDTrain extends Component {
                 }}
               />
             </Group>
-            <Group title='Augmentation Grid'>
-              <AugmentationGrid
-                checkpoint={this.props.pix2pixhd.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) => {
-                  this.props.remote.augment_task(this.state.checkpoint_name, {
-                    ...this.state,
-                    augment_take,
-                    augment_make,
-                  })
-                }}
-                onTrain={() => {
-                  this.props.remote.train_task(this.state.checkpoint_name, pix2pixhd.folder_id, 1)
-                  setTimeout(() => { // auto-generate epoch demo
-                    this.props.remote.augment_task(this.state.checkpoint_name, {
-                      ...this.state,
-                      augment_take: 10,
-                      augment_make: 150,
-                      no_symlinks: true,
-                      mov: true,
-                      folder_id: this.props.pix2pixhd.data.resultsFolder.id
-                    })
-                  }, 250)
-                }}
-              />
-            </Group>
 
             <Group title='Status'>
               <Button
diff --git a/app/client/modules/pix2pixhd/views/sequence.editor.js b/app/client/modules/pix2pixhd/views/sequence.editor.js
new file mode 100644
index 0000000..9693805
--- /dev/null
+++ b/app/client/modules/pix2pixhd/views/sequence.editor.js
@@ -0,0 +1,89 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Route, Link } from 'react-router-dom'
+
+import { Loading, FileList, FileViewer } from '../../common'
+
+import actions from '../actions'
+
+class SequenceEditor extends Component {
+  state = {
+    dir: '/',
+    files: [],
+    loading: true
+  }
+  componentDidMount() {
+    this.fetch(this.state.dir)
+  }
+  handlePick(file) {
+    console.log(file)
+    if (file.dir) {
+      this.fetch([this.state.dir, file.name].join('/').replace('//','/'))
+    } else {
+      this.fetchFile([this.state.dir, file.name].join('/').replace('//','/'))
+    }
+  }
+  fetch(dir) {
+    console.log('fetch', dir)
+    const { tool: module } = this.props.app
+    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 {
+      loading, dir, files,
+      loadingFile, file,
+    } = this.state
+    console.log(this.props, this.state)
+    // return (
+    //   <div className='app browser'>
+    //     <h1>{dir}{dir[dir.length-1] !== '/' && '/'}</h1>
+    //     {app.tool}<br/>
+    //     {loading && <Loading />}
+    //     <FileList
+    //       files={files}
+    //       groupDirectories
+    //       parentDirectory={dir !== '/'}
+    //       orderBy='name asc'
+    //       fields={'name datetime size'}
+    //       onClick={(file, e) => {
+    //         e.preventDefault()
+    //         e.stopPropagation()
+    //         console.log('picked a result', file)
+    //         this.handlePick(file)
+    //       }}
+    //       onClickParent={e => {
+    //         console.log('navigate up')
+    //         this.fetch(this.state.dir.split('/').slice(0, -1).join('/') || '/')
+    //       }}
+    //     />
+    //     {loadingFile && <Loading />}
+    //     {file && <FileViewer file={file} />}
+    //   </div>
+    // )
+  }
+}
+
+const mapStateToProps = state => ({
+  app: state.system.app,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators({}, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SequenceEditor)
diff --git a/app/client/store.js b/app/client/store.js
index d6c632c..2b71e75 100644
--- a/app/client/store.js
+++ b/app/client/store.js
@@ -11,7 +11,6 @@ import liveReducer from './live/live.reducer'
 import queueReducer from './queue/queue.reducer'
 import systemReducer from './system/system.reducer'
 import uploadReducer from './dataset/upload.reducer'
-import browserReducer from './browser/browser.reducer'
 import dashboardReducer from './dashboard/dashboard.reducer'
 import audioPlayerReducer from './common/audioPlayer/audioPlayer.reducer'
 import { moduleReducer } from './modules/module.reducer'
@@ -23,7 +22,6 @@ const appReducer = combineReducers({
   queue: queueReducer,
   system: systemReducer,
   upload: uploadReducer,
-  browser: browserReducer,
   dashboard: dashboardReducer,
   audioPlayer: audioPlayerReducer,
   module: moduleReducer,
-- 
cgit v1.2.3-70-g09d2