@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
46 lines (45 loc) • 1.63 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
const useStyles = makeStyles()(theme => ({
contentBlock: {
position: 'relative',
minHeight: '100%',
boxSizing: 'border-box',
whiteSpace: 'nowrap',
overflow: 'hidden',
},
elidedBlock: {
minHeight: '100%',
boxSizing: 'border-box',
backgroundColor: '#999',
backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
},
interRegionPaddingBlock: {
minHeight: '100%',
backgroundColor: theme.palette.text.disabled,
},
boundaryPaddingBlock: {
minHeight: '100%',
backgroundColor: theme.palette.action.disabledBackground,
},
}));
const ContentBlock = observer(function ({ block, children, }) {
const { classes } = useStyles();
const { widthPx } = block;
return (_jsx("div", { style: { width: widthPx }, className: classes.contentBlock, children: children }));
});
function ElidedBlock({ width }) {
const { classes } = useStyles();
return _jsx("div", { className: classes.elidedBlock, style: { width } });
}
function InterRegionPaddingBlock({ boundary, width, style = {}, }) {
const { classes } = useStyles();
return (_jsx("div", { style: {
...style,
width,
}, className: boundary
? classes.boundaryPaddingBlock
: classes.interRegionPaddingBlock }));
}
export { ContentBlock, ElidedBlock, InterRegionPaddingBlock };