@lunit/oui 2.2.30 → 2.3.0

package/dist/presentations/AnalysisBar/AnalysisBar.d.ts

@@ -1,3 +1,3 @@
 import type { AnalysisBarProps } from './AnalysisBar.types';
-declare const AnalysisBar: ({ componentType, expressionValue, caption, expressionLevels, segments, isDimmed, }: AnalysisBarProps) => import("react/jsx-runtime").JSX.Element;
+declare const AnalysisBar: ({ componentType, expressionValue, caption, expressionLevels, expressionLabels, segments, isDimmed, }: AnalysisBarProps) => import("react/jsx-runtime").JSX.Element;
 export default AnalysisBar;

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -17,7 +17,7 @@ const Segments = ({ segments, adjustForOnePercent }) => {
             return (_jsx(GraphSegment, { color: segment.color, width: adjustForOnePercent ? adjustBarSegmentWidth(segment.width) : segment.width }, i));
         }) }));
 };
-const AnalysisBar = ({ componentType = 'analysisBar', expressionValue, caption, expressionLevels = [], segments, isDimmed = false, }) => {
+const AnalysisBar = ({ componentType = 'analysisBar', expressionValue, caption, expressionLevels = [], expressionLabels = [], segments, isDimmed = false, }) => {
     if (!componentType)
         throw new Error("The 'componentType' prop is required.");
     if (!expressionLevels.length)
@@ -25,7 +25,7 @@ const AnalysisBar = ({ componentType = 'analysisBar', expressionValue, caption,
     const hasAdjustedOnePercentSegment = segments?.[0].width === 1;
     return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { adjustForOnePercent: hasAdjustedOnePercentSegment, value: expressionValue, isJet: segments?.[0].color === 'jet' })), _jsx(Segments, { segments: segments, adjustForOnePercent: hasAdjustedOnePercentSegment })] }), (expressionLevels.length > 0 || caption) && (_jsxs(AxisLabels, { children: [expressionLevels.length > 0 &&
                         expressionLevels.map((val, i) => {
-                            return (_jsx(GraphAxisLabel, { label: val, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: parseStringValToNumber(val) }, i));
+                            return (_jsx(GraphAxisLabel, { label: expressionLabels[i] || val, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: parseStringValToNumber(val) }, i));
                         }), caption && (_jsx(GraphAxisLabel, { label: caption, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: 50 }))] }))] }));
 };
 export default AnalysisBar;

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

@@ -7,5 +7,6 @@ export interface AnalysisBarProps {
         width: number;
     }[];
     expressionValue?: string;
+    expressionLabels?: string[];
     isDimmed?: boolean;
 }

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

@@ -0,0 +1,3 @@
+import { ModelTypeProps } from './ModelType.types';
+declare const ModelType: ({ componentType, title, optionTitle, scoreItems, currentSensitivity, currentSpecificity, userModelType, options, description, onChangeDropdown, onClickUpdateConfiguration, }: ModelTypeProps) => import("react/jsx-runtime").JSX.Element;
+export default ModelType;

package/dist/presentations/ModelType/ModelType.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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.");
+    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);
+    };
+    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;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/presentations/ModelType/ModelType.styled.js

@@ -0,0 +1,6 @@
+import { Box, styled } from '@mui/material';
+export const Container = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
+});

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

@@ -0,0 +1,31 @@
+import { SelectChangeEvent } from '@mui/material/Select';
+import { ScoreProps } from '../Score';
+interface ModelTypeOption {
+    title: string;
+    target: {
+        visualizationType: string;
+        annotation: {
+            name: string;
+            dimension: string;
+            color: string;
+        };
+    };
+    sensitivity: number;
+    specificity: number;
+}
+export interface ModelTypeSpec {
+    componentType: 'modelType';
+    title: string;
+    optionTitle?: string;
+    scoreItems: Record<string, ScoreProps[]>;
+    currentSensitivity: ScoreProps;
+    currentSpecificity: ScoreProps;
+    options: ModelTypeOption[];
+    userModelType: string;
+    description?: string;
+}
+export interface ModelTypeProps extends ModelTypeSpec {
+    onChangeDropdown: (event: SelectChangeEvent) => void;
+    onClickUpdateConfiguration: () => void;
+}
+export {};

