@lunit/oui 2.2.0 → 2.2.1

package/dist/presentations/Accordion/Accordion.js

@@ -10,11 +10,11 @@ import { FreeText } from '../FreeText';
 import { Statistic } from '../Statistic';
 import { Score } from '../Score';
 const Accordion = ({ componentType = 'accordion', MuiAccordionProps, AccordionDetailsProps, AccordionSummaryProps, size = 'medium', tooltip = [], title, items, metrics, isOpen, onChange, }) => {
-    return (_jsxs(BaseAccordion, { ...MuiAccordionProps, expanded: isOpen, onChange: onChange, sx: { alignItems: 'center' }, children: [_jsxs(BaseAccordionSummary, { expandIcon: _jsx(ArrowDown, { sx: { fill: theme.palette.neutralGrey[40] } }), ...AccordionSummaryProps, 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: {
+    return (_jsxs(BaseAccordion, { ...MuiAccordionProps, expanded: isOpen, onChange: onChange, sx: { alignItems: 'center' }, children: [_jsxs(BaseAccordionSummary, { expandIcon: _jsx(ArrowDown, { sx: { fill: theme.palette.neutralGrey[40] } }), ...AccordionSummaryProps, children: [!!tooltip.length && (_jsx(Tooltip, { arrow: true, size: "large", onClick: (event) => event.stopPropagation(), title: _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, onClick: (event) => event.stopPropagation(), 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: {
                                 marginRight: size.includes('small') ? '4px' : '6px',
                                 display: 'flex',
                                 alignItems: 'center',
-                            }, children: _jsx(Information, {}) }) })), _jsx(PresentationTypography, { size: size, children: title }), metrics && (_jsx(PresentationTypography, { size: size, children: _jsxs(Box, { sx: { marginLeft: '4px' }, children: [": ", metrics] }) }))] }), _jsx(BaseAccordionDetails, { ...AccordionDetailsProps, sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: items.map((item) => {
+                            }, children: _jsx(Information, {}) }) })), _jsx(PresentationTypography, { size: size, children: title }), metrics && (_jsx(PresentationTypography, { size: size, children: _jsxs(Box, { sx: { marginLeft: '4px' }, children: [": ", metrics] }) }))] }), _jsx(BaseAccordionDetails, { ...AccordionDetailsProps, sx: { display: 'flex', flexDirection: 'column', gap: '14px' }, children: items.map((item) => {
                     return (_jsxs(_Fragment, { children: [item.componentType === 'statistic' && _jsx(Statistic, { ...item }), item.componentType === 'freeText' && _jsx(FreeText, { ...item }), item.componentType === 'score' && _jsx(Score, { ...item })] }));
                 }) })] }));
 };

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -17,10 +17,11 @@ 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 = [], segments, isDimmed = false, }) => {
     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 })] }), _jsxs(AxisLabels, { children: [expressionLevels.map((val, i) => {
-                        return (_jsx(GraphAxisLabel, { label: val, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: parseStringValToNumber(val) }, i));
-                    }), caption && (_jsx(GraphAxisLabel, { label: caption, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: 50 }))] })] }));
+    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));
+                        }), caption && (_jsx(GraphAxisLabel, { label: caption, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: 50 }))] }))] }));
 };
 export default AnalysisBar;

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

