@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
34 lines (33 loc) • 2.47 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { getTickDisplayStr, stripAlpha } from '@jbrowse/core/util';
import { useTheme } from '@mui/material';
import { makeTicks } from '../util';
import SVGRegionSeparators from './SVGRegionSeparators';
function Ruler({ start, end, bpPerPx, reversed = false, major = true, minor = true, hideText = false, }) {
const ticks = makeTicks(start, end, bpPerPx, major, minor);
const theme = useTheme();
const c = stripAlpha(theme.palette.text.secondary);
return (_jsxs(_Fragment, { children: [ticks.map(tick => {
const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
return (_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 (_jsx("text", { x: x - 3, y: 7 + 11, fontSize: 11, fill: c, children: getTickDisplayStr(tick.base + 1, bpPerPx) }, `label-${tick.base}`));
})
: null] }));
}
export default function SVGRuler({ model, fontSize, }) {
const { dynamicBlocks: { contentBlocks }, offsetPx: viewOffsetPx, bpPerPx, } = model;
const renderRuler = contentBlocks.length < 5;
const theme = useTheme();
const c = stripAlpha(theme.palette.text.primary);
return (_jsxs(_Fragment, { children: [_jsx(SVGRegionSeparators, { 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 (_jsxs("g", { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipid, children: _jsx("rect", { x: 0, y: 0, width: widthPx, height: 100 }) }) }), _jsx("g", { transform: `translate(${offset} 0)`, children: _jsxs("g", { clipPath: `url(#${clipid})`, children: [_jsx("text", { x: 4, y: fontSize, fontSize: fontSize, fill: c, children: refName }), _jsx("g", { transform: "translate(0 20)", children: _jsx(Ruler, { hideText: !renderRuler, start: start, end: end, bpPerPx: bpPerPx, reversed: reversed }) })] }) })] }, key));
})] }));
}