@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
51 lines (50 loc) • 1.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContentBlock = void 0;
exports.ElidedBlock = ElidedBlock;
exports.InterRegionPaddingBlock = InterRegionPaddingBlock;
const jsx_runtime_1 = require("react/jsx-runtime");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const useStyles = (0, mui_1.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 = (0, mobx_react_1.observer)(function ({ block, children, }) {
const { classes } = useStyles();
const { widthPx } = block;
return ((0, jsx_runtime_1.jsx)("div", { style: { width: widthPx }, className: classes.contentBlock, children: children }));
});
exports.ContentBlock = ContentBlock;
function ElidedBlock({ width }) {
const { classes } = useStyles();
return (0, jsx_runtime_1.jsx)("div", { className: classes.elidedBlock, style: { width } });
}
function InterRegionPaddingBlock({ boundary, width, style = {}, }) {
const { classes } = useStyles();
return ((0, jsx_runtime_1.jsx)("div", { style: {
...style,
width,
}, className: boundary
? classes.boundaryPaddingBlock
: classes.interRegionPaddingBlock }));
}