@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
40 lines (39 loc) • 3.03 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = SVGRuler;
const jsx_runtime_1 = require("react/jsx-runtime");
const util_1 = require("@jbrowse/core/util");
const material_1 = require("@mui/material");
const util_2 = require("../util");
const SVGRegionSeparators_1 = __importDefault(require("./SVGRegionSeparators"));
function Ruler({ start, end, bpPerPx, reversed = false, major = true, minor = true, hideText = false, }) {
const ticks = (0, util_2.makeTicks)(start, end, bpPerPx, major, minor);
const theme = (0, material_1.useTheme)();
const c = (0, util_1.stripAlpha)(theme.palette.text.secondary);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [ticks.map(tick => {
const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
return ((0, jsx_runtime_1.jsx)("line", { x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: c }, `tick-${tick.base}`));
}), !hideText
? ticks
.filter(tick => tick.type === 'major')
.map(tick => {
const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
return ((0, jsx_runtime_1.jsx)("text", { x: x - 3, y: 7 + 11, fontSize: 11, fill: c, children: (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx) }, `label-${tick.base}`));
})
: null] }));
}
function SVGRuler({ model, fontSize, }) {
const { dynamicBlocks: { contentBlocks }, offsetPx: viewOffsetPx, bpPerPx, } = model;
const renderRuler = contentBlocks.length < 5;
const theme = (0, material_1.useTheme)();
const c = (0, util_1.stripAlpha)(theme.palette.text.primary);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SVGRegionSeparators_1.default, { model: model, height: 30 }), contentBlocks.map(block => {
const { start, end, key, reversed, offsetPx, refName, widthPx } = block;
const offset = offsetPx - viewOffsetPx;
const clipid = `clip-${key}`;
return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipid, children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: widthPx, height: 100 }) }) }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(${offset} 0)`, children: (0, jsx_runtime_1.jsxs)("g", { clipPath: `url(#${clipid})`, children: [(0, jsx_runtime_1.jsx)("text", { x: 4, y: fontSize, fontSize: fontSize, fill: c, children: refName }), (0, jsx_runtime_1.jsx)("g", { transform: "translate(0 20)", children: (0, jsx_runtime_1.jsx)(Ruler, { hideText: !renderRuler, start: start, end: end, bpPerPx: bpPerPx, reversed: reversed }) })] }) })] }, key));
})] }));
}