@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
47 lines (46 loc) • 2.38 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import { ErrorMessage, ResizeHandle } from '@jbrowse/core/ui';
import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
import { Paper } from '@mui/material';
import { observer } from 'mobx-react';
import { isAlive } from 'mobx-state-tree';
import { makeStyles } from 'tss-react/mui';
import Gridlines from './Gridlines';
import TrackLabelContainer from './TrackLabelContainer';
import TrackRenderingContainer from './TrackRenderingContainer';
const useStyles = makeStyles()({
root: {
marginTop: 2,
overflow: 'hidden',
position: 'relative',
},
unpinnedTrack: {
background: 'none',
},
resizeHandle: {
height: 3,
boxSizing: 'border-box',
position: 'relative',
},
});
const TrackContainer = observer(function ({ model, track, }) {
const { classes, cx } = useStyles();
const display = track.displays[0];
const { draggingTrackId, showTrackOutlines } = model;
const ref = useRef(null);
return (_jsxs(Paper, { ref: ref, className: cx(classes.root, track.pinned ? null : classes.unpinnedTrack), variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
var _a;
if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
const left = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;
model.zoomTo(model.bpPerPx / 2, event.clientX - left, true);
}
}, children: [track.pinned ? _jsx(Gridlines, { model: model, offset: 1 }) : null, _jsx(TrackLabelContainer, { track: track, view: model }), _jsx(ErrorBoundary, { FallbackComponent: e => _jsx(ErrorMessage, { error: e.error }), children: _jsx(TrackRenderingContainer, { model: model, track: track, onDragEnter: () => {
if (isAlive(display) &&
draggingTrackId !== undefined &&
draggingTrackId !== display.id) {
model.moveTrack(draggingTrackId, track.id);
}
} }) }), _jsx(ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })] }));
});
export default TrackContainer;