@jbrowse/plugin-linear-genome-view/esm/BaseLinearDisplay/components/BaseLinearDisplay.js

JBrowse 2 linear genome view

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Suspense, useRef, useState } from 'react';
import { getConf } from '@jbrowse/core/configuration';
import { makeStyles } from '@jbrowse/core/util/tss-react';
import { useTheme } from '@mui/material';
import { observer } from 'mobx-react';
import FloatingLegend from "./FloatingLegend.js";
import LinearBlocks from "./LinearBlocks.js";
import MenuPage from "./MenuPage.js";
const useStyles = makeStyles()({
    display: {
        position: 'relative',
        whiteSpace: 'nowrap',
        textAlign: 'left',
        width: '100%',
        minHeight: '100%',
    },
});
const BaseLinearDisplay = observer(function BaseLinearDisplay(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, showLegend, showTooltipsEnabled, } = model;
    const theme = useTheme();
    const legendItems = model.legendItems(theme);
    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, showLegend && legendItems.length > 0 ? (_jsx(FloatingLegend, { items: legendItems })) : null, showTooltipsEnabled ? (_jsx(Suspense, { fallback: null, children: _jsx(TooltipComponent, { model: model, height: height, offsetMouseCoord: offsetMouseCoord, clientMouseCoord: clientMouseCoord, clientRect: clientRect, mouseCoord: offsetMouseCoord }) })) : null, contextCoord ? (_jsx(MenuPage, { contextCoord: contextCoord, model: model, onClose: () => {
                    setContextCoord(undefined);
                } })) : null] }));
});
export default BaseLinearDisplay;
export { default as Tooltip } from "./Tooltip.js";
export { default as BlockMsg } from "./BlockMsg.js";