@lunit/oui/dist/presentations/AnalysisBar/AnalysisBar.js

Lunit Oncology UI components

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '@mui/material';
import { AnalysisBarSegmentContainer, AnalysisBarOuter, AxisLabels, GraphAxisLabel, GraphScoreIndicator, GraphSegment, } from './AnalysisBar.styled';
import { parseStringValToNumber, normalizeSegmentWidths } from './AnalysisBar.utils';
import HeatmapGraphSVG from './HeatmapGraphIcon/HeatmapGraphSVG';
const Segments = ({ segments, isCutoff }) => {
    if (!segments) {
        return null;
    }
    const validSegments = segments.filter((segment) => segment.width > 0);
    const onePercentIndex = segments.findIndex((segment) => segment.width > 0 && segment.width <= 1);
    let combinedWidth = 0;
    let nextSegmentIndex = -1;
    if (onePercentIndex >= 0) {
        let i = onePercentIndex;
        while (i < segments.length && segments[i].width > 0 && segments[i].width <= 1) {
            combinedWidth += segments[i].width;
            i++;
        }
        if (i < segments.length) {
            combinedWidth += segments[i].width;
            nextSegmentIndex = i;
        }
    }
    if (segments?.length === 1 && segments[0].color === 'jet') {
        return (_jsx(Box, { sx: { width: '100%', height: '14px', transform: 'scaleY(0.8)' }, children: _jsx(HeatmapGraphSVG, {}) }));
    }
    return (_jsx(_Fragment, { children: validSegments?.map((segment, i) => {
            if (segment.color === 'jet') {
                return _jsx(HeatmapGraphSVG, { width: `${segment.width}%` });
            }
            return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === validSegments.length - 1, isCutoff: isCutoff, combinedWidth: combinedWidth, isNextSegment: nextSegmentIndex >= 0 && i === nextSegmentIndex, isOnePercentSegment: segment.width <= 1 }, i));
        }) }));
};
const AnalysisBar = ({ componentType = 'analysisBar', isCutoff = false, expressionValue, caption, expressionLevels = [], expressionLabels = [], segments, isDimmed = false, }) => {
    if (!componentType)
        throw new Error("The 'componentType' prop is required.");
    if (!expressionLevels.length)
        throw new Error("The 'expressionLevels' prop must contain at least one item.");
    const normalizedSegments = normalizeSegmentWidths(segments, isCutoff);
    return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { value: expressionValue, isCutoff: isCutoff, isJet: normalizedSegments?.[0]?.color === 'jet' })), _jsx(Segments, { segments: normalizedSegments, isCutoff: isCutoff })] }), (expressionLevels.length > 0 || caption) && (_jsxs(AxisLabels, { children: [expressionLevels.length > 0 &&
                        expressionLevels.map((val, i) => {
                            return (_jsx(GraphAxisLabel, { label: expressionLabels[i] || val, isCutoff: isCutoff, leftPos: parseStringValToNumber(val) }, i));
                        }), caption && (_jsx(GraphAxisLabel, { label: caption, isCutoff: isCutoff, leftPos: 50 }))] }))] }));
};
export default AnalysisBar;