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

JBrowse 2 linear genome view

import { jsx as _jsx } from "react/jsx-runtime";
import { getSession, notEmpty } from '@jbrowse/core/util';
import { colord } from '@jbrowse/core/util/colord';
import { makeStyles } from '@jbrowse/core/util/tss-react';
import { observer } from 'mobx-react';
const useStyles = makeStyles()(theme => ({
    highlight: {
        height: '100%',
        position: 'absolute',
        left: 0,
        background: colord(theme.palette.highlight.main).alpha(0.35).toRgbString(),
        borderLeft: `1px solid ${theme.palette.highlight.main}`,
        borderRight: `1px solid ${theme.palette.highlight.main}`,
    },
}));
const OverviewHighlight = observer(function OverviewHighlight({ model, overview, }) {
    const { classes } = useStyles();
    const { highlight, cytobandOffset } = model;
    const session = getSession(model);
    const { assemblyManager } = session;
    return highlight
        .map(r => {
        const asm = r.assemblyName
            ? assemblyManager.get(r.assemblyName)
            : undefined;
        const refName = asm?.getCanonicalRefName(r.refName) ?? r.refName;
        const s = overview.bpToPx({
            ...r,
            refName,
            coord: r.start,
        });
        const e = overview.bpToPx({
            ...r,
            refName,
            coord: r.end,
        });
        return s !== undefined && e !== undefined
            ? {
                width: Math.abs(e - s),
                left: s + cytobandOffset,
            }
            : undefined;
    })
        .filter(notEmpty)
        .map(({ left, width }, idx) => (_jsx("div", { className: classes.highlight, style: {
            width,
            transform: `translateX(${left}px)`,
        } }, `${left}_${width}_${idx}`)));
});
export default OverviewHighlight;