@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
39 lines (38 loc) • 1.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const useStyles = (0, mui_1.makeStyles)()(theme => ({
centerLineContainer: {
background: 'transparent',
height: '100%',
zIndex: 4,
position: 'absolute',
border: `1px ${theme.palette.action.active} dashed`,
borderTop: 'none',
borderBottom: 'none',
pointerEvents: 'none',
},
centerLineText: {
position: 'absolute',
pointerEvents: 'none',
whiteSpace: 'nowrap',
fontWeight: 'bold',
},
}));
const CenterLine = (0, mobx_react_1.observer)(function ({ model }) {
const { bpPerPx, centerLineInfo, trackHeights, tracks, width } = model;
const ref = (0, react_1.useRef)(null);
const { classes } = useStyles();
const startingPosition = width / 2;
return tracks.length ? ((0, jsx_runtime_1.jsx)("div", { "data-testid": "centerline_container", className: classes.centerLineContainer, role: "presentation", ref: ref, style: {
left: `${startingPosition}px`,
width: Math.max(1 / bpPerPx, 1),
}, children: centerLineInfo && ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "centerline_text", className: classes.centerLineText, role: "presentation", style: {
left: Math.max(1 / bpPerPx, 1) + 5,
top: trackHeights,
}, children: [centerLineInfo.refName, ":", ' ', Math.max(Math.round(centerLineInfo.offset) + 1, 0)] })) })) : null;
});
exports.default = CenterLine;