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

Lunit Oncology UI components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } 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 { getPresetValue, getSliderMarks } from './Threshold.utils';
const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, isLoading = false, onChangeDropdown, 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 [selectedItem, setSelectedItem] = useState(options[0].title.toString());
    const [selectedValue, setSelectedValue] = useState(options[0].value);
    const [selectedOptionValue, setSelectedOptionValue] = useState(options[0].value);
    const [isPresetSelected, setIsPresetSelected] = useState(options[0].isPreset);
    const [isThresholdChanged, setIsThresholdChanged] = useState(false);
    const presetValue = getPresetValue(options, selectedItem);
    const marks = getSliderMarks(presetValue);
    const handleChange = (event) => {
        setSelectedItem(event.target.value);
        setSelectedValue(options.find((option) => option.title === event.target.value)?.value);
        setSelectedOptionValue(options.find((option) => option.title === event.target.value)?.value);
        setIsPresetSelected(options.find((option) => option.title === event.target.value)?.isPreset || false);
        onChangeDropdown(event);
    };
    const handleSliderChange = (event, value) => {
        setSelectedValue(value);
        setIsThresholdChanged(value !== selectedOptionValue);
    };
    const handleUpdateConfiguration = () => {
        onClickUpdateConfiguration();
        setIsThresholdChanged(false);
    };
    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: selectedItem, onChange: handleChange, 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: isPresetSelected, step: controlStep, value: selectedValue, valueLabelDisplay: "on", defaultThreshold: presetValue, marks: marks, onChange: handleSliderChange, onChangeCommitted: onSliderChangeCommitted }), !isPresetSelected && (_jsx(Button, { id: "update-threshold-config-btn", label: "Update Configuration", sx: {
                            width: '100%',
                        }, disabled: !isThresholdChanged || isLoading, onClick: handleUpdateConfiguration, loading: isLoading })), isPresetSelected && description?.preset && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.preset })), !isPresetSelected && description?.user && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.user }))] })] }));
};
export default Threshold;