@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
150 lines (149 loc) • 7.68 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { getEnv, getSession } from '@jbrowse/core/util';
import Base1DView from '@jbrowse/core/util/Base1DViewModel';
import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
import { Typography, alpha, useTheme } from '@mui/material';
import { observer } from 'mobx-react';
import Cytobands from "./Cytobands.js";
import OverviewHighlight from "./OverviewHighlight.js";
import OverviewRubberband from "./OverviewRubberband.js";
import OverviewScalebarPolygon from "./OverviewScalebarPolygon.js";
import OverviewScalebarTickLabels from "./OverviewScalebarTickLabels.js";
import { getCytobands } from "./util.js";
import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT } from "../consts.js";
const wholeSeqSpacer = 2;
const useStyles = makeStyles()(theme => ({
scalebar: {
height: HEADER_OVERVIEW_HEIGHT,
contain: 'layout style',
},
scalebarBorder: {
border: '1px solid',
},
scalebarContig: {
backgroundColor: theme.palette.background.default,
position: 'absolute',
top: 0,
left: 0,
height: HEADER_OVERVIEW_HEIGHT,
overflow: 'hidden',
},
scalebarContigForward: {
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M-.1 0L6 4.5L-.1 9' fill='none' stroke='${theme.palette.divider}'/%3E%3C/svg%3E")`,
backgroundRepeat: 'repeat',
},
scalebarContigReverse: {
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M6 0L0 4.5L6 9' fill='none' stroke='${theme.palette.divider}'/%3E%3C/svg%3E")`,
backgroundRepeat: 'repeat',
},
scalebarRefName: {
position: 'absolute',
left: 0,
fontWeight: 'bold',
pointerEvents: 'none',
zIndex: 100,
},
scalebarVisibleRegion: {
position: 'absolute',
height: HEADER_OVERVIEW_HEIGHT,
pointerEvents: 'none',
zIndex: 100,
border: '1px solid',
left: 0,
},
overview: {
height: HEADER_BAR_HEIGHT,
position: 'relative',
},
overviewSvg: {
pointerEvents: 'none',
width: '100%',
position: 'absolute',
},
}));
const OverviewBox = observer(function OverviewBox({ scale, model, block, overview, }) {
const { classes } = useStyles();
const theme = useTheme();
const { cytobandOffset, showCytobands } = model;
const { reversed, refName, assemblyName } = block;
const { assemblyManager } = getSession(model);
const assembly = assemblyManager.get(assemblyName);
const refNameColor = assembly?.getRefNameColor(refName);
const canDisplayCytobands = showCytobands && getCytobands(assembly, block.refName).length;
return (_jsxs("div", { children: [_jsx(Typography, { style: {
transform: `translateX(${block.offsetPx + 3}px)`,
color: canDisplayCytobands
? theme.palette.text.primary
: refNameColor,
}, className: classes.scalebarRefName, children: refName }), _jsx("div", { className: cx(classes.scalebarContig, canDisplayCytobands
? undefined
: reversed
? classes.scalebarContigReverse
: classes.scalebarContigForward, !canDisplayCytobands ? classes.scalebarBorder : undefined), style: {
transform: `translateX(${block.offsetPx + cytobandOffset}px)`,
width: block.widthPx,
borderColor: refNameColor,
}, children: canDisplayCytobands ? (_jsx("svg", { style: { width: '100%' }, children: _jsx(Cytobands, { overview: overview, assembly: assembly, block: block }) })) : (_jsx(OverviewScalebarTickLabels, { model: model, overview: overview, scale: scale, block: block })) })] }));
});
const VisibleRegionBox = observer(function VisibleRegionBox({ model, overview, className, }) {
const theme = useTheme();
const scalebarColor = theme.palette.tertiary.light;
const { dynamicBlocks, showCytobands, cytobandOffset } = model;
const visibleRegions = dynamicBlocks.contentBlocks;
if (!visibleRegions.length) {
return null;
}
const first = visibleRegions.at(0);
const last = visibleRegions.at(-1);
const firstOverviewPx = overview.bpToPx({
refName: first.refName,
coord: first.reversed ? first.end : first.start,
}) || 0;
const lastOverviewPx = overview.bpToPx({
refName: last.refName,
coord: last.reversed ? last.start : last.end,
}) || 0;
const color = showCytobands ? '#f00' : scalebarColor;
const transparency = showCytobands ? 0.1 : 0.3;
const left = firstOverviewPx + cytobandOffset;
return (_jsx("div", { className: className, style: {
width: lastOverviewPx - firstOverviewPx,
transform: `translateX(${left}px)`,
background: alpha(color, transparency),
borderColor: color,
} }));
});
const Scalebar = observer(function Scalebar({ model, scale, overview, }) {
const { classes } = useStyles();
const { pluginManager } = getEnv(model);
const overviewVisibleRegions = overview.dynamicBlocks;
const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-OverviewScalebarComponent', undefined, { model, overview });
return (_jsxs("div", { className: classes.scalebar, children: [_jsx(VisibleRegionBox, { model: model, overview: overview, className: classes.scalebarVisibleRegion }), overviewVisibleRegions.map((block, idx) => {
return !(block.type === 'ContentBlock') ? (_jsx("div", { className: classes.scalebarContig, style: {
width: block.widthPx,
transform: `translateX(${block.offsetPx}px)`,
backgroundColor: '#999',
backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
} }, `${JSON.stringify(block)}-${idx}`)) : (_jsx(OverviewBox, { scale: scale, block: block, model: model, overview: overview }, `${JSON.stringify(block)}-${idx}`));
}), _jsx(OverviewHighlight, { model: model, overview: overview }), additional] }));
});
const OverviewScalebar = observer(function OverviewScalebar({ model, children, }) {
const { classes } = useStyles();
const { minimumBlockWidth, totalBp, width, cytobandOffset, displayedRegions, } = model;
const modWidth = width - cytobandOffset;
const str = JSON.stringify(displayedRegions);
const overview = useMemo(() => {
const overview = Base1DView.create({
displayedRegions: JSON.parse(str),
interRegionPaddingWidth: 0,
minimumBlockWidth,
});
overview.setVolatileWidth(modWidth);
overview.showAllRegions();
return overview;
}, [str, minimumBlockWidth, modWidth]);
const scale = totalBp / (modWidth - (displayedRegions.length - 1) * wholeSeqSpacer);
return (_jsxs("div", { children: [_jsx(OverviewRubberband, { model: model, overview: overview, ControlComponent: _jsx(Scalebar, { model: model, overview: overview, scale: scale }) }), _jsxs("div", { className: classes.overview, children: [_jsx("svg", { height: HEADER_BAR_HEIGHT, className: classes.overviewSvg, children: _jsx(OverviewScalebarPolygon, { model: model, overview: overview }) }), children] })] }));
});
export default OverviewScalebar;