@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
32 lines (31 loc) • 1.83 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
import { getSession } from '@jbrowse/core/util';
import ArrowDown from '@mui/icons-material/KeyboardArrowDown';
import ZoomIn from '@mui/icons-material/ZoomIn';
import ZoomOut from '@mui/icons-material/ZoomOut';
import { IconButton, Paper, alpha } from '@mui/material';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
const useStyles = makeStyles()(theme => ({
background: {
position: 'absolute',
right: 0,
background: theme.palette.background.paper,
zIndex: 2,
},
focusedBackground: {
background: alpha(theme.palette.secondary.light, 0.2),
},
}));
const MiniControls = observer(function ({ model, }) {
const { classes } = useStyles();
const { id, bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
const { focusedViewId } = getSession(model);
return hideHeader ? (_jsx(Paper, { className: classes.background, children: _jsxs(Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined, children: [_jsx(CascadingMenuButton, { menuItems: model.menuItems(), children: _jsx(ArrowDown, { fontSize: "small" }) }), _jsx(IconButton, { "data-testid": "zoom_out", onClick: () => {
model.zoom(bpPerPx * 2);
}, disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1, children: _jsx(ZoomOut, { fontSize: "small" }) }), _jsx(IconButton, { "data-testid": "zoom_in", onClick: () => {
model.zoom(bpPerPx / 2);
}, disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1, children: _jsx(ZoomIn, { fontSize: "small" }) })] }) })) : null;
});
export default MiniControls;