@lunit/oui 2.4.8 → 2.4.10

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -2,14 +2,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { findIndex as _findIndex } from 'lodash';
 import { Box } from '@mui/material';
 import { AnalysisBarSegmentContainer, AnalysisBarOuter, AxisLabels, GraphAxisLabel, GraphScoreIndicator, GraphSegment, } from './AnalysisBar.styled';
-import { parseStringValToNumber } from './AnalysisBar.utils';
+import { parseStringValToNumber, normalizeSegmentWidths } from './AnalysisBar.utils';
 import HeatmapGraphSVG from './HeatmapGraphIcon/HeatmapGraphSVG';
 const Segments = ({ segments, isCutoff }) => {
     if (!segments) {
         return null;
     }
     const validSegments = segments.filter((segment) => segment.width > 0);
-    const combinedWidth = segments.length > 1 ? segments[0].width + segments[1].width : 0;
+    const combinedWidth = segments.reduce((sum, segment) => sum + segment.width, 0);
     const onePercentSegmentIndex = _findIndex(segments, (segment) => segment.width > 0 && segment.width <= 1);
     if (segments?.length === 1 && segments[0].color === 'jet') {
         return (_jsx(Box, { sx: { width: '100%', height: '14px', transform: 'scaleY(0.8)' }, children: _jsx(HeatmapGraphSVG, {}) }));
@@ -18,7 +18,7 @@ const Segments = ({ segments, isCutoff }) => {
             if (segment.color === 'jet') {
                 return _jsx(HeatmapGraphSVG, { width: `${segment.width}%` });
             }
-            return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === segments.length - 1, isCutoff: isCutoff, combinedWidth: combinedWidth, isNextSegment: onePercentSegmentIndex >= 0 && i === onePercentSegmentIndex + 1, isOnePercentSegment: segment.width <= 1 }, i));
+            return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === validSegments.length - 1, isCutoff: isCutoff, combinedWidth: combinedWidth, isNextSegment: onePercentSegmentIndex >= 0 && i === onePercentSegmentIndex + 1, isOnePercentSegment: segment.width <= 1 }, i));
         }) }));
 };
 const AnalysisBar = ({ componentType = 'analysisBar', isCutoff = false, expressionValue, caption, expressionLevels = [], expressionLabels = [], segments, isDimmed = false, }) => {
@@ -26,8 +26,8 @@ const AnalysisBar = ({ componentType = 'analysisBar', isCutoff = false, expressi
         throw new Error("The 'componentType' prop is required.");
     if (!expressionLevels.length)
         throw new Error("The 'expressionLevels' prop must contain at least one item.");
-    const validSegments = segments.filter((segment) => segment.width > 0);
-    return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { value: expressionValue, isCutoff: isCutoff, isJet: segments?.[0].color === 'jet' })), _jsx(Segments, { segments: validSegments, isCutoff: isCutoff })] }), (expressionLevels.length > 0 || caption) && (_jsxs(AxisLabels, { children: [expressionLevels.length > 0 &&
+    const normalizedSegments = normalizeSegmentWidths(segments, isCutoff);
+    return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { value: expressionValue, isCutoff: isCutoff, isJet: normalizedSegments?.[0]?.color === 'jet' })), _jsx(Segments, { segments: normalizedSegments, isCutoff: isCutoff })] }), (expressionLevels.length > 0 || caption) && (_jsxs(AxisLabels, { children: [expressionLevels.length > 0 &&
                         expressionLevels.map((val, i) => {
                             return (_jsx(GraphAxisLabel, { label: expressionLabels[i] || val, isCutoff: isCutoff, leftPos: parseStringValToNumber(val) }, i));
                         }), caption && (_jsx(GraphAxisLabel, { label: caption, isCutoff: isCutoff, leftPos: 50 }))] }))] }));

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

@@ -105,7 +105,7 @@ const segmentStyle = (color, width, isFirstSegment, isLastSegment, isCutoff, com
         borderBottomRightRadius: isLastSegment ? '2px' : '0px',
         width: `${width}%`,
     };
