@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
58 lines (57 loc) • 2.45 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { getTickDisplayStr } from '@jbrowse/core/util';
import { makeStyles } from '@jbrowse/core/util/tss-react';
import { observer } from 'mobx-react';
import { makeTicks } from "../util.js";
const useStyles = makeStyles()(theme => ({
block: {
position: 'relative',
flexShrink: 0,
overflow: 'hidden',
height: 13,
},
elidedBlock: {
backgroundColor: '#999',
backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
},
tick: {
position: 'absolute',
width: 0,
display: 'flex',
justifyContent: 'center',
pointerEvents: 'none',
},
label: {
fontSize: 11,
zIndex: 1,
background: theme.palette.background.paper,
lineHeight: 'normal',
pointerEvents: 'none',
},
}));
function ContentBlockLabels({ block, bpPerPx, }) {
const { classes } = useStyles();
const ticks = makeTicks(block.start, block.end, bpPerPx, true, false);
return (_jsx("div", { className: classes.block, style: { width: block.widthPx }, children: ticks.map(({ type, base }) => {
if (type !== 'major') {
return null;
}
const x = (block.reversed ? block.end - base : base - block.start) / bpPerPx;
return (_jsx("div", { className: classes.tick, style: { left: x }, children: _jsx("div", { className: classes.label, children: getTickDisplayStr(base + 1, bpPerPx) }) }, base));
}) }));
}
const ScalebarCoordinateLabels = observer(function ScalebarCoordinateLabels({ model, }) {
const { classes, cx } = useStyles();
const { staticBlocks, bpPerPx } = model;
return (_jsx("div", { style: { display: 'flex' }, children: staticBlocks.map((block, index) => {
const key = `${block.key}-${index}`;
if (block.type === 'ContentBlock') {
return (_jsx(ContentBlockLabels, { block: block, bpPerPx: bpPerPx }, key));
}
else if (block.type === 'ElidedBlock') {
return (_jsx("div", { className: cx(classes.block, classes.elidedBlock), style: { width: block.widthPx } }, key));
}
return (_jsx("div", { className: classes.block, style: { width: block.widthPx } }, key));
}) }));
});
export default ScalebarCoordinateLabels;