@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
39 lines (38 loc) • 1.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const util_1 = require("@jbrowse/core/util");
const material_1 = require("@mui/material");
const mui_1 = require("tss-react/mui");
const Block_1 = require("../../BaseLinearDisplay/components/Block");
const util_2 = require("../util");
const useStyles = (0, mui_1.makeStyles)()(theme => ({
majorTickLabel: {
fontSize: 11,
zIndex: 1,
background: theme.palette.background.paper,
lineHeight: 'normal',
pointerEvents: 'none',
},
tick: {
position: 'absolute',
width: 0,
display: 'flex',
justifyContent: 'center',
pointerEvents: 'none',
},
}));
const ScalebarCoordinateTicks = function ({ block, bpPerPx, }) {
const { classes } = useStyles();
const { reversed, start, end } = block;
const ticks = (0, util_2.makeTicks)(start, end, bpPerPx, true, false);
return ((0, jsx_runtime_1.jsx)(Block_1.ContentBlock, { block: block, children: ticks.map(({ type, base }) => {
if (type === 'major') {
const x = (reversed ? end - base : base - start) / bpPerPx;
const baseNumber = base + 1;
return ((0, jsx_runtime_1.jsx)("div", { className: classes.tick, style: { left: x }, children: baseNumber ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.majorTickLabel, children: (0, util_1.getTickDisplayStr)(baseNumber, bpPerPx) })) : null }, base));
}
return null;
}) }));
};
exports.default = ScalebarCoordinateTicks;