Jungfraujoch/frontend_ui/src/components/DataProcessingSettings.tsx

import React, {Component} from 'react';

import Paper from '@mui/material/Paper';
import {Grid, Slider, Switch, Typography} from "@mui/material";
import {DefaultService, spot_finding_settings} from "../openapi";

type MyProps = {};

type MyState = {
    s: spot_finding_settings,
    connection_error: boolean;
}

class DataProcessingSettings extends Component<MyProps, MyState> {
    interval : NodeJS.Timer | undefined;
    state : MyState = {
        s: {
            enable: true,
            indexing: true,
            photon_count_threshold: 8,
            signal_to_noise_threshold: 3.0,
            min_pix_per_spot: 2,
            max_pix_per_spot: 50,
            high_resolution_limit: 2.5,
            low_resolution_limit: 20.0
        },
        connection_error: true
    }

    putValues() {
        DefaultService.putConfigSpotFinding(this.state.s)
            .catch(error => console.log(error) );
    }

    putValues2(x: MyState) {
        DefaultService.putConfigSpotFinding(x.s)
            .catch(error => console.log(error) );
    }

    getValues() {
        DefaultService.getConfigSpotFinding()
            .then(data => this.setState({s: data, connection_error: false}))
            .catch(error => {
                this.setState({connection_error: true});
            });
    }
    componentDidMount() {
        this.getValues();
        this.interval = setInterval(() => this.getValues(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    setPhotonCountThreshold = (event: Event, newValue: number | number[]) => {
        this.setState(prevState => (
            {
                s : {
                    ...prevState.s,
                    photon_count_threshold: newValue as number
                }
            }
        ));
        this.putValues();
    }

    setSignalToNoiseThreshold = (event: Event, newValue: number | number[]) => {
        this.setState(prevState => (
            {
                s : {
                    ...prevState.s,
                    signal_to_noise_threshold: newValue as number
                }
            }
        ));
        this.putValues();
        this.getValues();
    }

    setMinPixPerSpot = (event: Event, newValue: number | number[]) => {
        this.setState(prevState => (
            {
                s : {
                    ...prevState.s,
                    min_pix_per_spot: newValue as number
                }
            }
        ));
        this.putValues();
        this.getValues();
    }

    setHighResolutionLimit = (event: Event, newValue: number | number[]) => {
        this.setState(prevState => (
            {
                s : {
                    ...prevState.s,
                    high_resolution_limit: newValue as number
                }
            }
        ));
        this.putValues();
        this.getValues();
    }

    enableSpotFindingToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
        let x = this.state;
        x.s.enable = event.target.checked;
        this.putValues2(x);
        this.getValues();
    }

    enableIndexingToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
        let x = this.state;
        x.s.indexing = event.target.checked;
        this.putValues2(x);
        this.getValues();
    }

    render() {
        return <Paper style={{textAlign: 'center'}} sx={{ height: 630, width: '100%' }}>
                    <Grid container spacing={0}>

                        <Grid item xs={1}/>
                        <Grid item xs={10}>
                            <br/><strong>Spot finding parameters</strong><br/><br/>
                            <Switch onChange={this.enableSpotFindingToggle} checked={this.state.s.enable}
                                    disabled={this.state.connection_error}/>
                            Enable spot finding &nbsp;
                            <Switch onChange={this.enableIndexingToggle} checked={this.state.s.indexing}
                                    disabled={this.state.connection_error || !this.state.s.enable}/>
                            Enable indexing <br/><br/>

                            <Typography gutterBottom> Count threshold </Typography>
                            <Slider disabled={this.state.connection_error || !this.state.s.enable}
                                    value={Number(this.state.s.photon_count_threshold)}
                                    onChange={this.setPhotonCountThreshold}
                                    min={1} max={50} step={1} valueLabelDisplay="auto" />

                            <br/><Typography> Signal-to-noise threshold </Typography>
                            <Slider disabled={this.state.connection_error || !this.state.s.enable}
                                    value={Number(this.state.s.signal_to_noise_threshold)}
                                    onChange={this.setSignalToNoiseThreshold}
                                    min={2} max={10} step={0.5} valueLabelDisplay="auto" />

                            <br/><Typography> Minimum pixel / spot </Typography>
                            <Slider disabled={this.state.connection_error || !this.state.s.enable}
                                    value={Number(this.state.s.min_pix_per_spot)}
                                    onChange={this.setMinPixPerSpot}
                                    min={1} max={8} step={1} valueLabelDisplay="auto"  />
                            <Typography> High resolution limit [&#8491;] </Typography>
                            <Slider disabled={this.state.connection_error || !this.state.s.enable}
                                    value={Number(this.state.s.high_resolution_limit)}
                                    onChange={this.setHighResolutionLimit}
                                    min={1} max={5} step={0.2} valueLabelDisplay="auto"  />
                            <br/><br/>
                        </Grid>
                        <Grid item xs={1}/>


                    </Grid>
                </Paper>
    }
}

export default DataProcessingSettings;