@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
71 lines (70 loc) • 3.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const Block_1 = require("../../BaseLinearDisplay/components/Block");
const util_1 = require("../util");
const useStyles = (0, mui_1.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 = (0, util_1.makeTicks)(block.start, block.end, bpPerPx);
return ((0, jsx_runtime_1.jsx)(Block_1.ContentBlock, { block: block, children: ticks.map(({ type, base }) => {
const x = (block.reversed ? block.end - base : base - block.start) / bpPerPx;
return ((0, jsx_runtime_1.jsx)("div", { className: cx(classes.tick, type === 'major' || type === 'labeledMajor'
? classes.majorTick
: classes.minorTick), style: { left: x } }, base));
}) }));
}
const RenderedVerticalGuides = (0, mobx_react_1.observer)(({ model }) => {
const { staticBlocks, bpPerPx } = model;
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: staticBlocks.map((block, index) => {
const k = `${block.key}-${index}`;
if (block.type === 'ContentBlock') {
return (0, jsx_runtime_1.jsx)(RenderedBlockLines, { block: block, bpPerPx: bpPerPx }, k);
}
else if (block.type === 'ElidedBlock') {
return (0, jsx_runtime_1.jsx)(Block_1.ElidedBlock, { width: block.widthPx }, k);
}
else if (block.type === 'InterRegionPaddingBlock') {
return ((0, jsx_runtime_1.jsx)(Block_1.InterRegionPaddingBlock, { width: block.widthPx, boundary: block.variant === 'boundary' }, k));
}
return null;
}) }));
});
const Gridlines = (0, mobx_react_1.observer)(function ({ model, offset = 0, }) {
const { classes } = useStyles();
const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
return ((0, jsx_runtime_1.jsx)("div", { className: classes.verticalGuidesZoomContainer, style: {
transform: model.scaleFactor !== 1 ? `scaleX(${model.scaleFactor})` : undefined,
}, children: (0, jsx_runtime_1.jsx)("div", { className: classes.verticalGuidesContainer, style: {
left: offsetLeft - offset,
width: model.staticBlocks.totalWidthPx,
}, children: (0, jsx_runtime_1.jsx)(RenderedVerticalGuides, { model: model }) }) }));
});
exports.default = Gridlines;