@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
59 lines (58 loc) • 2.84 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { getContainingView } from '@jbrowse/core/util';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from './Block';
const useStyles = 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 = observer(function ({ model, }) {
const { classes } = useStyles();
const { blockDefinitions, blockState } = model;
return (_jsx(_Fragment, { children: blockDefinitions.map(block => {
const key = `${model.id}-${block.key}`;
if (block.type === 'ContentBlock') {
const state = blockState.get(block.key);
return (_jsxs(ContentBlockComponent, { block: block, children: [(state === null || state === void 0 ? void 0 : state.ReactComponent) ? (_jsx(state.ReactComponent, { model: state })) : null, (state === null || state === void 0 ? void 0 : state.maxHeightReached) ? (_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 _jsx(ElidedBlockComponent, { width: block.widthPx }, key);
}
if (block.type === 'InterRegionPaddingBlock') {
return (_jsx(InterRegionPaddingBlockComponent, { width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }, key));
}
throw new Error(`invalid block type ${JSON.stringify(block)}`);
}) }));
});
export { RenderedBlocks };
const LinearBlocks = observer(function ({ model, }) {
const { classes } = useStyles();
const { blockDefinitions } = model;
const viewModel = getContainingView(model);
return (_jsx("div", { className: classes.linearBlocks, style: {
left: blockDefinitions.offsetPx - viewModel.offsetPx,
}, children: _jsx(RenderedBlocks, { model: model }) }));
});
export default LinearBlocks;