textInput/fileUpload

1 files changed, 516 insertions, 60 deletions

diff --git a/public/bundle.js b/public/bundle.js
index a394a61..41f1b15 100644
--- a/public/bundle.js
+++ b/public/bundle.js
@@ -163,6 +163,83 @@ exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(
 
 /***/ }),
 
+/***/ "./app/client/common/fileUpload.component.js":
+/*!***************************************************!*\
+  !*** ./app/client/common/fileUpload.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");
+
+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 FileUpload = function (_Component) {
+  _inherits(FileUpload, _Component);
+
+  function FileUpload(props) {
+    _classCallCheck(this, FileUpload);
+
+    var _this = _possibleConstructorReturn(this, (FileUpload.__proto__ || Object.getPrototypeOf(FileUpload)).call(this, props));
+
+    _this.handleChange = _this.handleChange.bind(_this);
+    return _this;
+  }
+
+  _createClass(FileUpload, [{
+    key: 'handleChange',
+    value: function handleChange(e) {
+      this.props.onChange && this.props.onChange();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return (0, _preact.h)(
+        'div',
+        { className: 'fileUpload param' },
+        (0, _preact.h)(
+          'label',
+          null,
+          (0, _preact.h)(
+            'span',
+            null,
+            this.props.title
+          ),
+          (0, _preact.h)('input', {
+            type: 'file',
+            multiple: this.props.multiple,
+            onChange: this.handleChange
+          }),
+          (0, _preact.h)(
+            'button',
+            null,
+            this.props.label || 'Choose file...'
+          )
+        )
+      );
+    }
+  }]);
+
+  return FileUpload;
+}(_preact.Component);
+
+exports.default = FileUpload;
+
+/***/ }),
+
 /***/ "./app/client/common/group.component.js":
 /*!**********************************************!*\
   !*** ./app/client/common/group.component.js ***!
@@ -211,18 +288,38 @@ Object.defineProperty(exports, "__esModule", {
 
 var _preact = __webpack_require__(/*! preact */ "./node_modules/preact/dist/preact.esm.js");
 
+var _redux = __webpack_require__(/*! redux */ "./node_modules/redux/es/redux.js");
+
 var _reactRouterDom = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/es/index.js");
 
 var _reactRedux = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
 
