@jbrowse/plugin-linear-genome-view/esm/LinearGenomeView/components/Gridlines.js

JBrowse 2 linear genome view

import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { makeStyles } from '@jbrowse/core/util/tss-react';
import { observer } from 'mobx-react';
import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from "../../BaseLinearDisplay/components/Block.js";
import { makeTicks } from "../util.js";
const useStyles = makeStyles()(theme => ({
    verticalGuidesZoomContainer: {
        position: 'absolute',
        top: 0,
        height: '100%',
        width: '100%',
        pointerEvents: 'none',
    },
    verticalGuidesContainer: {
        position: 'absolute',
        height: '100%',
        pointerEvents: 'none',
        display: 'flex',
    },
    tick: {
        position: 'absolute',
        height: '100%',
        width: 1,
    },
    majorTick: {
        background: theme.palette.action.disabled,
    },
    minorTick: {
        background: theme.palette.divider,
    },
}));
function RenderedBlockLines({ block, bpPerPx, }) {
    const { classes } = useStyles();
    const { start, end, reversed } = block;
    const ticks = makeTicks(start, end, bpPerPx);
    const majorTickClass = `${classes.tick} ${classes.majorTick}`;
    const minorTickClass = `${classes.tick} ${classes.minorTick}`;
    return (_jsx(ContentBlockComponent, { block: block, children: ticks.map(({ type, base }) => {
            const x = (reversed ? end - base : base - start) / bpPerPx;
            return (_jsx("div", { className: type === 'major' || type === 'labeledMajor'
                    ? majorTickClass
                    : minorTickClass, style: { left: x } }, base));
        }) }));
}
const RenderedVerticalGuides = observer(function RenderedVerticalGuides({ model, }) {
    const { staticBlocks, bpPerPx } = model;
    return (_jsx(_Fragment, { children: staticBlocks.map((block, index) => {
            const k = `${block.key}-${index}`;
            if (block.type === 'ContentBlock') {
                return _jsx(RenderedBlockLines, { block: block, bpPerPx: bpPerPx }, k);
            }
            else if (block.type === 'ElidedBlock') {
                return _jsx(ElidedBlockComponent, { width: block.widthPx }, k);
            }
            else if (block.type === 'InterRegionPaddingBlock') {
                return (_jsx(InterRegionPaddingBlockComponent, { width: block.widthPx, boundary: block.variant === 'boundary' }, k));
            }
            return null;
        }) }));
});
const Gridlines = observer(function Gridlines({ model, offset = 0, }) {
    const { classes } = useStyles();
    const { staticBlocks, scaleFactor, offsetPx } = model;
    const offsetLeft = staticBlocks.offsetPx - offsetPx;
    return (_jsx("div", { className: classes.verticalGuidesZoomContainer, style: {
            transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
        }, children: _jsx("div", { className: classes.verticalGuidesContainer, style: {
                left: offsetLeft - offset,
                width: staticBlocks.totalWidthPx,
            }, children: _jsx(RenderedVerticalGuides, { model: model }) }) }));
});
export default Gridlines;