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

JBrowse 2 linear genome view

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { stringify } from '@jbrowse/core/util';
import { makeStyles } from '@jbrowse/core/util/tss-react';
import { Tooltip } from '@mui/material';
import { observer } from 'mobx-react';
const useStyles = makeStyles()({
    guide: {
        pointerEvents: 'none',
        height: '100%',
        width: 1,
        position: 'absolute',
        left: 0,
        background: 'red',
        zIndex: 1001,
    },
    tooltipTarget: {
        position: 'sticky',
        left: 0,
        width: 1,
    },
});
const VerticalGuide = observer(function VerticalGuide({ model, coordX, }) {
    const { classes } = useStyles();
    const { stickyViewHeaders, rubberbandTop } = model;
    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { open: true, placement: "top", title: stringify(model.pxToBp(coordX)), arrow: true, children: _jsx("div", { className: classes.tooltipTarget, style: {
                        transform: `translateX(${coordX + 6}px)`,
                        top: rubberbandTop,
                        position: stickyViewHeaders ? 'sticky' : undefined,
                    } }) }), _jsx("div", { className: classes.guide, style: { transform: `translateX(${coordX}px)` } })] }));
});
export default VerticalGuide;