stub file viewer

17 files changed, 95 insertions, 49 deletions

diff --git a/app/client/browser/browser.component.js b/app/client/browser/browser.component.js
index 767c5fb..5183161 100644
--- a/app/client/browser/browser.component.js
+++ b/app/client/browser/browser.component.js
@@ -27,7 +27,11 @@ class Browser extends Component {
   }
   handlePick(file) {
     console.log(file)
-    this.fetch([this.state.dir, file.name].join('/').replace('//','/'))
+    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)
@@ -38,10 +42,21 @@ class Browser extends Component {
       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 => {
+      this.setState({ file, loadingFile: false })
+    })
+  }
 
   render() {
     const { app } = this.props
-    const { loading, dir, module, files } = this.state
+    const {
+      loading, dir, module, files,
+      loadingFile, file,
+    } = this.state
     console.log(this.props, this.state)
     return (
       <div className='app browser'>
@@ -65,6 +80,7 @@ class Browser extends Component {
             this.fetch(this.state.dir.split('/').slice(0, -1).join('') || '/')
           }}
         />
+        {loadingFile && <Loading />}
       </div>
     )
   }
diff --git a/app/client/common/currentTask.component.js b/app/client/common/currentTask.component.js
index 3c71a88..ef976bc 100644
--- a/app/client/common/currentTask.component.js
+++ b/app/client/common/currentTask.component.js
@@ -31,7 +31,7 @@ function CurrentTask ({ cpu, gpu, processor }) {
         ? <span>(currently #{epoch})</span>
         : ""}
       <br/><br/>
-      <div class='quiet'>{last_message}</div>
+      <div className='quiet'>{last_message}</div>
     </div>
   )
 }
