@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
42 lines (41 loc) • 2.71 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getSession, stripAlpha } from '@jbrowse/core/util';
import Base1DView from '@jbrowse/core/util/Base1DViewModel';
import { useTheme } from '@mui/material';
import SVGRuler from './SVGRuler';
import SVGScalebar from './SVGScalebar';
import Cytobands from '../components/Cytobands';
import OverviewScalebarPolygon from '../components/OverviewScalebarPolygon';
import { HEADER_OVERVIEW_HEIGHT } from '../consts';
export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }) {
const { width, assemblyNames, showCytobands, displayedRegions } = model;
const { assemblyManager } = getSession(model);
const assemblyName = assemblyNames.length > 1 ? '' : assemblyNames[0];
const assembly = assemblyManager.get(assemblyName);
const theme = useTheme();
const c = stripAlpha(theme.palette.text.primary);
const overview = Base1DView.create({
displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
interRegionPaddingWidth: 0,
minimumBlockWidth: model.minimumBlockWidth,
});
const visibleRegions = model.dynamicBlocks.contentBlocks;
if (!visibleRegions.length) {
return null;
}
overview.setVolatileWidth(width);
overview.showAllRegions();
const block = overview.dynamicBlocks.contentBlocks[0];
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 y = +showCytobands * cytobandHeight;
return (_jsxs("g", { id: "header", children: [_jsx("text", { x: 0, y: 0, dominantBaseline: "hanging", fontSize: fontSize, fill: c, children: assemblyName }), showCytobands ? (_jsxs("g", { transform: `translate(0 ${rulerHeight})`, children: [_jsx(Cytobands, { overview: overview, assembly: assembly, block: block }), _jsx("rect", { stroke: "red", fill: "rgb(255,0,0)", fillOpacity: 0.1, width: Math.max(lastOverviewPx - firstOverviewPx, 0.5), height: HEADER_OVERVIEW_HEIGHT - 1, x: firstOverviewPx, y: 0.5 }), _jsx("g", { transform: `translate(0,${HEADER_OVERVIEW_HEIGHT})`, children: _jsx(OverviewScalebarPolygon, { overview: overview, model: model, useOffset: false }) })] })) : null, _jsx("g", { transform: `translate(0 ${fontSize + y})`, children: _jsx(SVGScalebar, { model: model, fontSize: fontSize }) }), _jsx("g", { transform: `translate(0 ${rulerHeight + y})`, children: _jsx(SVGRuler, { model: model, fontSize: fontSize }) })] }));
}