ucsc-xena-client/dist/views/Tooltip.js

UCSC Xena Client. Functional genomics visualizations.

'use strict';

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 _PureComponent2 = require('../PureComponent');

var _PureComponent3 = _interopRequireDefault(_PureComponent2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }

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 React = require('react');
var _ = require('../underscore_ext');
var meta = require('../meta');
var classNames = require('classnames');

// Styles
var compStyles = require('./Tooltip.module.css');

var element = {
	value: function value(i, v) {
		return React.createElement(
			'span',
			{ key: i },
			v
		);
	},
	label: function label(i, l) {
		return React.createElement(
			'span',
			{ key: i },
			l
		);
	},
	labelValue: function labelValue(i, l, v) {
		return React.createElement(
			'span',
			{ key: i },
			l,
			': ',
			v
		);
	},
	url: function url(i, text, _url) {
		return React.createElement(
			'span',
			{ key: i },
			React.createElement(
				'a',
				{ href: _url, target: '_blank' },
				text
			)
		);
	}
	//	popOver: (i, text, dataList) => (
	//		<span key={i}><a><PopOverVariants label={text} body={dataList}/></a></span>
	//	),
};

function overlay() {
	return React.createElement('div', { className: compStyles.overlay });
}

//var PopOverVariants = React.createClass({
//  getInitialState() {
//    return { showModal: false };
//  },
//
//  close() {
//    this.setState({ showModal: false });
//  },
//
//  open() {
//    this.setState({ showModal: true });
//  },
//
//  render() {
//	var label = this.props.label,
//		dataList = this.props.body;
//
//	var rowsOut = _.map(dataList, (row, i) => (
//		<tr key={i}>
//			{row.map(([type, ...args], i) => element[type](i, ...args))}
//		</tr>
//	));
//
//
//    return (
//      <div>
//        <span
//          onClick={this.open}
//        >
//        {label}
//        </span>
//
//        <Modal show={this.state.showModal} onHide={this.close}>
//          <Modal.Header closeButton>
//            <Modal.Title>Variants</Modal.Title>
//          </Modal.Header>
//          <Modal.Body>
//			<div>
//				<table> {rowsOut} </table>
//			</div>
//          </Modal.Body>
//          <Modal.Footer>
//            <Button onClick={this.close}>Close</Button>
//          </Modal.Footer>
//        </Modal>
//      </div>
//    );
//  }
//});

var Tooltip = function (_PureComponent) {
	_inherits(Tooltip, _PureComponent);

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

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

	_createClass(Tooltip, [{
		key: 'render',
		value: function render() {
			var _props = this.props,
			    data = _props.data,
			    open = _props.open,
			    onClick = _props.onClick,
			    onClose = _props.onClose,
			    frozen = _props.frozen,
			    rows = _.getIn(data, ['rows']),
			    sampleID = _.getIn(data, ['sampleID']);

			// no tooltip info


			if (!rows && !sampleID) {
				return React.createElement('div', null);
			}

			var rowsOut = _.map(rows, function (row, i) {
				return React.createElement(
					'li',
					{ key: i },
					row.map(function (_ref, i) {
						var _ref2 = _toArray(_ref),
						    type = _ref2[0],
						    args = _ref2.slice(1);

						return element[type].apply(element, [i].concat(_toConsumableArray(args)));
					})
				);
			});
			var closeIcon = frozen ? React.createElement(
				'i',
				{ className: 'material-icons', onClick: onClose },
				'close'
			) : null;
			var sample = sampleID ? React.createElement(
				'span',
				null,
				sampleID
			) : null;

			return React.createElement(
				'div',
				{ onClick: onClick },
				frozen ? overlay(onClick) : null,
				React.createElement(
					'div',
					{ className: classNames(compStyles.Tooltip, _defineProperty({}, compStyles.open, open)) },
					React.createElement(
						'ul',
						{ className: compStyles.content },
						React.createElement(
							'li',
							{ className: compStyles.title },
							sample,
							closeIcon
						),
						rowsOut
					),
					React.createElement(
						'div',
						{ className: compStyles.actions },
						React.createElement(
							'span',
							{ className: compStyles.zoomHint },
							meta.name + '-click to ' + (frozen ? "unfreeze" : "freeze") + ' tooltip'
						),
						React.createElement(
							'a',
							{ href: 'http://xena.ucsc.edu/spreadsheet-zoom/', target: '_blank' },
							React.createElement(
								'i',
								{ className: 'material-icons' },
								'help'
							)
						)
					)
				)
			);
		}
	}]);

	return Tooltip;
}(_PureComponent3.default);

module.exports = Tooltip;