Jungfraujoch/frontend/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 = {
    s?: spot_finding_settings,
    update: () => void
};

type MyState = {
    s: spot_finding_settings,
    high_res_gap_Q_recipA: number
}

class DataProcessingSettings extends Component<MyProps, MyState> {
    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: 50.0,
            quick_integration: false,
            high_resolution_limit_for_spot_count_low_res: 5.0,
            ice_ring_width_q_recipA: 0.02,
            high_res_gap_Q_recipA: 1.5
        },
        high_res_gap_Q_recipA: 1.5
    }

    putValues(x: spot_finding_settings) {
        DefaultService.putConfigSpotFinding(x)
            .catch(error => console.log(error) );
    }

    getValues() {
        const incoming = this.props.s;

        if (incoming !== undefined)
            this.setState(prevState => ({
                s: incoming,
                high_res_gap_Q_recipA: incoming.high_res_gap_Q_recipA ?? prevState.high_res_gap_Q_recipA
            }));
    }

    componentDidMount() {
        this.getValues();
    }

    componentDidUpdate(prevProps: Readonly<MyProps>) {
        if ((this.props.s !== undefined) && (prevProps.s != this.props.s))
            this.setState({s: this.props.s});
    }

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

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

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

    setLowResolutionLimit = (event: Event, newValue: number | number[]) => {
        this.setState(prevState => ({s: {...prevState.s, low_resolution_limit: newValue as number}}),
            () => {this.putValues(this.state.s);});
        this.props.update();
    }

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

    setHighResolutionLimitForCountingLowResSpots = (event: Event, newValue: number | number[]) => {
        this.setState(prevState => ({s: {
                    ...prevState.s,
                    high_resolution_limit_for_spot_count_low_res: newValue as number
        }}), () => {this.putValues(this.state.s);});
        this.props.update();
    }

    setIceRingWidth = (event: Event, newValue: number | number[]) => {
        this.setState(prevState => ({s: {
                ...prevState.s,
                ice_ring_width_q_recipA: newValue as number
            }}), () => {this.putValues(this.state.s);});
        this.props.update();
    }
    enableSpotFindingToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
        this.setState(prevState => ({s: {...prevState.s, enable: event.target.checked}}),
            () => {this.putValues(this.state.s);});
        this.props.update();
    }

    enableIndexingToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
        this.setState(prevState => ({s: {...prevState.s, indexing: event.target.checked}}),
            () => {this.putValues(this.state.s);});
        this.props.update();
    }
    enableQuickIntegrationToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
        this.setState(prevState => ({s: {...prevState.s, quick_integration: event.target.checked}}),
            () => {this.putValues(this.state.s);});
        this.props.update();
    }

    enableHighResGapToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
        const checked = event.target.checked;
        this.setState(prevState => {
            return {
                s: {
                    ...prevState.s,
                    high_res_gap_Q_recipA: checked ? prevState.high_res_gap_Q_recipA : undefined
                }
            };
        }, () => { this.putValues(this.state.s); });
        this.props.update();
    }

    setHighResGap = (event: Event, newValue: number | number[]) => {
        const v = newValue as number;
        this.setState(prevState => ({
            s: {
                ...prevState.s,
                high_res_gap_Q_recipA: v
            },
            high_res_gap_Q_recipA: v
        }), () => { this.putValues(this.state.s); });
        this.props.update();
    }

    render() {
        return <Paper style={{textAlign: 'center'}} sx={{ height: 800, 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}/>
                            Spot finding
                            <br/><br/>

                            <Typography gutterBottom> Count threshold </Typography>
                            <Slider disabled={!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.s.enable}
                                    value={Number(this.state.s.signal_to_noise_threshold)}
                                    onChange={this.setSignalToNoiseThreshold}
                                    min={2}
                                    max={10}
                                    step={0.5}
                                    valueLabelDisplay="auto"
                                    valueLabelFormat={(value) => value.toFixed(1)}
                            />

                            <br/><Typography> Minimum pixel / spot </Typography>
                            <Slider disabled={!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> Low resolution limit [&#8491;] </Typography>
                            <Slider disabled={!this.state.s.enable}
                                    value={Number(this.state.s.low_resolution_limit)}
                                    onChange={this.setLowResolutionLimit}
                                    min={10} max={100} step={0.1} valueLabelDisplay="auto"
                                    valueLabelFormat={(value) => value.toFixed(1)}
                            />

                            <Typography> High resolution limit [&#8491;] </Typography>
                            <Slider disabled={!this.state.s.enable}
                                    value={Number(this.state.s.high_resolution_limit)}
                                    onChange={this.setHighResolutionLimit}
                                    min={1} max={5} step={0.1} valueLabelDisplay="auto"
                                    valueLabelFormat={(value) => value.toFixed(1)}
                            />
                            <Typography> High resolution limit for counting low resolution spots [&#8491;] </Typography>
                            <Slider disabled={!this.state.s.enable}
                                    value={Number(this.state.s.high_resolution_limit_for_spot_count_low_res)}
                                    onChange={this.setHighResolutionLimitForCountingLowResSpots}
                                    min={2} max={8} step={0.1} valueLabelDisplay="auto"
                                    valueLabelFormat={(value) => value.toFixed(1)}
                            />
                            <Typography> Ice ring width in Q-space [&#8491;<sup>-1</sup>] </Typography>
                            <Slider disabled={!this.state.s.enable}
                                    value={Number(this.state.s.ice_ring_width_q_recipA)}
                                    onChange={this.setIceRingWidth}
                                    min={0.0} max={0.2} step={0.001} valueLabelDisplay="auto"
                                    valueLabelFormat={(value) => value.toFixed(3)}
                            />

                            <Switch
                                onChange={this.enableHighResGapToggle}
                                checked={this.state.s.high_res_gap_Q_recipA !== undefined}
                                disabled={!this.state.s.enable}
                            />
                            High‑res gap Q-space filter [&#8491;<sup>-1</sup>]
                            <Typography/>
                            <Slider
                                disabled={!this.state.s.enable || this.state.s.high_res_gap_Q_recipA === undefined}
                                value={Number(this.state.s.high_res_gap_Q_recipA ?? this.state.high_res_gap_Q_recipA)}
                                onChange={this.setHighResGap}
                                min={0.1}
                                max={5.0}
                                step={0.01}
                                valueLabelDisplay="auto"
                                valueLabelFormat={(value) => value.toFixed(2)}
                            />

                            <br/><br/>
                            <Switch onChange={this.enableIndexingToggle}
                                    checked={this.state.s.indexing}
                                    disabled={!this.state.s.enable}/>
                            Indexing <br/><br/>
                            <Switch onChange={this.enableQuickIntegrationToggle}
                                    checked={this.state.s.quick_integration}
                                    disabled={!this.state.s.enable}/>
                            Quick MX integration
                        </Grid>
                        <Grid item xs={1}/>
                    </Grid>
                </Paper>
    }
}

export default DataProcessingSettings;