@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
40 lines (39 loc) • 1.61 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { getFillProps, getStrokeProps } from '@jbrowse/core/util';
import { alpha, useTheme } from '@mui/material';
import { observer } from 'mobx-react';
import { HEADER_BAR_HEIGHT } from '../consts';
const OverviewScalebarPolygon = observer(function ({ model, overview, useOffset = true, }) {
const theme = useTheme();
const multiplier = Number(useOffset);
const { interRegionPaddingWidth, offsetPx, dynamicBlocks, cytobandOffset } = model;
const { contentBlocks, totalWidthPxWithoutBorders } = dynamicBlocks;
const polygonColor = theme.palette.tertiary.light;
if (!contentBlocks.length) {
return null;
}
const first = contentBlocks.at(0);
const last = contentBlocks.at(-1);
const topLeft = (overview.bpToPx({
...first,
coord: first.reversed ? first.end : first.start,
}) || 0) +
cytobandOffset * multiplier;
const topRight = (overview.bpToPx({
...last,
coord: last.reversed ? last.start : last.end,
}) || 0) +
cytobandOffset * multiplier;
const startPx = Math.max(0, -offsetPx);
const endPx = startPx +
totalWidthPxWithoutBorders +
(contentBlocks.length * interRegionPaddingWidth) / 2;
const points = [
[startPx, HEADER_BAR_HEIGHT],
[endPx, HEADER_BAR_HEIGHT],
[topRight, 0],
[topLeft, 0],
];
return (_jsx("polygon", { points: points.toString(), ...getFillProps(alpha(polygonColor, 0.3)), ...getStrokeProps(alpha(polygonColor, 0.8)) }));
});
export default OverviewScalebarPolygon;