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

JBrowse 2 linear genome view

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Suspense, lazy, useRef } from 'react';
import { Menu } from '@jbrowse/core/ui';
import { getEnv } from '@jbrowse/core/util';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
import Gridlines from './Gridlines';
import Rubberband from './Rubberband';
import Scalebar from './Scalebar';
import VerticalGuide from './VerticalGuide';
import { SCALE_BAR_HEIGHT } from '../consts';
import { useRangeSelect } from './useRangeSelect';
import { useSideScroll } from './useSideScroll';
import { useWheelScroll } from './useWheelScroll';
const CenterLine = lazy(() => import('./CenterLine'));
const Highlight = lazy(() => import('./Highlight'));
const RubberbandSpan = lazy(() => import('./RubberbandSpan'));
const useStyles = makeStyles()({
    tracksContainer: {
        position: 'relative',
    },
});
const TracksContainer = observer(function TracksContainer({ children, model, }) {
    const { classes } = useStyles();
    const { pluginManager } = getEnv(model);
    const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model);
    const { stickyViewHeaders, rubberbandTop, showGridlines, showCenterLine } = model;
    const ref = useRef(null);
    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = useRangeSelect(ref, model, true);
    useWheelScroll(ref, model);
    const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
            mouseDown1(event);
            mouseDown2(event);
        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? _jsx(Gridlines, { model: model }) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(Suspense, { fallback: null, children: _jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders }) })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                    left: anchorPosition.clientX,
                    top: anchorPosition.clientY,
                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, _jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: {
                        height: SCALE_BAR_HEIGHT,
                        boxSizing: 'border-box',
                    } }) }), _jsx(HighlightGroup, { model: model }), additional, children] }));
});
const HighlightGroup = observer(function HighlightGroup({ model, }) {
    return model.highlight.length ? (_jsx(Suspense, { fallback: null, children: model.highlight.map((highlight, idx) => (_jsx(Highlight, { model: model, highlight: highlight }, `${JSON.stringify(highlight)}-${idx}`))) })) : null;
});
export default TracksContainer;