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

Lunit Oncology UI components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { v4 as uuidV4 } from 'uuid';
import { Score } from '../Score';
import { Container } from './ModelType.styled';
import { FreeText } from '../FreeText';
import { HorizonDivider } from '../HorizonDivider';
import { PresentationTypography } from '../presentations.styled';
import { Button, Dropdown, DropdownItem, DropdownSubtitle } from '../../components';
const ModelType = ({ componentType = 'modelType', title, optionTitle, scoreItems, currentSensitivity, currentSpecificity, userModelType, options, description, onChangeDropdown, onClickUpdateConfiguration, }) => {
    if (!componentType)
        throw new Error("The 'componentType' prop is required.");
    if (!title)
        throw new Error("The 'title' prop is required.");
    if (!Object.keys(scoreItems).length)
        throw new Error("The 'scoreItems' prop must contain at least one item.");
    if (!currentSensitivity)
        throw new Error("The 'currentSensitivity' prop is required.");
    if (!currentSpecificity)
        throw new Error("The 'currentSpecificity' prop is required.");
    if (!options.length)
        throw new Error("The 'options' prop must contain at least one item.");
    options.forEach((option) => {
        if (typeof option.sensitivity !== 'number' || typeof option.specificity !== 'number') {
            throw new Error('The sensitivity and specificity must be numbers.');
        }
    });
    const [selectedItem, setSelectedItem] = useState(userModelType);
    const [isModelTypeChanged, setIsModelTypeChanged] = useState(false);
    const handleDropdownChange = (event) => {
        onChangeDropdown(event);
        const newOption = options.find((option) => option.target.annotation.dimension === event.target.value)?.target.annotation.dimension;
        setSelectedItem(newOption);
        setIsModelTypeChanged(userModelType !== newOption);
    };
    const handleUpdateConfiguration = () => {
        onClickUpdateConfiguration();
        setIsModelTypeChanged(false);
    };
    useEffect(() => {
        setSelectedItem(userModelType);
    }, [userModelType]);
    return (_jsxs(Container, { children: [scoreItems[selectedItem].map((item) => {
                return (_jsx(Score, { ...item }, uuidV4()));
            }), _jsx(HorizonDivider, { componentType: "divider" }), _jsx(PresentationTypography, { size: "medium-bold", children: title }), _jsx(Score, { ...currentSensitivity }), _jsx(Score, { ...currentSpecificity }), _jsxs(Dropdown, { value: selectedItem, onChange: handleDropdownChange, sx: { width: '258px' }, children: [optionTitle && _jsx(DropdownSubtitle, { label: optionTitle }), options.map((option) => {
                        return (_jsx(DropdownItem, { value: option.target.annotation.dimension, children: option.title }, option.target.annotation.dimension));
                    })] }), _jsx(Button, { id: "update-threshold-config-btn", label: "Update Configuration", sx: {
                    width: '100%',
                }, disabled: !isModelTypeChanged, onClick: handleUpdateConfiguration }), description && description.length && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description }))] }));
};
export default ModelType;