@lunit/oui 2.3.4 → 2.3.5

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { AnalysisBarSegmentContainer, AnalysisBarOuter, AxisLabels, GraphAxisLabel, GraphScoreIndicator, GraphSegment, } from './AnalysisBar.styled';
-import { adjustBarSegmentWidth, parseStringValToNumber } from './AnalysisBar.utils';
+import { parseStringValToNumber } from './AnalysisBar.utils';
 import HeatmapGraphSVG from './HeatmapGraphIcon/HeatmapGraphSVG';
 const Segments = ({ segments, adjustForOnePercent }) => {
     if (!segments) {
         return null;
     }
+    const combinedWidth = segments.length > 1 ? segments[0].width + segments[1].width : 0;
     if (segments?.length === 1 && segments[0].color === 'jet') {
         return (_jsx(Box, { sx: { width: '100%', height: '14px', transform: 'scaleY(0.8)' }, children: _jsx(HeatmapGraphSVG, {}) }));
     }
@@ -14,7 +15,7 @@ const Segments = ({ segments, adjustForOnePercent }) => {
             if (segment.color === 'jet') {
                 return _jsx(HeatmapGraphSVG, { width: `${segment.width}%` });
             }
-            return (_jsx(GraphSegment, { color: segment.color, width: adjustForOnePercent ? adjustBarSegmentWidth(segment.width) : segment.width }, i));
+            return (_jsx(GraphSegment, { color: segment.color, hasAdjustedOnePercentSegment: adjustForOnePercent, isOnePercentSegment: segment.width <= 1, combinedWidth: combinedWidth, width: segment.width, isNextSegment: i === 1 }, i));
         }) }));
 };
 const AnalysisBar = ({ componentType = 'analysisBar', expressionValue, caption, expressionLevels = [], expressionLabels = [], segments, isDimmed = false, }) => {
@@ -22,10 +23,11 @@ const AnalysisBar = ({ componentType = 'analysisBar', expressionValue, caption,
         throw new Error("The 'componentType' prop is required.");
     if (!expressionLevels.length)
         throw new Error("The 'expressionLevels' prop must contain at least one item.");
-    const hasAdjustedOnePercentSegment = segments?.[0].width === 1;
+    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: expressionLabels[i] || val, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: parseStringValToNumber(val) }, i));
+                            const adjustedForOnePercent = +val <= 1 && +val > 0;
+                            return (_jsx(GraphAxisLabel, { label: expressionLabels[i] || val, adjustForOnePercent: adjustedForOnePercent, leftPos: parseStringValToNumber(val) }, i));
                         }), caption && (_jsx(GraphAxisLabel, { label: caption, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: 50 }))] }))] }));
 };
 export default AnalysisBar;

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

@@ -27,6 +27,10 @@ interface GraphSegmentProps {
     color: string | undefined;
     width: number;
     square?: boolean;
+    hasAdjustedOnePercentSegment?: boolean;
+    combinedWidth?: number;
+    isNextSegment?: boolean;
+    isOnePercentSegment?: boolean;
 }
 export declare const GraphSegment: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & GraphSegmentProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export {};

package/dist/presentations/AnalysisBar/AnalysisBar.styled.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, styled, Typography } from '@mui/material';
-import { adjustBarLabelPosition, clampBarLabelPosition, parseStringValToNumber, } from './AnalysisBar.utils';
+import { clampBarLabelPosition, parseStringValToNumber } from './AnalysisBar.utils';
 export const AnalysisBarOuter = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'isDimmed',
 })(({ isDimmed }) => ({
@@ -42,12 +42,12 @@ const GraphScoreIndicatorPip = styled('span')(() => {
     };
 });
 export const GraphScoreIndicator = ({ value, adjustForOnePercent, isJet, }) => {
-    let leftPos = parseStringValToNumber(value);
-    if (adjustForOnePercent) {
-        leftPos = adjustBarLabelPosition(leftPos);
+    let leftPos = `${parseStringValToNumber(value)}%`;
+    if (adjustForOnePercent && +value <= 1) {
+        leftPos = '12px';
     }
     return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: {
-            left: `${leftPos}%`,
+            left: leftPos,
             transform: isJet ? 'translateX(-50%) translateY(8px)' : 'translateX(-50%)',
         }, isJet: isJet, children: [_jsx(Typography, { variant: "small_body_sb1", sx: { textAlign: 'center' }, children: value }), _jsx(GraphScoreIndicatorPip, {})] }));
 };
