Jungfraujoch/frontend/src/components/DarkMaskSettings.tsx

import React, { Component } from 'react';
import Paper from '@mui/material/Paper';
import {Checkbox, FormControlLabel, Stack} from '@mui/material';
import _ from 'lodash';
import NumberTextField from './NumberTextField';
import ButtonWithSnackbar from './ButtonWithSnackbar';
import { dark_mask_settings } from '../openapi';

type MyProps = {
    s?: dark_mask_settings;
};

type MyState = {
    s: dark_mask_settings;
    last_downloaded_s: dark_mask_settings;
    download_counter: number;
    threshold_err: boolean;
    frame_time_err: boolean;
    number_of_frames_err: boolean;
    number_of_frames_old: number;
    max_pixel_count_err: boolean;
    max_frames_with_signal_err: boolean;
};

const default_dark_mask_settings: dark_mask_settings = {
    detector_threshold_keV: 4.0,
    frame_time_us: 1000,
    number_of_frames: 1000,
    max_allowed_pixel_count: 1,
    max_frames_with_signal: 10,
};

class DarkMaskSettings extends Component<MyProps, MyState> {
    state: MyState = {
        s: default_dark_mask_settings,
        last_downloaded_s: default_dark_mask_settings,
        download_counter: 0,
        threshold_err: false,
        frame_time_err: false,
        number_of_frames_err: false,
        max_pixel_count_err: false,
        max_frames_with_signal_err: false,
        number_of_frames_old: 1000
    };

    getValues = () => {
        if (this.props.s !== undefined) {
            let incoming: dark_mask_settings = this.props.s;
            if (!_.isEqual(incoming, this.state.last_downloaded_s)) {
                this.setState((prev) => ({
                    s: incoming,
                    last_downloaded_s: incoming,
                    download_counter: prev.download_counter + 1,
                    threshold_err: false,
                    frame_time_err: false,
                    number_of_frames_err: false,
                    number_of_frames_old:
                        incoming.number_of_frames === 0 ? prev.number_of_frames_old : incoming.number_of_frames,
                    max_pixel_count_err: false,
                    max_frames_with_signal_err: false,
                    enable: (this.props.s?.number_of_frames !== 0)
                }));
            }
        }
    };

    componentDidMount() {
        this.getValues();
    }

    componentDidUpdate() {
        this.getValues();
    }

    hasError = () =>
        this.state.threshold_err ||
        this.state.frame_time_err ||
        this.state.number_of_frames_err ||
        this.state.max_pixel_count_err ||
        this.state.max_frames_with_signal_err;

    render() {
        return (
            <Paper style={{ textAlign: 'center' }} sx={{ width: '100%' }}>
                <br />
                <Stack
                    spacing={3}
                    sx={{
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}
                >
                    <strong>Dark data collection settings for mask</strong>
                    <div>(DECTRIS detectors only)</div>

                    <FormControlLabel
                        control={
                            <Checkbox
                                checked={this.state.s.number_of_frames !== 0}
                                onChange={(event) => {
                                    if (!event.target.checked)
                                        this.setState(prevState => ({
                                            download_counter: this.state.download_counter + 1,
                                            number_of_frames_err: false,
                                            s: {
                                                ...prevState.s,
                                                number_of_frames: 0
                                            }
                                        }));
                                    else
                                        this.setState(prevState => ({
                                            download_counter: this.state.download_counter + 1,
                                            number_of_frames_err: false,
                                            s: {
                                                ...prevState.s,
                                                number_of_frames: this.state.number_of_frames_old
                                            }
                                        }));
                                }}
                            />
                        }
                        label="Enable dark data collection"
                    />

                    <Stack spacing={3} direction="row" sx={{ width: '80%' }}>

                        <NumberTextField
                            start_val={this.state.s.detector_threshold_keV}
                            label={'Detector threshold'}
                            units={'keV'}
                            float={true}
                            min={0.001}
                            default={4.0}
                            counter={this.state.download_counter}
                            disabled={this.state.s.number_of_frames === 0}
                            callback={(val: number, err: boolean) => {
                                this.setState((prev) => ({
                                    threshold_err: err,
                                    s: { ...prev.s, detector_threshold_keV: val },
                                }));
                            }}
                        />

                        <NumberTextField
                            start_val={this.state.s.frame_time_us / 1000.0}
                            label={'Frame time'}
                            units={'ms'}
                            float={false}
                            min={1}
                            max={1000}
                            default={10}
                            counter={this.state.download_counter}
                            disabled={this.state.s.number_of_frames === 0}
                            callback={(val: number, err: boolean) => {
                                this.setState((prev) => ({
                                    frame_time_err: err,
                                    s: { ...prev.s, frame_time_us: val * 1000 },
                                }));
                            }}
                        />
                        <NumberTextField
                            start_val={this.state.s.number_of_frames}
                            label={'Number of frames'}
                            float={false}
                            min={1}
                            default={1000}
                            counter={this.state.download_counter}
                            disabled={this.state.s.number_of_frames === 0}
                            callback={(val: number, err: boolean) => {
                                let old: number = this.state.number_of_frames_old;
                                if (!err)
                                    old = val;
                                this.setState(prevState => ({
                                    number_of_frames_err: err,
                                    number_of_frames_old: old,
                                    s: {...prevState.s, number_of_frames: val}
                                }));
                            }}

                        />
                    </Stack>
                    <Stack spacing={3} direction="row" sx={{ width: '80%' }}>
                        <NumberTextField
                            start_val={this.state.s.max_allowed_pixel_count}
                            label={'Max allowed pixel count for valid pixel'}
                            float={false}
                            min={0}
                            default={1}
                            fullWidth={true}
                            disabled={this.state.s.number_of_frames === 0}
                            counter={this.state.download_counter}
                            callback={(val: number, err: boolean) => {
                                this.setState((prev) => ({
                                    max_pixel_count_err: err,
                                    s: { ...prev.s, max_allowed_pixel_count: val },
                                }));
                            }}
                        />

                        <NumberTextField
                            start_val={this.state.s.max_frames_with_signal}
                            label={'Max frames with invalid pixel'}
                            float={false}
                            min={0}
                            default={0}
                            fullWidth={true}
                            counter={this.state.download_counter}
                            disabled={this.state.s.number_of_frames === 0}
                            callback={(val: number, err: boolean) => {
                                this.setState((prev) => ({
                                    max_frames_with_signal_err: err,
                                    s: { ...prev.s, max_frames_with_signal: val },
                                }));
                            }}
                        />
                    </Stack>
                    <ButtonWithSnackbar
                        path={'/config/dark_mask'}
                        color={'primary'}
                        method={'PUT'}
                        disabled={this.hasError()}
                        text={'Upload'}
                        input={JSON.stringify(this.state.s)}
                    />
                </Stack>
                <br />
            </Paper>
        );
    }
}

export default DarkMaskSettings;