@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
147 lines (146 loc) • 8.16 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const util_1 = require("@jbrowse/core/util");
const Base1DViewModel_1 = __importDefault(require("@jbrowse/core/util/Base1DViewModel"));
const material_1 = require("@mui/material");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const Cytobands_1 = __importDefault(require("./Cytobands"));
const OverviewHighlight_1 = __importDefault(require("./OverviewHighlight"));
const OverviewRubberband_1 = __importDefault(require("./OverviewRubberband"));
const OverviewScalebarPolygon_1 = __importDefault(require("./OverviewScalebarPolygon"));
const OverviewScalebarTickLabels_1 = __importDefault(require("./OverviewScalebarTickLabels"));
const util_2 = require("./util");
const consts_1 = require("../consts");
const wholeSeqSpacer = 2;
const useStyles = (0, mui_1.makeStyles)()(theme => ({
scalebar: {
height: consts_1.HEADER_OVERVIEW_HEIGHT,
},
scalebarBorder: {
border: '1px solid',
},
scalebarContig: {
backgroundColor: theme.palette.background.default,
position: 'absolute',
top: 0,
height: consts_1.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',
fontWeight: 'bold',
pointerEvents: 'none',
zIndex: 100,
},
scalebarVisibleRegion: {
position: 'absolute',
height: consts_1.HEADER_OVERVIEW_HEIGHT,
pointerEvents: 'none',
zIndex: 100,
border: '1px solid',
},
overview: {
height: consts_1.HEADER_BAR_HEIGHT,
position: 'relative',
},
overviewSvg: {
pointerEvents: 'none',
width: '100%',
position: 'absolute',
},
}));
const OverviewBox = (0, mobx_react_1.observer)(function ({ scale, model, block, overview, }) {
const { classes, cx } = useStyles();
const theme = (0, material_1.useTheme)();
const { cytobandOffset, showCytobands } = model;
const { reversed, refName, assemblyName } = block;
const { assemblyManager } = (0, util_1.getSession)(model);
const assembly = assemblyManager.get(assemblyName);
const refNameColor = assembly === null || assembly === void 0 ? void 0 : assembly.getRefNameColor(refName);
const canDisplayCytobands = showCytobands && (0, util_2.getCytobands)(assembly, block.refName).length;
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { style: {
left: block.offsetPx + 3,
color: canDisplayCytobands
? theme.palette.text.primary
: refNameColor,
}, className: classes.scalebarRefName, children: refName }), (0, jsx_runtime_1.jsx)("div", { className: cx(classes.scalebarContig, canDisplayCytobands
? undefined
: reversed
? classes.scalebarContigReverse
: classes.scalebarContigForward, !canDisplayCytobands ? classes.scalebarBorder : undefined), style: {
left: block.offsetPx + cytobandOffset,
width: block.widthPx,
borderColor: refNameColor,
}, children: canDisplayCytobands ? ((0, jsx_runtime_1.jsx)("svg", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(Cytobands_1.default, { overview: overview, assembly: assembly, block: block }) })) : ((0, jsx_runtime_1.jsx)(OverviewScalebarTickLabels_1.default, { model: model, overview: overview, scale: scale, block: block })) })] }));
});
const Scalebar = (0, mobx_react_1.observer)(function ({ model, scale, overview, }) {
const { classes } = useStyles();
const theme = (0, material_1.useTheme)();
const { dynamicBlocks, showCytobands, cytobandOffset } = model;
const { pluginManager } = (0, util_1.getEnv)(model);
const visibleRegions = dynamicBlocks.contentBlocks;
const overviewVisibleRegions = overview.dynamicBlocks;
const scalebarColor = theme.palette.tertiary.light;
if (!visibleRegions.length) {
return null;
}
const first = visibleRegions.at(0);
const last = visibleRegions.at(-1);
const firstOverviewPx = overview.bpToPx({
...first,
coord: first.reversed ? first.end : first.start,
}) || 0;
const lastOverviewPx = overview.bpToPx({
...last,
coord: last.reversed ? last.start : last.end,
}) || 0;
const color = showCytobands ? '#f00' : scalebarColor;
const transparency = showCytobands ? 0.1 : 0.3;
const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-OverviewScalebarComponent', undefined, { model, overview });
return ((0, jsx_runtime_1.jsxs)("div", { className: classes.scalebar, children: [(0, jsx_runtime_1.jsx)("div", { className: classes.scalebarVisibleRegion, style: {
width: lastOverviewPx - firstOverviewPx,
left: firstOverviewPx + cytobandOffset,
background: (0, material_1.alpha)(color, transparency),
borderColor: color,
} }), overviewVisibleRegions.map((block, idx) => {
return !(block.type === 'ContentBlock') ? ((0, jsx_runtime_1.jsx)("div", { className: classes.scalebarContig, style: {
width: block.widthPx,
left: block.offsetPx,
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}`)) : ((0, jsx_runtime_1.jsx)(OverviewBox, { scale: scale, block: block, model: model, overview: overview }, `${JSON.stringify(block)}-${idx}`));
}), (0, jsx_runtime_1.jsx)(OverviewHighlight_1.default, { model: model, overview: overview }), additional] }));
});
const OverviewScalebar = (0, mobx_react_1.observer)(function ({ model, children, }) {
const { classes } = useStyles();
const { minimumBlockWidth, totalBp, width, cytobandOffset, displayedRegions, } = model;
const modWidth = width - cytobandOffset;
const str = JSON.stringify(displayedRegions);
const overview = (0, react_1.useMemo)(() => {
const overview = Base1DViewModel_1.default.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 ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(OverviewRubberband_1.default, { model: model, overview: overview, ControlComponent: (0, jsx_runtime_1.jsx)(Scalebar, { model: model, overview: overview, scale: scale }) }), (0, jsx_runtime_1.jsxs)("div", { className: classes.overview, children: [(0, jsx_runtime_1.jsx)("svg", { height: consts_1.HEADER_BAR_HEIGHT, className: classes.overviewSvg, children: (0, jsx_runtime_1.jsx)(OverviewScalebarPolygon_1.default, { model: model, overview: overview }) }), children] })] }));
});
exports.default = OverviewScalebar;