ucsc-xena-client/dist/SpreadSheetHighlight.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; }; }();

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

var tickWidth = 5,
    borderWidth = 5;

var style = {
	position: 'absolute',
	background: 'transparent',
	left: -(tickWidth + borderWidth),
	top: -borderWidth,
	pointerEvents: 'none',
	zIndex: 2,
	borderWidth: borderWidth,
	borderColor: 'transparent',
	borderStyle: 'solid',
	transition: 'border-color 0.3s linear'
};

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

	function SpreadSheetHighlight() {
		var _ref;

		var _temp, _this, _ret;

		_classCallCheck(this, SpreadSheetHighlight);

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

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SpreadSheetHighlight.__proto__ || Object.getPrototypeOf(SpreadSheetHighlight)).call.apply(_ref, [this].concat(args))), _this), _this.state = { animate: false }, _this.draw = function (props) {
			var samples = props.samples,
			    samplesMatched = props.samplesMatched,
			    height = props.height,
			    _this2 = _this,
			    vg = _this2.vg;


			if (vg.height() !== height) {
				vg.height(height);
			}

			vg.clear(0, 0, tickWidth, height);
			if (!samplesMatched) {
				return;
			}
			// Previously we used _.object, but hit a Safari bug https://bugs.webkit.org/show_bug.cgi?id=177772
			// with assigning numeric values to numeric keys. So, using an Array instead.
			var matchMap = samplesMatched.reduce(function (acc, v, i) {
				acc[v] = i;return acc;
			}, new Array(samples.length)),
			    stripeGroups = _.groupByConsec(samples, function (s) {
				return _.has(matchMap, s);
			}),
			    stripes = _.scan(stripeGroups, function (acc, g) {
				return acc + g.length;
			}, 0),
			    hasMatch = _.map(stripeGroups, function (s, i) {
				return _.has(matchMap, stripeGroups[i][0]);
			}),
			    pixPerRow = height / samples.length;

			vg.box(0, 0, tickWidth, height, 'rgba(0, 0, 0, 0)'); // transparent black

			var rects = _.flatmap(_.initial(stripes).map(function (offset, i) {
				return !hasMatch[i] ? [] : [[0, offset * pixPerRow, tickWidth, Math.max(pixPerRow * (stripes[i + 1] - offset), 1)]];
			}));
			if (rects.length > 0) {
				vg.drawRectangles(rects, { fillStyle: 'rgba(0, 0, 0, 1)' });
			}
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	_createClass(SpreadSheetHighlight, [{
		key: 'shouldComponentUpdate',
		value: function shouldComponentUpdate(nextProps, nextState) {
			// ignore props.
			return !_.isEqual(this.state, nextState);
		}
	}, {
		key: 'componentDidMount',
		value: function componentDidMount() {
			var _this3 = this;

			var height = this.props.height;

			this.vg = vgcanvas(this.refs.canvas, tickWidth, height);
			this.draw(this.props);
			this.animate = this.props.animate.subscribe(function (ev) {
				return _this3.setState({ animate: ev });
			}); //eslint-disable-line react/no-did-mount-set-state
		}
	}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
			this.animate.unsubscribe();
		}
	}, {
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(newProps) {
			if (this.vg && !_.isEqual(newProps, this.props)) {
				this.draw(newProps);
			}
		}
	}, {
		key: 'render',
		value: function render() {
			var animate = this.state.animate,
			    border = animate ? {
				borderColor: 'red'
			} : {};

			return React.createElement('canvas', { style: _extends({}, style, border), ref: 'canvas' });
		}
	}]);

	return SpreadSheetHighlight;
}(React.Component);

module.exports = SpreadSheetHighlight;