FrontEnd: Improvements for radial integration plots

frontend_ui/src/components/DataProcessingPlots.tsx

@@ -6,7 +6,7 @@ import DataProcessingPlot from "./DataProcessingPlot";
 import Toolbar from "@mui/material/Toolbar";
 import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
-import InputLabel from "@mui/material/InputLabel";
+import RadialIntegrationProfilePlots from "./RadialIntegrationProfilePlots";
 import Select, {SelectChangeEvent} from "@mui/material/Select";
 
 type MyProps = {
@@ -50,11 +50,14 @@ class DataProcessingPlots extends Component<MyProps, MyState> {
                 this.setState({type: "SPOT_COUNT", xlabel: "Image number", ylabel: "Spot count" });
                 break;
             case 3:
-                this.setState({type: "RAD_INT", xlabel: "Q [A^-1]", ylabel: "Photon count"});
+                this.setState({type: "RAD_INT", xlabel: "Q [A<sup>-1</sup>]", ylabel: "Photon count"});
                 break;
             case 4:
                 this.setState({type: "INDEXING_RATE_PER_FILE", xlabel: "File number", ylabel: "Indexing rate"});
                 break;
+            case 5:
+                this.setState({type: "RAD_INT_PER_FILE", xlabel: "Q [A^-1]", ylabel: "Photon count"});
+                break;
         }
     }
 
@@ -63,14 +66,15 @@ class DataProcessingPlots extends Component<MyProps, MyState> {
     };
 
     render() {
-        return <Paper style={{textAlign: 'center'}} sx={{ height: 430, width: "100%" }}>
+        return <Paper style={{textAlign: 'center'}} sx={{ height: 630, width: "100%" }}>
             <Toolbar>
-                <Grid container sx={{ minWidth: 300 }} >
+                <Grid container sx={{ minWidth: 450 }} >
                 <Tabs value={this.state.tab} onChange={this.tabsOnChange}>
                     <Tab label="Indexing"  value={1}/>
                     <Tab label="Indexing/file" value={4} />
                     <Tab label="Spot finding" value={2} />
-                    <Tab label="Radial integration" value={3} />
+                    <Tab label="Rad. int." value={3} />
+                    <Tab label="Rad. int./file" value={5} />
                 </Tabs>
                 </Grid>
                 <Grid container justifyContent="flex-end">
@@ -94,9 +98,13 @@ class DataProcessingPlots extends Component<MyProps, MyState> {
                     </FormControl>
                 </Grid>
             </Toolbar>
-            <Box sx={{width:"95%", height: 350}} >
-            <DataProcessingPlot addr={this.addr} type={this.state.type} xlabel={this.state.xlabel} ylabel={this.state.ylabel}
-                                binning={Number(this.state.binning)}/>
+            <Box sx={{width:"95%", height: 550}} >
+                {
+                    (this.state.type === "RAD_INT_PER_FILE") ?
+                        <RadialIntegrationProfilePlots addr={this.addr} /> :
+                        <DataProcessingPlot addr={this.addr} type={this.state.type} xlabel={this.state.xlabel} ylabel={this.state.ylabel}
+                                            binning={Number(this.state.binning)}/>
+                }
             </Box>
         </Paper>
     }

frontend_ui/src/components/DataProcessingSettings.tsx

@@ -120,7 +120,7 @@ class DataProcessingSettings extends Component<MyProps, MyState> {
     }
 
     render() {
-        return <Paper style={{textAlign: 'center'}} sx={{ height: 430, width: '100%' }}>
+        return <Paper style={{textAlign: 'center'}} sx={{ height: 630, width: '100%' }}>
                     <Grid container spacing={0}>
 
                         <Grid item xs={1}/>

frontend_ui/src/components/MultiLinePlotWrapper.js

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+
+import Plot from "react-plotly.js";
+
+// Not using TypeScript, as plotly is not TypeScript :(
+
+class MultiLinePlotWrapper extends Component {
+    render() {
+        return <Plot
+            style={{width: "100%", height: "100%"}}
+            data={this.props.data}
+            layout={ {
+                xaxis: {title: this.props.xaxis},
+                yaxis: {title: this.props.yaxis},
+                uirevision: true
+            } }
+            config = {{responsive: true}}
+        />
+    }
+}
+
+export default MultiLinePlotWrapper;

frontend_ui/src/components/RadialIntegrationProfilePlots.tsx

@@ -0,0 +1,98 @@
+import React, {Component} from 'react';
+
+import MultiLinePlotWrapper from "./MultiLinePlotWrapper";
+import {handleErrors} from "./handleErrors";
+
+type MyProps = {
+    addr: string;
+};
+
+type Plot = {
+    x: number[],
+    y: number[]
+}
+
+type RadialProfile = {
+    plot: Plot,
+    title: string
+}
+
+type RadialProfiles = RadialProfile[]
+
+type PlotlyPlot = {
+    x: number[],
+    y: number[],
+    type: string,
+    mode: string,
+    name: string
+}
+
+type PlotlyData = PlotlyPlot[]
+
+type MyState = {
+    profiles : RadialProfiles,
+    connection_error: boolean
+}
+
+class RadialIntegrationProfilePlots extends Component<MyProps, MyState> {
+    addr: string;
+    interval: undefined | NodeJS.Timer;
+
+    state: MyState = {
+        profiles: [
+            {
+                plot: {
+                    x: [0, 100, 200, 300, 400, 500],
+                    y: [0.1, 0.3, 0.5, 0.2, 0.0, 0.1]
+                },
+                title: "dataset"
+            }
+        ],
+        connection_error: true
+    }
+
+    constructor(props: MyProps) {
+        super(props);
+        this.addr = props.addr;
+    }
+
+    getValues() {
+        fetch(this.addr + 'data_processing/rad_int_profiles', {
+            method: "GET"
+        }).then(handleErrors)
+            .then(res => res.json())
+            .then(data => this.setState({profiles: data.profiles, connection_error: false}))
+            .catch(error => {
+                console.log(error);
+                this.setState({connection_error: true});
+            });
+    }
+    componentDidMount() {
+        this.getValues();
+        this.interval = setInterval(() => this.getValues(), 500);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.interval);
+    }
+
+    render() {
+        if (this.state.profiles !== undefined) {
+            let data: PlotlyData = [];
+            this.state.profiles.map(d =>
+                data.push({
+                    x: d.plot.x,
+                    y: d.plot.y,
+                    type: "scatter",
+                    mode: "line",
+                    name: d.title
+                }));
+
+            console.log(data);
+            return <MultiLinePlotWrapper xaxis="Q [A<sup>-1</sup>]" yaxis="Photon count" data={data}/>
+        } else
+            return <div/>;
+    }
+}
+
+export default RadialIntegrationProfilePlots;