@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
88 lines (87 loc) • 3.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const util_1 = require("@jbrowse/core/util");
const mobx_react_1 = require("mobx-react");
const util_2 = require("./util");
const consts_1 = require("../consts");
function rightRoundedRect(x, y, width, height, radius) {
return `M${x},${y}h${width - radius}a${radius},${radius} 0 0 1 ${radius},${radius}v${height - 2 * radius}a${radius},${radius} 0 0 1 ${-radius},${radius}h${radius - width}z`;
}
function leftRoundedRect(x, y, width, height, radius) {
return `M${x + radius},${y}h${width - radius}v${height}h${radius - width}a${radius},${radius} 0 0 1 ${-radius},${-radius}v${2 * radius - height}a${radius},${radius} 0 0 1 ${radius},${-radius}z`;
}
function leftTriangle(x, _y, width, height) {
return [
[x, 0],
[x + width, height / 2],
[x, height],
].toString();
}
function rightTriangle(x, _y, width, height) {
return [
[x, height / 2],
[x + width, 0],
[x + width, height],
].toString();
}
const colorMap = {
gneg: 'rgb(227,227,227)',
gpos25: 'rgb(142,142,142)',
gpos50: 'rgb(85,85,85)',
gpos100: 'rgb(0,0,0)',
gpos75: 'rgb(57,57,57)',
gvar: 'rgb(0,0,0)',
stalk: 'rgb(127,127,127)',
acen: '#800',
};
const Cytobands = (0, mobx_react_1.observer)(function ({ overview, block, assembly, }) {
const { offsetPx, reversed } = block;
const cytobands = (0, util_2.getCytobands)(assembly, block.refName);
const lcap = reversed ? cytobands.length - 1 : 0;
const rcap = reversed ? 0 : cytobands.length - 1;
const h = consts_1.HEADER_OVERVIEW_HEIGHT;
let centromereSeen = false;
let curr = '';
let idx = 0;
return ((0, jsx_runtime_1.jsx)("g", { transform: `translate(-${offsetPx})`, children: cytobands.map((args, index) => {
const k = JSON.stringify(args);
const { refName, name, type, start, end } = args;
const s = overview.bpToPx({ refName, coord: start }) || 0;
const e = overview.bpToPx({ refName, coord: end }) || 0;
const l = Math.min(s, e);
const w = Math.abs(e - s);
if (type === 'n/a') {
const match = name === null || name === void 0 ? void 0 : name.match(/^(\d+)([A-Za-z])/);
const ret = match[1] + match[2];
if (ret && ret !== curr) {
curr = ret;
idx++;
}
}
const c = type === 'n/a'
? idx % 2
? 'black'
: '#a77'
: colorMap[type] || 'black';
if (type === 'acen' && !centromereSeen) {
centromereSeen = true;
return ((0, jsx_runtime_1.jsx)("polygon", { points: reversed
? rightTriangle(s - w, 0, w, h)
: leftTriangle(s, 0, w, h), ...(0, util_1.getFillProps)(c) }, k));
}
if (type === 'acen' && centromereSeen) {
return ((0, jsx_runtime_1.jsx)("polygon", { points: reversed
? leftTriangle(s - w, 0, w, h)
: rightTriangle(s, 0, w, h), ...(0, util_1.getFillProps)(c) }, k));
}
if (lcap === index) {
return ((0, jsx_runtime_1.jsx)("path", { d: leftRoundedRect(l, 0, w, h, 8), ...(0, util_1.getFillProps)(c) }, k));
}
if (rcap === index) {
return ((0, jsx_runtime_1.jsx)("path", { d: rightRoundedRect(l, 0, w, h, 8), ...(0, util_1.getFillProps)(c) }, k));
}
return ((0, jsx_runtime_1.jsx)("rect", { x: l, y: 0, width: w, height: h, ...(0, util_1.getFillProps)(c) }, k));
}) }));
});
exports.default = Cytobands;