@lunit/oui
Version:
Lunit Oncology UI components
62 lines (61 loc) • 4.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { v4 as uuidV4 } from 'uuid';
import { Container } from './Preview.styled';
import { Box } from '@mui/material';
import { ToggleControl } from '../ToggleControl';
import { ToggleControlGroup } from '../ToggleControlGroup';
import { AnalysisBar } from '../AnalysisBar';
import { HorizonDivider } from '../HorizonDivider';
import { Accordion } from '../Accordion';
import { Statistic } from '../Statistic';
import { Score } from '../Score';
import { FreeText } from '../FreeText';
import { Histogram } from '../Histogram';
import ThresholdControl from './ThresholdControl';
import ModelTypeControl from './ModelTypeControl';
const Preview = ({ visualizationControls = [], analysisSummary = [] }) => {
const [controls, setControls] = useState(visualizationControls);
return (_jsxs(Container, { children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: visualizationControls.map((item, index) => {
if (item.componentType === 'toggleGroup') {
item.onChange = (event) => {
item.checked = event.target.checked;
const newControls = [...controls];
newControls[index] = item;
if (!item.checked) {
item.childToggles.map((child) => {
child.isDimmed = true;
child.disabled = true;
return child;
});
}
else {
item.childToggles.map((child) => {
child.isDimmed = false;
child.disabled = false;
return child;
});
}
newControls[index].childToggles = item.childToggles;
setControls(newControls);
};
item.childToggles.map((child) => {
child.onChange = (event) => {
if (item.behavior === 'exclusive') {
item.childToggles.map((child) => {
child.checked = false;
return child;
});
}
child.checked = event.target.checked;
const newControls = [...controls];
newControls[index].childToggles = item.childToggles;
setControls(newControls);
};
return child;
});
}
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()));
}) }), _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(ThresholdControl, { ...item }, uuidV4())), item.componentType === 'histogram' && (_jsx(Histogram, { ...item }, uuidV4())), item.componentType === 'modelType' && (_jsx(ModelTypeControl, { ...item }, uuidV4()))] }, uuidV4())))] })] }));
};
export default Preview;