ucsc-xena-client/dist/views/SampleSearch.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);

var _input = require('react-toolbox/lib/input');

var _input2 = _interopRequireDefault(_input);

var _menu = require('react-toolbox/lib/menu');

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 React = require('react');

var classNames = require('classnames');

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

//var SampleIDInput = React.createClass({
//	getInitialState() {
//		return {
//			show: false,
//			value: undefined
//		};
//	},
//	onChange (ev) {
//		var value = ev.target.value;
//		this.setState({value});
//	},
//	close () {
//		this.setState({ show: false});
//	},
//	submit () {
//		var samplesList = this.state.value.split(/\s+/),
//			{onSearchIDAndFilterColumn, onSamplesSubmit} = this.props;
//		this.close();
//		this.state.value = '';
//		onSearchIDAndFilterColumn(samplesList);
//		onSamplesSubmit("A:true"); // since the new column is always column A
//	},
//	render() {
//		var tooltipButton = <Tooltip>Search by sample IDs</Tooltip>,
//			tooltipModalString = 'Samples match your list will be highlighted. \
//				A new binary column will be made using your list: matched samples vs. the rest.',
//			tooltipModal = <Tooltip>{tooltipModalString}</Tooltip>,
//			{cohortSamples, disabled} = this.props,
//			help = 'e.g.\n' + Object.values(cohortSamples)[0].slice(0, 5).join('\n') + '\n...';
//
//		return (
//			<span className = "modal-container" >
//				<OverlayTrigger trigger={['hover']} placement="top" overlay={tooltipButton}>
//					<Button
//						bsSize = "small"
//						onClick = {() => this.setState({ show: true})}
//						disabled={disabled}>
//						Custom Sample List
//					</Button>
//				</OverlayTrigger>
//				<Modal
//					show={this.state.show}
//					onHide={this.close}
//					container={this}
//					aria-labelledby="contained-modal-title">
//					<Modal.Header closeButton>
//						<Modal.Title id="contained-modal-title">
//							Enter a list of samaple IDs to highlight
//							<OverlayTrigger trigger={['hover']} placement="right" overlay={tooltipModal}>
//								<span className='glyphicon glyphicon-info-sign text-muted'
//									style={{margin: '5px'}}/>
//							</OverlayTrigger>
//						</Modal.Title>
//					</Modal.Header>
//					<Modal.Body>
//						<Input style={{width: 550, height: 200}}
//							value={this.state.value}
//							type ="textarea"
//							placeholder={help}
//							onChange={this.onChange}/>
//					</Modal.Body>
//					<Modal.Footer>
//						<Button bsStyle="primary" onClick={this.submit} disabled={!this.state.value}>Submit</Button>
//						<Button onClick={this.close}>Cancel</Button>
//					</Modal.Footer>
//				</Modal>
//			</span>
//		);
//	}
//});

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

	function SampleSearch() {
		var _ref;

		var _temp, _this, _ret;

		_classCallCheck(this, SampleSearch);

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

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SampleSearch.__proto__ || Object.getPrototypeOf(SampleSearch)).call.apply(_ref, [this].concat(args))), _this), _this.state = { value: _this.props.value }, _this.onChange = function (value) {
			var onChange = _this.props.onChange;

			_this.setState({ value: value });
			onChange(value);
		}, _this.onSamplesSubmit = function (value) {
			var onChange = _this.props.onChange;

			_this.setState({ value: value });
			onChange(value);
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	_createClass(SampleSearch, [{
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(newProps) {
			if (this.state.value === this.props.value) {
				this.setState({ value: newProps.value });
			}
			// otherwise we have buffered changes to state, and
			// updating from props would revert the user input
			// and move the carat to the end.
		}
	}, {
		key: 'render',
		value: function render() {
			var _props = this.props,
			    matches = _props.matches,
			    sampleCount = _props.sampleCount,
			    onFilter = _props.onFilter,
			    onZoom = _props.onZoom,
			    onCreateColumn = _props.onCreateColumn,
			    onResetSampleFilter = _props.onResetSampleFilter,
			    mode = _props.mode,
			    value = this.state.value,
			    disableActions = !(matches > 0 && matches < sampleCount),
			    noshow = mode !== "heatmap";

			return React.createElement(
				'div',
				{ className: compStyles.SampleSearch },
				React.createElement(
					_input2.default,
					{ className: compStyles.inputContainer,
						spellCheck: false,
						type: 'text',
						value: value || '',
						title: value,
						placeholder: 'Find samples e.g. TCGA-DB-A4XH, missense',
						onChange: this.onChange,
						disabled: noshow },
					React.createElement(
						'span',
						{ className: compStyles.subtitle },
						matches + ' matching samples'
					)
				),
				noshow ? React.createElement(
					'i',
					{ className: classNames('material-icons', compStyles.menuDisabled) },
					'filter_list'
				) : React.createElement(
					_menu.IconMenu,
					{ title: 'Filter actions', className: compStyles.filterMenu, icon: 'filter_list', iconRipple: false, position: 'topLeft' },
					React.createElement(_menu.MenuItem, { disabled: disableActions, caption: 'Filter', onClick: onFilter }),
					React.createElement(_menu.MenuItem, { caption: 'Clear Filter', onClick: onResetSampleFilter }),
					React.createElement(_menu.MenuItem, { disabled: disableActions, caption: 'Zoom', onClick: onZoom }),
					React.createElement(_menu.MenuItem, { disabled: disableActions, caption: 'New Column', onClick: onCreateColumn })
				)
			);
		}
	}]);

	return SampleSearch;
}(_PureComponent3.default);

module.exports = { SampleSearch: SampleSearch };