@jbrowse/plugin-linear-genome-view/esm/BaseLinearDisplay/SVGLegend.js

JBrowse 2 linear genome view

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { measureText } from '@jbrowse/core/util';
const LEGEND_FONT_SIZE = 10;
const LEGEND_BOX_SIZE = 12;
const LEGEND_PADDING = 3;
export default function SVGLegend({ items, width, legendAreaWidth, }) {
    if (items.length === 0) {
        return null;
    }
    const itemHeight = LEGEND_BOX_SIZE + 2;
    const legendHeight = items.length * itemHeight + LEGEND_PADDING * 2;
    const maxLabelWidth = Math.max(...items.map(item => measureText(item.label, LEGEND_FONT_SIZE)));
    const legendWidth = LEGEND_BOX_SIZE + 8 + maxLabelWidth + LEGEND_PADDING * 2;
    const x = legendAreaWidth ? width + 10 : width - legendWidth - 10;
    const y = 10;
    return (_jsxs("g", { transform: `translate(${x}, ${y})`, children: [_jsx("rect", { x: 0, y: 0, width: legendWidth, height: legendHeight, fill: "rgba(255,255,255,0.9)", stroke: "#ccc", strokeWidth: 1, rx: 4 }), items.map((item, idx) => (_jsxs("g", { transform: `translate(${LEGEND_PADDING}, ${LEGEND_PADDING + idx * itemHeight})`, children: [item.color ? (_jsx("rect", { x: 0, y: 0, width: LEGEND_BOX_SIZE, height: LEGEND_BOX_SIZE, fill: item.color })) : null, _jsx("text", { x: LEGEND_BOX_SIZE + 6, y: LEGEND_BOX_SIZE - 2, fontSize: LEGEND_FONT_SIZE, fill: "black", children: item.label })] }, `legend-${idx}`)))] }));
}