@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
76 lines (75 loc) • 3.71 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { getContainingView } from '@jbrowse/core/util';
import { makeStyles } from '@jbrowse/core/util/tss-react';
import { observer } from 'mobx-react';
import { calculateFloatingLabelPosition } from "./util.js";
const useStyles = makeStyles()({
container: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
pointerEvents: 'none',
zIndex: 5,
},
label: {
position: 'absolute',
fontSize: 11,
cursor: 'default',
pointerEvents: 'auto',
},
overlay: {
backgroundColor: 'rgba(255, 255, 255, 0.8)',
lineHeight: 1,
},
});
function FloatingLabel({ text, color, isOverlay, featureLeftPx, featureRightPx, featureId, subfeatureId, labelWidth, y, offsetPx, tooltip, labelClass, overlayClass, }) {
const x = calculateFloatingLabelPosition(featureLeftPx, featureRightPx, labelWidth, offsetPx);
return (_jsx("div", { "data-feature-id": featureId, "data-subfeature-id": subfeatureId, "data-tooltip": tooltip, className: isOverlay ? `${labelClass} ${overlayClass}` : labelClass, style: { color, transform: `translate(${x}px,${y}px)` }, children: text }));
}
const FloatingLabels = observer(function FloatingLabels({ model, }) {
const { classes } = useStyles();
const view = getContainingView(model);
const { offsetPx } = view;
const featureLabels = model.floatingLabelData;
const { onFeatureClick, onFeatureContextMenu, onMouseMove } = model.renderingProps();
const labels = [];
for (const [key, { leftPx, topPx, totalFeatureHeight, floatingLabels: labelData, featureWidth, },] of featureLabels.entries()) {
const featureVisualBottom = topPx + totalFeatureHeight;
const featureRightPx = leftPx + featureWidth;
for (let i = 0, l = labelData.length; i < l; i++) {
const floatingLabel = labelData[i];
const { text, relativeY, color, isOverlay, textWidth: labelWidth, parentFeatureId, subfeatureId, tooltip, } = floatingLabel;
const y = featureVisualBottom + relativeY;
const labelKey = `${key}-${i}`;
const featureId = parentFeatureId ?? key;
labels.push(_jsx(FloatingLabel, { text: text, color: color, isOverlay: isOverlay ?? false, featureLeftPx: leftPx, featureRightPx: featureRightPx, featureId: featureId, subfeatureId: subfeatureId, labelWidth: labelWidth, y: y, offsetPx: offsetPx, tooltip: tooltip, labelClass: classes.label, overlayClass: classes.overlay }, labelKey));
}
}
return (_jsx("div", { className: classes.container, onClick: e => {
const target = e.target;
const subfeatureId = target.dataset.subfeatureId;
const featureId = subfeatureId ?? target.dataset.featureId;
if (featureId) {
onFeatureClick?.(e, featureId);
}
}, onContextMenu: e => {
const target = e.target;
const subfeatureId = target.dataset.subfeatureId;
const featureId = subfeatureId ?? target.dataset.featureId;
if (featureId) {
onFeatureContextMenu?.(e, featureId);
}
}, onMouseOver: e => {
const target = e.target;
const featureId = target.dataset.featureId;
if (featureId) {
const tooltip = target.dataset.tooltip;
const subfeatureId = target.dataset.subfeatureId;
onMouseMove?.(e, featureId, tooltip);
model.setSubfeatureIdUnderMouse(subfeatureId);
}
}, children: labels }));
});
export default FloatingLabels;