@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
33 lines (32 loc) • 1.74 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { getBpDisplayStr, stringify } from '@jbrowse/core/util';
import { makeStyles } from '@jbrowse/core/util/tss-react';
import { Typography, alpha } from '@mui/material';
import RubberbandTooltip from "./RubberbandTooltip.js";
const useStyles = makeStyles()(theme => {
const { tertiary } = theme.palette;
const background = alpha(tertiary.light, 0.7);
return {
rubberband: {
height: '100%',
background,
position: 'absolute',
left: 0,
zIndex: 830,
textAlign: 'center',
cursor: 'crosshair',
},
rubberbandText: {
color: theme.palette.tertiary.contrastText,
},
};
});
export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
const { classes } = useStyles();
const [anchorEl, setAnchorEl] = useState(null);
return (_jsxs(_Fragment, { children: [anchorEl ? (_jsxs(_Fragment, { children: [_jsx(RubberbandTooltip, { side: "left", anchorEl: anchorEl, text: stringify(leftBpOffset) }), _jsx(RubberbandTooltip, { side: "right", anchorEl: anchorEl, text: stringify(rightBpOffset) })] })) : null, _jsx("div", { className: classes.rubberband, style: { transform: `translateX(${left}px)`, width }, children: numOfBpSelected ? (_jsx(Typography, { ref: setAnchorEl, variant: "h6", className: classes.rubberbandText, style: {
top,
position: sticky ? 'sticky' : undefined,
}, children: getBpDisplayStr(numOfBpSelected) })) : null })] }));
}