@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
58 lines (57 loc) • 3.25 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlockMsg = exports.Tooltip = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const configuration_1 = require("@jbrowse/core/configuration");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const LinearBlocks_1 = __importDefault(require("./LinearBlocks"));
const MenuPage_1 = __importDefault(require("./MenuPage"));
const useStyles = (0, mui_1.makeStyles)()({
display: {
position: 'relative',
whiteSpace: 'nowrap',
textAlign: 'left',
width: '100%',
minHeight: '100%',
},
});
const BaseLinearDisplay = (0, mobx_react_1.observer)(function (props) {
const { classes } = useStyles();
const ref = (0, react_1.useRef)(null);
const [clientRect, setClientRect] = (0, react_1.useState)();
const [offsetMouseCoord, setOffsetMouseCoord] = (0, react_1.useState)([0, 0]);
const [clientMouseCoord, setClientMouseCoord] = (0, react_1.useState)([0, 0]);
const [contextCoord, setContextCoord] = (0, react_1.useState)();
const { model, children } = props;
const { TooltipComponent, DisplayMessageComponent, height } = model;
return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-testid": `display-${(0, configuration_1.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 ? ((0, jsx_runtime_1.jsx)(DisplayMessageComponent, { model: model })) : ((0, jsx_runtime_1.jsx)(LinearBlocks_1.default, { ...props })), children, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(TooltipComponent, { model: model, height: height, offsetMouseCoord: offsetMouseCoord, clientMouseCoord: clientMouseCoord, clientRect: clientRect, mouseCoord: offsetMouseCoord }) }), contextCoord ? ((0, jsx_runtime_1.jsx)(MenuPage_1.default, { contextCoord: contextCoord, model: model, onClose: () => {
setContextCoord(undefined);
} })) : null] }));
});
exports.default = BaseLinearDisplay;
var Tooltip_1 = require("./Tooltip");
Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return __importDefault(Tooltip_1).default; } });
var BlockMsg_1 = require("./BlockMsg");
Object.defineProperty(exports, "BlockMsg", { enumerable: true, get: function () { return __importDefault(BlockMsg_1).default; } });