Frontend: Adjust plotting and add bkg estimate

2023-04-18 15:37:13 +02:00
parent 25cb4df0bf
commit 9b5228c0bd
5 changed files with 140 additions and 82 deletions
--- a/frontend_ui/src/App.tsx
+++ b/frontend_ui/src/App.tsx
@@ -9,6 +9,7 @@ import Calibration from "./components/Calibration";
 import StatusBar from "./components/StatusBar";
 import DataProcessingPlots from "./components/DataProcessingPlots";
 import DetectorSelection from "./components/DetectorSelection";
+import BkgEstimatePlot from "./components/BkgEstimatePlot";

 const jfjoch_theme = createTheme({
    palette: {
@@ -34,6 +35,11 @@ class App extends Component {
                  alignItems="center"
                  spacing={3}
            sx={{width: "95%"}}>
+                <Grid item xs={8}>
+                   <BkgEstimatePlot addr={addr}/>
+                </Grid>
+                <Grid item xs={4}>
+                </Grid>
                <Grid item xs={8}>
                    <DataProcessingPlots addr={addr}/>
                </Grid>
--- a/frontend_ui/src/components/BkgEstimatePlot.tsx
+++ b/frontend_ui/src/components/BkgEstimatePlot.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright (2019-2023) Paul Scherrer Institute
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import Paper from "@mui/material/Paper";
+import DataProcessingPlot from "./DataProcessingPlot";
+import React, {Component} from "react";
+import {handleErrors} from "./handleErrors";
+import PlotWrapper from "./PlotWrapper";
+import {Box} from "@mui/material";
+
+type MyProps = {
+    addr: string;
+};
+
+
+class BkgEstimatePlot extends Component<MyProps> {
+    addr: string;
+
+    constructor(props: MyProps) {
+        super(props);
+        this.addr = props.addr;
+    }
+
+    render() {
+        return <Paper style={{textAlign: 'center'}} sx={{height: 400, width: "100%"}}>
+            <Box sx={{width: "100%", height: 50}}>
+                <br/>
+                <center><strong>Background estimate</strong></center>
+            </Box>
+            <Box sx={{width: "95%", height: 350}}>
+                <DataProcessingPlot addr={this.addr} type={"BKG_ESTIMATE"} xlabel={"Image Number"}
+                                    ylabel={"Photon count"} binning={0}/><br/>
+            </Box>
+        </Paper>
+    }
+}
+
+export default BkgEstimatePlot;
--- a/frontend_ui/src/components/DataProcessingPlot.tsx
+++ b/frontend_ui/src/components/DataProcessingPlot.tsx
@@ -0,0 +1,73 @@
+import React, {Component} from 'react';
+
+import PlotWrapper from "./PlotWrapper";
+import {handleErrors} from "./handleErrors";
+
+type MyProps = {
+    addr: string;
+    type: string;
+    xlabel: string;
+    ylabel: string;
+    binning: number;
+};
+
+type Plot = {
+    x: number[],
+    y: number[]
+}
+
+type MyState = {
+    plot : Plot,
+    connection_error: boolean
+}
+
+class DataProcessingPlot extends Component<MyProps, MyState> {
+    addr: string;
+    interval: undefined | NodeJS.Timer;
+
+    state: MyState = {
+        plot: {
+            x: [0,100,200,300,400,500],
+            y: [0.1, 0.3,0.5, 0.2, 0.0, 0.1]
+        },
+        connection_error: true
+    }
+
+    constructor(props: MyProps) {
+        super(props);
+        this.addr = props.addr;
+    }
+
+    getValues() {
+        fetch(this.addr + 'data_processing/plots', {
+            method: "POST",
+            body: JSON.stringify({type: this.props.type, binning: this.props.binning})
+        }).then(handleErrors)
+            .then(res => res.json())
+            .then(data => this.setState({plot: data, 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.plot !== undefined)
+            return <PlotWrapper xaxis={this.props.xlabel} yaxis={this.props.ylabel} x={this.state.plot.x}
+                                y={this.state.plot.y}/>
+        else
+            return <div/>;
+
+    }
+}
+
+export default DataProcessingPlot;
+
--- a/frontend_ui/src/components/DataProcessingPlots.tsx
+++ b/frontend_ui/src/components/DataProcessingPlots.tsx
@@ -1,27 +1,18 @@
 import React, {Component} from 'react';

 import Paper from '@mui/material/Paper';
-import PlotWrapper from "./PlotWrapper";
 import {Box, Tab, Tabs} from "@mui/material";
-import {handleErrors} from "./handleErrors";
+import DataProcessingPlot from "./DataProcessingPlot";

 type MyProps = {
    addr: string;
 };

-type Plot = {
-    x: number[],
-    y: number[]
-}
-
 type MyState = {
-    plots : {
-        indexingRate: Plot | undefined,
-        bkgEstimate: Plot | undefined,
-        spotCount: Plot | undefined,
-        radialIntProfile: Plot | undefined
-    },
-    tab: number,
+    type: string,
+    xlabel: string,
+    ylabel: string,
+    tab : number,
    connection_error: boolean
 }

@@ -30,24 +21,9 @@ class DataProcessingPlots extends Component<MyProps, MyState> {
    interval: undefined | NodeJS.Timer;

    state: MyState = {
-        plots : {
-            indexingRate: {
-                x: [0,100,200,300,400,500],
-                y: [0.1, 0.3,0.5, 0.2, 0.0, 0.1]
-            },
-            bkgEstimate: {
-                x: [0,100,200,300,400,500],
-                y: [50.1, 35.0, 20.4, 11.5, 7.1, 9.6]
-            },
-            spotCount: {
-                x: [0,100,200,300,400,500],
-                y: [12,13,45,11,5,47]
-            },
-            radialIntProfile: {
-                x: [0,100,200,300,400,500],
-                y: [12,13,45,11,5,47]
-            }
-        },
+        type: "INDEXING_RATE",
+        xlabel: "Indexing rate",
+        ylabel: "Photon count",
        tab: 1,
        connection_error: true
    }
@@ -57,71 +33,34 @@ class DataProcessingPlots extends Component<MyProps, MyState> {
        this.addr = props.addr;
    }

-    getValues() {
-        fetch(this.addr + 'data_processing/plots')
-            .then(handleErrors)
-            .then(res => res.json())
-            .then(data => this.setState({plots: data, connection_error: false}))
-            .catch(error => {
-                console.log(error);
-                this.setState({connection_error: true});
-            });
-    }
-    componentDidMount() {
-        this.getValues();
-        this.interval = setInterval(() => this.getValues(), 1000);
-    }
-
-    componentWillUnmount() {
-        clearInterval(this.interval);
-    }
-
    tabsOnChange = (event: React.SyntheticEvent, value: number) => {
        this.setState({tab: value});
-    }
-
-    selectPlot() {
-        switch (this.state.tab) {
+        switch (value) {
            case 1:
-                if (this.state.plots.indexingRate !== undefined)
-                    return <PlotWrapper xaxis="Image number" yaxis="Indexing rate"
-                                        x={this.state.plots.indexingRate.x} y={this.state.plots.indexingRate.y}/>;
-                else return <div/>
+                this.setState({type: "INDEXING_RATE", xlabel: "Image number", ylabel: "Indexing rate"});
+                break;
            case 2:
-                if (this.state.plots.bkgEstimate !== undefined)
-                    return <PlotWrapper xaxis="Image number" yaxis="Photon count"
-                                        x={this.state.plots.bkgEstimate.x} y={this.state.plots.bkgEstimate.y}/>;
-                else return <div/>
+                this.setState({type: "SPOT_COUNT", xlabel: "Image number", ylabel: "Spot count" });
+                break;
            case 3:
-                if (this.state.plots.spotCount !== undefined)
-                    return <PlotWrapper xaxis="Image number" yaxis="Spot count"
-                                        x={this.state.plots.spotCount.x} y={this.state.plots.spotCount.y}/>;
-                else return <div/>
-            case 4:
-                if (this.state.plots.radialIntProfile !== undefined)
-                    return <PlotWrapper xaxis="Q [A^-1]" yaxis="Photon count"
-                                        x={this.state.plots.radialIntProfile.x} y={this.state.plots.radialIntProfile.y}/>;
-                else return <div/>
-            default:
-                return <div/>
+                this.setState({type: "RAD_INT", xlabel: "Q [A^-1]", ylabel: "Photon count"});
+                break;
        }
    }
+
    render() {
        return <Paper style={{textAlign: 'center'}} sx={{ height: 400, width: "100%" }}>
            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                <Tabs value={this.state.tab} onChange={this.tabsOnChange}>
                    <Tab label="Indexing"  value={1}/>
-                    <Tab label="Background" value={2} />
-                    <Tab label="Spot finding" value={3} />
-
-                    <Tab label="Rad. integration" value={4} />
+                    <Tab label="Spot finding" value={2} />
+                    <Tab label="Rad. integration" value={3} />
                </Tabs>
            </Box>
-
            <Box sx={{width:"95%", height: 350}} >
-                {this.selectPlot()}
+            <DataProcessingPlot addr={this.addr} type={this.state.type} xlabel={this.state.xlabel} ylabel={this.state.ylabel}
+                                binning={0}/>
            </Box>
-
        </Paper>
    }
 }
--- a/python/jfjoch_grpc2http.py
+++ b/python/jfjoch_grpc2http.py
@@ -185,7 +185,7 @@ async def get_settings(data: str = Body(...)):
        raise HTTPException(status_code=400, detail=e.details())


-@app.put("/detector/measurement_statistics")
+@app.get("/detector/measurement_statistics")
 async def get_meas_stats():
    try:
        stub = jfjoch_pb2_grpc.gRPC_JFJochBrokerStub(channel)