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/
207 lines (190 loc) • 12.5 kB
JavaScript
"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 _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 desired_fasta = (0, _fasta["default"])(">Reference\nGTCACAATAAAGATAGGGGGGCAACTAAAGGAAGTTCTATTAGATACAGGAGCAGAT\n>Red strain\nGTCACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCAGAT\n>Blue strain\nGTCACAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCAGAT "),
given_fasta = (0, _fasta["default"])(">B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-42723\n--CACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATA-AGGAG-----\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-77746\n--CACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAG-----\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-53928\n--CACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAG-----\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-85956\n--CACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAG-----\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-69431\n--CACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAG-----\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-104273+B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-121232\n---ACAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-133528+B.US.2008.HIV_US_BID-V4123_2008.JQ403034-149880\n---ACAGTAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-95752+B.US.2008.HIV_US_BID-V4123_2008.JQ403034-12964\n---ACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-126702\n---ACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-66696\n---ACAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-71718\n---ACAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-84187\n---ACAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-7743\n---ACAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-117729\n---ACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-63877\n---ACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-149880\n---ACAATAAAGGTAGGAGGGCAATTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-132961\n---ACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-18355\n---ACAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-1660\n---ACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-104273\n---ACAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-108114\n---ACAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-148504\n---ACAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGC----\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-68385+B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-7246\n----CAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCA---\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-138624+B.US.2008.HIV_US_BID-V4123_2008.JQ403034-47215\n----CAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCA---\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-135888\n----CAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCA---\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-45220\n----CAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCA---\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-103700\n----CAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCA---\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-88614\n----CAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCA---\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-8325\n----CAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCA---\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-588\n----CAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCA---\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-135913\n----CAATAAAGGGAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCA---\n>B.CH.2002.HIV_CH_BID-V3527_2002.JQ403021-127315\n----CAGTAAAGATAGGGGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCA---\n>B.US.2008.HIV_US_BID-V4123_2008.JQ403034-109382\n----CAATAAAGGTAGGAGGGCAACTAAAGGAAGCTCTATTAGATACAGGAGCA---\n ").map(function (record, i) {
record.header = "Read " + (i + 1);
return record;
});
function Quasispecies() {
var site_size = 15,
reference_width = 100,
label_height = 60,
padding = 5,
width = reference_width + 57 * site_size,
height = label_height + 3 * site_size + padding + 33 * site_size;
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h1", null, "Quasispecies"), /*#__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("g", {
transform: "translate(".concat(reference_width + 6.5 * site_size, ", 20)")
}, /*#__PURE__*/_react["default"].createElement("text", {
textAnchor: "middle",
fontFamily: "Courier"
}, "Covariable"), /*#__PURE__*/_react["default"].createElement("line", {
x1: 0,
x2: 0,
y1: 5,
y2: 40,
stroke: "lightgrey",
strokeWidth: 2
}), /*#__PURE__*/_react["default"].createElement("circle", {
cx: 0,
cy: 5,
fill: "black",
r: 2
})), /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(reference_width + 12.5 * site_size, ", 40)")
}, /*#__PURE__*/_react["default"].createElement("text", {
textAnchor: "middle",
fontFamily: "Courier"
}, "Covariable"), /*#__PURE__*/_react["default"].createElement("line", {
x1: 0,
x2: 0,
y1: 5,
y2: 40,
stroke: "lightgrey",
strokeWidth: 2
}), /*#__PURE__*/_react["default"].createElement("circle", {
cx: 0,
cy: 5,
fill: "black",
r: 2
})), /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(reference_width + 17.5 * site_size, ", 20)")
}, /*#__PURE__*/_react["default"].createElement("text", {
textAnchor: "middle",
fontFamily: "Courier"
}, "Covariable"), /*#__PURE__*/_react["default"].createElement("line", {
x1: 0,
x2: 0,
y1: 5,
y2: 40,
stroke: "lightgrey",
strokeWidth: 2
}), /*#__PURE__*/_react["default"].createElement("circle", {
cx: 0,
cy: 5,
fill: "black",
r: 2
})), /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(reference_width + 24.5 * site_size, ", 40)")
}, /*#__PURE__*/_react["default"].createElement("text", {
textAnchor: "middle",
fontFamily: "Courier"
}, "Base error"), /*#__PURE__*/_react["default"].createElement("line", {
x1: 0,
x2: 0,
y1: 5,
y2: 40,
stroke: "lightgrey",
strokeWidth: 2
}), /*#__PURE__*/_react["default"].createElement("circle", {
cx: 0,
cy: 5,
fill: "black",
r: 2
})), /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(reference_width + 34.5 * site_size, ", 20)")
}, /*#__PURE__*/_react["default"].createElement("text", {
textAnchor: "middle",
fontFamily: "Courier"
}, "Variable"), /*#__PURE__*/_react["default"].createElement("line", {
x1: 0,
x2: 0,
y1: 5,
y2: 40,
stroke: "lightgrey",
strokeWidth: 2
}), /*#__PURE__*/_react["default"].createElement("circle", {
cx: 0,
cy: 5,
fill: "black",
r: 2
})), /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(reference_width + 46.5 * site_size, ", 40)")
}, /*#__PURE__*/_react["default"].createElement("text", {
textAnchor: "middle",
fontFamily: "Courier"
}, "Deletion"), /*#__PURE__*/_react["default"].createElement("line", {
x1: 0,
x2: 0,
y1: 5,
y2: 40,
stroke: "lightgrey",
strokeWidth: 2
}), /*#__PURE__*/_react["default"].createElement("circle", {
cx: 0,
cy: 5,
fill: "black",
r: 2
})), /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(0, ".concat(2 + label_height, ")")
}, /*#__PURE__*/_react["default"].createElement(_SequenceAxis.BaseSequenceAxis, {
site_size: site_size,
width: reference_width,
sequence_data: desired_fasta,
fill: ["black", "red", "blue"]
})), /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(reference_width, ", ").concat(label_height, ")")
}, /*#__PURE__*/_react["default"].createElement(_BaseSVGAlignment["default"], {
site_size: site_size,
sequence_data: desired_fasta,
site_color: function site_color(mol, site, header) {
if (header == "Reference") return _colors.nucleotide_colors[mol];
return mol == desired_fasta[0].seq[site] ? "#EEE" : _colors.nucleotide_colors[mol];
},
molecule: function molecule(mol, site, header) {
if (header == "Reference") return mol;
return mol == desired_fasta[0].seq[site] ? "." : mol;
}
})), /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(0, ".concat(3 * site_size + padding + label_height + 2, ")")
}, /*#__PURE__*/_react["default"].createElement(_SequenceAxis.BaseSequenceAxis, {
site_size: site_size,
width: reference_width,
sequence_data: given_fasta
})), /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(reference_width, ", ").concat(3 * site_size + padding + label_height, ")")
}, /*#__PURE__*/_react["default"].createElement(_BaseSVGAlignment["default"], {
site_size: site_size,
sequence_data: given_fasta,
site_color: function site_color(mol, site, header) {
if (header == "Reference") return _colors.nucleotide_colors[mol];
return mol == desired_fasta[0].seq[site] ? "#EEE" : _colors.nucleotide_colors[mol];
},
molecule: function molecule(mol, site, header) {
if (header == "Reference") return mol;
return mol == desired_fasta[0].seq[site] ? "." : mol;
}
}))));
}
var _default = Quasispecies;
exports["default"] = _default;