@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 { makeStyles } from '@jbrowse/core/util/tss-react';
import { observer } from 'mobx-react';
import Gridlines from "./Gridlines.js";
import Rubberband from "./Rubberband.js";
import Scalebar from "./Scalebar.js";
import VerticalGuide from "./VerticalGuide.js";
import { SCALE_BAR_HEIGHT } from "../consts.js";
import { useRangeSelect } from "./useRangeSelect.js";
import { useSideScroll } from "./useSideScroll.js";
import { useWheelScroll } from "./useWheelScroll.js";
const CenterLine = lazy(() => import("./CenterLine.js"));
const Highlight = lazy(() => import("./Highlight.js"));
const RubberbandSpan = lazy(() => import("./RubberbandSpan.js"));
const useStyles = makeStyles()({
    tracksContainer: {
        position: 'relative',
        contain: 'layout style',
    },
});
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, isScalebarRefNameMenuOpen, } = model;
    const ref = useRef(null);
    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, isClick, clickBpOffset, 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 && !isScalebarRefNameMenuOpen ? (_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, model.volatileGuides.map((guide, idx) => (_jsx(VerticalGuide, { model: model, coordX: guide.xPos }, idx))), anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                    left: anchorPosition.clientX,
                    top: anchorPosition.clientY,
                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: isClick && clickBpOffset
                    ? model.rubberbandClickMenuItems(clickBpOffset)
                    : 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.highlightsVisible && 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;