@lunit/oui 2.3.2 → 2.3.4

package/dist/presentations/ModelType/ModelType.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { v4 as uuidV4 } from 'uuid';
 import { Score } from '../Score';
 import { Container } from './ModelType.styled';
@@ -32,6 +32,9 @@ const ModelType = ({ componentType = 'modelType', title, optionTitle, scoreItems
         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) => {

package/dist/presentations/ModelType/ModelType.types.d.ts

@@ -11,6 +11,7 @@ interface ModelTypeOption {
         };
     };
     key: string;
+    value: number;
     sensitivity: number;
     specificity: number;
 }

package/dist/presentations/Preview/ModelTypeControl.js

@@ -2,9 +2,16 @@ 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 currentSensitivity = currentModelType.options.find((option) => option.target.annotation.dimension === type)?.sensitivity;
@@ -13,12 +20,26 @@ const ModelTypeControl = (modelType) => {
         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 item = _find(modelType.options, ['target.annotation.dimension', 'egfrBest']);
-        console.log(`default item: pixelAnnotations.${item?.target.annotation.name}.${item?.target.annotation.dimension}`);
-        updateModelType('egfrBest');
-        setSelectedItem('egfrBest');
-    }, [updateModelType]);
+        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}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"