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

JBrowse 2 linear genome view

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ui_1 = require("@jbrowse/core/ui");
const util_1 = require("@jbrowse/core/util");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const Gridlines_1 = __importDefault(require("./Gridlines"));
const Rubberband_1 = __importDefault(require("./Rubberband"));
const Scalebar_1 = __importDefault(require("./Scalebar"));
const VerticalGuide_1 = __importDefault(require("./VerticalGuide"));
const consts_1 = require("../consts");
const useRangeSelect_1 = require("./useRangeSelect");
const useSideScroll_1 = require("./useSideScroll");
const useWheelScroll_1 = require("./useWheelScroll");
const CenterLine = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./CenterLine'))));
const Highlight = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./Highlight'))));
const RubberbandSpan = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./RubberbandSpan'))));
const useStyles = (0, mui_1.makeStyles)()({
    tracksContainer: {
        position: 'relative',
    },
});
const TracksContainer = (0, mobx_react_1.observer)(function TracksContainer({ children, model, }) {
    const { classes } = useStyles();
    const { pluginManager } = (0, util_1.getEnv)(model);
    const { mouseDown: mouseDown1, mouseUp } = (0, useSideScroll_1.useSideScroll)(model);
    const { stickyViewHeaders, rubberbandTop, showGridlines, showCenterLine } = model;
    const ref = (0, react_1.useRef)(null);
    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = (0, useRangeSelect_1.useRangeSelect)(ref, model, true);
    (0, useWheelScroll_1.useWheelScroll)(ref, model);
    const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
            mouseDown1(event);
            mouseDown2(event);
        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? (0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model }) : null, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: showCenterLine ? (0, jsx_runtime_1.jsx)(CenterLine, { model: model }) : null }), guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders }) })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
                    left: anchorPosition.clientX,
                    top: anchorPosition.clientY,
                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, (0, jsx_runtime_1.jsx)(Rubberband_1.default, { model: model, ControlComponent: (0, jsx_runtime_1.jsx)(Scalebar_1.default, { model: model, style: {
                        height: consts_1.SCALE_BAR_HEIGHT,
                        boxSizing: 'border-box',
                    } }) }), (0, jsx_runtime_1.jsx)(HighlightGroup, { model: model }), additional, children] }));
});
const HighlightGroup = (0, mobx_react_1.observer)(function HighlightGroup({ model, }) {
    return model.highlight.length ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: model.highlight.map((highlight, idx) => ((0, jsx_runtime_1.jsx)(Highlight, { model: model, highlight: highlight }, `${JSON.stringify(highlight)}-${idx}`))) })) : null;
});
exports.default = TracksContainer;