ucsc-xena-client/dist/ChromPosition.js

UCSC Xena Client. Functional genomics visualizations.

'use strict';

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 _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 ReactDOM = require('react-dom');
var vgcanvas = require('./vgcanvas');

var _require = require('./util'),
    addCommas = _require.addCommas;

var labelHeight = 12;
var font = 10;

function metric(n) {
	var str = String(n);
	if (str.match(/000000$/)) {
		str = str.replace(/000000$/, 'Mb');
	} else if (str.match(/000$/)) {
		str = str.replace(/000$/, 'kb');
	} else {
		str = str + 'bp';
	}
	return str;
}

function pickRange(size) {
	return Math.pow(10, Math.floor(Math.log(size) / Math.log(10)));
}

function abrev(n) {
	var s = String(n);
	return {
		1: function _(s) {
			return s;
		},
		2: function _(s) {
			return s;
		},
		3: function _(s) {
			return s;
		},
		4: function _(s) {
			return s[0] + '.' + s[1] + 'k';
		},
		5: function _(s) {
			return s.slice(0, 2) + 'k';
		},
		6: function _(s) {
			return s.slice(0, 3) + 'k';
		},
		7: function _(s) {
			return s[0] + '.' + s[1] + 'M';
		},
		8: function _(s) {
			return s.slice(0, 2) + 'M';
		},
		9: function _(s) {
			return s.slice(0, 3) + 'M';
		}
	}[s.length](s);
}

function numberOrAbrev(vg, width, font, n) {
	var s = addCommas(n),
	    w = vg.textWidth(font, s + ' '); // pad with one space
	return w > width ? abrev(n) : s;
}

var margin = 8;

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

	function ChromPosition() {
		var _ref;

		var _temp, _this, _ret;

		_classCallCheck(this, ChromPosition);

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

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ChromPosition.__proto__ || Object.getPrototypeOf(ChromPosition)).call.apply(_ref, [this].concat(args))), _this), _this.draw = function (width, height, layout) {
			var mode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "coordinate";

			var vg = _this.vg;

			if (vg.width() !== width) {
				vg.width(width);
			}
			vg.box(0, 0, width, height, 'white'); // white background
			if (!layout) {
				return;
			}
			if (mode === "geneExon") {
				vg.text(margin, height - 4, 'black', font, "5'");
				vg.text(width - margin - vg.textWidth(font, "3'"), height - 4, 'black', font, "3'");
			} else {
				var _layout$chrom$ = _slicedToArray(layout.chrom[0], 2),
				    baseStart = _layout$chrom$[0],
				    baseEnd = _layout$chrom$[1],
				    _layout$screen$ = _slicedToArray(layout.screen[0], 2),
				    pixelStart = _layout$screen$[0],
				    pixelEnd = _layout$screen$[1],
				    pixelWidth = pixelEnd - pixelStart,
				    baseWidth = baseEnd - baseStart + 1,
				    range = pickRange(baseWidth / 2),
				    rangeWidth = pixelWidth * range / baseWidth,
				    startText = numberOrAbrev(vg, width / 4, font, baseStart),
				    endText = numberOrAbrev(vg, width / 4, font, baseEnd),
				    rangeText = metric(range),
				    rangeTextWidth = vg.textWidth(font, rangeText),
				    pushLeft = Math.max(width - rangeTextWidth - rangeWidth - 1, 0),
				    rangePos = Math.min(pushLeft, (pixelWidth - rangeWidth) / 2);

				if (mode === "geneIntron") {
					startText = "5'";
					endText = "3'";
				}

				var gap = width / 2 - margin - rangeWidth / 2 - vg.textWidth(font, endText);

				// Render start & end position, abreviating if constrained for width.
				if (mode === "coordinate" || gap > vg.textWidth(font, rangeText)) {
					vg.text(pixelStart + margin, height - 4, 'black', font, startText); // start position at left
					vg.text(pixelEnd - margin - vg.textWidth(font, endText), height - 4, 'black', font, endText); // end position at right
				}

				if (mode === 'geneIntron' || gap > vg.textWidth(font, rangeText)) {
					if (range >= 1) {
						// Render centered scale, pushing to left if constrained for width.
						vg.box(rangePos, labelHeight / 2, rangeWidth, 1, 'grey');
						vg.box(rangePos, labelHeight / 4, 1, labelHeight / 2, 'black');
						vg.box(rangePos + rangeWidth, labelHeight / 4, 1, labelHeight / 2, 'black');
						vg.text(rangePos + rangeWidth + 1, labelHeight - font / 4, 'black', font, rangeText);
					} else {
						vg.text((width - rangeWidth) / 2, labelHeight - font / 4, 'black', font, '1bp');
					}
				}
			}
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	_createClass(ChromPosition, [{
		key: 'componentDidMount',


		//shouldComponentUpdate: () => false,
		value: function componentDidMount() {
			var _props = this.props,
			    width = _props.width,
			    layout = _props.layout,
			    scaleHeight = _props.scaleHeight,
			    mode = _props.mode;

			this.vg = vgcanvas(ReactDOM.findDOMNode(this.refs.canvas), width, scaleHeight);
			this.draw(width, scaleHeight, layout, mode);
		}

		/*componentWillReceiveProps() {
  	var {width, layout, scaleHeight, mode} = this.props;
  	this.draw(width, scaleHeight, layout, mode);
  },*/

	}, {
		key: 'render',
		value: function render() {
			var _props2 = this.props,
			    width = _props2.width,
			    layout = _props2.layout,
			    scaleHeight = _props2.scaleHeight,
			    mode = _props2.mode;


			if (this.vg) {
				this.draw(width, scaleHeight, layout, mode);
			}
			return React.createElement('canvas', {
				className: 'Tooltip-target',
				onMouseMove: this.props.onMouseMove,
				onMouseOut: this.props.onMouseOut,
				onMouseOver: this.props.onMouseOver,
				onClick: this.props.onClick,
				ref: 'canvas' });
		}
	}]);

	return ChromPosition;
}(React.Component);

module.exports = { ChromPosition: ChromPosition, abrev: abrev };