-function Header(props) {
-  var tools = "pix2pix samplernn style_transfer_video style_transfer_audio".split(" ").map(function (s, i) {
+var _system = __webpack_require__(/*! ../system/system.actions */ "./app/client/system/system.actions.js");
+
+var systemActions = _interopRequireWildcard(_system);
+
+var _modules = __webpack_require__(/*! ../modules */ "./app/client/modules/index.js");
+
+var _modules2 = _interopRequireDefault(_modules);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function Header(_ref) {
+  var fps = _ref.fps,
+      app = _ref.app,
+      actions = _ref.actions;
+
+  var tool_list = Object.keys(_modules2.default).map(function (name, i) {
+    var label = name.replace(/_/, " ");
     return (0, _preact.h)(
       'option',
-      { value: s },
-      s
+      { value: name, key: i },
+      label
     );
   });
+  var Links = _modules2.default[app.tool].links;
   return (0, _preact.h)(
     'header',
     null,
@@ -236,8 +333,10 @@ function Header(props) {
       null,
       (0, _preact.h)(
         'select',
-        null,
-        tools
+        { onChange: function onChange(e) {
+            return actions.changeTool(e.target.value);
+          }, value: app.tool },
+        tool_list
       )
     ),
     (0, _preact.h)(
@@ -258,34 +357,11 @@ function Header(props) {
         'dashboard'
       )
     ),
+    (0, _preact.h)(Links, null),
     (0, _preact.h)(
       'span',
       null,
-      'checkpoints'
-    ),
-    (0, _preact.h)(
-      'span',
-      null,
-      'datasets'
-    ),
-    (0, _preact.h)(
-      'span',
-      null,
-      'results'
-    ),
-    (0, _preact.h)(
-      'span',
-      null,
-      (0, _preact.h)(
-        _reactRouterDom.Link,
-        { to: '/live' },
-        'live'
-      )
-    ),
-    (0, _preact.h)(
-      'span',
-      null,
-      props.fps,
+      fps,
       ' fps'
     )
   );
@@ -293,13 +369,15 @@ function Header(props) {
 
 var mapStateToProps = function mapStateToProps(state) {
   return {
-    fps: state.live.fps,
-    frame: state.live.frame
+    app: state.system.app,
+    fps: state.live.fps
   };
 };
 
 var mapDispatchToProps = function mapDispatchToProps(dispatch, ownProps) {
-  return {};
+  return {
+    actions: (0, _redux.bindActionCreators)(systemActions, dispatch)
+  };
 };
 
 exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(Header);
@@ -796,6 +874,87 @@ exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(
 
 /***/ }),
 
+/***/ "./app/client/common/textInput.component.js":
+/*!**************************************************!*\
+  !*** ./app/client/common/textInput.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");
+
+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 TextInput = function (_Component) {
+  _inherits(TextInput, _Component);
+
+  function TextInput(props) {
+    _classCallCheck(this, TextInput);
+
+    var _this = _possibleConstructorReturn(this, (TextInput.__proto__ || Object.getPrototypeOf(TextInput)).call(this, props));
+
+    _this.handleInput = _this.handleInput.bind(_this);
+    _this.handleKeydown = _this.handleKeydown.bind(_this);
+    return _this;
+  }
+
+  _createClass(TextInput, [{
+    key: 'handleInput',
+    value: function handleInput(e) {
+      this.props.onInput && this.props.onInput(e.target.value);
+    }
+  }, {
+    key: 'handleKeydown',
+    value: function handleKeydown(e) {
+      if (e.keyCode === 13) {
+        this.props.onSave && this.props.onSave(e.target.value);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return (0, _preact.h)(
+        'div',
+        { className: 'textInput param' },
+        (0, _preact.h)(
+          'label',
+          null,
+          (0, _preact.h)(
+            'span',
+            null,
+            this.props.title
+          ),
+          (0, _preact.h)('input', {
+            type: 'text',
+            value: this.props.value,
+            onInput: this.handleInput,
+            onKeydown: this.handleKeydown
+          })
+        )
+      );
+    }
+  }]);
+
+  return TextInput;
+}(_preact.Component);
+
+exports.default = TextInput;
+
+/***/ }),
+
 /***/ "./app/client/dashboard/dashboard.actions.js":
 /*!***************************************************!*\
   !*** ./app/client/dashboard/dashboard.actions.js ***!
@@ -1487,17 +1646,17 @@ var _header = __webpack_require__(/*! ./common/header.component */ "./app/client
 
 var _header2 = _interopRequireDefault(_header);
 
-var _dashboard = __webpack_require__(/*! ./dashboard/dashboard.component */ "./app/client/dashboard/dashboard.component.js");
-
-var _dashboard2 = _interopRequireDefault(_dashboard);
-
 var _system = __webpack_require__(/*! ./system/system.component */ "./app/client/system/system.component.js");
 
 var _system2 = _interopRequireDefault(_system);
 
-var _pix2pix = __webpack_require__(/*! ./pix2pix */ "./app/client/pix2pix/index.js");
+var _dashboard = __webpack_require__(/*! ./dashboard/dashboard.component */ "./app/client/dashboard/dashboard.component.js");
+
+var _dashboard2 = _interopRequireDefault(_dashboard);
 
-var _pix2pix2 = _interopRequireDefault(_pix2pix);
+var _modules = __webpack_require__(/*! ./modules */ "./app/client/modules/index.js");
+
+var _modules2 = _interopRequireDefault(_modules);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -1505,6 +1664,11 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 // import client from './client'
 
+var module_list = Object.keys(_modules2.default).map(function (name) {
+  var module = _modules2.default[name];
+  return (0, _preact.h)(_reactRouterDom.Route, { path: '/' + module.name, component: module.router });
+});
+
 var app = (0, _preact.h)(
   _reactRedux.Provider,
   { store: _store.store },
@@ -1515,12 +1679,9 @@ var app = (0, _preact.h)(
       'div',
       null,
       (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/', component: _dashboard2.default }),
-      (0, _preact.h)(_reactRouterDom.Route, { path: '/datasets/', component: _dashboard2.default }),
-      (0, _preact.h)(_reactRouterDom.Route, { path: '/checkpoints/', component: _dashboard2.default }),
-      (0, _preact.h)(_reactRouterDom.Route, { path: '/results/', component: _dashboard2.default }),
-      (0, _preact.h)(_reactRouterDom.Route, { path: '/live/', component: _pix2pix2.default.Live }),
       (0, _preact.h)(_reactRouterDom.Route, { path: '/system/', component: _system2.default }),
       (0, _preact.h)(_reactRouterDom.Route, { path: '/dashboard/', component: _dashboard2.default }),
+      module_list,
       (0, _preact.h)(_header2.default, null)
     )
   )
@@ -2391,9 +2552,9 @@ module.exports = function () {
 
 /***/ }),
 
-/***/ "./app/client/pix2pix/index.js":
+/***/ "./app/client/modules/index.js":
 /*!*************************************!*\
-  !*** ./app/client/pix2pix/index.js ***!
+  !*** ./app/client/modules/index.js ***!
   \*************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2405,22 +2566,96 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _live = __webpack_require__(/*! ./live.component */ "./app/client/pix2pix/live.component.js");
+var _pix2pix = __webpack_require__(/*! ./pix2pix */ "./app/client/modules/pix2pix/index.js");
+
+var _pix2pix2 = _interopRequireDefault(_pix2pix);
+
+var _samplernn = __webpack_require__(/*! ./samplernn */ "./app/client/modules/samplernn/index.js");
+
+var _samplernn2 = _interopRequireDefault(_samplernn);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  pix2pix: _pix2pix2.default, samplernn: _samplernn2.default
+};
+
+/***/ }),
+
+/***/ "./app/client/modules/pix2pix/index.js":
+/*!*********************************************!*\
+  !*** ./app/client/modules/pix2pix/index.js ***!
+  \*********************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _preact = __webpack_require__(/*! preact */ "./node_modules/preact/dist/preact.esm.js");
+
+var _reactRouterDom = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/es/index.js");
+
+var _live = __webpack_require__(/*! ./live.component */ "./app/client/modules/pix2pix/live.component.js");
 
 var _live2 = _interopRequireDefault(_live);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function router() {
+  return (0, _preact.h)(
+    'div',
+    null,
+    (0, _preact.h)(_reactRouterDom.Route, { path: '/pix2pix/live/', component: _live2.default })
+  );
+}
+
+function links() {
+  return (0, _preact.h)(
+    'span',
+    null,
+    (0, _preact.h)(
+      'span',
+      null,
+      'datasets'
+    ),
+    (0, _preact.h)(
+      'span',
+      null,
+      'checkpoints'
+    ),
+    (0, _preact.h)(
+      'span',
+      null,
+      'results'
+    ),
+    (0, _preact.h)(
+      'span',
+      null,
+      (0, _preact.h)(
+        _reactRouterDom.Link,
+        { to: '/pix2pix/live/' },
+        'live'
+      )
+    )
+  );
+}
+
 exports.default = {
-  Live: _live2.default
+  name: 'pix2pix',
+  router: router, links: links
 };
 
 /***/ }),
 
