alignment.js/SiteStackedBarChart.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 _d3ReactAxis = require("d3-react-axis");

var _d3Scale = require("d3-scale");

var _d3Array = require("d3-array");

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

var _SequenceAxis = _interopRequireDefault(require("./components/SequenceAxis.js"));

var _BaseSiteStackedBarChart = _interopRequireDefault(require("./components/BaseSiteStackedBarChart.js"));

var _fasta = _interopRequireDefault(require("./helpers/fasta"));

var _scroll_broadcaster = _interopRequireDefault(require("./helpers/scroll_broadcaster"));

var _colors = require("./helpers/colors");

var _computeLabelWidth = _interopRequireDefault(require("./helpers/computeLabelWidth"));

var _format = _interopRequireDefault(require("./helpers/format"));

var _SiteStackedBarChart$;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function SiteStackedBarChart(props) {
  var has_sequence_data = props.fasta || props.sequence_data;
  if (!has_sequence_data || !props.data) return /*#__PURE__*/_react["default"].createElement("div", null);
  var sequence_data = props.sequence_data || (0, _fasta["default"])(props.fasta),
      width = props.width,
      bar_height = props.bar_height,
      height = props.height,
      site_size = props.site_size,
      label_padding = props.label_padding,
      data = props.data,
      label_width = (0, _computeLabelWidth["default"])(sequence_data, label_padding),
      full_pixel_width = sequence_data[0].seq.length * site_size,
      full_pixel_height = sequence_data.length * site_size,
      base_alignment_width = width - label_width,
      base_alignment_height = height - bar_height,
      alignment_width = Math.min(full_pixel_width, base_alignment_width),
      alignment_height = Math.min(full_pixel_height, height - bar_height),
      scale = (0, _d3Scale.scaleLinear)().domain([0, (0, _d3Array.max)(data)]).range([props.left_bar_padding, bar_height - props.right_bar_padding]),
      container_style = {
    display: "grid",
    gridTemplateColumns: (0, _format["default"])([label_width, base_alignment_width]),
    gridTemplateRows: (0, _format["default"])([bar_height, base_alignment_height])
  },
      scroll_broadcaster = new _scroll_broadcaster["default"]({
    width: full_pixel_width,
    height: full_pixel_height,
    x_pad: base_alignment_width,
    y_pad: base_alignment_height,
    bidirectional: ["alignmentjs-alignment", "alignmentjs-stacked-bar", "alignmentjs-labels-div"]
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    id: "alignmentjs-main-div",
    style: container_style
  }, /*#__PURE__*/_react["default"].createElement(_d3ReactAxis.AxisLeft, {
    scale: scale,
    transform: "translate(".concat(label_width - 1, ", 0)")
  }), /*#__PURE__*/_react["default"].createElement(_BaseSiteStackedBarChart["default"], {
    width: alignment_width,
    height: bar_height,
    data: data,
    scroll_broadcaster: scroll_broadcaster
  }), /*#__PURE__*/_react["default"].createElement(_SequenceAxis["default"], {
    width: label_width,
    height: alignment_height,
    sequence_data: sequence_data,
    site_size: site_size,
    scroll_broadcaster: scroll_broadcaster
  }), /*#__PURE__*/_react["default"].createElement(_BaseAlignment["default"], {
    sequence_data: sequence_data,
    width: alignment_width,
    height: alignment_height,
    site_color: props.site_color,
    text_color: props.text_color,
    site_size: props.site_size,
    molecule: props.molecule,
    scroll_broadcaster: scroll_broadcaster
  }));
}

SiteStackedBarChart.defaultProps = (_SiteStackedBarChart$ = {
  site_color: _colors.nucleotide_color,
  text_color: _colors.nucleotide_text_color,
  label_padding: 10,
  left_bar_padding: 10,
  right_bar_padding: 20,
  site_size: 20,
  bar_height: 50
}, _defineProperty(_SiteStackedBarChart$, "bar_height", 100), _defineProperty(_SiteStackedBarChart$, "width", 960), _defineProperty(_SiteStackedBarChart$, "height", 500), _defineProperty(_SiteStackedBarChart$, "sender", "main"), _defineProperty(_SiteStackedBarChart$, "molecule", function molecule(mol) {
  return mol;
}), _SiteStackedBarChart$);
var _default = SiteStackedBarChart;
exports["default"] = _default;