export default function SimpleDialog()

in src/frontend/src/components/SimpleDialog.tsx [30:93]
61 lines of code
3 McCabe index (conditional complexity)

export default function SimpleDialog(props: SimpleDialogProps) {
    const { onClose, selectedValue, open } = props;
    const dialogRef = createRef<HTMLDivElement>();

    const handleClose = () => {
        onClose('');
    };

    useEffect(() => {
        if (selectedValue) {
            axios
                .get(`/protein?path=${encodeURIComponent(selectedValue)}`)
                .then((response) => {
                    const config = { backgroundColor: 'white' };
                    const viewer = window.$3Dmol?.createViewer(
                        dialogRef.current,
                        config
                    );
                    if (viewer) {
                        viewer.addModel(response.data, 'pdb'); /* load data */
                        viewer.setStyle(
                            {},
                            { stick: { color: 'spectrum' } }
                        ); /* style all atoms */
                        viewer.zoomTo(); /* set camera */
                        viewer.render(); /* render scene */
                        viewer.zoom(1.2, 1000); /* slight zoom */
                    }
                })
                .catch((error) => {
                    console.log('ERROR - geting PDB file', error);
                });
        }
    });

    return (
        <Dialog
            onClose={handleClose}
            open={open}
            fullWidth={true}
            maxWidth={'md'}>
            <DialogTitle>
                Protein Viewer
                <Tooltip style={{ marginLeft: '0.5rem' }} title='Protein viewer library by Koes, D., & Rego, N. 3Dmol.js: molecular visualization with WebGL [Computer software]. https://github.com/3dmol/3Dmol.js'>
                    <InfoIcon />
                </Tooltip>
            </DialogTitle>
            <div>
                <div
                    id='proteinViewer'
                    ref={dialogRef}
                    className='mol-container'
                    data-backgroundcolor='0xffffff'
                    style={{
                        marginLeft: 'auto',
                        marginRight: 'auto',
                        height: '800px',
                        width: '800px',
                        position: 'relative',
                    }}></div>
            </div>
        </Dialog>
    );
}