@lunit/oui
Version:
Lunit Oncology UI components
53 lines (52 loc) • 2.56 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from 'react';
import { find as _find } from 'lodash';
import { ModelType } from '../ModelType';
const initialMemberExtraProperties = {
egfrPredictionThreshold: {
type: 'EGFR_BEST',
value: 60,
},
};
const ModelTypeControl = (modelType) => {
const [modelTypeState, setModelTypeState] = useState(modelType);
const [selectedItem, setSelectedItem] = useState('egfrBest');
const [memberExtraProperties, setMemberExtraProperties] = useState(initialMemberExtraProperties);
const updateModelType = useCallback((type) => {
const currentModelType = { ...modelType };
const currentModel = currentModelType.options.find((option) => option.target.annotation.dimension === type);
const currentSensitivity = currentModel?.sensitivity;
const currentSpecificity = currentModel?.specificity;
currentModelType.currentSensitivity.metrics.value = currentSensitivity?.toString() || '0.0';
currentModelType.currentSpecificity.metrics.value = currentSpecificity?.toString() || '0.0';
setModelTypeState(currentModelType);
}, [modelType]);
// Update memberExtraProperties after 1 second
useEffect(() => {
const timer = setTimeout(() => {
setMemberExtraProperties({
egfrPredictionThreshold: {
type: 'MAX_SENSITIVITY',
value: 21,
},
});
}, 1000);
return () => clearTimeout(timer);
}, []);
// useEffect when memberExtraProperties is updated
useEffect(() => {
const dimension = modelType.options.find((option) => {
return option.key === memberExtraProperties.egfrPredictionThreshold.type;
})?.target.annotation.dimension;
updateModelType(dimension);
setSelectedItem(dimension);
}, [modelType.options, memberExtraProperties, updateModelType]);
const onChangeDropdown = (event) => {
const item = _find(modelType.options, ['target.annotation.dimension', event.target.value]);
console.log(`pixelAnnotations.${item?.target.annotation.name}.${item?.target.annotation.dimension}`);
updateModelType(event.target.value);
};
const onClickUpdateConfiguration = () => { };
return (_jsx(ModelType, { ...modelTypeState, userModelType: selectedItem, onChangeDropdown: onChangeDropdown, onClickUpdateConfiguration: onClickUpdateConfiguration }));
};
export default ModelTypeControl;