alignment.js/app/FASTA/artificial_recombination.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";

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); }

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

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

var _d3Fetch = require("d3-fetch");

var _d3ReactAxis = require("d3-react-axis");

var d3 = _interopRequireWildcard(require("d3"));

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

var _BaseSVGAlignment = _interopRequireDefault(require("../../components/BaseSVGAlignment.js"));

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

var _Button = _interopRequireDefault(require("../../components/Button.js"));

var _d3SaveSvg = require("d3-save-svg");

var _saveSvgAsPng = require("save-svg-as-png");

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; }

var references = (0, _fasta["default"])(">89.6\nAAGCCGAGGGGAACTAATTA\n>HXB2\nAGACAAGTATCTACTATTCG\n>JRCSF\nAGACCGATATCCTCTGTTTA\n>NL43\nGGATAAATATCTACCATCTG\n>YU2\nGGACAAATATCCAATATTTA\n"),
    superreads = (0, _fasta["default"])(">superread-1_weight-52\nAGACCGATATCCTC------\n>superread-2_weight-9\nAGACAAGTATCTAC------\n>superread-4_weight-10\nGGATAAATATCTAC------\n>superread-6_weight-13\nGGATAAATATCCTC------\n>superread-8_weight-26\nAGACAAATATCCAA------\n>superread-9_weight-46\nAGACCGATATCCAA------\n>superread-11_weight-14\nGGACAAATATCCTC------\n>superread-12_weight-13\nAGACAAATATCTAC------\n>superread-13_weight-30\nAGACCGATATCTAC------\n>superread-14_weight-7\nGGACCGATATCCTC------\n>superread-15_weight-7\nGGATCGATATCCTC------\n>superread-17_weight-15\nAGACAAGTATCCTC------\n>superread-20_weight-20\nGGACAAATATCCAA------\n>superread-21_weight-9\nAGATAAATATCTAC------\n>superread-42_weight-32\nGGATAAATAT----------\n>superread-43_weight-13\nAAGCCGAGGG----------\n>superread-45_weight-20\nAGACAAGTAT----------\n>superread-46_weight-43\nAGACCGATAT----------\n>superread-48_weight-17\nGGACAAATAT----------\n>superread-51_weight-11\nAGACAAATAT----------\n"),
    weights = superreads.map(function (sr) {
  return +sr.header.split("_")[1].split("-")[1];
});
superreads.forEach(function (sr, i) {
  sr.header = "superread-" + (i + 1);
});

function AR() {
  var site_size = 20,
      number_of_sequences = 25,
      number_of_sites = 20,
      bar_width = 100,
      axis_height = 35,
      reference_width = 110,
      reference_height = 5 * site_size,
      alignment_width = number_of_sites * site_size,
      right_padding = 10,
      width = reference_width + alignment_width + bar_width + right_padding,
      height = axis_height + site_size * number_of_sequences,
      scale = d3.scaleLinear().domain([0, d3.max(weights)]).range([0, bar_width]),
      chosen_superread_index = 8,
      chosen_superread = superreads[chosen_superread_index],
      label_fills = Array(superreads.length).fill("black");
  label_fills[chosen_superread_index] = "red";
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h1", null, "Artificial Recombination"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
    label: "Save as PNG",
    onClick: function onClick() {
      return (0, _saveSvgAsPng.saveSvgAsPng)(document.getElementById("alignment-js-svg"), "alignment.png");
    }
  })), /*#__PURE__*/_react["default"].createElement("svg", {
    id: "alignment-js-svg",
    width: width,
    height: height
  }, /*#__PURE__*/_react["default"].createElement("rect", {
    x: 0,
    y: 0,
    width: width,
    height: height,
    fill: "white"
  }), /*#__PURE__*/_react["default"].createElement("text", {
    x: reference_width + alignment_width + bar_width / 2,
    y: 10,
    textAnchor: "middle",
    fontFamily: "Courier"
  }, "Weight"), /*#__PURE__*/_react["default"].createElement(_d3ReactAxis.AxisTop, {
    transform: "translate(".concat(reference_width + alignment_width, ", ").concat(axis_height, ")"),
    scale: scale,
    tickValues: [10, 20, 30, 40, 50]
  }), weights.map(function (weight, i) {
    return /*#__PURE__*/_react["default"].createElement("rect", {
      key: i,
      x: reference_width + alignment_width,
      y: (i + 5) * site_size + axis_height,
      width: scale(weight),
      height: site_size,
      stroke: "black",
      fill: i == chosen_superread_index ? "red" : "pink"
    });
  }), /*#__PURE__*/_react["default"].createElement("g", {
    transform: "translate(0, ".concat(axis_height, ")")
  }, /*#__PURE__*/_react["default"].createElement(_SequenceAxis.BaseSequenceAxis, {
    width: reference_width,
    sequence_data: references,
    site_size: site_size,
    fill: ["black", "red", "red", "black", "black"],
    bold: true
  })), /*#__PURE__*/_react["default"].createElement("g", {
    transform: "translate(".concat(reference_width, ", ").concat(axis_height, ")")
  }, /*#__PURE__*/_react["default"].createElement(_BaseSVGAlignment["default"], {
    sequence_data: references,
    site_color: function site_color(mol, site, header) {
      return mol == chosen_superread.seq[site] ? "#EEE" : _colors.nucleotide_colors[mol];
    },
    molecule: function molecule(mol, site, header) {
      return mol == chosen_superread.seq[site] ? "." : mol;
    }
  })), /*#__PURE__*/_react["default"].createElement("g", {
    transform: "translate(0, ".concat(reference_height + axis_height, ")")
  }, /*#__PURE__*/_react["default"].createElement(_SequenceAxis.BaseSequenceAxis, {
    width: reference_width,
    sequence_data: superreads,
    site_size: site_size,
    fill: label_fills
  })), /*#__PURE__*/_react["default"].createElement("g", {
    transform: "translate(".concat(reference_width, ", ").concat(reference_height + axis_height, ")")
  }, /*#__PURE__*/_react["default"].createElement(_BaseSVGAlignment["default"], {
    sequence_data: superreads,
    site_color: function site_color(mol, site, header) {
      if (header == "superread-9") return _colors.nucleotide_colors[mol];
      if (mol == "-") return _colors.nucleotide_colors["-"];
      return mol == chosen_superread.seq[site] ? "#EEE" : _colors.nucleotide_colors[mol];
    },
    molecule: function molecule(mol, site, header) {
      if (header == "superread-9") return mol;
      if (mol == "-") return "-";
      return mol == chosen_superread.seq[site] ? "." : mol;
    }
  }))));
}

var _default = AR;
exports["default"] = _default;