@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
91 lines (90 loc) • 3.67 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from 'react';
import { Menu } from '@jbrowse/core/ui';
import { getSession } from '@jbrowse/core/util';
import { colord } from '@jbrowse/core/util/colord';
import BookmarkIcon from '@mui/icons-material/Bookmark';
import CloseIcon from '@mui/icons-material/Close';
import LinkIcon from '@mui/icons-material/Link';
import { IconButton, Tooltip } from '@mui/material';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
const useStyles = makeStyles()(theme => ({
highlight: {
height: '100%',
position: 'absolute',
overflow: 'hidden',
background: colord(theme.palette.highlight.main).alpha(0.35).toRgbString(),
},
linkIcon: {
color: colord(theme.palette.highlight.main).darken(0.2).toRgbString(),
},
z3: {
zIndex: 3,
},
}));
const Highlight = observer(function ({ model, highlight, }) {
var _a;
const { classes } = useStyles();
const [open, setOpen] = useState(false);
const anchorEl = useRef(null);
const session = getSession(model);
const { assemblyManager } = session;
const dismissHighlight = () => {
model.removeHighlight(highlight);
};
function handleClose() {
setOpen(false);
}
const mapCoords = (r) => {
const s = model.bpToPx({
refName: r.refName,
coord: r.start,
});
const e = model.bpToPx({
refName: r.refName,
coord: r.end,
});
return s && e
? {
width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),
left: Math.min(s.offsetPx, e.offsetPx) - model.offsetPx,
}
: undefined;
};
const asm = assemblyManager.get(highlight.assemblyName);
const h = mapCoords({
...highlight,
refName: (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(highlight.refName)) !== null && _a !== void 0 ? _a : highlight.refName,
});
return h ? (_jsxs("div", { className: classes.highlight, style: {
left: h.left,
width: h.width,
}, children: [_jsx(Tooltip, { title: "Highlighted from URL parameter", arrow: true, children: _jsx(IconButton, { ref: anchorEl, className: classes.z3, onClick: () => {
setOpen(true);
}, children: _jsx(LinkIcon, { fontSize: "small", className: classes.linkIcon }) }) }), _jsx(Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
callback(session);
handleClose();
}, open: open, onClose: handleClose, menuItems: [
{
label: 'Dismiss highlight',
icon: CloseIcon,
onClick: () => {
dismissHighlight();
},
},
{
label: 'Bookmark highlighted region',
icon: BookmarkIcon,
onClick: () => {
let bookmarkWidget = session.widgets.get('GridBookmark');
if (!bookmarkWidget) {
bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
}
bookmarkWidget.addBookmark(highlight);
dismissHighlight();
},
},
] })] })) : null;
});
export default Highlight;