-/***/ "./app/client/pix2pix/live.component.js":
-/*!**********************************************!*\
-  !*** ./app/client/pix2pix/live.component.js ***!
-  \**********************************************/
+/***/ "./app/client/modules/pix2pix/live.component.js":
+/*!******************************************************!*\
+  !*** ./app/client/modules/pix2pix/live.component.js ***!
+  \******************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -2439,29 +2674,29 @@ 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 _player = __webpack_require__(/*! ../common/player.component */ "./app/client/common/player.component.js");
+var _player = __webpack_require__(/*! ../../common/player.component */ "./app/client/common/player.component.js");
 
 var _player2 = _interopRequireDefault(_player);
 
-var _paramGroup = __webpack_require__(/*! ../common/paramGroup.component */ "./app/client/common/paramGroup.component.js");
+var _paramGroup = __webpack_require__(/*! ../../common/paramGroup.component */ "./app/client/common/paramGroup.component.js");
 
 var _paramGroup2 = _interopRequireDefault(_paramGroup);
 
-var _slider = __webpack_require__(/*! ../common/slider.component */ "./app/client/common/slider.component.js");
+var _slider = __webpack_require__(/*! ../../common/slider.component */ "./app/client/common/slider.component.js");
 
 var _slider2 = _interopRequireDefault(_slider);
 
