@lunit/oui 2.4.8 → 2.4.9

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -9,7 +9,7 @@ const Segments = ({ segments, isCutoff }) => {
         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, {}) }));

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/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.9",
   "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",