@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
45 lines (44 loc) • 1.96 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Typography } from '@mui/material';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
const useStyles = makeStyles()(theme => ({
refLabel: {
fontSize: 11,
position: 'absolute',
left: 2,
top: -1,
fontWeight: 'bold',
lineHeight: 'normal',
zIndex: 1,
background: theme.palette.background.paper,
},
b0: {
left: 0,
zIndex: 100,
},
}));
const ScalebarRefNameLabels = observer(function ({ model }) {
const { classes, cx } = useStyles();
const { staticBlocks, offsetPx, scaleBarDisplayPrefix } = model;
let lastLeftBlock = 0;
staticBlocks.forEach((block, i) => {
if (block.offsetPx - offsetPx < 0) {
lastLeftBlock = i;
}
});
const val = scaleBarDisplayPrefix();
const b0 = staticBlocks.blocks[0];
return (_jsxs(_Fragment, { children: [(b0 === null || b0 === void 0 ? void 0 : b0.type) !== 'ContentBlock' && val ? (_jsx(Typography, { className: cx(classes.b0, classes.refLabel), children: val })) : null, staticBlocks.map((block, index) => {
const { offsetPx: blockOffsetPx, isLeftEndOfDisplayedRegion, key, type, refName, } = block;
const last = index === lastLeftBlock;
return type === 'ContentBlock' &&
(isLeftEndOfDisplayedRegion || last) ? (_jsxs(Typography, { style: {
left: last
? Math.max(0, -offsetPx)
: blockOffsetPx - offsetPx - 1,
paddingLeft: last ? 0 : 1,
}, className: classes.refLabel, "data-testid": `refLabel-${refName}`, children: [last && val ? `${val}:` : '', refName] }, `refLabel-${key}-${index}`)) : null;
})] }));
});
export default ScalebarRefNameLabels;