package/dist/presentations/ModelType/ModelType.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+import ModelType from './ModelType';
+import type { ModelTypeProps, ModelTypeSpec } from './ModelType.types';
+export { ModelType };
+export type { ModelTypeProps, ModelTypeSpec };

package/dist/presentations/ModelType/index.js

@@ -0,0 +1,2 @@
+import ModelType from './ModelType';
+export { ModelType };

package/dist/presentations/Preview/ModelTypeControl.d.ts

@@ -0,0 +1,3 @@
+import { type ModelTypeProps } from '../ModelType';
+declare const ModelTypeControl: (modelType: ModelTypeProps) => import("react/jsx-runtime").JSX.Element;
+export default ModelTypeControl;

package/dist/presentations/Preview/ModelTypeControl.js

@@ -0,0 +1,28 @@
+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 ModelTypeControl = (modelType) => {
+    const [modelTypeState, setModelTypeState] = useState(modelType);
+    const updateModelType = useCallback((type) => {
+        const currentModelType = { ...modelType };
+        const currentSensitivity = currentModelType.options.find((option) => option.target.annotation.dimension === type)?.sensitivity;
+        const currentSpecificity = currentModelType.options.find((option) => option.target.annotation.dimension === type)?.specificity;
+        currentModelType.currentSensitivity.metrics.value = currentSensitivity?.toString() || '0.0';
+        currentModelType.currentSpecificity.metrics.value = currentSpecificity?.toString() || '0.0';
+        setModelTypeState(currentModelType);
+    }, [modelType]);
+    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');
+    }, [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: 'egfrBest', onChangeDropdown: onChangeDropdown, onClickUpdateConfiguration: onClickUpdateConfiguration }));
+};
+export default ModelTypeControl;

package/dist/presentations/Preview/Preview.js

@@ -13,6 +13,7 @@ import { Score } from '../Score';
 import { FreeText } from '../FreeText';
 import { Histogram } from '../Histogram';
 import ThresholdControl from './ThresholdControl';
+import ModelTypeControl from './ModelTypeControl';
 const Preview = ({ visualizationControls = [], analysisSummary = [] }) => {
     const [controls, setControls] = useState(visualizationControls);
     return (_jsxs(Container, { children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: visualizationControls.map((item, index) => {
@@ -55,6 +56,6 @@ const Preview = ({ visualizationControls = [], analysisSummary = [] }) => {
                         });
                     }
                     return (_jsxs(Box, { children: [item.componentType === 'toggle' && (_jsx(ToggleControl, { ...item }, uuidV4())), item.componentType === 'toggleGroup' && (_jsx(ToggleControlGroup, { ...item }, uuidV4())), item.componentType === 'analysisBar' && (_jsx(AnalysisBar, { ...item }, uuidV4()))] }, uuidV4()));
-                }) }), _jsx(HorizonDivider, { componentType: "divider" }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: [_jsx(FreeText, { componentType: "freeText", size: "medium-bold", content: "Analysis Summary" }), analysisSummary.map((item) => (_jsxs(Box, { children: [item.componentType === 'accordion' && (_jsx(Accordion, { ...item }, uuidV4())), item.componentType === 'analysisBar' && (_jsx(AnalysisBar, { ...item }, uuidV4())), item.componentType === 'statistic' && (_jsx(Statistic, { ...item }, uuidV4())), item.componentType === 'score' && (_jsx(Score, { ...item }, uuidV4())), item.componentType === 'freeText' && (_jsx(FreeText, { ...item }, uuidV4())), item.componentType === 'threshold' && (_jsx(ThresholdControl, { ...item }, uuidV4())), item.componentType === 'histogram' && (_jsx(Histogram, { ...item }, uuidV4()))] }, uuidV4())))] })] }));
+                }) }), _jsx(HorizonDivider, { componentType: "divider" }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: [_jsx(FreeText, { componentType: "freeText", size: "medium-bold", content: "Analysis Summary" }), analysisSummary.map((item) => (_jsxs(Box, { children: [item.componentType === 'accordion' && (_jsx(Accordion, { ...item }, uuidV4())), item.componentType === 'analysisBar' && (_jsx(AnalysisBar, { ...item }, uuidV4())), item.componentType === 'statistic' && (_jsx(Statistic, { ...item }, uuidV4())), item.componentType === 'score' && (_jsx(Score, { ...item }, uuidV4())), item.componentType === 'freeText' && (_jsx(FreeText, { ...item }, uuidV4())), item.componentType === 'threshold' && (_jsx(ThresholdControl, { ...item }, uuidV4())), item.componentType === 'histogram' && (_jsx(Histogram, { ...item }, uuidV4())), item.componentType === 'modelType' && (_jsx(ModelTypeControl, { ...item }, uuidV4()))] }, uuidV4())))] })] }));
 };
 export default Preview;

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