-var _select = __webpack_require__(/*! ../common/select.component */ "./app/client/common/select.component.js");
+var _select = __webpack_require__(/*! ../../common/select.component */ "./app/client/common/select.component.js");
 
 var _select2 = _interopRequireDefault(_select);
 
-var _button = __webpack_require__(/*! ../common/button.component */ "./app/client/common/button.component.js");
+var _button = __webpack_require__(/*! ../../common/button.component */ "./app/client/common/button.component.js");
 
 var _button2 = _interopRequireDefault(_button);
 
-var _player3 = __webpack_require__(/*! ../live/player */ "./app/client/live/player.js");
+var _player3 = __webpack_require__(/*! ../../live/player */ "./app/client/live/player.js");
 
-var _live = __webpack_require__(/*! ../live/live.actions */ "./app/client/live/live.actions.js");
+var _live = __webpack_require__(/*! ../../live/live.actions */ "./app/client/live/live.actions.js");
 
 var liveActions = _interopRequireWildcard(_live);
 
@@ -2765,6 +3000,211 @@ exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(
 
 /***/ }),
 
+/***/ "./app/client/modules/samplernn/datasets.component.js":
+/*!************************************************************!*\
+  !*** ./app/client/modules/samplernn/datasets.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 _group = __webpack_require__(/*! ../../common/group.component */ "./app/client/common/group.component.js");
+
+var _group2 = _interopRequireDefault(_group);
+
+var _slider = __webpack_require__(/*! ../../common/slider.component */ "./app/client/common/slider.component.js");
+
+var _slider2 = _interopRequireDefault(_slider);
+
+var _select = __webpack_require__(/*! ../../common/select.component */ "./app/client/common/select.component.js");
+
+var _select2 = _interopRequireDefault(_select);
+
+var _button = __webpack_require__(/*! ../../common/button.component */ "./app/client/common/button.component.js");
+
+var _button2 = _interopRequireDefault(_button);
+
+var _fileUpload = __webpack_require__(/*! ../../common/fileUpload.component */ "./app/client/common/fileUpload.component.js");
+
+var _fileUpload2 = _interopRequireDefault(_fileUpload);
+
+var _textInput = __webpack_require__(/*! ../../common/textInput.component */ "./app/client/common/textInput.component.js");
+
+var _textInput2 = _interopRequireDefault(_textInput);
+
+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 SampleRNNDatasets = function (_Component) {
+  _inherits(SampleRNNDatasets, _Component);
+
+  function SampleRNNDatasets(props) {
+    _classCallCheck(this, SampleRNNDatasets);
+
+    var _this = _possibleConstructorReturn(this, (SampleRNNDatasets.__proto__ || Object.getPrototypeOf(SampleRNNDatasets)).call(this));
+
+    _this.handleUpload = _this.handleUpload.bind(_this);
+    _this.handleURL = _this.handleURL.bind(_this);
+    return _this;
+  }
+
+  _createClass(SampleRNNDatasets, [{
+    key: 'handleUpload',
+    value: function handleUpload(file) {}
+  }, {
+    key: 'handleURL',
+    value: function handleURL(url) {}
+  }, {
+    key: 'render',
+    value: function render() {
+      return (0, _preact.h)(
+        'div',
+        { className: 'app' },
+        (0, _preact.h)(
+          'div',
+          { className: 'heading' },
+          (0, _preact.h)(
+            'h3',
+            null,
+            'SampleRNN Datasets'
+          )
+        ),
+        (0, _preact.h)(
+          'div',
+          { className: 'params row' },
+          (0, _preact.h)(
+            'div',
+            { className: 'column' },
+            (0, _preact.h)(
+              _group2.default,
+              { title: 'Create Dataset' },
+              (0, _preact.h)(_fileUpload2.default, {
+                title: 'Upload a file',
+                onChange: this.handleUpload
+              }),
+              (0, _preact.h)(_textInput2.default, {
+                title: 'Fetch a URL',
+                onSave: this.handleURL
+              })
+            )
+          )
+        )
+      );
+    }
+  }]);
+
+  return SampleRNNDatasets;
+}(_preact.Component);
+
+function timeInSeconds(n) {
+  return (n / 10).toFixed(1) + ' s.';
+}
+var mapStateToProps = function mapStateToProps(state) {
+  return {};
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch, ownProps) {
+  return {
+    // actions: bindActionCreators(liveActions, dispatch)
+  };
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(SampleRNNDatasets);
+
+/***/ }),
+
+/***/ "./app/client/modules/samplernn/index.js":
+/*!***********************************************!*\
+  !*** ./app/client/modules/samplernn/index.js ***!
+  \***********************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _preact = __webpack_require__(/*! preact */ "./node_modules/preact/dist/preact.esm.js");
+
+var _reactRouterDom = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/es/index.js");
+
+var _datasets = __webpack_require__(/*! ./datasets.component */ "./app/client/modules/samplernn/datasets.component.js");
+
+var _datasets2 = _interopRequireDefault(_datasets);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function router() {
+  return (0, _preact.h)(
+    'div',
+    null,
+    (0, _preact.h)(_reactRouterDom.Route, { path: '/samplernn/datasets/', component: _datasets2.default })
+  );
+}
+
+function links() {
+  return (0, _preact.h)(
+    'span',
+    null,
+    (0, _preact.h)(
+      'span',
+      null,
+      (0, _preact.h)(
+        _reactRouterDom.Link,
+        { to: '/samplernn/datasets/' },
+        'datasets'
+      )
+    ),
+    (0, _preact.h)(
+      'span',
+      null,
+      (0, _preact.h)(
+        _reactRouterDom.Link,
+        { to: '/samplernn/checkpoints/' },
+        'checkpoints'
+      )
+    ),
+    (0, _preact.h)(
+      'span',
+      null,
+      (0, _preact.h)(
+        _reactRouterDom.Link,
+        { to: '/samplernn/results/' },
+        'results'
+      )
+    )
+  );
+}
+
+exports.default = {
+  name: 'samplernn',
+  router: router, links: links
+};
+
+/***/ }),
+
 /***/ "./app/client/socket/index.js":
 /*!************************************!*\
   !*** ./app/client/socket/index.js ***!
@@ -3264,7 +3704,7 @@ var dispatch = exports.dispatch = store.dispatch;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.run = undefined;
+exports.changeTool = exports.run = undefined;
 
 var _socket = __webpack_require__(/*! ../socket */ "./app/client/socket/index.js");
 
