@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
59 lines (58 loc) • 2.93 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 { cx, makeStyles } from '@jbrowse/core/util/tss-react';
import { isAlive } from '@jbrowse/mobx-state-tree';
import { Paper } from '@mui/material';
import { observer } from 'mobx-react';
import Gridlines from "./Gridlines.js";
import TrackLabelContainer from "./TrackLabelContainer.js";
import TrackRenderingContainer from "./TrackRenderingContainer.js";
import { shouldSwapTracks } from "./util.js";
const useStyles = makeStyles()(theme => ({
root: {
marginTop: 2,
overflow: 'hidden',
position: 'relative',
contain: 'layout style paint',
},
unpinnedTrack: {
background: 'none',
},
resizeHandle: {
height: 4,
boxSizing: 'border-box',
position: 'relative',
background: 'transparent',
'&:hover': {
background: theme.palette.divider,
},
},
}));
const TrackContainer = observer(function TrackContainer({ model, track, }) {
const { classes } = 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 => {
if (event.detail === 2 && !display.featureIdUnderMouse) {
const left = ref.current?.getBoundingClientRect().left || 0;
model.zoomTo(model.bpPerPx / 2, event.clientX - left, true);
}
}, onDragOver: event => {
if (isAlive(display) &&
draggingTrackId !== undefined &&
draggingTrackId !== display.id) {
const draggingIdx = model.tracks.findIndex(t => t.id === draggingTrackId);
const targetIdx = model.tracks.findIndex(t => t.id === track.id);
const movingDown = targetIdx > draggingIdx;
const currentY = event.clientY;
if (shouldSwapTracks(model.lastTrackDragY, currentY, movingDown)) {
model.setLastTrackDragY(currentY);
model.moveTrack(draggingTrackId, track.id);
}
}
}, 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 }) }), _jsx(ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })] }));
});
export default TrackContainer;