@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
44 lines (43 loc) • 1.38 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { makeStyles } from '@jbrowse/core/util/tss-react';
import { observer } from 'mobx-react';
const useStyles = makeStyles()(theme => ({
legend: {
position: 'absolute',
right: 10,
top: 10,
background: theme.palette.background.paper,
padding: 3,
fontSize: 10,
pointerEvents: 'none',
zIndex: 100,
maxWidth: 200,
},
item: {
display: 'flex',
alignItems: 'center',
marginBottom: 1,
'&:last-child': {
marginBottom: 0,
},
},
colorBox: {
width: 12,
height: 12,
marginRight: 6,
flexShrink: 0,
},
label: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
}));
const FloatingLegend = observer(function FloatingLegend({ items, }) {
const { classes } = useStyles();
if (items.length === 0) {
return null;
}
return (_jsx("div", { className: classes.legend, children: items.map((item, idx) => (_jsxs("div", { className: classes.item, children: [_jsx("div", { className: classes.colorBox, style: { backgroundColor: item.color } }), _jsx("span", { className: classes.label, children: item.label })] }, `${item.label}-${idx}`))) }));
});
export default FloatingLegend;