merge

1 files changed, 404 insertions, 96 deletions

diff --git a/public/bundle.js b/public/bundle.js
index 686271e..ae8d7cd 100644
--- a/public/bundle.js
+++ b/public/bundle.js
@@ -2181,7 +2181,7 @@ var AuthGate = function (_Component2) {
   _createClass(AuthGate, [{
     key: 'render',
     value: function render() {
-      if (!this.props.auth.initialized) {
+      if (true && !this.props.auth.initialized) {
         console.log('loading auth');
         return (0, _preact.h)(
           'div',
@@ -2189,7 +2189,7 @@ var AuthGate = function (_Component2) {
           'Loading'
         );
       }
-      if (this.props.auth.isAuthenticated) {
+      if (true) {
         console.log('authenticated...');
         if (this.props.auth.returnTo) {
           var returnTo = this.props.auth.returnTo;
@@ -3153,6 +3153,176 @@ exports.default = AugmentationGrid;
 
 /***/ }),
 
+/***/ "./app/client/common/browser.component.js":
+/*!************************************************!*\
+  !*** ./app/client/common/browser.component.js ***!
+  \************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _preact = __webpack_require__(/*! preact */ "./node_modules/preact/dist/preact.esm.js");
+
+var _redux = __webpack_require__(/*! redux */ "./node_modules/redux/es/redux.js");
+
+var _reactRedux = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
+
+var _reactRouterDom = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/es/index.js");
+
+var _common = __webpack_require__(/*! ../common */ "./app/client/common/index.js");
+
+var _actions = __webpack_require__(/*! ../actions */ "./app/client/actions.js");
+
+var _actions2 = _interopRequireDefault(_actions);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Browser = function (_Component) {
+  _inherits(Browser, _Component);
+
+  function Browser() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Browser);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Browser.__proto__ || Object.getPrototypeOf(Browser)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      dir: '/',
+      files: [],
+      loading: true
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Browser, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.fetch(this.state.dir);
+    }
+  }, {
+    key: 'handlePick',
+    value: function 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('//', '/'));
+      }
+    }
+  }, {
+    key: 'fetch',
+    value: function fetch(dir) {
+      var _this2 = this;
+
+      console.log('fetch', dir);
+      var module = this.props.app.tool;
+
+      this.setState({ dir: dir, file: null, loading: true });
+      _actions2.default.socket.list_directory({ module: module, dir: dir }).then(function (files) {
+        console.log(files);
+        _this2.setState({ dir: dir, files: files, loading: false });
+      });
+    }
+  }, {
+    key: 'fetchFile',
+    value: function fetchFile(fn) {
+      var _this3 = this;
+
+      console.log('fetch file', fn);
+      var module = this.props.app.tool;
+
+      this.setState({ file: null, loadingFile: true });
+      _actions2.default.socket.read_file({ module: module, fn: fn }).then(function (file) {
+        console.log(file);
+        _this3.setState({ file: file, loadingFile: false });
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this4 = this;
+
+      var app = this.props.app;
+      var _state = this.state,
+          loading = _state.loading,
+          dir = _state.dir,
+          files = _state.files,
+          loadingFile = _state.loadingFile,
+          file = _state.file;
+
+      console.log(this.props, this.state);
+      return (0, _preact.h)(
+        'div',
+        { className: 'app browser' },
+        (0, _preact.h)(
+          'h1',
+          null,
+          dir,
+          dir[dir.length - 1] !== '/' && '/'
+        ),
+        app.tool,
+        (0, _preact.h)('br', null),
+        loading && (0, _preact.h)(_common.Loading, null),
+        (0, _preact.h)(_common.FileList, {
+          files: files,
+          groupDirectories: true,
+          parentDirectory: dir !== '/',
+          orderBy: 'name asc',
+          fields: 'name datetime size',
+          onClick: function onClick(file, e) {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('picked a result', file);
+            _this4.handlePick(file);
+          },
+          onClickParent: function onClickParent(e) {
+            console.log('navigate up');
+            _this4.fetch(_this4.state.dir.split('/').slice(0, -1).join('/') || '/');
+          }
+        }),
+        loadingFile && (0, _preact.h)(_common.Loading, null),
+        file && (0, _preact.h)(_common.FileViewer, { file: file })
+      );
+    }
+  }]);
+
+  return Browser;
+}(_preact.Component);
+
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    app: state.system.app
+  };
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch, ownProps) {
+  return {
+    actions: (0, _redux.bindActionCreators)({}, dispatch)
+  };
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(Browser);
+
+/***/ }),
+
 /***/ "./app/client/common/button.component.js":
 /*!***********************************************!*\
   !*** ./app/client/common/button.component.js ***!
@@ -3557,7 +3727,7 @@ function CurrentTask(_ref) {
     (0, _preact.h)('br', null),
     (0, _preact.h)(
       'div',
-      { 'class': 'quiet' },
+      { className: 'quiet' },
       last_message
     )
   );
@@ -3621,7 +3791,10 @@ var FileList = exports.FileList = function FileList(props) {
       title = props.title,
       linkFiles = props.linkFiles,
       onClick = props.onClick,
+      onClickParent = props.onClickParent,
       onDelete = props.onDelete,
+      groupDirectories = props.groupDirectories,
+      parentDirectory = props.parentDirectory,
       _props$orderBy = props.orderBy,
       orderBy = _props$orderBy === undefined ? 'name asc' : _props$orderBy,
       _props$className = props.className,
@@ -3635,9 +3808,16 @@ var FileList = exports.FileList = function FileList(props) {
       mapFn = _util$sort$orderByFn.mapFn,
       sortFn = _util$sort$orderByFn.sortFn;
 
-  var fileList = (files || []).filter(function (f) {
+  var sortedFiles = (files || []).filter(function (f) {
     return !!f;
-  }).map(mapFn).sort(sortFn).map(function (pair) {
+  }).map(mapFn).sort(sortFn);
+  if (groupDirectories) {
+    var groupedFiles = sortedFiles.reduce(function (a, b) {
+      a[b[1].dir].push(b);return a;
+    }, { true: [], false: [] });
+    sortedFiles = groupedFiles.true.concat(groupedFiles.false);
+  }
+  var fileList = sortedFiles.map(function (pair) {
     return (0, _preact.h)(FileRow, {
       file: pair[1],
       fields: fieldSet(fields),
@@ -3653,10 +3833,10 @@ var FileList = exports.FileList = function FileList(props) {
       { className: 'rows ' + className },
       (0, _preact.h)(
         'div',
-        { 'class': 'row heading' },
+        { className: 'row heading' },
         (0, _preact.h)(
           'h4',
-          { 'class': 'noFiles' },
+          { className: 'noFiles' },
           'No files'
         )
       )
@@ -3668,7 +3848,7 @@ var FileList = exports.FileList = function FileList(props) {
     { className: 'rows ' + className },
     title && (0, _preact.h)(
       'div',
-      { 'class': 'row heading' },
+      { className: 'row heading' },
       (0, _preact.h)(
         'h3',
         null,
@@ -3679,6 +3859,25 @@ var FileList = exports.FileList = function FileList(props) {
     (0, _preact.h)(
       'div',
       { className: 'rows ' + fileListClassName },
+      parentDirectory && (0, _preact.h)(
+        'div',
+        { className: rowClassName + ' parent' },
+        (0, _preact.h)(
+          'div',
+          { className: 'filename', title: 'Parent Directory' },
+          (0, _preact.h)(
+            'span',
+            { className: 'link', onClick: function onClick(e) {
+                return onClickParent && onClickParent(e);
+              } },
+            (0, _preact.h)(
+              'i',
+              null,
+              'Parent Directory'
+            )
+          )
+        )
+      ),
       fileList
     )
   );
@@ -3718,7 +3917,7 @@ var FileRow = exports.FileRow = function FileRow(props) {
 
   return (0, _preact.h)(
     'div',
-    { 'class': className, key: key },
+    { className: className, key: key },
     fields.has('name') && (0, _preact.h)(
       'div',
       { className: 'filename', title: file.name || file.url },
@@ -3736,7 +3935,7 @@ var FileRow = exports.FileRow = function FileRow(props) {
         name
       ) : (0, _preact.h)(
         'span',
-        { 'class': 'link', onClick: function onClick(e) {
+        { className: 'link', onClick: function onClick(e) {
             return _onClick && _onClick(file, e);
           } },
         name
@@ -3887,6 +4086,99 @@ exports.default = FileUpload;
 
 /***/ }),
 
