ucsc-xena-client/dist/views/GeneSuggest.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 _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 _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _PureComponent2 = require('../PureComponent');

var _PureComponent3 = _interopRequireDefault(_PureComponent2);

var _XAutosuggest = require('./XAutosuggest');

var _XAutosuggest2 = _interopRequireDefault(_XAutosuggest);

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

var _input2 = _interopRequireDefault(_input);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var React = require('react');

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

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

var _require2 = require('../react-utils'),
    rxEvents = _require2.rxEvents;

require('./GeneSuggest.css'); // react-autosuggest, global styles
var styles = require('./GeneSuggest.module.css'); // react-toolbox, module styles
var limit = 8;

// Return the start and end indices of the word in 'value'
// under the cursor position.
function currentWordPosition(value, position) {
	var li = value.slice(0, position).lastIndexOf(' '),
	    i = li === -1 ? 0 : li + 1,
	    lj = value.slice(position).indexOf(' '),
	    j = lj === -1 ? value.length : position + lj;
	return [i, j];
}

// Return the word in 'value' under the cursor position
function currentWord(value, position) {
	var _currentWordPosition = currentWordPosition(value, position),
	    _currentWordPosition2 = _slicedToArray(_currentWordPosition, 2),
	    i = _currentWordPosition2[0],
	    j = _currentWordPosition2[1];

	return value.slice(i, j);
}

var defaultAssembly = 'hg38';

var renderInputComponent = function renderInputComponent(_ref) {
	var ref = _ref.ref,
	    _onChange = _ref.onChange,
	    label = _ref.label,
	    error = _ref.error,
	    props = _objectWithoutProperties(_ref, ['ref', 'onChange', 'label', 'error']);

	return React.createElement(
		_input2.default,
		_extends({
			theme: styles,
			error: _.isString(error) ? error : null,
			spellCheck: false,
			innerRef: function innerRef(el) {
				return ref(el && el.inputNode);
			},
			onChange: function onChange(value, ev) {
				return _onChange(ev);
			},
			label: label || 'Add Gene or Position'
		}, props),
		React.createElement(
			'i',
			{ style: { color: 'red', opacity: error ? 1 : 0 }, className: 'material-icons' },
			'error'
		)
	);
};

// Currently we only match against refGene hg38 genes. We could, instead, match
// on specific datasets (probemap, mutation, segmented, refGene), but that will
// require some more work to dispatch the query for each type.

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

	function GeneSuggest() {
		var _ref2;

		var _temp, _this, _ret;

		_classCallCheck(this, GeneSuggest);

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

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = GeneSuggest.__proto__ || Object.getPrototypeOf(GeneSuggest)).call.apply(_ref2, [this].concat(args))), _this), _this.state = { suggestions: [] }, _this.onSuggestionsFetchRequested = function (_ref3) {
			var value = _ref3.value;

			var position = _this.input.selectionStart,
			    word = currentWord(value, position);

			if (word !== '') {
				_this.on.change(word);
			}
		}, _this.shouldRenderSuggestions = function (value) {
			var position = _this.input.selectionStart,
			    word = currentWord(value, position);
			return word.length > 0;
		}, _this.onSuggestionsClearRequested = function () {
			_this.setState({ suggestions: [] });
		}, _this.onChange = function (ev, _ref4) {
			var newValue = _ref4.newValue,
			    method = _ref4.method;

			// Don't update the value for 'up' and 'down' keys. If we do update
			// the value, it gives us an in-place view of the suggestion (pasting
			// the value into the input field), but the drawback is that it moves
			// the cursor to the end of the line. This messes up multi-word input.
			// We could try to preserve the cursor position, perhaps by passing a
			// custom input renderer. But for now, just don't update the value for
			// these events.
			if (method !== 'up' && method !== 'down') {
				_this.props.onChange(newValue);
			}
		}, _this.getSuggestionValue = function (suggestion) {
			var position = _this.input.selectionStart,
			    value = _this.input.value,
			    _currentWordPosition3 = currentWordPosition(value, position),
			    _currentWordPosition4 = _slicedToArray(_currentWordPosition3, 2),
			    i = _currentWordPosition4[0],
			    j = _currentWordPosition4[1];

			// splice the suggestion into the current word
			return value.slice(0, i) + suggestion + value.slice(j);
		}, _this.setInput = function (input) {
			var inputRef = _this.props.inputRef;

			_this.input = input;
			if (inputRef) {
				inputRef(_this.input);
			}
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	_createClass(GeneSuggest, [{
		key: 'componentWillMount',
		value: function componentWillMount() {
			var _this2 = this;

			var _ref5 = refGene[this.props.assembly] || refGene[defaultAssembly],
			    host = _ref5.host,
			    name = _ref5.name;

			var events = rxEvents(this, 'change');
			this.change = events.change.distinctUntilChanged(_.isEqual).debounceTime(200).switchMap(function (value) {
				return sparseDataMatchPartialField(host, 'name2', name, value, limit);
			}).subscribe(function (matches) {
				return _this2.setState({ suggestions: matches });
			});
		}
	}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
			this.change.unsubscribe();
		}
	}, {
		key: 'render',
		value: function render() {
			var onChange = this.onChange,
			    _props = this.props,
			    onKeyDown = _props.onKeyDown,
			    _props$value = _props.value,
			    value = _props$value === undefined ? '' : _props$value,
			    label = _props.label,
			    error = _props.error,
			    suggestions = this.state.suggestions;


			return React.createElement(_XAutosuggest2.default, {
				inputRef: this.setInput,
				suggestions: suggestions,
				onSuggestionsFetchRequested: this.onSuggestionsFetchRequested,
				onSuggestionsClearRequested: this.onSuggestionsClearRequested,
				getSuggestionValue: this.getSuggestionValue,
				shouldRenderSuggestions: this.shouldRenderSuggestions,
				renderSuggestion: function renderSuggestion(v) {
					return React.createElement(
						'span',
						null,
						v
					);
				},
				renderInputComponent: renderInputComponent,
				inputProps: { value: value, label: label, error: error, onKeyDown: onKeyDown, onChange: onChange } });
		}
	}]);

	return GeneSuggest;
}(_PureComponent3.default);

module.exports = GeneSuggest;