Jungfraujoch/frontend_ui/src/App.tsx

import React, {Component} from 'react';

import {ThemeProvider, CssBaseline, createTheme, Grid, Stack, Typography, Switch} from "@mui/material";
import {indigo, lime} from "@mui/material/colors";

import DataProcessingSettings from "./components/DataProcessingSettings";
import DetectorSettings from "./components/DetectorSettings";
import Calibration from "./components/Calibration";
import StatusBar from "./components/StatusBar";
import DataProcessingPlots from "./components/DataProcessingPlots";
import DetectorSelection from "./components/DetectorSelection";
import BkgEstimatePlot from "./components/BkgEstimatePlot";
import MeasurementStatistics from "./components/MeasurementStatistics";
import DetectorStatus from "./components/DetectorStatus";
import Paper from "@mui/material/Paper";
import PreviewImage from "./components/PreviewImage";
import ROI from "./components/ROI";

const jfjoch_theme = createTheme({
    palette: {
        primary: indigo,
        secondary: lime,
    },
});

type MyState = {
    show_detector_setup: boolean,
    show_module_calibration: boolean,
    show_preview: boolean,
    show_roi_setup: boolean
}

type MyProps = {}

class App extends Component<MyProps, MyState> {

    state : MyState = {
        show_detector_setup: false,
        show_module_calibration: false,
        show_preview: true,
        show_roi_setup: false
    }

    showPreviewToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({show_preview: event.target.checked});
    }

    showDetectorSetupToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({show_detector_setup: event.target.checked});
    }

    showModuleCalibrationToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({show_module_calibration: event.target.checked});
    }

    showROISetupToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({show_roi_setup: event.target.checked});
    }

    renderTitleWithSwitch = (name: string, checked: boolean, func: ((event: React.ChangeEvent<HTMLInputElement>) => void)) => {
        return <Grid item xs={12}>
            <Paper style={{textAlign: 'center'}} sx={{height: 60, width: '100%'}} component={Stack}
                   direction="column" justifyContent="center">
                <Grid container spacing={0}>
                    <Grid xs={1}/>
                    <Grid xs={10}>
                        <Typography variant="h5"> {name} </Typography>
                    </Grid>
                    <Grid xs={1}>
                        <Switch checked={checked}
                                onChange={func}
                                name="Show detector setup"/>
                    </Grid>
                </Grid>
            </Paper>
        </Grid>
    };

    render() {
        return <ThemeProvider theme={jfjoch_theme}>
            <CssBaseline enableColorScheme/>
            <StatusBar/> <br/><br/><br/><br/>
            <div style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Grid container
                      justifyContent="center"
                      alignItems="center"
                      spacing={3}
                      sx={{width: "95%"}}>
                    <Grid item xs={8}>
                        <BkgEstimatePlot/>
                    </Grid>
                    <Grid item xs={4}>
                        <MeasurementStatistics/>
                    </Grid>
                    <Grid item xs={8}>
                        <DataProcessingPlots/>
                    </Grid>
                    <Grid item xs={4}>
                        <DataProcessingSettings/>
                    </Grid>
                    {
                        this.renderTitleWithSwitch("Live image preview", this.state.show_preview, this.showPreviewToggle)
                    }
                    <Grid item xs={12}>
                        {this.state.show_preview ? <PreviewImage/> : ""}
                    </Grid>
                    <br/><br/>
                    {
                        this.renderTitleWithSwitch("JUNGFRAU module calibration",
                            this.state.show_module_calibration, this.showModuleCalibrationToggle)
                    }
                    <Grid item xs={12}>
                        {this.state.show_module_calibration ? <Calibration/> : ""}
                    </Grid><br/><br/>
                    {
                        this.renderTitleWithSwitch("JUNGFRAU detector configuration (EXPERT)",
                            this.state.show_detector_setup, this.showDetectorSetupToggle)
                    }
                    <Grid item xs={4}>
                        {this.state.show_detector_setup ? <DetectorSettings/> : ""}
                    </Grid>
                    <Grid item xs={4}>
                        {this.state.show_detector_setup ? <DetectorSelection/> : ""}
                    </Grid>
                    <Grid item xs={4}>
                        {this.state.show_detector_setup ? <DetectorStatus/> : ""}
                    </Grid>
                    <br/><br/>
                    {
                        this.renderTitleWithSwitch("Region of interest (ROI)",
                            this.state.show_roi_setup, this.showROISetupToggle)
                    }
                    <Grid item xs={12}>
                        {this.state.show_roi_setup ? <ROI/> : ""}
                    </Grid>

                </Grid>
            </div>
            <br/>
            <center>Developed at Paul Scherrer Institute (2019-2024). Main author: <a
                href="mailto:filip.leonarski@psi.ch">Filip Leonarski</a> <br/>
                For more information see <a href="https://doi.org/10.1107/S1600577522010268"><i>J. Synchrotron
                    Rad.</i> (2023). <b>30</b>, 227–234</a> <br/>
                Build: {process.env.REACT_APP_VERSION}</center>
            <br/>
        </ThemeProvider>
    }
}

export default App;