alignment.js/TreeAlignment.js

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/

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _Placeholder = _interopRequireDefault(require("./components/Placeholder.js"));

var _SiteAxis = _interopRequireDefault(require("./components/SiteAxis.js"));

var _BaseAlignment = _interopRequireDefault(require("./components/BaseAlignment.js"));

var _Tree = _interopRequireDefault(require("./components/Tree.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 TreeAlignment(props) {
  var sequence_data = props.sequence_data;
  if (!sequence_data) return /*#__PURE__*/_react["default"].createElement("div", null);
  var width = props.width,
      tree_width = props.tree_width,
      height = props.height,
      axis_height = props.axis_height,
      site_size = props.site_size,
      full_pixel_width = sequence_data ? sequence_data[0].seq.length * site_size : null,
      full_pixel_height = sequence_data ? sequence_data.length * site_size : null,
      alignment_width = full_pixel_width ? Math.min(full_pixel_width, width - tree_width) : width,
      alignment_height = full_pixel_height ? Math.min(full_pixel_height, height - axis_height) : height,
      scroll_broadcaster = new _scroll_broadcaster["default"]({
    width: full_pixel_width,
    height: full_pixel_height,
    x_pad: width - tree_width,
    y_pad: height - axis_height,
    bidirectional: ["alignmentjs-alignment", "alignmentjs-axis-div", "alignmentjs-tree-div"]
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    id: "alignmentjs-main-div"
  }, /*#__PURE__*/_react["default"].createElement(_Placeholder["default"], {
    width: tree_width,
    height: axis_height
  }), /*#__PURE__*/_react["default"].createElement(_SiteAxis["default"], {
    width: alignment_width,
    height: axis_height,
    sequence_data: props.sequence_data,
    scroll_broadcaster: scroll_broadcaster
  }), /*#__PURE__*/_react["default"].createElement(_Tree["default"], {
    tree: props.tree,
    width: tree_width,
    height: alignment_height,
    site_size: props.site_size,
    scroll_broadcaster: scroll_broadcaster
  }), /*#__PURE__*/_react["default"].createElement(_BaseAlignment["default"], {
    sequence_data: props.sequence_data,
    width: alignment_width,
    height: alignment_height,
    site_size: props.site_size,
    site_color: props.site_color,
    scroll_broadcaster: scroll_broadcaster,
    molecule: props.molecule
  }));
}

TreeAlignment.defaultProps = {
  site_color: _colors.nucleotide_color,
  text_color: _colors.nucleotide_text_color,
  label_padding: 10,
  site_size: 20,
  axis_height: 25,
  width: 960,
  tree_width: 500,
  height: 500,
  sender: "main",
  molecule: function molecule(mol) {
    return mol;
  }
};
var _default = TreeAlignment;
exports["default"] = _default;