@@ -48,7 +48,7 @@ export const GraphScoreIndicator = ({ value, adjustForOnePercent, isJet, }) => {
     return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: {
             left: `${leftPos}%`,
             transform: isJet ? 'translateX(-50%) translateY(8px)' : 'translateX(-50%)',
-        }, children: [_jsx(Typography, { variant: "small_body_sb1", sx: { textAlign: 'center' }, children: value }), _jsx(GraphScoreIndicatorPip, {})] }));
+        }, isJet: isJet, children: [_jsx(Typography, { variant: "small_body_sb1", sx: { textAlign: 'center' }, children: value }), _jsx(GraphScoreIndicatorPip, {})] }));
 };
 const GraphAxisLabelContainer = styled('span')(() => {
     return {

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

@@ -1,6 +1,6 @@
 export interface AnalysisBarProps {
     componentType: 'analysisBar';
-    expressionLevels: string[];
+    expressionLevels?: string[];
     caption?: string;
     segments?: {
         color: 'jet' | string;

package/dist/presentations/Preview/Preview.js

@@ -13,6 +13,6 @@ import { FreeText } from '../FreeText';
 import { Threshold } from '../Threshold';
 import { Histogram } from '../Histogram';
 const Preview = ({ visualizationControls = [], analysisSummary = [] }) => {
-    return (_jsxs(Container, { children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: visualizationControls.map((item) => (_jsxs(Box, { children: [item.componentType === 'toggle' && (_jsx(ToggleControl, { ...item, onChange: () => { } }, uuidV4())), item.componentType === 'toggleGroup' && (_jsx(ToggleControlGroup, { ...item, onChange: () => { } }, 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: "large-bold", content: "Analysis Summary" }), analysisSummary.map((item) => (_jsxs(Box, { children: [item.componentType === 'accordion' && (_jsx(Accordion, { ...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())))] })] }));
+    return (_jsxs(Container, { children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: visualizationControls.map((item) => (_jsxs(Box, { children: [item.componentType === 'toggle' && (_jsx(ToggleControl, { ...item, onChange: () => { } }, uuidV4())), item.componentType === 'toggleGroup' && (_jsx(ToggleControlGroup, { ...item, onChange: () => { } }, 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(Threshold, { ...item }, uuidV4())), item.componentType === 'histogram' && (_jsx(Histogram, { ...item }, uuidV4()))] }, uuidV4())))] })] }));
 };
 export default Preview;

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

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

package/dist/presentations/ToggleControl/ToggleControl.js

@@ -10,15 +10,15 @@ import { FreeText } from '../FreeText';
 import { Statistic } from '../Statistic';
 import { Tooltip } from '../../components';
 import { Information } from '../../icons';
-const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbol, tooltip = [], content = [], color, isParent = false, disabled = false, bar, checked, isDimmed = false, onChange, }) => {
+const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbol, tooltip = [], content = [], color, isParent = false, disabled = false, bar, checked = true, isDimmed = false, onChange, }) => {
     const [isChecked, setIsChecked] = useState(checked);
     const handleChange = (event) => {
         setIsChecked(event.target.checked);
         onChange && onChange(event);
     };
-    return (_jsxs(ToggleControlOuter, { "data-toggle-name": `toggle-control-${title?.replace(/\s/g, '-')}`, hasBar: !!bar, 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: {
+    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, checked: isChecked, onChange: handleChange })] }), content.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: content.map((item) => (_jsx(Statistic, { ...item, isDimmed: isDimmed || !checked }))) }, 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 || !isChecked })), _jsx(PresentationTypography, { size: size, isDimmed: isDimmed || !isChecked, children: title })] }), _jsx(StyledToggle, { disabled: disabled, checked: isChecked, onChange: handleChange })] }), content.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: content.map((item) => (_jsx(Statistic, { ...item, isDimmed: isDimmed || !isChecked }))) }, uuidV4())), bar && (_jsx(Box, { sx: { padding: '0 8px', fontSize: '14px', lineHeight: '8px' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !isChecked, componentType: bar.componentType, expressionValue: bar.expressionValue, expressionLevels: bar.expressionLevels, caption: bar.caption, segments: bar.segments }) }))] }));
 };
 export default ToggleControl;

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

@@ -14,9 +14,40 @@ export interface ToggleControlSpec {
     content?: StatisticProps[];
     bar?: AnalysisBarProps;
 }
+interface PixelAnnotationSpec {
+    url: string;
+    bbox: number[];
+    mpp: {
+        x: number;
+        y: number;
+    };
+}
+interface CellAnnotationSpec {
+    name: string;
+}
+interface GridAnnotationSpec {
+    name: string;
+}
+interface CutOffLabelProps {
+    color: string;
+    labelIndex: number;
+}
+interface TargetSpec {
+    visualizationType: string;
+    annotationId?: string;
+    annotation: PixelAnnotationSpec | CellAnnotationSpec | GridAnnotationSpec | string;
+    label?: string;
+    labelId?: string;
+    labels?: (string | CutOffLabelProps)[];
+    color?: string;
+    colors?: string[];
+}
 export interface ToggleControlProps extends ToggleControlSpec {
     isParent?: boolean;
     isDimmed?: boolean;
     disabled?: boolean;
+    target?: TargetSpec;
+    isMaster?: boolean;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
+export {};

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.js

@@ -52,7 +52,7 @@ const ToggleControlGroup = ({ componentType = 'toggleGroup', size = 'medium', ti
                 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) => {
                         behavior === 'multi' ? handleMultiChange(index) : handleExclusiveChange(index, event);
                         child.onChange(event);
-                    } }, uuidV4()));
+                    }, bar: child.bar }, uuidV4()));
             })] }));
 };
 export default ToggleControlGroup;

package/package.json

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