@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
88 lines (87 loc) • 3.64 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { getFillProps } from '@jbrowse/core/util';
import { observer } from 'mobx-react';
import { getCytobands } from './util';
import { HEADER_OVERVIEW_HEIGHT } from '../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)',
gpos33: 'rgb(142,142,142)',
gpos50: 'rgb(85,85,85)',
gpos66: '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 = observer(function ({ overview, block, assembly, }) {
const { offsetPx, reversed } = block;
const cytobands = getCytobands(assembly, block.refName);
const lcap = reversed ? cytobands.length - 1 : 0;
const rcap = reversed ? 0 : cytobands.length - 1;
const h = HEADER_OVERVIEW_HEIGHT;
let centromereSeen = false;
let curr = '';
let idx = 0;
return (_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 (_jsx("polygon", { points: reversed
? rightTriangle(s - w, 0, w, h)
: leftTriangle(s, 0, w, h), ...getFillProps(c) }, k));
}
if (type === 'acen' && centromereSeen) {
return (_jsx("polygon", { points: reversed
? leftTriangle(s - w, 0, w, h)
: rightTriangle(s, 0, w, h), ...getFillProps(c) }, k));
}
if (lcap === index) {
return (_jsx("path", { d: leftRoundedRect(l, 0, w, h, 8), ...getFillProps(c) }, k));
}
if (rcap === index) {
return (_jsx("path", { d: rightRoundedRect(l, 0, w, h, 8), ...getFillProps(c) }, k));
}
return (_jsx("rect", { x: l, y: 0, width: w, height: h, ...getFillProps(c) }, k));
}) }));
});
export default Cytobands;