@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
69 lines (68 loc) • 2.99 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from '../../BaseLinearDisplay/components/Block';
import { makeTicks } from '../util';
const useStyles = makeStyles()(theme => ({
verticalGuidesZoomContainer: {
position: 'absolute',
top: 0,
height: '100%',
width: '100%',
pointerEvents: 'none',
},
verticalGuidesContainer: {
position: 'absolute',
height: '100%',
pointerEvents: 'none',
display: 'flex',
},
tick: {
position: 'absolute',
height: '100%',
width: 1,
},
majorTick: {
background: theme.palette.action.disabled,
},
minorTick: {
background: theme.palette.divider,
},
}));
function RenderedBlockLines({ block, bpPerPx, }) {
const { classes, cx } = useStyles();
const ticks = makeTicks(block.start, block.end, bpPerPx);
return (_jsx(ContentBlockComponent, { block: block, children: ticks.map(({ type, base }) => {
const x = (block.reversed ? block.end - base : base - block.start) / bpPerPx;
return (_jsx("div", { className: cx(classes.tick, type === 'major' || type === 'labeledMajor'
? classes.majorTick
: classes.minorTick), style: { left: x } }, base));
}) }));
}
const RenderedVerticalGuides = observer(({ model }) => {
const { staticBlocks, bpPerPx } = model;
return (_jsx(_Fragment, { children: staticBlocks.map((block, index) => {
const k = `${block.key}-${index}`;
if (block.type === 'ContentBlock') {
return _jsx(RenderedBlockLines, { block: block, bpPerPx: bpPerPx }, k);
}
else if (block.type === 'ElidedBlock') {
return _jsx(ElidedBlockComponent, { width: block.widthPx }, k);
}
else if (block.type === 'InterRegionPaddingBlock') {
return (_jsx(InterRegionPaddingBlockComponent, { width: block.widthPx, boundary: block.variant === 'boundary' }, k));
}
return null;
}) }));
});
const Gridlines = observer(function ({ model, offset = 0, }) {
const { classes } = useStyles();
const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
return (_jsx("div", { className: classes.verticalGuidesZoomContainer, style: {
transform: model.scaleFactor !== 1 ? `scaleX(${model.scaleFactor})` : undefined,
}, children: _jsx("div", { className: classes.verticalGuidesContainer, style: {
left: offsetLeft - offset,
width: model.staticBlocks.totalWidthPx,
}, children: _jsx(RenderedVerticalGuides, { model: model }) }) }));
});
export default Gridlines;