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

JBrowse 2 linear genome view

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useRef } from 'react';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
const useStyles = makeStyles()(theme => ({
    centerLineContainer: {
        background: 'transparent',
        height: '100%',
        zIndex: 4,
        position: 'absolute',
        border: `1px ${theme.palette.action.active} dashed`,
        borderTop: 'none',
        borderBottom: 'none',
        pointerEvents: 'none',
    },
    centerLineText: {
        position: 'absolute',
        pointerEvents: 'none',
        whiteSpace: 'nowrap',
        fontWeight: 'bold',
    },
}));
const CenterLine = observer(function ({ model }) {
    const { bpPerPx, centerLineInfo, trackHeights, tracks, width } = model;
    const ref = useRef(null);
    const { classes } = useStyles();
    const startingPosition = width / 2;
    return tracks.length ? (_jsx("div", { "data-testid": "centerline_container", className: classes.centerLineContainer, role: "presentation", ref: ref, style: {
            left: `${startingPosition}px`,
            width: Math.max(1 / bpPerPx, 1),
        }, children: centerLineInfo && (_jsxs("div", { "data-testid": "centerline_text", className: classes.centerLineText, role: "presentation", style: {
                left: Math.max(1 / bpPerPx, 1) + 5,
                top: trackHeights,
            }, children: [centerLineInfo.refName, ":", ' ', Math.max(Math.round(centerLineInfo.offset) + 1, 0)] })) })) : null;
});
export default CenterLine;