ucsc-xena-client/dist/hubPage.js

UCSC Xena Client. Functional genomics visualizations.

'use strict';

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; };

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 _reactCssThemr = require('react-css-themr');

require('../css/index.css');

var _button = require('react-toolbox/lib/button');

var _card = require('react-toolbox/lib/card');

var _checkbox = require('react-toolbox/lib/checkbox');

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; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

require('./base');
var React = require('react');
var Rx = require('./rx');
// Root styles file (reset, fonts, globals)
var appTheme = require('./appTheme');
var classNames = require('classnames');

var typStyles = require('../css/typography.module.css');

var _require = require('./xenaQuery'),
    testHost = _require.testHost;

var _ = require('./underscore_ext');

var _require2 = require('./defaultServers'),
    serverNames = _require2.serverNames;

var styles = require('./hubPage.module.css');

var _require3 = require('./hubParams'),
    parseServer = _require3.parseServer,
    getHubParams = _require3.getHubParams;

var nav = require('./nav');

var _require4 = require('./util'),
    encodeObject = _require4.encodeObject;

var RETURN = 13;

var getName = function getName(h) {
	return _.get(serverNames, h, h);
};

var getStatus = function getStatus(user, ping) {
	return user ? ping === true ? 'connected' : 'selected' : '';
};

var getStyle = function getStyle(statusStr) {
	return statusStr === 'connected' ? styles.connected : null;
};

var reqStatus = function reqStatus(ping) {
	return ping == null ? ' (connecting...)' : ping ? '' : ' (not running)';
};

var checkHost = function checkHost(host) {
	return testHost(host).take(1).map(function (v) {
		return _defineProperty({}, host, v);
	});
};

var Hub = function (_React$Component) {
	_inherits(Hub, _React$Component);

	function Hub() {
		var _ref2;

		var _temp, _this, _ret;

		_classCallCheck(this, Hub);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
			args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Hub.__proto__ || Object.getPrototypeOf(Hub)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
			ping: {}
		}, _this.onNavigate = function (page) {
			_this.props.callback(['navigate', page]);
		}, _this.updatePing = function (h) {
			_this.setState({ ping: _extends({}, _this.state.ping, h) });
		}, _this.onKeyDown = function (ev) {
			if (ev.keyCode === RETURN) {
				ev.preventDefault();
				_this.onAdd();
			}
		}, _this.onSelect = function (isOn, ev) {
			var checked = ev.target.checked,
			    host = ev.target.getAttribute('data-host');

			_this.props.callback([checked ? 'enable-host' : 'disable-host', host, 'user']);
		}, _this.onAdd = function () {
			var target = _this.refs.newHost,
			    value = target.value.trim();
			if (value !== '') {
				_this.props.callback(['add-host', parseServer(value)]);
				target.value = '';
			}
		}, _this.onRemove = function (ev) {
			var host = ev.currentTarget.getAttribute('data-host');
			_this.props.callback(['remove-host', host]);
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	_createClass(Hub, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			// XXX Use a connector to get rid of selector, here.
			// Or use a sub-component.
			var _props = this.props,
			    state = _props.state,
			    selector = _props.selector,
			    allHosts = _.keys(selector(state));

			nav({ activeLink: 'hub', onNavigate: this.onNavigate });

			this.sub = Rx.Observable.from(allHosts.map(checkHost)).mergeAll().subscribe(this.updatePing);
		}
	}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
			this.sub.unsubscribe();
		}
	}, {
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(newProps) {
			var _this2 = this;

			var ping = this.state.ping,
			    state = newProps.state,
			    selector = newProps.selector,
			    servers = selector(state),
			    old = _.omit(ping, _.keys(servers));


			this.setState({ ping: _.omit(ping, old) });

			_.difference(_.keys(servers), _.keys(ping)).forEach(function (h) {
				return checkHost(h).subscribe(_this2.updatePing);
			});
		}
	}, {
		key: 'render',
		value: function render() {
			var _this3 = this;

			var _props2 = this.props,
			    state = _props2.state,
			    selector = _props2.selector,
			    hubParams = getHubParams(state),
			    ping = this.state.ping,
			    servers = selector(state),
			    hostList = _.mapObject(servers, function (s, h) {
				return {
					selected: s.user,
					host: h,
					name: getName(h),
					statusStr: getStatus(s.user, ping[h]),
					reqStatus: reqStatus(ping[h])
				};
			});

			return React.createElement(
				'div',
				{ className: styles.hubPage },
				React.createElement(
					'h1',
					{ className: typStyles.mdHeadline },
					'Data Hubs'
				),
				React.createElement(
					_card.Card,
					null,
					React.createElement(
						'ul',
						{ className: styles.hubList },
						_.values(hostList).map(function (h) {
							return React.createElement(
								'li',
								{ key: h.host },
								React.createElement(_checkbox.Checkbox, { className: styles.checkbox, onChange: _this3.onSelect, checked: h.selected,
									'data-host': h.host }),
								React.createElement(
									'div',
									{ className: styles.statusContainer },
									React.createElement(
										'span',
										{ className: classNames(styles.status, getStyle(h.statusStr)) },
										h.statusStr
									)
								),
								React.createElement(
									'div',
									{ className: styles.hubNameContainer },
									React.createElement(
										'a',
										{ href: '../datapages/?' + encodeObject(_extends({ host: h.host }, hubParams)) },
										h.name,
										h.reqStatus
									)
								),
								React.createElement(
									'i',
									{ className: classNames('material-icons', styles.remove), 'data-host': h.host,
										onClick: _this3.onRemove },
									'close'
								)
							);
						}),
						React.createElement(
							'li',
							null,
							React.createElement(
								'div',
								{ className: styles.hostForm },
								React.createElement('input', { className: styles.input, onKeyDown: this.onKeyDown, ref: 'newHost',
									type: 'text', placeholder: 'Add Hub' }),
								React.createElement(
									_button.Button,
									{ onClick: this.onAdd, accent: true },
									'Add'
								)
							)
						)
					)
				)
			);
		}
	}]);

	return Hub;
}(React.Component);

var selector = function selector(state) {
	return state.spreadsheet.servers;
};

var ThemedHub = function (_React$Component2) {
	_inherits(ThemedHub, _React$Component2);

	function ThemedHub() {
		_classCallCheck(this, ThemedHub);

		return _possibleConstructorReturn(this, (ThemedHub.__proto__ || Object.getPrototypeOf(ThemedHub)).apply(this, arguments));
	}

	_createClass(ThemedHub, [{
		key: 'render',
		value: function render() {
			return React.createElement(
				_reactCssThemr.ThemeProvider,
				{ theme: appTheme },
				React.createElement(Hub, _extends({}, this.props, { selector: selector }))
			);
		}
	}]);

	return ThemedHub;
}(React.Component);

module.exports = ThemedHub;