@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
40 lines (39 loc) • 2.17 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = RubberbandSpan;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const util_1 = require("@jbrowse/core/util");
const material_1 = require("@mui/material");
const mui_1 = require("tss-react/mui");
const RubberbandTooltip_1 = __importDefault(require("./RubberbandTooltip"));
const useStyles = (0, mui_1.makeStyles)()(theme => {
const { tertiary } = theme.palette;
const background = (0, material_1.alpha)(tertiary.light, 0.7);
return {
rubberband: {
height: '100%',
background,
position: 'absolute',
zIndex: 830,
textAlign: 'center',
cursor: 'crosshair',
},
rubberbandText: {
color: theme.palette.tertiary.contrastText,
},
};
});
function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
const { classes } = useStyles();
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorEl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "left", anchorEl: anchorEl, text: (0, util_1.stringify)(leftBpOffset) }), (0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "right", anchorEl: anchorEl, text: (0, util_1.stringify)(rightBpOffset) })] })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { ref: el => {
setAnchorEl(el);
}, variant: "h6", className: classes.rubberbandText, style: {
top,
position: sticky ? 'sticky' : undefined,
}, children: (0, util_1.getBpDisplayStr)(numOfBpSelected) })) : null })] }));
}