@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
51 lines (50 loc) • 2.58 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const configuration_1 = require("@jbrowse/core/configuration");
const ui_1 = require("@jbrowse/core/ui");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const useStyles = (0, mui_1.makeStyles)()({
renderingComponentContainer: {
position: 'absolute',
left: -1,
height: '100%',
width: '100%',
},
trackRenderingContainer: {
overflowY: 'auto',
overflowX: 'hidden',
whiteSpace: 'nowrap',
position: 'relative',
background: 'none',
},
});
const TrackRenderingContainer = (0, mobx_react_1.observer)(function ({ model, track, onDragEnter, }) {
const { classes } = useStyles();
const display = track.displays[0];
const { height, RenderingComponent, DisplayBlurb } = display;
const { trackRefs, id, scaleFactor } = model;
const trackId = (0, configuration_1.getConf)(track, 'trackId');
const ref = (0, react_1.useRef)(null);
const minimized = track.minimized;
(0, react_1.useEffect)(() => {
if (ref.current) {
trackRefs[trackId] = ref.current;
}
return () => {
delete trackRefs[trackId];
};
}, [trackRefs, trackId]);
return ((0, jsx_runtime_1.jsx)("div", { className: classes.trackRenderingContainer, style: {
height: minimized ? 20 : height,
}, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), onDragEnter: onDragEnter, "data-testid": `trackRenderingContainer-${id}-${trackId}`, children: !minimized ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: ref, className: classes.renderingComponentContainer, style: {
transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
}, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, {}), children: (0, jsx_runtime_1.jsx)(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }) }) }), DisplayBlurb ? ((0, jsx_runtime_1.jsx)("div", { style: {
position: 'absolute',
left: 0,
top: display.height - 20,
}, children: (0, jsx_runtime_1.jsx)(DisplayBlurb, { model: display }) })) : null] })) : null }));
});
exports.default = TrackRenderingContainer;