@@ -7,8 +7,9 @@ import { AnalysisBarProps } from '../AnalysisBar';
 import { FreeTextProps } from '../FreeText';
 import { ThresholdProps } from '../Threshold';
 import { HistogramProps } from '../Histogram';
+import { ModelTypeProps } from '../ModelType';
 interface PreviewProps {
     visualizationControls: (ToggleControlProps | ToggleControlGroupProps | AnalysisBarProps)[];
-    analysisSummary: (AccordionProps | AnalysisBarProps | StatisticProps | ScoreProps | FreeTextProps | ThresholdProps | HistogramProps)[];
+    analysisSummary: (AccordionProps | AnalysisBarProps | StatisticProps | ScoreProps | FreeTextProps | ThresholdProps | HistogramProps | ModelTypeProps)[];
 }
 export type { PreviewProps };

package/dist/presentations/Score/Score.js

@@ -10,6 +10,6 @@ const Score = ({ componentType = 'score', title, size = 'medium', metrics }) =>
         throw new Error("The 'title' prop is required.");
     if (!metrics)
         throw new Error("The 'metrics' prop is required.");
-    return (_jsxs(PresentationTypography, { size: size, style: { color: metrics.isFullColored ? metrics.color : 'inherit' }, children: [title, ": ", metrics.value, metrics.scoreType && (_jsx("span", { style: { color: metrics.color, marginLeft: 4 }, children: capitalize(metrics.scoreType) }))] }));
+    return (_jsx(PresentationTypography, { size: size, children: _jsxs("span", { style: { color: metrics.isFullColored ? metrics.color : 'inherit' }, children: [title, ": ", metrics.value, metrics.scoreType && (_jsx("span", { style: { color: metrics.color, marginLeft: 4 }, children: capitalize(metrics.scoreType) }))] }) }));
 };
 export default Score;

package/dist/presentations/Threshold/Threshold.js

