@jbrowse/plugin-linear-genome-view/esm/LinearGenomeView/svgcomponents/SVGGridlines.js

JBrowse 2 linear genome view

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { stripAlpha } from '@jbrowse/core/util';
import { useTheme } from '@mui/material';
import { makeTicks } from "../util.js";
export default function SVGGridlines({ model, height, }) {
    const { dynamicBlocks: { contentBlocks }, offsetPx: viewOffsetPx, bpPerPx, } = model;
    const theme = useTheme();
    const c = stripAlpha(theme.palette.divider);
    return (_jsx(_Fragment, { children: contentBlocks.map(block => {
            const { start, end, key, reversed, offsetPx, widthPx } = block;
            const offset = offsetPx - viewOffsetPx;
            const ticks = makeTicks(start, end, bpPerPx, true, true);
            const clipid = `gridline-clip-${key}`;
            return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipid, children: _jsx("rect", { x: 0, y: 0, width: widthPx, height: height }) }) }), _jsx("g", { transform: `translate(${offset} 0)`, clipPath: `url(#${clipid})`, children: ticks.map(tick => {
                            const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
                            const isMajor = tick.type === 'major';
                            return (_jsx("line", { x1: x, x2: x, y1: 0, y2: height, strokeWidth: 1, stroke: c, strokeOpacity: isMajor ? 0.3 : 0.15 }, `gridline-${tick.base}`));
                        }) })] }, key));
        }) }));
}