-    if (isOnePercentSegment) {
+    if (isOnePercentSegment && isCutoff) {
         return {
             ...baseStyle,
             width: '12px',

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

@@ -1,3 +1,16 @@
 export declare function parseStringValToNumber(val: string): number;
 export declare function clampNumericalPercentage(value: number): number;
 export declare function clampBarLabelPosition(value: number): number;
+/**
+ * @description normalizeSegmentWidths is a function that normalizes the width of the segments in the analysis bar.
+ * @param segments - The segments to normalize.
+ * @param isCutoff - Whether the analysis bar is a cutoff.
+ * @returns The normalized segments.
+ */
+export declare function normalizeSegmentWidths(segments: {
+    color: 'jet' | string;
+    width: number;
+}[], isCutoff?: boolean): {
+    color: 'jet' | string;
+    width: number;
+}[];

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

@@ -16,3 +16,44 @@ export function clampBarLabelPosition(value) {
         return 1;
     return value;
 }
+const round = (value) => Math.round(value * 10) / 10;
+/**
+ * @description normalizeSegmentWidths is a function that normalizes the width of the segments in the analysis bar.
+ * @param segments - The segments to normalize.
+ * @param isCutoff - Whether the analysis bar is a cutoff.
+ * @returns The normalized segments.
+ */
+export function normalizeSegmentWidths(segments, isCutoff) {
+    if (isCutoff)
+        return segments;
+    let validSegments = segments
+        .map((segment) => ({ ...segment, width: round(segment.width) }))
+        .filter((segment) => segment.width > 0);
+    if (validSegments.length === 0)
+        return [];
+    const normalize = (segments) => {
+        const total = segments.reduce((sum, s) => sum + s.width, 0);
+        if (total === 0 || Math.abs(total - 100) < 0.1)
+            return segments;
+        const normalized = segments.map((segment) => ({
+            ...segment,
+            width: round((segment.width / total) * 100),
+        }));
+        const normalizedTotal = normalized.reduce((sum, s) => sum + s.width, 0);
+        const difference = 100 - normalizedTotal;
+        if (normalized.length > 0 && Math.abs(difference) > 0.01) {
+            const lastIndex = normalized.length - 1;
+            normalized[lastIndex] = {
+                ...normalized[lastIndex],
+                width: round(normalized[lastIndex].width + difference),
+            };
+        }
+        return normalized;
+    };
+    validSegments = normalize(validSegments);
+    const filtered = validSegments.filter((segment) => segment.width > 0);
+    if (filtered.length < validSegments.length && filtered.length > 0) {
+        return normalize(filtered);
+    }
+    return filtered;
+}

package/dist/presentations/Threshold/Threshold.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { v4 as uuidV4 } from 'uuid';
 import { Box } from '@mui/material';
 import { BaseSlider, Container } from './Threshold.styled';
@@ -20,22 +20,23 @@ const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells,
     if (!options.length)
         throw new Error("The 'options' prop must contain at least one item.");
     const [isThresholdChanged, setIsThresholdChanged] = useState(false);
-    const [selectedOptionValue, setSelectedOptionValue] = useState(options[0].value);
+    const selectedOptionValue = useMemo(() => {
+        return (options.find((option) => option.title === thresholdState?.selectedItem)?.value ||
+            options[0].value);
+    }, [options, thresholdState?.selectedItem]);
     const presetValue = getPresetValue(options, thresholdState?.selectedItem);
-    const handleDropdownChange = (event) => {
+    const handleDropdownChange = useCallback((event) => {
         onChangeDropdown(event);
-        const newOption = options.find((option) => option.title === event.target.value)?.value;
-        setSelectedOptionValue(newOption);
         setIsThresholdChanged(false);
-    };
-    const handleSliderChange = (event, value) => {
+    }, [onChangeDropdown]);
+    const handleSliderChange = useCallback((event, value) => {
         onChangeSlider(event, value);
         setIsThresholdChanged(value !== selectedOptionValue);
-    };
-    const handleUpdateConfiguration = () => {
+    }, [onChangeSlider, selectedOptionValue]);
+    const handleUpdateConfiguration = useCallback(() => {
         onClickUpdateConfiguration();
         setIsThresholdChanged(false);
-    };
+    }, [onClickUpdateConfiguration]);
     return (_jsxs(Container, { children: [_jsx(Score, { ...totalScore }), _jsx(Statistic, { ...totalCells }), statisticItems.map((item) => {
                 return (_jsx(Statistic, { ...item }, uuidV4()));
             }), _jsx(HorizonDivider, { componentType: "divider" }), _jsx(PresentationTypography, { size: "medium", children: title }), _jsx(Dropdown, { value: thresholdState?.selectedItem, onChange: handleDropdownChange, sx: { width: '258px' }, children: options.map((option) => {

package/dist/presentations/ToggleControl/ToggleControl.js

@@ -22,6 +22,6 @@ const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbo
     return (_jsxs(ToggleControlOuter, { "data-testid": `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, expressionLabels: bar.expressionLabels, 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', width: '100%' }, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.4.8",
+  "version": "2.4.10",
   "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)"
@@ -11,7 +11,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@lunit/design-system-icons": "^2.1.0",
-    "@lunit/design-system-logo": "^1.1.0",
+    "@lunit/design-system-logo": "1.1.1",
     "@mui/icons-material": "^5.15.2",
     "@mui/lab": "^5.0.0-alpha.158",
     "@mui/material": "^5.15.2",