+/***/ "./app/client/common/fileViewer.component.js":
+/*!***************************************************!*\
+  !*** ./app/client/common/fileViewer.component.js ***!
+  \***************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FileViewer;
+
+var _preact = __webpack_require__(/*! preact */ "./node_modules/preact/dist/preact.esm.js");
+
+var image_types = {
+  'jpg': 'image/jpeg',
+  'jpeg': 'image/jpeg',
+  'png': 'image/png',
+  'gif': 'image/gif'
+};
+
+var audio_types = {
+  'wav': 'audio/wav',
+  'mp3': 'audio/mp3',
+  'flac': 'audio/flac',
+  'aiff': 'audio/aiff'
+};
+
+var video_types = {
+  'mp4': 'video/mp4'
+};
+
+function FileViewer(_ref) {
+  var file = _ref.file;
+  var error = file.error,
+      name = file.name,
+      path = file.path,
+      date = file.date,
+      size = file.size,
+      buf = file.buf;
+
+  if (error) {
+    return (0, _preact.h)(
+      'div',
+      { className: 'fileViewer' },
+      error
+    );
+  }
+  if (!buf) {
+    return (0, _preact.h)(
+      'div',
+      { className: 'fileViewer' },
+      'File empty'
+    );
+  }
+  var ext = name.split('.').slice(-1)[0].toLowerCase();
+  var tag = void 0;
+  if (ext in image_types) {
+    tag = (0, _preact.h)('img', { src: getURLFor(buf, image_types[ext]) });
+  } else if (ext in audio_types) {
+    tag = (0, _preact.h)('audio', { src: getURLFor(buf, audio_types[ext]), controls: true, autoplay: true });
+  } else if (ext in video_types) {
+    tag = (0, _preact.h)('video', { src: getURLFor(buf, audio_types[ext]), controls: true, autoplay: true });
+  } else {
+    tag = (0, _preact.h)(
+      'div',
+      { className: 'text' },
+      ab2str(buf)
+    );
+  }
+  return (0, _preact.h)(
+    'div',
+    { className: 'fileViewer' },
+    tag
+  );
+}
+
+var getURLFor = function getURLFor(buf, type) {
+  var arrayBufferView = new Uint8Array(buf);
+  var blob = new Blob([arrayBufferView], { type: type });
+  var urlCreator = window.URL || window.webkitURL;
+  return urlCreator.createObjectURL(blob);
+};
+
+var ab2str = function ab2str(buf) {
+  return String.fromCharCode.apply(null, new Uint8Array(buf));
+};
+
+/***/ }),
+
 /***/ "./app/client/common/folderList.component.js":
 /*!***************************************************!*\
   !*** ./app/client/common/folderList.component.js ***!
@@ -3941,7 +4233,7 @@ function FolderList(_ref) {
   if (db.loading || !db.data) {
     return (0, _preact.h)(
       'div',
-      { 'class': 'col folderList' },
+      { className: 'col folderList' },
       (0, _preact.h)(_loading2.default, { progress: db.progress })
     );
   }
@@ -3954,7 +4246,7 @@ function FolderList(_ref) {
   if (!folderList.length && emptyText) {
     return (0, _preact.h)(
       'div',
-      { 'class': 'col folderList' },
+      { className: 'col folderList' },
       emptyText
     );
   }
@@ -3987,7 +4279,7 @@ function FolderList(_ref) {
 
   return (0, _preact.h)(
     'div',
-    { 'class': 'col folderList' },
+    { className: 'col folderList' },
     (0, _preact.h)(
       _group2.default,
       { title: 'Projects' },
@@ -4275,7 +4567,7 @@ exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AugmentationGrid = exports.ButtonGrid = exports.TaskList = exports.CurrentTask = exports.Checkbox = exports.Button = exports.SelectGroup = exports.Select = exports.Slider = exports.NumberInput = exports.TextInput = exports.Param = exports.ParamGroup = exports.Group = exports.Player = exports.Gallery = exports.FileUpload = exports.FileRow = exports.FileList = exports.FolderList = exports.AudioPlayer = exports.Header = exports.Progress = exports.Loading = exports.Views = undefined;
+exports.AugmentationGrid = exports.ButtonGrid = exports.TaskList = exports.CurrentTask = exports.Checkbox = exports.Button = exports.SelectGroup = exports.Select = exports.Slider = exports.NumberInput = exports.TextInput = exports.Param = exports.ParamGroup = exports.Group = exports.Browser = exports.Player = exports.Gallery = exports.FileViewer = exports.FileUpload = exports.FileRow = exports.FileList = exports.FolderList = exports.AudioPlayer = exports.Header = exports.Progress = exports.Loading = exports.Views = undefined;
 
 var _audioPlayer = __webpack_require__(/*! ./audioPlayer/audioPlayer.component */ "./app/client/common/audioPlayer/audioPlayer.component.js");
 
