@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
62 lines (61 loc) • 3.01 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderedBlocks = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const util_1 = require("@jbrowse/core/util");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const Block_1 = require("./Block");
const useStyles = (0, mui_1.makeStyles)()({
linearBlocks: {
whiteSpace: 'nowrap',
textAlign: 'left',
position: 'absolute',
minHeight: '100%',
display: 'flex',
},
heightOverflowed: {
position: 'absolute',
color: 'rgb(77,77,77)',
borderBottom: '2px solid rgb(77,77,77)',
textShadow: 'white 0px 0px 1px',
whiteSpace: 'nowrap',
width: '100%',
fontWeight: 'bold',
textAlign: 'center',
zIndex: 999,
boxSizing: 'border-box',
},
});
const RenderedBlocks = (0, mobx_react_1.observer)(function ({ model, }) {
const { classes } = useStyles();
const { blockDefinitions, blockState } = model;
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: blockDefinitions.map(block => {
const key = `${model.id}-${block.key}`;
if (block.type === 'ContentBlock') {
const state = blockState.get(block.key);
return ((0, jsx_runtime_1.jsxs)(Block_1.ContentBlock, { block: block, children: [(state === null || state === void 0 ? void 0 : state.ReactComponent) ? ((0, jsx_runtime_1.jsx)(state.ReactComponent, { model: state })) : null, (state === null || state === void 0 ? void 0 : state.maxHeightReached) ? ((0, jsx_runtime_1.jsx)("div", { className: classes.heightOverflowed, style: {
top: state.layout.getTotalHeight() - 16,
pointerEvents: 'none',
height: 16,
}, children: "Max height reached" })) : null] }, key));
}
if (block.type === 'ElidedBlock') {
return (0, jsx_runtime_1.jsx)(Block_1.ElidedBlock, { width: block.widthPx }, key);
}
if (block.type === 'InterRegionPaddingBlock') {
return ((0, jsx_runtime_1.jsx)(Block_1.InterRegionPaddingBlock, { width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }, key));
}
throw new Error(`invalid block type ${JSON.stringify(block)}`);
}) }));
});
exports.RenderedBlocks = RenderedBlocks;
const LinearBlocks = (0, mobx_react_1.observer)(function ({ model, }) {
const { classes } = useStyles();
const { blockDefinitions } = model;
const viewModel = (0, util_1.getContainingView)(model);
return ((0, jsx_runtime_1.jsx)("div", { className: classes.linearBlocks, style: {
left: blockDefinitions.offsetPx - viewModel.offsetPx,
}, children: (0, jsx_runtime_1.jsx)(RenderedBlocks, { model: model }) }));
});
exports.default = LinearBlocks;