@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
65 lines (64 loc) • 3.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Suspense, useRef, useState } from 'react';
import { getConf } from '@jbrowse/core/configuration';
import { Menu } from '@jbrowse/core/ui';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
import LinearBlocks from './LinearBlocks';
const useStyles = makeStyles()({
display: {
position: 'relative',
whiteSpace: 'nowrap',
textAlign: 'left',
width: '100%',
minHeight: '100%',
},
});
const BaseLinearDisplay = observer(function (props) {
const { classes } = useStyles();
const ref = useRef(null);
const [clientRect, setClientRect] = useState();
const [offsetMouseCoord, setOffsetMouseCoord] = useState([0, 0]);
const [clientMouseCoord, setClientMouseCoord] = useState([0, 0]);
const [contextCoord, setContextCoord] = useState();
const { model, children } = props;
const { TooltipComponent, DisplayMessageComponent, height } = model;
const items = model.contextMenuItems();
const open = Boolean(contextCoord) && items.length > 0;
return (_jsxs("div", { ref: ref, "data-testid": `display-${getConf(model, 'displayId')}`, className: classes.display, onContextMenu: event => {
event.preventDefault();
if (contextCoord) {
setContextCoord(undefined);
}
else if (ref.current) {
setContextCoord([event.clientX, event.clientY]);
}
}, onMouseMove: event => {
if (!ref.current) {
return;
}
const rect = ref.current.getBoundingClientRect();
const { left, top } = rect;
setOffsetMouseCoord([event.clientX - left, event.clientY - top]);
setClientMouseCoord([event.clientX, event.clientY]);
setClientRect(rect);
}, children: [DisplayMessageComponent ? (_jsx(DisplayMessageComponent, { model: model })) : (_jsx(LinearBlocks, { ...props })), children, _jsx(Suspense, { fallback: null, children: _jsx(TooltipComponent, { model: model, height: height, offsetMouseCoord: offsetMouseCoord, clientMouseCoord: clientMouseCoord, clientRect: clientRect, mouseCoord: offsetMouseCoord }) }), open ? (_jsx(Menu, { open: true, onMenuItemClick: (_, callback) => {
callback();
setContextCoord(undefined);
}, onClose: () => {
setContextCoord(undefined);
model.setContextMenuFeature(undefined);
}, slotProps: {
transition: {
onExit: () => {
setContextCoord(undefined);
model.setContextMenuFeature(undefined);
},
},
}, anchorReference: "anchorPosition", anchorPosition: contextCoord
? { top: contextCoord[1], left: contextCoord[0] }
: undefined, menuItems: items })) : null] }));
});
export default BaseLinearDisplay;
export { default as Tooltip } from './Tooltip';
export { default as BlockMsg } from './BlockMsg';