Jungfraujoch/frontend/src/components/DataProcessingPlots.tsx

import React, {Component} from 'react';

import Paper from '@mui/material/Paper';
import {Box, Checkbox, FormControlLabel, Grid} from "@mui/material";
import DataProcessingPlot from "./DataProcessingPlot";
import Toolbar from "@mui/material/Toolbar";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select, {SelectChangeEvent} from "@mui/material/Select";
import {azint_unit, plot_type} from "../openapi";

type MyProps = {
    type: plot_type,
    height: number
}

type MyState = {
    type: plot_type,
    binning: string,
    tab : String,
    angle_units: boolean,
    azint_unit: azint_unit
}

class DataProcessingPlots extends Component<MyProps, MyState> {
    state: MyState = {
        type: this.props.type,
        binning: "0",
        tab: this.props.type,
        angle_units: true,
        azint_unit: azint_unit.Q_RECIP_A
    }

    plotTypeChange = (event : SelectChangeEvent<String>) => {
        let val = String(event.target.value).toString();
        this.setState({tab: val, type: val as plot_type});
    };

    handleChange = (event : SelectChangeEvent<String>) => {
        this.setState({ binning: String(event.target.value).toString() });
    };

    render() {
        return <Paper style={{textAlign: 'center'}} sx={{ height: this.props.height, width: "100%" }}>
            <Toolbar>

                <Grid container sx={{ minWidth: 500 }} >
                    <FormControl variant="standard" sx={{ m: 1, minWidth: 500 }}>

                        <Select
                            value={this.state.tab}
                            onChange={this.plotTypeChange}
                            label="Plot category"
                            sx={{fontWeight: "bold"}}
                        >
                            <MenuItem value={plot_type.INDEXING_RATE}>Indexing rate</MenuItem>
                            <MenuItem value={plot_type.INDEXING_UNIT_CELL_LENGTH}>Indexing unit cell (length)</MenuItem>
                            <MenuItem value={plot_type.INDEXING_UNIT_CELL_ANGLE}>Indexing unit cell (angle)</MenuItem>
                            <MenuItem value={plot_type.SPOT_COUNT}>Spot count</MenuItem>
                            <MenuItem value={plot_type.SPOT_COUNT_LOW_RES}>Spot count low res.</MenuItem>
                            <MenuItem value={plot_type.SPOT_COUNT_INDEXED}>Spot count indexed</MenuItem>
                            <MenuItem value={plot_type.SPOT_COUNT_ICE}>Spot count ice ring</MenuItem>
                            <MenuItem value={plot_type.AZINT}>Azimuthal integration profile</MenuItem>
                            <MenuItem value={plot_type.AZINT_1D}>Azimuthal integration profile (1D)</MenuItem>
                            <MenuItem value={plot_type.BKG_ESTIMATE}>Background estimate</MenuItem>
                            <MenuItem value={plot_type.RESOLUTION_ESTIMATE}>Diffraction resolution estimate</MenuItem>
                            <MenuItem value={plot_type.ROI_SUM}>ROI area sum</MenuItem>
                            <MenuItem value={plot_type.ROI_MEAN}>ROI area mean</MenuItem>
                            <MenuItem value={plot_type.ROI_WEIGHTED_X}>ROI area weighted X position</MenuItem>
                            <MenuItem value={plot_type.ROI_WEIGHTED_Y}>ROI area weighted Y position</MenuItem>
                            <MenuItem value={plot_type.ROI_MAX_COUNT}>ROI area max count</MenuItem>
                            <MenuItem value={plot_type.ERROR_PIXELS}>Error pixels</MenuItem>
                            <MenuItem value={plot_type.SATURATED_PIXELS}>Saturated pixels</MenuItem>
                            <MenuItem value={plot_type.STRONG_PIXELS}>Strong pixels (for spot finding)</MenuItem>
                            <MenuItem value={plot_type.MAX_PIXEL_VALUE}>Maximum pixel value (excl. overloads)</MenuItem>
                            <MenuItem value={plot_type.PROFILE_RADIUS}>Profile radius</MenuItem>
                            <MenuItem value={plot_type.B_FACTOR}>Wilson B-factor</MenuItem>
                            <MenuItem value={plot_type.BEAM_CENTER_X}>Beam center X (post-indexing geometry refinement)</MenuItem>
                            <MenuItem value={plot_type.BEAM_CENTER_Y}>Beam center Y (post-indexing geometry refinement)</MenuItem>
                            <MenuItem value={plot_type.INTEGRATED_REFLECTIONS}>Integrated reflections</MenuItem>
                            <MenuItem value={plot_type.IMAGE_COLLECTION_EFFICIENCY}>Image collection efficiency</MenuItem>
                            <MenuItem value={plot_type.PROCESSING_TIME}> Processing time</MenuItem>
                            <MenuItem value={plot_type.RECEIVER_DELAY}>Receiver delay (internal debugging)</MenuItem>
                            <MenuItem value={plot_type.RECEIVER_FREE_SEND_BUF}>Receiver free send buffers (internal debugging)</MenuItem>
                        </Select>

                    </FormControl>
                </Grid>
                <Grid container justifyContent="flex-end">
                    <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
                        <FormControlLabel
                            control={
                                <Checkbox
                                    checked={this.state.angle_units}
                                    onChange={(e) => this.setState(
                                        {angle_units: e.target.checked})}
                                />
                            }
                            label="X-axis exp. units"
                        /></FormControl>
                    <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
                        <FormControlLabel
                            control={
                                <Checkbox
                                    checked={this.state.azint_unit == azint_unit.TWO_THETA_DEG}
                                    onChange={(e) => this.setState({
                                        azint_unit: e.target.checked ? azint_unit.TWO_THETA_DEG : azint_unit.Q_RECIP_A
                                    })}
                                />
                            }
                            label="2θ (az. int.)"
                        />
                    </FormControl>
                    <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
                        <Select
                            value={this.state.binning}
                            onChange={this.handleChange}
                            label="Binning"
                        >
                            <MenuItem value={0}>
                                <em>Auto binning</em>
                            </MenuItem>
                            <MenuItem value={1}>1 image</MenuItem>
                            <MenuItem value={10}>10 images</MenuItem>
                            <MenuItem value={100}>100 images</MenuItem>
                            <MenuItem value={500}>500 images</MenuItem>
                            <MenuItem value={1000}>1000 images</MenuItem>
                            <MenuItem value={5000}>5000 images</MenuItem>
                            <MenuItem value={10000}>10000 images</MenuItem>
                        </Select>
                    </FormControl>
                </Grid>
            </Toolbar>
            <Box sx={{width:"95%", height: this.props.height - 150}} >
                <DataProcessingPlot type={this.state.type} binning={Number(this.state.binning)} angle={this.state.angle_units}
                                    azint={this.state.azint_unit}/>
            </Box>
        </Paper>
    }
}

export default DataProcessingPlots;