alignment.js
Version:
A suite of reusable [React](http://reactjs.org/) components for creating a variety of visualizations involving [multiple sequence alignments](https://en.wikipedia.org/wiki/Multiple_sequence_alignment). [View the live demo here](http://alignment.hyphy.org/
226 lines (187 loc) • 10.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _underscore = _interopRequireDefault(require("underscore"));
var _fasta = _interopRequireDefault(require("./helpers/fasta"));
var _computeLabelWidth = _interopRequireDefault(require("./helpers/computeLabelWidth"));
var _BaseAlignment = _interopRequireDefault(require("./components/BaseAlignment.js"));
var _SiteAxis = _interopRequireDefault(require("./components/SiteAxis.js"));
var _Placeholder = _interopRequireDefault(require("./components/Placeholder.js"));
var _SequenceAxis = _interopRequireDefault(require("./components/SequenceAxis.js"));
var _scroll_broadcaster = _interopRequireDefault(require("./helpers/scroll_broadcaster"));
var _colors = require("./helpers/colors");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Alignment = /*#__PURE__*/function (_Component) {
_inherits(Alignment, _Component);
var _super = _createSuper(Alignment);
function Alignment(props) {
var _this;
_classCallCheck(this, Alignment);
_this = _super.call(this, props);
_this.label_width = 200;
_this.initialize(_this.props);
return _this;
}
_createClass(Alignment, [{
key: "setScrollingEvents",
value: function setScrollingEvents(props) {
if (props.fasta) {
var width = props.width,
height = props.height,
axis_height = props.axis_height;
var full_pixel_width = this.full_pixel_width,
full_pixel_height = this.full_pixel_height,
label_width = this.label_width;
this.scroll_broadcaster = new _scroll_broadcaster["default"]({
width: full_pixel_width,
height: full_pixel_height,
x_pad: width - label_width,
y_pad: height - axis_height,
x_pixel: this.x_pixel || 0,
y_pixel: this.y_pixel || 0,
bidirectional: ["alignmentjs-alignment", "alignmentjs-axis-div", "alignmentjs-labels-div"]
});
if (props.excavator) {
props.excavator.broadcaster = this.scroll_broadcaster;
}
}
}
}, {
key: "performCentering",
value: function performCentering() {
var _this$props = this.props,
centerOnSite = _this$props.centerOnSite,
width = _this$props.width,
site_size = _this$props.site_size;
this.x_pixel = site_size * centerOnSite - width / 2 || 0;
var _this$props2 = this.props,
centerOnHeader = _this$props2.centerOnHeader,
height = _this$props2.height;
this.y_pixel = centerOnHeader ? site_size * this.sequence_data.map(function (record) {
return record.header;
}).indexOf(centerOnHeader) - height / 2 : 0;
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps) {
var same_fasta = _underscore["default"].isEqual(this.props.fasta, nextProps.fasta),
different_coloring = !_underscore["default"].isEqual(this.props.molecule, nextProps.molecule) || !_underscore["default"].isEqual(this.props.site_color, nextProps.site_color) || !_underscore["default"].isEqual(this.props.text_color, nextProps.text_color),
should_update = !same_fasta || different_coloring;
if (should_update) {
this.initialize(nextProps);
return true;
}
return false;
}
}, {
key: "initialize",
value: function initialize(props) {
if (props.fasta) {
var fasta = props.fasta,
site_size = props.site_size,
width = props.width,
height = props.height;
this.sequence_data = (0, _fasta["default"])(fasta);
var sequence_data = this.sequence_data;
var label_padding = this.props.label_padding;
this.label_width = (0, _computeLabelWidth["default"])(sequence_data, label_padding);
this.full_pixel_width = site_size * this.sequence_data.number_of_sites;
this.full_pixel_height = site_size * this.sequence_data.number_of_sequences;
this.performCentering();
}
this.setScrollingEvents(props);
}
}, {
key: "render",
value: function render() {
var full_pixel_width = this.full_pixel_width,
full_pixel_height = this.full_pixel_height,
label_width = this.label_width,
width = full_pixel_width ? Math.min(label_width + full_pixel_width, this.props.width) : this.props.width,
height = full_pixel_height ? Math.min(full_pixel_height + this.props.axis_height, this.props.height) : this.props.height;
return /*#__PURE__*/_react["default"].createElement("div", {
id: "alignmentjs-main-div",
style: {
width: width,
height: height
}
}, /*#__PURE__*/_react["default"].createElement(_Placeholder["default"], {
width: this.label_width,
height: this.props.axis_height
}), /*#__PURE__*/_react["default"].createElement(_SiteAxis["default"], {
width: width - this.label_width,
height: this.props.axis_height,
site_size: this.props.site_size,
sequence_data: this.sequence_data,
x_pixel: this.x_pixel,
scroll_broadcaster: this.scroll_broadcaster,
start_site: this.props.start_site
}), /*#__PURE__*/_react["default"].createElement(_SequenceAxis["default"], {
width: this.label_width,
height: height - this.props.axis_height,
sequence_data: this.sequence_data,
site_size: this.props.site_size,
y_pixel: this.y_pixel,
scroll_broadcaster: this.scroll_broadcaster,
onClick: this.props.onSequenceClick
}), /*#__PURE__*/_react["default"].createElement(_BaseAlignment["default"], {
width: width - this.label_width,
height: height - this.props.axis_height,
sequence_data: this.sequence_data,
site_color: this.props.site_color,
text_color: this.props.text_color,
site_size: this.props.site_size,
x_pixel: this.x_pixel,
y_pixel: this.y_pixel,
scroll_broadcaster: this.scroll_broadcaster,
molecule: this.props.molecule,
onSiteClick: this.props.onSiteClick,
onSiteHover: this.props.onSiteHover
}));
}
}]);
return Alignment;
}(_react.Component);
Alignment.defaultProps = {
site_color: _colors.nucleotide_color,
text_color: _colors.nucleotide_text_color,
label_padding: 10,
site_size: 20,
axis_height: 25,
width: 960,
height: 500,
sender: "main",
molecule: function molecule(mol) {
return mol;
},
start_site: 0,
onSequenceClick: function onSequenceClick(label, i) {
return function () {
return null;
};
},
onSiteHover: function onSiteHover() {
return null;
},
onSiteClick: function onSiteClick() {
return null;
}
};
var _default = Alignment;
exports["default"] = _default;