Jungfraujoch/frontend/src/components/DataProcessingPlots.tsx

import {memo, useState} 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 "../client";

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

function DataProcessingPlots({type: initialType, height}: MyProps) {
    const [type, setType] = useState<plot_type>(initialType);
    const [binning, setBinning] = useState("0");
    const [tab, setTab] = useState<String>(initialType);
    const [angleUnits, setAngleUnits] = useState(true);
    const [azintUnit, setAzintUnit] = useState<azint_unit>(azint_unit.Q_RECIP_A);

    const plotTypeChange = (event : SelectChangeEvent<String>) => {
        let val = String(event.target.value).toString();
        setTab(val);
        setType(val as plot_type);
    };

    const handleChange = (event : SelectChangeEvent<String>) => {
        setBinning(String(event.target.value).toString());
    };

    return <Paper style={{textAlign: 'center'}} sx={{ height: height, width: "100%" }}>
        <Toolbar>

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

                    <Select
                        value={tab}
                        onChange={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.ICE_RING_SCORE}>Ice ring score</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.INDEXING_LATTICE_COUNT}>Indexed lattice count</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.COMPRESSION_RATIO}>Compression ratio</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={angleUnits}
                                onChange={(e) => setAngleUnits(e.target.checked)}
                            />
                        }
                        label="X-axis exp. units"
                    /></FormControl>
                <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
                    <FormControlLabel
                        control={
                            <Checkbox
                                checked={azintUnit == azint_unit.TWO_THETA_DEG}
                                onChange={(e) => setAzintUnit(
                                    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={binning}
                        onChange={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: height - 150}} >
            <DataProcessingPlot type={type} binning={Number(binning)} angle={angleUnits}
                                azint={azintUnit}/>
        </Box>
    </Paper>
}

export default memo(DataProcessingPlots);