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

Lunit Oncology UI components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo, useCallback } from 'react';
import { v4 as uuidV4 } from 'uuid';
import { Box } from '@mui/material';
import { BaseSlider, Container } from './Threshold.styled';
import { Score } from '../Score';
import { Statistic } from '../Statistic';
import { PresentationTypography } from '../presentations.styled';
import { Button, Dropdown, DropdownItem } from '../../components';
import { HorizonDivider } from '../HorizonDivider';
import { FreeText } from '../FreeText';
import { baseSliderMarks, getPresetValue } from './Threshold.utils';
const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, isLoading = false, thresholdState, onChangeDropdown, onChangeSlider, onSliderChangeCommitted, onClickUpdateConfiguration, }) => {
    if (!componentType)
        throw new Error("The 'componentType' prop is required.");
    if (!totalScore)
        throw new Error("The 'totalScore' prop is required.");
    if (!statisticItems.length)
        throw new Error("The 'statisticItems' prop must contain at least one item.");
    if (!options.length)
        throw new Error("The 'options' prop must contain at least one item.");
    const [isThresholdChanged, setIsThresholdChanged] = useState(false);
    const selectedOptionValue = useMemo(() => {
        return (options.find((option) => option.title === thresholdState?.selectedItem)?.value ||
            options[0].value);
    }, [options, thresholdState?.selectedItem]);
    const presetValue = getPresetValue(options, thresholdState?.selectedItem);
    const handleDropdownChange = useCallback((event) => {
        onChangeDropdown(event);
        setIsThresholdChanged(false);
    }, [onChangeDropdown]);
    const handleSliderChange = useCallback((event, value) => {
        onChangeSlider(event, value);
        setIsThresholdChanged(value !== selectedOptionValue);
    }, [onChangeSlider, selectedOptionValue]);
    const handleUpdateConfiguration = useCallback(() => {
        onClickUpdateConfiguration();
        setIsThresholdChanged(false);
    }, [onClickUpdateConfiguration]);
    return (_jsxs(Container, { children: [_jsx(Score, { ...totalScore }), _jsx(Statistic, { ...totalCells }), statisticItems.map((item) => {
                return (_jsx(Statistic, { ...item }, uuidV4()));
            }), _jsx(HorizonDivider, { componentType: "divider" }), _jsx(PresentationTypography, { size: "medium", children: title }), _jsx(Dropdown, { value: thresholdState?.selectedItem, onChange: handleDropdownChange, sx: { width: '258px' }, children: options.map((option) => {
                    return (_jsx(DropdownItem, { value: option.title, children: option.title }, option.title));
                }) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', paddingTop: '36px', gap: '6px' }, children: [_jsx(BaseSlider, { disabled: thresholdState?.isPresetSelected, step: controlStep, value: thresholdState?.sliderValue, valueLabelDisplay: "on", defaultThreshold: presetValue, marks: baseSliderMarks, onChange: handleSliderChange, onChangeCommitted: onSliderChangeCommitted }), !thresholdState?.isPresetSelected && (_jsx(Button, { id: "update-threshold-config-btn", label: "Update Configuration", sx: {
                            width: '100%',
                        }, disabled: !isThresholdChanged || isLoading, onClick: handleUpdateConfiguration, loading: isLoading })), thresholdState?.isPresetSelected && description?.preset && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.preset })), !thresholdState?.isPresetSelected && description?.user && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.user }))] })] }));
};
export default Threshold;