@@ -4285,6 +4577,10 @@ var _augmentationGrid = __webpack_require__(/*! ./augmentationGrid.component */
 
 var _augmentationGrid2 = _interopRequireDefault(_augmentationGrid);
 
+var _browser = __webpack_require__(/*! ./browser.component */ "./app/client/common/browser.component.js");
+
+var _browser2 = _interopRequireDefault(_browser);
+
 var _button = __webpack_require__(/*! ./button.component */ "./app/client/common/button.component.js");
 
 var _button2 = _interopRequireDefault(_button);
@@ -4307,6 +4603,10 @@ var _fileUpload = __webpack_require__(/*! ./fileUpload.component */ "./app/clien
 
 var _fileUpload2 = _interopRequireDefault(_fileUpload);
 
+var _fileViewer = __webpack_require__(/*! ./fileViewer.component */ "./app/client/common/fileViewer.component.js");
+
+var _fileViewer2 = _interopRequireDefault(_fileViewer);
+
 var _folderList = __webpack_require__(/*! ./folderList.component */ "./app/client/common/folderList.component.js");
 
 var _folderList2 = _interopRequireDefault(_folderList);
@@ -4384,8 +4684,10 @@ exports.FolderList = _folderList2.default;
 exports.FileList = _fileList.FileList;
 exports.FileRow = _fileList.FileRow;
 exports.FileUpload = _fileUpload2.default;
+exports.FileViewer = _fileViewer2.default;
 exports.Gallery = _gallery2.default;
 exports.Player = _player2.default;
+exports.Browser = _browser2.default;
 exports.Group = _group2.default;
 exports.ParamGroup = _paramGroup2.default;
 exports.Param = _param2.default;
@@ -5174,7 +5476,7 @@ var Slider = function (_Component) {
       }
       return (0, _preact.h)(
         'div',
-        { 'class': 'slider param' },
+        { className: 'slider param' },
         (0, _preact.h)(
           'label',
           null,
@@ -5329,17 +5631,17 @@ var TaskList = function (_Component) {
         }
         return (0, _preact.h)(
           'div',
-          { 'class': 'row' },
+          { className: 'row' },
           (0, _preact.h)(
             'div',
-            { 'class': 'activity' },
+            { className: 'activity' },
             task.activity,
             ' ',
             task.module
           ),
           (0, _preact.h)(
             'div',
-            { 'class': 'dataset' },
+            { className: 'dataset' },
             dataset_link
           ),
           (0, _preact.h)(
@@ -5349,10 +5651,10 @@ var TaskList = function (_Component) {
           ),
           (0, _preact.h)(
             'div',
-            { 'class': 'options' },
+            { className: 'options' },
             (0, _preact.h)(
               'span',
-              { 'class': 'destroy', onClick: function onClick() {
+              { className: 'destroy', onClick: function onClick() {
                   return _this2.handleDestroy(task);
                 } },
               'x'
@@ -5362,7 +5664,7 @@ var TaskList = function (_Component) {
       });
       return (0, _preact.h)(
         'div',
-        { 'class': 'tasklist rows' },
+        { className: 'tasklist rows' },
         taskList
       );
     }
@@ -5599,10 +5901,10 @@ var NewView = function (_Component) {
 
       return (0, _preact.h)(
         'div',
-        { 'class': 'app new-view ' + module.name },
+        { className: 'app new-view ' + module.name },
         (0, _preact.h)(
           'div',
-          { 'class': 'heading' },
+          { className: 'heading' },
           (0, _preact.h)(
             'h1',
             null,
@@ -5611,7 +5913,7 @@ var NewView = function (_Component) {
         ),
         (0, _preact.h)(
           'div',
-          { 'class': 'col narrow' },
+          { className: 'col narrow' },
           (0, _preact.h)(_dataset2.default, {
             module: module,
             history: history
@@ -6075,7 +6377,7 @@ var DashboardHeader = function (_Component) {
 
       return (0, _preact.h)(
         'div',
-        { 'class': 'dashboardHeader heading' },
+        { className: 'dashboardHeader heading' },
         (0, _preact.h)(
           'h1',
           null,
@@ -6366,28 +6668,28 @@ var DatasetComponent = function (_Component) {
       fields = fieldSet(fields);
       return (0, _preact.h)(
         'div',
-        { 'class': 'rows params datasets' },
+        { className: 'rows params datasets' },
         (0, _preact.h)(
           'div',
-          { 'class': 'row row-heading dataset' },
+          { className: 'row row-heading dataset' },
           fields.has('input') && (0, _preact.h)(
             'div',
-            { 'class': 'col' },
+            { className: 'col' },
             'input'
           ),
           fields.has('status') && (0, _preact.h)(
             'div',
-            { 'class': 'col' },
+            { className: 'col' },
             'status'
           ),
           fields.has('checkpoint') && (0, _preact.h)(
             'div',
-            { 'class': 'col' },
+            { className: 'col' },
             'checkpoint'
           ),
           fields.has('output') && (0, _preact.h)(
             'div',
-            { 'class': 'col' },
+            { className: 'col' },
             'output'
           )
         ),
@@ -6906,10 +7208,10 @@ function NewDatasetForm(props) {
   console.log(props);
   return (0, _preact.h)(
     'div',
-    { 'class': 'opaque' },
+    { className: 'opaque' },
     (0, _preact.h)(
       'div',
-      { 'class': 'heading' },
+      { className: 'heading' },
       (0, _preact.h)(
         'h2',
         null,
@@ -6920,7 +7222,7 @@ function NewDatasetForm(props) {
     ),
     (0, _preact.h)(
       'div',
-      { 'class': 'params' },
+      { className: 'params' },
       (0, _preact.h)(_textInput2.default, {
         autofocus: true,
         title: 'Name your project',
@@ -7278,7 +7580,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function UploadStatus(props) {
   return (0, _preact.h)(
     'div',
-    { 'class': 'status' },
+    { className: 'status' },
     props.status
   );
 }
@@ -7373,12 +7675,13 @@ var app = (0, _preact.h)(
           } }),
         (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/system', component: _system2.default }),
         (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/dashboard', component: _dashboard2.default }),
+        (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/browse', component: _common.Browser }),
         (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/logout', component: _auth2.default.Logout }),
         (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/login', component: function component() {
-            console.log('pziss');(0, _preact.h)(_reactRouterDom.Redirect, { to: '/' });
+            (0, _preact.h)(_reactRouterDom.Redirect, { to: '/' });
           } }),
         (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/signup', component: function component() {
-            console.log('pziss');(0, _preact.h)(_reactRouterDom.Redirect, { to: '/' });
+            (0, _preact.h)(_reactRouterDom.Redirect, { to: '/' });
           } }),
         module_list,
         (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/', component: _dashboard2.default }),
@@ -8910,10 +9213,10 @@ var MorphResults = function (_Component) {
         ),
         (0, _preact.h)(
           'div',
-          { 'class': 'rows params renders' },
+          { className: 'rows params renders' },
           (0, _preact.h)(
             'div',
-            { 'class': 'column' },
+            { className: 'column' },
             (0, _preact.h)(
               _common.Group,
               { title: 'From' },
@@ -9767,7 +10070,7 @@ var Pix2PixLive = function (_Component) {
               }),
               (0, _preact.h)(
                 'p',
-                { 'class': 'last_message' },
+                { className: 'last_message' },
                 this.props.last_message
               )
             )
@@ -10186,10 +10489,10 @@ var Pix2pixShow = function (_Component) {
         { className: 'app pix2pix' },
         (0, _preact.h)(
           'div',
-          { 'class': 'heading' },
+          { className: 'heading' },
           (0, _preact.h)(
             'div',
-            { 'class': 'spaced' },
+            { className: 'spaced' },
             (0, _preact.h)(
               'h1',
               null,
@@ -10249,38 +10552,38 @@ var Pix2pixShow = function (_Component) {
         null,
         (0, _preact.h)(
           'div',
-          { 'class': 'actions' },
+          { className: 'actions' },
           (0, _preact.h)(
             'span',
-            { 'class': 'link', onClick: function onClick() {
+            { className: 'link', onClick: function onClick() {
                 return remote.train_task(dataset, pix2pix.folder_id, 1);
               } },
             'train'
           ),
           (0, _preact.h)(
             'span',
-            { 'class': 'link', onClick: function onClick() {
+            { className: 'link', onClick: function onClick() {
                 return remote.train_task(dataset, pix2pix.folder_id, 5);
               } },
             '5x'
           ),
           (0, _preact.h)(
             'span',
-            { 'class': 'link', onClick: function onClick() {
+            { className: 'link', onClick: function onClick() {
                 return remote.train_task(dataset, pix2pix.folder_id, 10);
               } },
             '10x'
           ),
           (0, _preact.h)(
             'span',
-            { 'class': 'link', onClick: function onClick() {
+            { className: 'link', onClick: function onClick() {
                 return remote.train_task(dataset, pix2pix.folder_id, 20);
               } },
             '20x'
           ),
           (0, _preact.h)(
             'span',
-            { 'class': 'link', onClick: function onClick() {
+            { className: 'link', onClick: function onClick() {
                 return remote.train_task(dataset, pix2pix.folder_id, 50);
               } },
             '50x'
@@ -10288,25 +10591,25 @@ var Pix2pixShow = function (_Component) {
         ),
         dataset.isBuilt ? (0, _preact.h)(
           'div',
-          { 'class': 'subtext' },
+          { className: 'subtext' },
           'fetched ',
           (0, _preact.h)(
             'span',
-            { 'class': 'link', onClick: function onClick() {
+            { className: 'link', onClick: function onClick() {
                 return remote.clear_cache_task(dataset);
               } },
             'rm'
           )
         ) : isFetching ? (0, _preact.h)(
           'div',
-          { 'class': 'subtext' },
+          { className: 'subtext' },
           'fetching'
         ) : (0, _preact.h)(
           'div',
-          { 'class': 'subtext' },
+          { className: 'subtext' },
           (0, _preact.h)(
             'span',
-            { 'class': 'link', onClick: function onClick() {
+            { className: 'link', onClick: function onClick() {
                 return remote.fetch_task(input.url, input.id, dataset.name);
               } },
             'fetch'
@@ -12318,6 +12621,34 @@ var Pix2PixHDTrain = function (_Component) {
             ),
             (0, _preact.h)(
               _common.Group,
+              { title: 'Augmentation Grid' },
+              (0, _preact.h)(_common.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: function onAugment(augment_take, augment_make) {
+                  _this2.props.remote.augment_task(_this2.state.checkpoint_name, _extends({}, _this2.state, {
+                    augment_take: augment_take,
+                    augment_make: augment_make
+                  }));
+                },
+                onTrain: function onTrain() {
+                  _this2.props.remote.train_task(_this2.state.checkpoint_name, pix2pixhd.folder_id, 1);
+                  setTimeout(function () {
+                    // auto-generate epoch demo
+                    _this2.props.remote.augment_task(_this2.state.checkpoint_name, _extends({}, _this2.state, {
+                      augment_take: 10,
+                      augment_make: 150,
+                      no_symlinks: true,
+                      mov: true,
+                      folder_id: _this2.props.pix2pixhd.data.resultsFolder.id
+                    }));
+                  }, 250);
+                }
+              })
+            ),
+            (0, _preact.h)(
+              _common.Group,
               { title: 'Augment' },
               (0, _preact.h)(_common.NumberInput, {
                 name: 'augment_take',
@@ -12358,34 +12689,6 @@ var Pix2PixHDTrain = function (_Component) {
             ),
             (0, _preact.h)(
               _common.Group,
-              { title: 'Augmentation Grid' },
-              (0, _preact.h)(_common.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: function onAugment(augment_take, augment_make) {
-                  _this2.props.remote.augment_task(_this2.state.checkpoint_name, _extends({}, _this2.state, {
-                    augment_take: augment_take,
-                    augment_make: augment_make
-                  }));
-                },
-                onTrain: function onTrain() {
-                  _this2.props.remote.train_task(_this2.state.checkpoint_name, pix2pixhd.folder_id, 1);
-                  setTimeout(function () {
-                    // auto-generate epoch demo
-                    _this2.props.remote.augment_task(_this2.state.checkpoint_name, _extends({}, _this2.state, {
-                      augment_take: 10,
-                      augment_make: 150,
-                      no_symlinks: true,
-                      mov: true,
-                      folder_id: _this2.props.pix2pixhd.data.resultsFolder.id
-                    }));
-                  }, 250);
-                }
-              })
-            ),
-            (0, _preact.h)(
-              _common.Group,
               { title: 'Status' },
               (0, _preact.h)(_common.Button, {
                 title: 'GPU',
@@ -15913,7 +16216,7 @@ _socket.socket.on('status', function (data) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.syscall_async = exports.upload_file = exports.run_script = exports.list_sequences = exports.count_directory = exports.list_directory = exports.disk_usage = exports.run_system_command = undefined;
+exports.syscall_async = exports.read_file = exports.upload_file = exports.run_script = exports.list_sequences = exports.count_directory = exports.list_directory = exports.disk_usage = exports.run_system_command = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -15952,6 +16255,11 @@ var run_script = exports.run_script = function run_script(opt) {
 var upload_file = exports.upload_file = function upload_file(opt) {
   return syscall_async('upload_file', opt);
 };
+var read_file = exports.read_file = function read_file(opt) {
+  return syscall_async('read_file', opt).then(function (res) {
+    return res.file;
+  });
+};
 
 var syscall_async = exports.syscall_async = function syscall_async(tag, payload) {
   var ttl = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10000;
@@ -16477,25 +16785,25 @@ var _auth = __webpack_require__(/*! ./auth/auth.reducer */ "./app/client/auth/au
 
 var _auth2 = _interopRequireDefault(_auth);
 
-var _system = __webpack_require__(/*! ./system/system.reducer */ "./app/client/system/system.reducer.js");
+var _live = __webpack_require__(/*! ./live/live.reducer */ "./app/client/live/live.reducer.js");
 
-var _system2 = _interopRequireDefault(_system);
+var _live2 = _interopRequireDefault(_live);
 
-var _dashboard = __webpack_require__(/*! ./dashboard/dashboard.reducer */ "./app/client/dashboard/dashboard.reducer.js");
+var _queue = __webpack_require__(/*! ./queue/queue.reducer */ "./app/client/queue/queue.reducer.js");
 
-var _dashboard2 = _interopRequireDefault(_dashboard);
+var _queue2 = _interopRequireDefault(_queue);
 
-var _live = __webpack_require__(/*! ./live/live.reducer */ "./app/client/live/live.reducer.js");
+var _system = __webpack_require__(/*! ./system/system.reducer */ "./app/client/system/system.reducer.js");
 
-var _live2 = _interopRequireDefault(_live);
+var _system2 = _interopRequireDefault(_system);
 
 var _upload = __webpack_require__(/*! ./dataset/upload.reducer */ "./app/client/dataset/upload.reducer.js");
 
 var _upload2 = _interopRequireDefault(_upload);
 
-var _queue = __webpack_require__(/*! ./queue/queue.reducer */ "./app/client/queue/queue.reducer.js");
+var _dashboard = __webpack_require__(/*! ./dashboard/dashboard.reducer */ "./app/client/dashboard/dashboard.reducer.js");
 
-var _queue2 = _interopRequireDefault(_queue);
+var _dashboard2 = _interopRequireDefault(_dashboard);
 
 var _audioPlayer = __webpack_require__(/*! ./common/audioPlayer/audioPlayer.reducer */ "./app/client/common/audioPlayer/audioPlayer.reducer.js");
 
@@ -16507,15 +16815,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // import navReducer from './nav.reducer'
 var appReducer = (0, _redux.combineReducers)({
+  router: _reactRouterRedux.routerReducer,
   auth: _auth2.default,
-  system: _system2.default,
-  dashboard: _dashboard2.default,
   live: _live2.default,
-  upload: _upload2.default,
   queue: _queue2.default,
-  router: _reactRouterRedux.routerReducer,
-  module: _module.moduleReducer,
-  audioPlayer: _audioPlayer2.default
+  system: _system2.default,
+  upload: _upload2.default,
+  dashboard: _dashboard2.default,
+  audioPlayer: _audioPlayer2.default,
+  module: _module.moduleReducer
 });
 
 var history = exports.history = (0, _createBrowserHistory2.default)();