@@ -3281,6 +3721,10 @@ var run = exports.run = function run(cmd) {
   return { type: _types2.default.system.running_command, cmd: cmd };
 };
 
+var changeTool = exports.changeTool = function changeTool(tool) {
+  return { type: _types2.default.app.change_tool, tool: tool };
+};
+
 /***/ }),
 
 /***/ "./app/client/system/system.component.js":
@@ -3686,6 +4130,9 @@ var systemInitialState = {
   site: {
     name: 'Lens Cortex'
   },
+  app: {
+    tool: 'samplernn'
+  },
   server: {
     connected: false,
     status: "disconnected",
@@ -3839,6 +4286,12 @@ var systemReducer = function systemReducer() {
         },
         runner: _extends({}, state.runner, _defineProperty({}, action.task.processor, { status: 'IDLE', task: {} }))
       });
+    case _types2.default.app.change_tool:
+      return _extends({}, state, {
+        app: _extends({}, state.app, {
+          tool: action.tool
+        })
+      });
     case _types2.default.system.stdout:
       return _extends({}, state, {
         stdout: state.stdout + action.data
@@ -4023,6 +4476,9 @@ exports.default = {
 		stdout: 'SYSTEM_STDOUT',
 		stderr: 'SYSTEM_STDERR'
 	},
+	app: {
+		change_tool: "APP_CHANGE_TOOL"
+	},
 	task: {
 		starting_task: 'TASK_STARTING_TASK',
 		task_begin: 'TASK_BEGIN',