diff --git a/app/client/common/fileList.component.js b/app/client/common/fileList.component.js
index 0e6b25e..f932274 100644
--- a/app/client/common/fileList.component.js
+++ b/app/client/common/fileList.component.js
@@ -41,8 +41,8 @@ export const FileList = props => {
   if (!fileList || !fileList.length) {
     return (
       <div className={'rows ' + className}>
-        <div class='row heading'>
-          <h4 class='noFiles'>No files</h4>
+        <div className='row heading'>
+          <h4 className='noFiles'>No files</h4>
         </div>
       </div>
     )
@@ -51,7 +51,7 @@ export const FileList = props => {
   return (
     <div className={'rows ' + className}>
       {title &&
-        <div class='row heading'>
+        <div className='row heading'>
           <h3>{title}</h3>}
         </div>
       }
@@ -60,7 +60,7 @@ export const FileList = props => {
         {parentDirectory && 
           <div className={rowClassName + ' parent'}>
             <div className="filename" title="Parent Directory">
-              <span class='link' onClick={(e) => onClickParent && onClickParent(e)}>
+              <span className='link' onClick={(e) => onClickParent && onClickParent(e)}>
                 <i>Parent Directory</i>
               </span>
             </div>
@@ -98,14 +98,14 @@ export const FileRow = props => {
   }
 
   return (
-    <div class={className} key={key}>
+    <div className={className} key={key}>
       {fields.has('name') &&
         <div className="filename" title={file.name || file.url}>
           {file.persisted === false
             ? <span className='unpersisted'>{name}</span>
             : (linkFiles && file.url)
             ? <a target='_blank' onClick={(e) => { if (!(e.metaKey || e.ctrlKey || e.altKey) && onClick) { e.preventDefault(); onClick && onClick(file, e) }}} href={file.url}>{name}</a>
-            : <span class='link' onClick={(e) => onClick && onClick(file, e)}>{name}</span>
+            : <span className='link' onClick={(e) => onClick && onClick(file, e)}>{name}</span>
           }
         </div>
       }
diff --git a/app/client/common/folderList.component.js b/app/client/common/folderList.component.js
index a6c6ae5..91d0bff 100644
--- a/app/client/common/folderList.component.js
+++ b/app/client/common/folderList.component.js
@@ -12,7 +12,7 @@ export default function FolderList ({ db, path, emptyText, activity }) {
   if (! db) return null
   if (db.loading || !db.data) {
     return (
-      <div class='col folderList'>
+      <div className='col folderList'>
         <Loading progress={db.progress} />
       </div>
     )
@@ -23,7 +23,7 @@ export default function FolderList ({ db, path, emptyText, activity }) {
   }
   if (! folderList.length && emptyText) {
     return (
-      <div class='col folderList'>
+      <div className='col folderList'>
         {emptyText}
       </div>
     )
@@ -41,7 +41,7 @@ export default function FolderList ({ db, path, emptyText, activity }) {
   })
 
   return (
-    <div class='col folderList'>
+    <div className='col folderList'>
       <Group title='Projects'>
         {folders}
       </Group>
diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js
index 7252ca3..9dba730 100644
--- a/app/client/common/slider.component.js
+++ b/app/client/common/slider.component.js
@@ -81,7 +81,7 @@ class Slider extends Component {
       text_value = parseFloat(value).toFixed(2)
     }
     return (
-      <div class='slider param'>
+      <div className='slider param'>
         <label>
           <span>{title || name.replace(/_/g, ' ')}</span>
           <input type='text' value={text_value} onBlur={this.handleInput} />
diff --git a/app/client/common/taskList.component.js b/app/client/common/taskList.component.js
index c1ed38a..272ff80 100644
--- a/app/client/common/taskList.component.js
+++ b/app/client/common/taskList.component.js
@@ -56,18 +56,18 @@ class TaskList extends Component {
         dataset_link = label
       }
       return (
-        <div class='row'>
-          <div class='activity'>{task.activity} {task.module}</div>
-          <div class='dataset'>{dataset_link}</div>
+        <div className='row'>
+          <div className='activity'>{task.activity} {task.module}</div>
+          <div className='dataset'>{dataset_link}</div>
           <div className={"age " + util.carbon_date(task.updated_at)}>{util.get_age(task.updated_at)}</div>
-          <div class='options'>
-            <span class='destroy' onClick={() => this.handleDestroy(task)}>x</span>
+          <div className='options'>
+            <span className='destroy' onClick={() => this.handleDestroy(task)}>x</span>
           </div>
         </div>
       )
     })
     return (
-      <div class='tasklist rows'>
+      <div className='tasklist rows'>
         {taskList}
       </div>
     )
diff --git a/app/client/common/views/new.view.js b/app/client/common/views/new.view.js
index a6ab3b1..a417bfc 100644
--- a/app/client/common/views/new.view.js
+++ b/app/client/common/views/new.view.js
@@ -22,11 +22,11 @@ export default class NewView extends Component {
   render(){
     const { module, history, db, path } = this.props
     return (
-      <div class={'app new-view ' + module.name}>
-        <div class='heading'>
+      <div className={'app new-view ' + module.name}>
+        <div className='heading'>
           <h1>{module.displayName || module.name}</h1>
         </div>
-        <div class='col narrow'>
+        <div className='col narrow'>
           <NewDatasetForm
             module={module}
             history={history}
diff --git a/app/client/dashboard/dashboardHeader.component.js b/app/client/dashboard/dashboardHeader.component.js
index 063cd47..45e9914 100644
--- a/app/client/dashboard/dashboardHeader.component.js
+++ b/app/client/dashboard/dashboardHeader.component.js
@@ -15,7 +15,7 @@ class DashboardHeader extends Component {
   render() {
     const { site, runner } = this.props
     return (
-	    <div class='dashboardHeader heading'>
+	    <div className='dashboardHeader heading'>
 	      <h1>{site.name} cortex</h1>
         {this.renderStatus("GPU", runner.gpu)}
         {this.renderStatus("CPU", runner.cpu)}
diff --git a/app/client/dataset/dataset.component.js b/app/client/dataset/dataset.component.js
index 7df1b9c..af48ef4 100644
--- a/app/client/dataset/dataset.component.js
+++ b/app/client/dataset/dataset.component.js
@@ -23,19 +23,19 @@ class DatasetComponent extends Component {
     if (!folder || !folder.name) return
     fields = fieldSet(fields)
     return (
-      <div class='rows params datasets'>
-        <div class='row row-heading dataset'>
+      <div className='rows params datasets'>
+        <div className='row row-heading dataset'>
           {fields.has('input') &&
-            <div class='col'>input</div>
+            <div className='col'>input</div>
           }
           {fields.has('status') &&
-            <div class='col'>status</div>
+            <div className='col'>status</div>
           }
           {fields.has('checkpoint') &&
-            <div class='col'>checkpoint</div>
+            <div className='col'>checkpoint</div>
           }
           {fields.has('output') &&
-            <div class='col'>output</div>
+            <div className='col'>output</div>
           }
         </div>
         {this.renderGroups()}
diff --git a/app/client/dataset/dataset.new.js b/app/client/dataset/dataset.new.js
index 1b0df86..19f479a 100644
--- a/app/client/dataset/dataset.new.js
+++ b/app/client/dataset/dataset.new.js
@@ -12,11 +12,11 @@ function NewDatasetForm (props) {
   if (loading) return <Loading />
   console.log(props)
   return (
-    <div class='opaque'>
-      <div class='heading'>
+    <div className='opaque'>
+      <div className='heading'>
         <h2>Create a new {module.displayName} project</h2>
       </div>
-      <div class='params'>
+      <div className='params'>
         <TextInput
           autofocus
           title={'Name your project'}
diff --git a/app/client/dataset/upload.status.js b/app/client/dataset/upload.status.js
index 3fce4fa..3437019 100644
--- a/app/client/dataset/upload.status.js
+++ b/app/client/dataset/upload.status.js
@@ -6,7 +6,7 @@ import Loading from '../common/loading.component'
 
 function UploadStatus (props) {
   return (
-    <div class='status'>
+    <div className='status'>
       {props.status}
     </div>
   )
diff --git a/app/client/modules/morph/views/morph.app.js b/app/client/modules/morph/views/morph.app.js
index 153fe2b..bd049c4 100644
--- a/app/client/modules/morph/views/morph.app.js
+++ b/app/client/modules/morph/views/morph.app.js
@@ -66,8 +66,8 @@ class MorphResults extends Component {
         <div className='heading row middle'>
           <h1>Morph</h1>
         </div>
-        <div class='rows params renders'>
-          <div class='column'>
+        <div className='rows params renders'>
+          <div className='column'>
             <Group title="From">
               <Select
                 title="Starting sequence"
diff --git a/app/client/modules/pix2pix/views/pix2pix.live.js b/app/client/modules/pix2pix/views/pix2pix.live.js
index b6765ed..2b59656 100644
--- a/app/client/modules/pix2pix/views/pix2pix.live.js
+++ b/app/client/modules/pix2pix/views/pix2pix.live.js
@@ -151,7 +151,7 @@ class Pix2PixLive extends Component {
               >
               </ParamGroup>
 
-              <p class='last_message'>{this.props.last_message}</p>
+              <p className='last_message'>{this.props.last_message}</p>
             </ParamGroup>
           </div>
           <div className='column'>
diff --git a/app/client/modules/pix2pix/views/pix2pix.show.js b/app/client/modules/pix2pix/views/pix2pix.show.js
index 02a009e..4f57fac 100644
--- a/app/client/modules/pix2pix/views/pix2pix.show.js
+++ b/app/client/modules/pix2pix/views/pix2pix.show.js
@@ -41,8 +41,8 @@ class Pix2pixShow extends Component {
 
     return (
       <div className='app pix2pix'>
-        <div class='heading'>
-          <div class='spaced'>
+        <div className='heading'>
+          <div className='spaced'>
             <h1>{folder ? folder.name : <Loading />}</h1>
             <UploadStatus />
           </div>
@@ -89,24 +89,24 @@ class Pix2pixShow extends Component {
     console.log(dataset)
     return (
       <div>
-        <div class={'actions'}>
-          <span class='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 1)}>train</span>
-          <span class='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 5)}>5x</span>
-          <span class='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 10)}>10x</span>
-          <span class='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 20)}>20x</span>
-          <span class='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 50)}>50x</span>
+        <div className={'actions'}>
+          <span className='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 1)}>train</span>
+          <span className='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 5)}>5x</span>
+          <span className='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 10)}>10x</span>
+          <span className='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 20)}>20x</span>
+          <span className='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 50)}>50x</span>
         </div>
         {dataset.isBuilt
-        ? <div class='subtext'>
+        ? <div className='subtext'>
             {'fetched '}
-            <span class='link' onClick={() => remote.clear_cache_task(dataset)}>rm</span>
+            <span className='link' onClick={() => remote.clear_cache_task(dataset)}>rm</span>
           </div>
         : isFetching
-        ? <div class='subtext'>
+        ? <div className='subtext'>
             {'fetching'}
           </div>
-        : <div class='subtext'>
-            <span class='link' onClick={() => remote.fetch_task(input.url, input.id, dataset.name)}>fetch</span>
+        : <div className='subtext'>
+            <span className='link' onClick={() => remote.fetch_task(input.url, input.id, dataset.name)}>fetch</span>
           </div>
         }
       </div>
diff --git a/app/client/socket/socket.actions.js b/app/client/socket/socket.actions.js
index b80a0fa..4bae3b3 100644
--- a/app/client/socket/socket.actions.js
+++ b/app/client/socket/socket.actions.js
@@ -8,6 +8,7 @@ export const count_directory    = opt => syscall_async('count_directory', opt).t
 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 read_file          = opt => syscall_async('read_file', opt)
 
 export const syscall_async = (tag, payload, ttl=10000) => {
   ttl = payload.ttl || ttl
diff --git a/app/relay/remote.js b/app/relay/remote.js
index 1c9875f..a0639a5 100644
--- a/app/relay/remote.js
+++ b/app/relay/remote.js
@@ -146,6 +146,16 @@ remote.on('system', (data) => {
         })
       })
       break
+    case 'read_file':
+      runner.read_file(data.payload, (file) => {
+        remote.emit('system_res', {
+          type: 'read_file',
+          query: data.payload,
+          uuid: data.uuid,
+          file,
+        })
+      })
+      break
     case 'get_status':
       remote.emit('system_res', {
         type: 'relay_status',
diff --git a/app/relay/runner.js b/app/relay/runner.js
index 44f2554..f1e3497 100644
--- a/app/relay/runner.js
+++ b/app/relay/runner.js
@@ -11,6 +11,7 @@ import readdir from 'fs-readdir-promise'
 
 import * as q from './queue'
 
+const MAX_TRANSFER_SIZE = 1024 * 1024 * 2.5
 const idle_state = { status: 'IDLE', task: {} }
 
 export const state = {
@@ -169,6 +170,24 @@ export function module_dir(opt, dir){
   return path.join(module.cwd, dir.replace(/\.\.?\//g, ''))
 }
 
+export function read_file(opt, cb) {
+  const fn = module_dir(opt, opt.fn)
+  if (!fn) return cb([])
+  stat_promise(fn).then(stat => {
+    if (stat.size > MAX_TRANSFER_SIZE) {
+      return cb({ error: 'file too large'})
+    }
+    fs.readFile(fn, (err, buf) => cb({
+      error: err,
+      name: opt.fn,
+      path: fn,
+      date: stat.ctime,
+      size: stat.size,
+      buf
+    }))
+  }).catch(() => cb({ error: 'error reading file' }))
+}
+
 export function list_directory(opt, cb) {
   const dir = module_dir(opt, opt.dir)
   if (!dir) return cb([])