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

JBrowse 2 linear genome view

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Suspense, lazy, useEffect, useRef } from 'react';
import { VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
import { getSession } from '@jbrowse/core/util';
import Paper from '@mui/material/Paper';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
import TrackContainer from './TrackContainer';
import TracksContainer from './TracksContainer';
const NoTracksActiveButton = lazy(() => import('./NoTracksActiveButton'));
const useStyles = makeStyles()(theme => ({
    header: {
        background: theme.palette.background.paper,
        top: VIEW_HEADER_HEIGHT,
        zIndex: 850,
    },
    pinnedTracks: {
        position: 'sticky',
        zIndex: 3,
    },
    rel: {
        position: 'relative',
    },
}));
const LinearGenomeViewContainer = observer(function ({ model, }) {
    const { pinnedTracks, stickyViewHeaders, pinnedTracksTop, tracks, unpinnedTracks, } = model;
    const { classes } = useStyles();
    const session = getSession(model);
    const ref = useRef(null);
    const MiniControlsComponent = model.MiniControlsComponent();
    const HeaderComponent = model.HeaderComponent();
    useEffect(() => {
        function handleSelectView(e) {
            var _a, _b;
            if (e.target instanceof Element && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                (_b = session.setFocusedViewId) === null || _b === void 0 ? void 0 : _b.call(session, model.id);
            }
        }
        document.addEventListener('mousedown', handleSelectView);
        document.addEventListener('keydown', handleSelectView);
        return () => {
            document.removeEventListener('mousedown', handleSelectView);
            document.removeEventListener('keydown', handleSelectView);
        };
    }, [session, model]);
    return (_jsxs("div", { className: classes.rel, ref: ref, onMouseLeave: () => {
            session.setHovered(undefined);
        }, onMouseMove: event => {
            const c = ref.current;
            if (!c) {
                return;
            }
            const { tracks } = model;
            const leftPx = event.clientX - c.getBoundingClientRect().left;
            const hoverPosition = model.pxToBp(leftPx);
            const hoverFeature = tracks.find(t => t.displays[0].featureUnderMouse);
            session.setHovered({ hoverPosition, hoverFeature });
        }, children: [_jsxs("div", { className: classes.header, style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(HeaderComponent, { model: model }), _jsx(MiniControlsComponent, { model: model })] }), _jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(Suspense, { fallback: null, children: _jsx(NoTracksActiveButton, { model: model }) })) : (_jsxs(_Fragment, { children: [pinnedTracks.length ? (_jsx(Paper, { elevation: 6, className: classes.pinnedTracks, style: { top: pinnedTracksTop }, children: pinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id))) })) : null, unpinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id)))] })) })] }));
});
export default LinearGenomeViewContainer;