@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
53 lines (52 loc) • 2.63 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { LoadingEllipses } from '@jbrowse/core/ui';
import { getContainingView } from '@jbrowse/core/util';
import { makeStyles } from '@jbrowse/core/util/tss-react';
import { observer } from 'mobx-react';
import BlockErrorMessage from "./BlockErrorMessage.js";
import FloatingLegend from "./FloatingLegend.js";
const useStyles = makeStyles()({
loading: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(255, 255, 255, 0.15)',
backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0, 0, 0, 0.05) 8px, rgba(0, 0, 0, 0.05) 16px)`,
pointerEvents: 'none',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1,
},
loadingMessage: {
zIndex: 2,
pointerEvents: 'none',
},
});
const NonBlockCanvasDisplayComponent = observer(function NonBlockCanvasDisplayComponent({ model, children, }) {
const { error, regionTooLarge } = model;
return error ? (_jsx(BlockErrorMessage, { model: model })) : regionTooLarge ? (model.regionCannotBeRendered()) : (_jsx(DataDisplay, { model: model, children: children }));
});
const DataDisplay = observer(function DataDisplay({ model, children, }) {
const { drawn, loading, showLegend, legendItems, lastDrawnBpPerPx, height } = model;
const view = getContainingView(model);
const items = legendItems?.() ?? [];
const hasZoomed = lastDrawnBpPerPx !== undefined && lastDrawnBpPerPx !== view.bpPerPx;
const calculatedLeft = hasZoomed
? 0
: (model.lastDrawnOffsetPx ?? 0) - view.offsetPx;
return (_jsxs("div", { "data-testid": `drawn-${drawn}`, style: { position: 'relative', height }, children: [_jsx("div", { style: {
position: 'absolute',
left: calculatedLeft,
visibility: hasZoomed ? 'hidden' : undefined,
}, children: children }), showLegend && items.length > 0 ? _jsx(FloatingLegend, { items: items }) : null, hasZoomed || calculatedLeft !== 0 || loading ? (_jsx(LoadingBar, { model: model })) : null] }));
});
const LoadingBar = observer(function LoadingBar({ model, }) {
const { classes } = useStyles();
const { statusMessage } = model;
return (_jsx("div", { className: classes.loading, children: _jsx("div", { className: classes.loadingMessage, children: _jsx(LoadingEllipses, { message: statusMessage }) }) }));
});
export default NonBlockCanvasDisplayComponent;