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

JBrowse 2 linear genome view

import { jsx as _jsx } from "react/jsx-runtime";
import { makeStyles } from '@jbrowse/core/util/tss-react';
const useStyles = makeStyles()({
    highlight: {
        height: '100%',
        position: 'absolute',
        left: 0,
        overflow: 'hidden',
        zIndex: 1,
        pointerEvents: 'none',
    },
    chip: {
        pointerEvents: 'auto',
    },
});
export default function HighlightBand({ coords, background, children, }) {
    const { classes } = useStyles();
    return (_jsx("div", { className: classes.highlight, style: {
            transform: `translateX(${coords.left}px)`,
            width: coords.width,
            background,
        }, children: coords.width > 3 && children ? (_jsx("div", { className: classes.chip, children: children })) : null }));
}