@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
37 lines (36 loc) • 2.42 kB
JavaScript
;
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 CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
const util_1 = require("@jbrowse/core/util");
const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
const material_1 = require("@mui/material");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const useStyles = (0, mui_1.makeStyles)()(theme => ({
background: {
position: 'absolute',
right: 0,
background: theme.palette.background.paper,
zIndex: 2,
},
focusedBackground: {
background: (0, material_1.alpha)(theme.palette.secondary.light, 0.2),
},
}));
const MiniControls = (0, mobx_react_1.observer)(function ({ model, }) {
const { classes } = useStyles();
const { id, bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
const { focusedViewId } = (0, util_1.getSession)(model);
return hideHeader ? ((0, jsx_runtime_1.jsx)(material_1.Paper, { className: classes.background, children: (0, jsx_runtime_1.jsxs)(material_1.Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined, children: [(0, jsx_runtime_1.jsx)(CascadingMenuButton_1.default, { menuItems: model.menuItems(), children: (0, jsx_runtime_1.jsx)(KeyboardArrowDown_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => {
model.zoom(bpPerPx * 2);
}, disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1, children: (0, jsx_runtime_1.jsx)(ZoomOut_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => {
model.zoom(bpPerPx / 2);
}, disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1, children: (0, jsx_runtime_1.jsx)(ZoomIn_1.default, { fontSize: "small" }) })] }) })) : null;
});
exports.default = MiniControls;