@@ -64,7 +64,7 @@ const GraphAxisLabelContainer = styled('span')(() => {
 export const GraphAxisLabel = ({ label, leftPos, adjustForOnePercent, }) => {
     const getLeft = (value, adjustForOnePercent) => {
         if (adjustForOnePercent) {
-            return `${adjustBarLabelPosition(value)}%`;
+            return '12px';
         }
         return `${clampBarLabelPosition(value)}%`;
     };
@@ -89,20 +89,43 @@ export const AnalysisBarCaption = ({ label }) => {
             width: 'auto',
         }, className: "analysis-bar-caption", children: _jsx(Typography, { variant: "small_body_m5", sx: { textAlign: 'center' }, children: label }) }));
 };
-const segmentStyle = (color, width, square) => {
-    return {
+const segmentStyle = (color, width, square, hasAdjustedOnePercentSegment, combinedWidth, isNextSegment, isOnePercentSegment) => {
+    const baseStyle = {
         backgroundColor: color,
-        width: `${width}%`,
         height: '8px',
         borderRadius: square ? '0px' : '12px',
     };
+    if (isOnePercentSegment) {
+        return {
+            ...baseStyle,
+            width: '12px',
+            minWidth: '12px',
+            maxWidth: '12px',
+        };
+    }
+    else {
+        return {
+            ...baseStyle,
+            width: hasAdjustedOnePercentSegment && isNextSegment
+                ? `calc(${combinedWidth}% - 12px)`
+                : `${width}%`,
+        };
+    }
 };
 export const GraphSegment = styled('span', {
-    shouldForwardProp: (prop) => !['color', 'width', 'square'].includes(prop.toString()),
-})(({ color, width, square }) => {
+    shouldForwardProp: (prop) => ![
+        'color',
+        'width',
+        'square',
+        'hasAdjustedOnePercentSegment',
+        'combinedWidth',
+        'isNextSegment',
+        'isOnePercentSegment',
+    ].includes(prop.toString()),
+})(({ color, width, square, hasAdjustedOnePercentSegment, combinedWidth, isNextSegment, isOnePercentSegment, }) => {
     // cover undefined and empty string
     const barColor = color && color.length ? color : 'red';
     return {
-        ...segmentStyle(barColor, width, square ?? false), // fallback color
+        ...segmentStyle(barColor, width, square ?? false, hasAdjustedOnePercentSegment ?? false, combinedWidth ?? 0, isNextSegment ?? false, isOnePercentSegment ?? false), // fallback color
     };
 });

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

@@ -1,5 +1,3 @@
 export declare function parseStringValToNumber(val: string): number;
-export declare function adjustBarSegmentWidth(value: number): number;
-export declare function adjustBarLabelPosition(value: number): number;
 export declare function clampNumericalPercentage(value: number): number;
 export declare function clampBarLabelPosition(value: number): number;

package/dist/presentations/AnalysisBar/AnalysisBar.utils.js

@@ -2,22 +2,6 @@ export function parseStringValToNumber(val) {
     const value = val.endsWith('%') ? val.slice(0, -1) : val;
     return parseInt(value, 10);
 }
-export function adjustBarSegmentWidth(value) {
-    if (value === 0)
-        return 0;
-    const adjusted = Math.floor((value / 100) * 97);
-    return adjusted + 4;
-}
-export function adjustBarLabelPosition(value) {
-    if (value === 0)
-        return 1;
-    if (value === 1)
-        return 4;
-    if (value === 100)
-        return 98;
-    const adjusted = Math.floor((value / 100) * 93);
-    return adjusted + 6;
-}
 export function clampNumericalPercentage(value) {
     if (value >= 100)
         return 100;

package/dist/presentations/ModelType/ModelType.js

@@ -20,6 +20,11 @@ const ModelType = ({ componentType = 'modelType', title, optionTitle, scoreItems
         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) => {

package/dist/presentations/Preview/ModelTypeControl.js

@@ -14,8 +14,9 @@ const ModelTypeControl = (modelType) => {
     const [memberExtraProperties, setMemberExtraProperties] = useState(initialMemberExtraProperties);
     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;
+        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);

package/package.json

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