alignment.js/SequenceBarChart.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 _d3Scale = require("d3-scale");

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

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

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

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

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

var _BaseSequenceBarPlot = _interopRequireDefault(require("./components/BaseSequenceBarPlot.js"));

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

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

var _AxisTop = _interopRequireDefault(require("./components/AxisTop.js"));

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

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

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

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

function SequenceBarChart(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_width = props.bar_width,
      height = props.height,
      axis_height = props.axis_height,
      site_size = props.site_size,
      label_padding = props.label_padding,
      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 - bar_width - label_width,
      base_alignment_height = height - axis_height,
      alignment_width = Math.min(full_pixel_width, base_alignment_width),
      alignment_height = Math.min(full_pixel_height, height - axis_height),
      scale = (0, _d3Scale.scaleLinear)().domain([0, (0, _d3Array.max)(props.data)]).range([props.left_bar_padding, bar_width - props.right_bar_padding]),
      container_style = {
    display: "grid",
    gridTemplateColumns: (0, _format["default"])([label_width, base_alignment_width, bar_width]),
    gridTemplateRows: (0, _format["default"])([axis_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-axis-div", "alignmentjs-bar"]
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    id: "alignmentjs-main-div",
    style: container_style
  }, /*#__PURE__*/_react["default"].createElement(_Placeholder["default"], {
    width: label_width,
    height: axis_height
  }), /*#__PURE__*/_react["default"].createElement(_SiteAxis["default"], {
    width: alignment_width,
    height: axis_height,
    sequence_data: sequence_data,
    scroll_broadcaster: scroll_broadcaster
  }), /*#__PURE__*/_react["default"].createElement(_AxisTop["default"], {
    width: bar_width,
    height: axis_height,
    scale: scale,
    label: props.label
  }), /*#__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
  }), /*#__PURE__*/_react["default"].createElement(_BaseSequenceBarPlot["default"], {
    data: props.data,
    width: bar_width,
    height: alignment_height,
    scroll_broadcaster: scroll_broadcaster,
    scale: scale
  }));
}

SequenceBarChart.defaultProps = {
  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,
  axis_height: 50,
  bar_width: 300,
  width: 960,
  height: 500,
  sender: "main",
  molecule: function molecule(mol) {
    return mol;
  }
};
var _default = SequenceBarChart;
exports["default"] = _default;