@jbrowse/plugin-wiggle
Version:
JBrowse 2 wiggle adapters, tracks, etc.
30 lines (29 loc) • 2.01 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { getFillProps } from '@jbrowse/core/util';
import { useTheme } from '@mui/material';
import { observer } from 'mobx-react';
import RectBg from "./RectBg.js";
const LegendItem = function ({ source, idx, rowHeight, }) {
const { color } = source;
const colorBoxWidth = 15;
return color ? (_jsx(RectBg, { y: idx * rowHeight, x: 0, width: colorBoxWidth + 0.5, height: rowHeight + 0.5, color: color })) : null;
};
const LegendItemText = function ({ source, idx, rowHeight, textFillProps, }) {
const { color, name } = source;
const svgFontSize = Math.min(rowHeight, 12);
const colorBoxWidth = 15;
return (_jsx("text", { y: (idx + 0.5) * rowHeight, x: color ? colorBoxWidth + 2 : 0, fontSize: svgFontSize, dominantBaseline: "central", ...textFillProps, children: name }));
};
const MultiWiggleColorLegend = observer(function MultiWiggleColorLegend({ model, labelWidth, }) {
const { canDisplayLegendLabels, rowHeight, sources } = model;
const colorBoxWidth = 15;
const theme = useTheme();
const hasColors = useMemo(() => sources?.some(s => s.color) ?? false, [sources]);
const legendWidth = labelWidth + (hasColors ? colorBoxWidth + 5 : 0);
const textFillProps = useMemo(() => getFillProps(theme.palette.text.primary), [theme.palette.text.primary]);
return sources ? (_jsxs(_Fragment, { children: [canDisplayLegendLabels ? (_jsx(RectBg, { y: 0, x: 0, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => (_jsx(LegendItem, { source: source, idx: idx, rowHeight: rowHeight }, `${source.name}-${idx}`))), canDisplayLegendLabels
? sources.map((source, idx) => (_jsx(LegendItemText, { source: source, idx: idx, rowHeight: rowHeight, textFillProps: textFillProps }, `${source.name}-text-${idx}`)))
: null] })) : null;
});
export default MultiWiggleColorLegend;