@lunit/oui 2.2.2 → 2.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/presentations/Preview/Preview.js +43 -1
- package/dist/presentations/Threshold/Threshold.d.ts +1 -1
- package/dist/presentations/Threshold/Threshold.js +10 -2
- package/dist/presentations/Threshold/Threshold.types.d.ts +2 -0
- package/dist/presentations/Threshold/index.d.ts +2 -2
- package/dist/presentations/ToggleControl/ToggleControl.js +2 -8
- package/dist/presentations/ToggleControlGroup/ToggleControlGroup.js +2 -48
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { v4 as uuidV4 } from 'uuid';
|
|
3
4
|
import { Container } from './Preview.styled';
|
|
4
5
|
import { Box } from '@mui/material';
|
|
@@ -13,6 +14,47 @@ import { FreeText } from '../FreeText';
|
|
|
13
14
|
import { Threshold } from '../Threshold';
|
|
14
15
|
import { Histogram } from '../Histogram';
|
|
15
16
|
const Preview = ({ visualizationControls = [], analysisSummary = [] }) => {
|
|
16
|
-
|
|
17
|
+
const [controls, setControls] = useState(visualizationControls);
|
|
18
|
+
return (_jsxs(Container, { children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: visualizationControls.map((item, index) => {
|
|
19
|
+
if (item.componentType === 'toggleGroup') {
|
|
20
|
+
item.onChange = (event) => {
|
|
21
|
+
item.checked = event.target.checked;
|
|
22
|
+
const newControls = [...controls];
|
|
23
|
+
newControls[index] = item;
|
|
24
|
+
if (!item.checked) {
|
|
25
|
+
item.childToggles.map((child) => {
|
|
26
|
+
child.isDimmed = true;
|
|
27
|
+
child.disabled = true;
|
|
28
|
+
return child;
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
item.childToggles.map((child) => {
|
|
33
|
+
child.isDimmed = false;
|
|
34
|
+
child.disabled = false;
|
|
35
|
+
return child;
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
newControls[index].childToggles = item.childToggles;
|
|
39
|
+
setControls(newControls);
|
|
40
|
+
};
|
|
41
|
+
item.childToggles.map((child) => {
|
|
42
|
+
child.onChange = (event) => {
|
|
43
|
+
if (item.behavior === 'exclusive') {
|
|
44
|
+
item.childToggles.map((child) => {
|
|
45
|
+
child.checked = false;
|
|
46
|
+
return child;
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
child.checked = event.target.checked;
|
|
50
|
+
const newControls = [...controls];
|
|
51
|
+
newControls[index].childToggles = item.childToggles;
|
|
52
|
+
setControls(newControls);
|
|
53
|
+
};
|
|
54
|
+
return child;
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
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()));
|
|
58
|
+
}) }), _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(Threshold, { ...item }, uuidV4())), item.componentType === 'histogram' && (_jsx(Histogram, { ...item }, uuidV4()))] }, uuidV4())))] })] }));
|
|
17
59
|
};
|
|
18
60
|
export default Preview;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ThresholdProps } from './Threshold.types';
|
|
2
|
-
declare const Threshold: ({ componentType, title, totalScore, totalCells, statisticItems, options, description, controlStep, onChangeDropdown, onSliderChangeCommitted, }: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const Threshold: ({ componentType, title, totalScore, totalCells, statisticItems, options, description, controlStep, isLoading, onChangeDropdown, onSliderChangeCommitted, onClickUpdateConfiguration, }: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Threshold;
|
|
@@ -10,20 +10,28 @@ import { Button, Dropdown, DropdownItem } from '../../components';
|
|
|
10
10
|
import { HorizonDivider } from '../HorizonDivider';
|
|
11
11
|
import { FreeText } from '../FreeText';
|
|
12
12
|
import { getPresetValue, getSliderMarks } from './Threshold.utils';
|
|
13
|
-
const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, onChangeDropdown, onSliderChangeCommitted, }) => {
|
|
13
|
+
const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, isLoading = false, onChangeDropdown, onSliderChangeCommitted, onClickUpdateConfiguration, }) => {
|
|
14
14
|
const [selectedItem, setSelectedItem] = useState(options[0].title.toString());
|
|
15
15
|
const [selectedValue, setSelectedValue] = useState(options[0].value);
|
|
16
|
+
const [selectedOptionValue, setSelectedOptionValue] = useState(options[0].value);
|
|
16
17
|
const [isPresetSelected, setIsPresetSelected] = useState(options[0].isPreset);
|
|
18
|
+
const [isThresholdChanged, setIsThresholdChanged] = useState(false);
|
|
17
19
|
const presetValue = getPresetValue(options, selectedItem);
|
|
18
20
|
const marks = getSliderMarks(presetValue);
|
|
19
21
|
const handleChange = (event) => {
|
|
20
22
|
setSelectedItem(event.target.value);
|
|
21
23
|
setSelectedValue(options.find((option) => option.title === event.target.value)?.value);
|
|
24
|
+
setSelectedOptionValue(options.find((option) => option.title === event.target.value)?.value);
|
|
22
25
|
setIsPresetSelected(options.find((option) => option.title === event.target.value)?.isPreset || false);
|
|
23
26
|
onChangeDropdown(event);
|
|
24
27
|
};
|
|
25
28
|
const handleSliderChange = (event, value) => {
|
|
26
29
|
setSelectedValue(value);
|
|
30
|
+
setIsThresholdChanged(value !== selectedOptionValue);
|
|
31
|
+
};
|
|
32
|
+
const handleUpdateConfiguration = () => {
|
|
33
|
+
onClickUpdateConfiguration();
|
|
34
|
+
setIsThresholdChanged(false);
|
|
27
35
|
};
|
|
28
36
|
return (_jsxs(Container, { children: [_jsx(Score, { ...totalScore }), _jsx(Statistic, { ...totalCells }), statisticItems.map((item) => {
|
|
29
37
|
return (_jsx(Statistic, { ...item }, uuidV4()));
|
|
@@ -31,6 +39,6 @@ const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells,
|
|
|
31
39
|
return (_jsx(DropdownItem, { value: option.title, children: option.title }, option.title));
|
|
32
40
|
}) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', paddingTop: '36px', gap: '6px' }, children: [_jsx(BaseSlider, { disabled: isPresetSelected, step: controlStep, value: selectedValue, valueLabelDisplay: "on", defaultThreshold: presetValue, marks: marks, onChange: handleSliderChange, onChangeCommitted: onSliderChangeCommitted }), !isPresetSelected && (_jsx(Button, { label: "Update Configuration", sx: {
|
|
33
41
|
width: '100%',
|
|
34
|
-
} })), isPresetSelected && description?.preset && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.preset })), !isPresetSelected && description?.user && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.user }))] })] }));
|
|
42
|
+
}, disabled: !isThresholdChanged || isLoading, onClick: handleUpdateConfiguration, loading: isLoading })), isPresetSelected && description?.preset && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.preset })), !isPresetSelected && description?.user && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.user }))] })] }));
|
|
35
43
|
};
|
|
36
44
|
export default Threshold;
|
|
@@ -25,6 +25,8 @@ export interface ThresholdSpec {
|
|
|
25
25
|
export interface ThresholdProps extends ThresholdSpec {
|
|
26
26
|
onChangeDropdown: (event: SelectChangeEvent) => void;
|
|
27
27
|
onSliderChangeCommitted: (event: Event | SyntheticEvent, value: number | number[]) => void;
|
|
28
|
+
onClickUpdateConfiguration: () => void;
|
|
29
|
+
isLoading?: boolean;
|
|
28
30
|
}
|
|
29
31
|
export interface BaseSliderProps extends SliderProps {
|
|
30
32
|
defaultThreshold: number;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import Threshold from './Threshold';
|
|
2
|
-
import type { ThresholdProps } from './Threshold.types';
|
|
2
|
+
import type { ThresholdProps, ThresholdSpec } from './Threshold.types';
|
|
3
3
|
export { Threshold };
|
|
4
|
-
export type { ThresholdProps };
|
|
4
|
+
export type { ThresholdProps, ThresholdSpec };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
2
|
import { v4 as uuidV4 } from 'uuid';
|
|
4
3
|
import { Box } from '@mui/material';
|
|
5
4
|
import { ToggleControlContainer, ToggleControlOuter } from './ToggleControl.styled';
|
|
@@ -10,15 +9,10 @@ import { FreeText } from '../FreeText';
|
|
|
10
9
|
import { Statistic } from '../Statistic';
|
|
11
10
|
import { Tooltip } from '../../components';
|
|
12
11
|
import { Information } from '../../icons';
|
|
13
|
-
const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbol, tooltip = [], content = [], color, isParent = false, disabled = false, bar, checked =
|
|
14
|
-
const [isChecked, setIsChecked] = useState(checked);
|
|
15
|
-
const handleChange = (event) => {
|
|
16
|
-
setIsChecked(event.target.checked);
|
|
17
|
-
onChange && onChange(event);
|
|
18
|
-
};
|
|
12
|
+
const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbol, tooltip = [], content = [], color, isParent = false, disabled = false, bar, checked = false, isDimmed = false, onChange, }) => {
|
|
19
13
|
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: {
|
|
20
14
|
display: 'flex',
|
|
21
15
|
alignItems: 'center',
|
|
22
|
-
}, children: _jsx(Information, {}) }) })), symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color, isDimmed: isDimmed || !
|
|
16
|
+
}, 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, checked: checked, 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 }) }))] }));
|
|
23
17
|
};
|
|
24
18
|
export default ToggleControl;
|
|
@@ -1,56 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState } from 'react';
|
|
3
2
|
import { v4 as uuidV4 } from 'uuid';
|
|
4
|
-
import { filter as _filter } from 'lodash';
|
|
5
3
|
import { ToggleControlGroupContainer } from './ToggleControlGroup.styled';
|
|
6
4
|
import ToggleControl from '../ToggleControl/ToggleControl';
|
|
7
5
|
const ToggleControlGroup = ({ componentType = 'toggleGroup', size = 'medium', title, tooltip = [], bar, childToggles, disabled, checked = true, behavior = 'multi', onChange, }) => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const handleToggleChange = (event) => {
|
|
11
|
-
setToggleChecked(!toggleChecked);
|
|
12
|
-
if (!_filter(childrenChecked, (child) => child).length) {
|
|
13
|
-
if (behavior === 'multi' && event.target.checked) {
|
|
14
|
-
setChildrenChecked(Array(childToggles.length).fill(true));
|
|
15
|
-
}
|
|
16
|
-
else if (behavior === 'exclusive' && event.target.checked) {
|
|
17
|
-
const newState = Array(childrenChecked.length).fill(false);
|
|
18
|
-
newState[0] = true;
|
|
19
|
-
setChildrenChecked(newState);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
onChange(event);
|
|
23
|
-
};
|
|
24
|
-
const handleMultiChange = (index) => {
|
|
25
|
-
const newState = [...childrenChecked];
|
|
26
|
-
newState[index] = !newState[index];
|
|
27
|
-
setChildrenChecked(newState);
|
|
28
|
-
};
|
|
29
|
-
const handleExclusiveChange = (index, event) => {
|
|
30
|
-
const newState = Array(childrenChecked.length).fill(false);
|
|
31
|
-
setChildrenChecked(newState);
|
|
32
|
-
newState[index] = event.target.checked;
|
|
33
|
-
setChildrenChecked(newState);
|
|
34
|
-
};
|
|
35
|
-
useEffect(() => {
|
|
36
|
-
if (behavior === 'exclusive') {
|
|
37
|
-
const newState = Array(childrenChecked.length).fill(false);
|
|
38
|
-
newState[0] = true;
|
|
39
|
-
setChildrenChecked(newState);
|
|
40
|
-
}
|
|
41
|
-
else {
|
|
42
|
-
const childChecked = Array(childToggles.length).fill(true);
|
|
43
|
-
childToggles.forEach((child, index) => {
|
|
44
|
-
if (child.checked === false) {
|
|
45
|
-
childChecked[index] = false;
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
setChildrenChecked(childChecked);
|
|
49
|
-
}
|
|
50
|
-
}, [behavior, childToggles, childrenChecked.length]);
|
|
51
|
-
return (_jsxs(ToggleControlGroupContainer, { children: [_jsx(ToggleControl, { isParent: true, componentType: "toggle", bar: bar, disabled: disabled, size: size, title: title, tooltip: tooltip, checked: toggleChecked, onChange: handleToggleChange }), childToggles?.map((child, index) => {
|
|
52
|
-
return (_jsx(ToggleControl, { componentType: "toggle", title: child.title, size: size, tooltip: child.tooltip, symbol: child.symbol, color: child.color, isDimmed: !toggleChecked, checked: childrenChecked[index], disabled: !toggleChecked, onChange: (event) => {
|
|
53
|
-
behavior === 'multi' ? handleMultiChange(index) : handleExclusiveChange(index, event);
|
|
6
|
+
return (_jsxs(ToggleControlGroupContainer, { children: [_jsx(ToggleControl, { isParent: true, componentType: "toggle", bar: bar, disabled: disabled, size: size, title: title, tooltip: tooltip, checked: checked, onChange: onChange }), childToggles?.map((child, index) => {
|
|
7
|
+
return (_jsx(ToggleControl, { componentType: "toggle", title: child.title, size: size, tooltip: child.tooltip, symbol: child.symbol, color: child.color, isDimmed: child.isDimmed, checked: child.checked, disabled: child.disabled, onChange: (event) => {
|
|
54
8
|
child.onChange(event);
|
|
55
9
|
}, bar: child.bar }, uuidV4()));
|
|
56
10
|
})] }));
|
package/package.json
CHANGED