@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
96 lines (95 loc) • 4.15 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ui_1 = require("@jbrowse/core/ui");
const util_1 = require("@jbrowse/core/util");
const colord_1 = require("@jbrowse/core/util/colord");
const Bookmark_1 = __importDefault(require("@mui/icons-material/Bookmark"));
const Close_1 = __importDefault(require("@mui/icons-material/Close"));
const Link_1 = __importDefault(require("@mui/icons-material/Link"));
const material_1 = require("@mui/material");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const useStyles = (0, mui_1.makeStyles)()(theme => ({
highlight: {
height: '100%',
position: 'absolute',
overflow: 'hidden',
background: (0, colord_1.colord)(theme.palette.highlight.main).alpha(0.35).toRgbString(),
},
linkIcon: {
color: (0, colord_1.colord)(theme.palette.highlight.main).darken(0.2).toRgbString(),
},
z3: {
zIndex: 3,
},
}));
const Highlight = (0, mobx_react_1.observer)(function ({ model, highlight, }) {
var _a;
const { classes } = useStyles();
const [open, setOpen] = (0, react_1.useState)(false);
const anchorEl = (0, react_1.useRef)(null);
const session = (0, util_1.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 ? ((0, jsx_runtime_1.jsxs)("div", { className: classes.highlight, style: {
left: h.left,
width: h.width,
}, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Highlighted from URL parameter", arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ref: anchorEl, className: classes.z3, onClick: () => {
setOpen(true);
}, children: (0, jsx_runtime_1.jsx)(Link_1.default, { fontSize: "small", className: classes.linkIcon }) }) }), (0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
callback(session);
handleClose();
}, open: open, onClose: handleClose, menuItems: [
{
label: 'Dismiss highlight',
icon: Close_1.default,
onClick: () => {
dismissHighlight();
},
},
{
label: 'Bookmark highlighted region',
icon: Bookmark_1.default,
onClick: () => {
let bookmarkWidget = session.widgets.get('GridBookmark');
if (!bookmarkWidget) {
bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
}
bookmarkWidget.addBookmark(highlight);
dismissHighlight();
},
},
] })] })) : null;
});
exports.default = Highlight;