@@ -25,7 +25,9 @@ const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells,
     const marks = getSliderMarks(presetValue);
     const handleDropdownChange = (event) => {
         onChangeDropdown(event);
-        setSelectedOptionValue(options.find((option) => option.title === event.target.value)?.value);
+        const newOption = options.find((option) => option.title === event.target.value)?.value;
+        setSelectedOptionValue(newOption);
+        setIsThresholdChanged(false);
     };
     const handleSliderChange = (event, value) => {
         onChangeSlider(event, value);

package/dist/presentations/ToggleControl/ToggleControl.js

@@ -22,6 +22,6 @@ const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbo
     return (_jsxs(ToggleControlOuter, { "data-toggle-name": `toggle-control-${title?.replace(/\s/g, '-')}`, hasBar: !!bar || !!content.length, style: { marginBottom: isParent ? '4px' : '0' }, children: [_jsxs(ToggleControlContainer, { className: "toggle-inner-container", size: size, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: '6px' }, className: "toggle-label", children: [!!tooltip.length && (_jsx(Tooltip, { arrow: true, size: "large", title: _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: tooltip.map((item) => (_jsxs(Box, { children: [item.componentType === 'freeText' && (_jsx(FreeText, { componentType: item.componentType, size: item.size, content: item.content })), item.componentType === 'statistic' && (_jsx(Statistic, { componentType: item.componentType, title: item.title, size: item.size, layout: item.layout, symbol: item.symbol, color: item.color }))] }, uuidV4()))) }), children: _jsx(Box, { sx: {
                                         display: 'flex',
                                         alignItems: 'center',
-                                    }, children: _jsx(Information, {}) }) })), symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color, isDimmed: isDimmed || !checked })), _jsx(PresentationTypography, { size: size, isDimmed: isDimmed || !checked, children: title })] }), _jsx(StyledToggle, { disabled: disabled || isDimmed, checked: checked, toggleColor: theme.palette.lunitTeal[70], onChange: onChange })] }), content.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: content.map((item) => (_jsx(Statistic, { ...item, isDimmed: isDimmed || !checked }, uuidV4()))) }, uuidV4())), bar && (_jsx(Box, { sx: { padding: '0 8px', fontSize: '14px', lineHeight: '8px' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !checked, componentType: bar.componentType, expressionValue: bar.expressionValue, expressionLevels: bar.expressionLevels, caption: bar.caption, segments: bar.segments }) }))] }));
+                                    }, children: _jsx(Information, {}) }) })), symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color, isDimmed: isDimmed || !checked })), _jsx(PresentationTypography, { size: size, isDimmed: isDimmed || !checked, children: title })] }), _jsx(StyledToggle, { disabled: disabled || isDimmed, checked: checked, toggleColor: theme.palette.lunitTeal[70], onChange: onChange })] }), content.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: content.map((item) => (_jsx(Statistic, { ...item, isDimmed: isDimmed || !checked }, uuidV4()))) }, uuidV4())), bar && (_jsx(Box, { sx: { padding: '0 8px', fontSize: '14px', lineHeight: '8px' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !checked, componentType: bar.componentType, expressionValue: bar.expressionValue, expressionLevels: bar.expressionLevels, expressionLabels: bar.expressionLabels, caption: bar.caption, segments: bar.segments }) }))] }));
 };
 export default ToggleControl;

package/dist/presentations/index.d.ts

@@ -3,6 +3,7 @@ export * from './AnalysisBar';
 export * from './FreeText';
 export * from './Histogram';
 export * from './HorizonDivider';
+export * from './ModelType';
 export * from './Preview';
 export * from './Score';
 export * from './Statistic';

package/dist/presentations/index.js

@@ -3,6 +3,7 @@ export * from './AnalysisBar';
 export * from './FreeText';
 export * from './Histogram';
 export * from './HorizonDivider';
+export * from './ModelType';
 export * from './Preview';
 export * from './Score';
 export * from './Statistic';

package/dist/presentations/presentations.styled.js

@@ -19,7 +19,7 @@ export const PresentationTypography = (props) => {
         return (_jsx(Typography, { variant: "h9", ...rest, style: { color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
     }
     // Fallback to medium size
-    return (_jsx(Typography, { variant: "body5", ...rest, sx: { color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
+    return (_jsx(Typography, { variant: "body5", ...rest, style: { color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
 };
 export const PresentationSymbolIcon = ({ symbol, color = 'black', isDimmed = false, }) => {
     const symbolColor = color?.length ? color : 'black';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.2.30",
+  "version": "2.3.0",
   "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)"