@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
43 lines (42 loc) • 2.43 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
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 { Box, Tooltip, Typography, useTheme } from '@mui/material';
import { observer } from 'mobx-react';
import HighlightBand from "./HighlightBand.js";
const Highlight = observer(function Highlight({ model, highlight, }) {
const theme = useTheme();
const session = getSession(model);
const coords = model.getHighlightCoords(highlight);
const bandColor = highlight.color
? colord(highlight.color)
: colord(theme.palette.highlight.main).alpha(0.35);
return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), children: _jsx(CascadingMenuButton, { menuItems: [
{
label: 'Dismiss highlight',
icon: CloseIcon,
onClick: () => {
model.removeHighlight(highlight);
},
},
{
label: 'Bookmark highlighted region',
icon: BookmarkIcon,
onClick: () => {
const bookmarkWidget = (session.widgets.get('GridBookmark') ??
session.addWidget('GridBookmarkWidget', 'GridBookmark'));
bookmarkWidget.addBookmark({
...highlight,
assemblyName: highlight.assemblyName ?? model.assemblyNames[0],
});
session.showWidget(bookmarkWidget);
model.removeHighlight(highlight);
},
},
], children: _jsx(Tooltip, { title: highlight.label ?? 'Highlighted region', arrow: true, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(LinkIcon, { fontSize: "small", sx: { color: bandColor.alpha(0.8).toRgbString() } }), highlight.label && model.labelsVisible ? (_jsx(Typography, { variant: "caption", noWrap: true, children: highlight.label })) : null] }) }) }) })) : null;
});
export default Highlight;