From 1bb490bfa36b3b2486b436cf2ea2b9ffcbc73267 Mon Sep 17 00:00:00 2001 From: Filip Leonarski Date: Sat, 8 Apr 2023 20:13:42 +0200 Subject: [PATCH] Frontend: Update for Python gRPC <-> http bridge --- frontend_ui/src/App.tsx | 3 +- frontend_ui/src/components/Calibration.tsx | 191 +++++++++--------- .../src/components/DataProcessingPlots.tsx | 34 ++-- .../src/components/DataProcessingSettings.tsx | 54 ++--- .../src/components/DetectorSettings.tsx | 59 +++--- frontend_ui/src/components/StatusBar.tsx | 17 +- 6 files changed, 179 insertions(+), 179 deletions(-) diff --git a/frontend_ui/src/App.tsx b/frontend_ui/src/App.tsx index 4c2e854d..de9fe3b7 100644 --- a/frontend_ui/src/App.tsx +++ b/frontend_ui/src/App.tsx @@ -16,7 +16,8 @@ const jfjoch_theme = createTheme({ }, }); -const addr: string = "http://xbl-daq-38:5232"; +const base_url: URL = new URL("/", document.baseURI); +const addr: string = base_url.href; class App extends Component { diff --git a/frontend_ui/src/components/Calibration.tsx b/frontend_ui/src/components/Calibration.tsx index b967a234..66166eb2 100644 --- a/frontend_ui/src/components/Calibration.tsx +++ b/frontend_ui/src/components/Calibration.tsx @@ -10,20 +10,20 @@ type MyProps = { }; type CalibInfo = { - module_number: number | string, - storage_cell_number: number | string, - pedestal_g0_mean: number, - pedestal_g1_mean: number, - pedestal_g2_mean: number, - gain_g0_mean: number, - gain_g1_mean: number, - gain_g2_mean: number, - masked_pixels: number | string + moduleNumber: number | string, + storageCellNumber: number | string, + pedestalG0Mean: number, + pedestalG1Mean: number, + pedestalG2Mean: number, + gainG0Mean: number, + gainG1Mean: number, + gainG2Mean: number, + MaskedPixels: number | string }; type MyState = { calib: { - module_statistics: CalibInfo[] + module_statistics: CalibInfo[] | undefined }; connection_error: boolean; }; @@ -35,98 +35,97 @@ class Calibration extends React.Component { constructor(props: MyProps) { super(props); this.addr = props.addr; - console.log(this.addr); } state : MyState = { calib: {module_statistics: [ { - module_number: 0, - storage_cell_number: 0, - pedestal_g0_mean: 3500, - pedestal_g1_mean: 14000, - pedestal_g2_mean: 15000, - gain_g0_mean: 30, - gain_g1_mean: 11, - gain_g2_mean: 10, - masked_pixels: 80 + moduleNumber: 0, + storageCellNumber: 0, + pedestalG0Mean: 3500, + pedestalG1Mean: 14000, + pedestalG2Mean: 15000, + gainG0Mean: 30, + gainG1Mean: 11, + gainG2Mean: 10, + MaskedPixels: 80 }, { - module_number: 1, - storage_cell_number: 0, - pedestal_g0_mean: 3500, - pedestal_g1_mean: 14000, - pedestal_g2_mean: 15000, - gain_g0_mean: 30, - gain_g1_mean: 11, - gain_g2_mean: 10, - masked_pixels: 80 + moduleNumber: 1, + storageCellNumber: 0, + pedestalG0Mean: 3500, + pedestalG1Mean: 14000, + pedestalG2Mean: 15000, + gainG0Mean: 30, + gainG1Mean: 11, + gainG2Mean: 10, + MaskedPixels: 80 }, { - module_number: 2, - storage_cell_number: 0, - pedestal_g0_mean: 3500, - pedestal_g1_mean: 14000, - pedestal_g2_mean: 15000, - gain_g0_mean: 30, - gain_g1_mean: 11, - gain_g2_mean: 10, - masked_pixels: 80 + moduleNumber: 2, + storageCellNumber: 0, + pedestalG0Mean: 3500, + pedestalG1Mean: 14000, + pedestalG2Mean: 15000, + gainG0Mean: 30, + gainG1Mean: 11, + gainG2Mean: 10, + MaskedPixels: 80 }, { - module_number: 3, - storage_cell_number: 0, - pedestal_g0_mean: 3500, - pedestal_g1_mean: 14000, - pedestal_g2_mean: 15000, - gain_g0_mean: 30, - gain_g1_mean: 11, - gain_g2_mean: 10, - masked_pixels: 80 + moduleNumber: 3, + storageCellNumber: 0, + pedestalG0Mean: 3500, + pedestalG1Mean: 14000, + pedestalG2Mean: 15000, + gainG0Mean: 30, + gainG1Mean: 11, + gainG2Mean: 10, + MaskedPixels: 80 }, { - module_number: 4, - storage_cell_number: 0, - pedestal_g0_mean: 3500, - pedestal_g1_mean: 14000, - pedestal_g2_mean: 15000, - gain_g0_mean: 30, - gain_g1_mean: 11, - gain_g2_mean: 10, - masked_pixels: 80 + moduleNumber: 4, + storageCellNumber: 0, + pedestalG0Mean: 3500, + pedestalG1Mean: 14000, + pedestalG2Mean: 15000, + gainG0Mean: 30, + gainG1Mean: 11, + gainG2Mean: 10, + MaskedPixels: 80 }, { - module_number: 5, - storage_cell_number: 0, - pedestal_g0_mean: 3500, - pedestal_g1_mean: 14000, - pedestal_g2_mean: 15000, - gain_g0_mean: 30, - gain_g1_mean: 11, - gain_g2_mean: 10, - masked_pixels: 80 + moduleNumber: 5, + storageCellNumber: 0, + pedestalG0Mean: 3500, + pedestalG1Mean: 14000, + pedestalG2Mean: 15000, + gainG0Mean: 30, + gainG1Mean: 11, + gainG2Mean: 10, + MaskedPixels: 80 }, { - module_number: 6, - storage_cell_number: 0, - pedestal_g0_mean: 3500, - pedestal_g1_mean: 14000, - pedestal_g2_mean: 15000, - gain_g0_mean: 30, - gain_g1_mean: 11, - gain_g2_mean: 10, - masked_pixels: 80 + moduleNumber: 6, + storageCellNumber: 0, + pedestalG0Mean: 3500, + pedestalG1Mean: 14000, + pedestalG2Mean: 15000, + gainG0Mean: 30, + gainG1Mean: 11, + gainG2Mean: 10, + MaskedPixels: 80 }, { - module_number: 7, - storage_cell_number: 0, - pedestal_g0_mean: 3500, - pedestal_g1_mean: 14000, - pedestal_g2_mean: 15000, - gain_g0_mean: 30, - gain_g1_mean: 11, - gain_g2_mean: 10, - masked_pixels: 80 + moduleNumber: 7, + storageCellNumber: 0, + pedestalG0Mean: 3500, + pedestalG1Mean: 14000, + pedestalG2Mean: 15000, + gainG0Mean: 30, + gainG1Mean: 11, + gainG2Mean: 10, + MaskedPixels: 80 } ], }, @@ -134,7 +133,7 @@ class Calibration extends React.Component { } getValues() { - fetch(this.addr + '/detector/calibration') + fetch(this.addr + 'detector/calibration') .then(handleErrors) .then(res => res.json()) .then(data => this.setState({calib: data, connection_error: false})) @@ -153,26 +152,28 @@ class Calibration extends React.Component { } columns = [ - { field: 'module_number', type: 'number', headerName: 'Module' }, - { field: 'storage_cell_number', type: 'number', headerName: 'SC'}, - { field: 'masked_pixels', headerName: 'Masked pxls', type: 'number'}, - { field: 'pedestal_g0_mean', headerName: 'Pedestal G0', type: 'number'}, - { field: 'pedestal_g1_mean', headerName: 'Pedestal G1', type: 'number'}, - { field: 'pedestal_g2_mean', headerName: 'Pedestal G2', type: 'number'}, - { field: 'gain_g0_mean', headerName: 'Gain G0', type: 'number'}, - { field: 'gain_g1_mean', headerName: 'Gain G1', type: 'number'}, - { field: 'gain_g2_mean', headerName: 'Gain G2', type: 'number'} + { field: 'moduleNumber', type: 'number', headerName: 'Module' }, + { field: 'storageCellNumber', type: 'number', headerName: 'SC'}, + { field: 'MaskedPixels', headerName: 'Masked pxls', type: 'number'}, + { field: 'pedestalG0Mean', headerName: 'Pedestal G0', type: 'number'}, + { field: 'pedestalG1Mean', headerName: 'Pedestal G1', type: 'number'}, + { field: 'pedestalG2Mean', headerName: 'Pedestal G2', type: 'number'}, + { field: 'gainG0Mean', headerName: 'Gain G0', type: 'number'}, + { field: 'gainG1Mean', headerName: 'Gain G1', type: 'number'}, + { field: 'gainG2Mean', headerName: 'Gain G2', type: 'number'} ]; render() { return + {this.state.calib.module_statistics !== undefined ? Number(row.module_number) * 64 + Number(row.storage_cell_number)} + getRowId={(row) => Number(row.moduleNumber) * 64 + Number(row.storageCellNumber)} rows={this.state.calib.module_statistics} columns={this.columns} pageSize={8} rowsPerPageOptions={[8]} - /> + /> :
+ } } diff --git a/frontend_ui/src/components/DataProcessingPlots.tsx b/frontend_ui/src/components/DataProcessingPlots.tsx index 5d6814c8..d8a46320 100644 --- a/frontend_ui/src/components/DataProcessingPlots.tsx +++ b/frontend_ui/src/components/DataProcessingPlots.tsx @@ -16,10 +16,10 @@ type Plot = { type MyState = { plots : { - indexing_rate: Plot | undefined, - bkg_estimate: Plot | undefined, - spot_count: Plot | undefined, - radial_int_profile: Plot | undefined + indexingRate: Plot | undefined, + bkgEstimate: Plot | undefined, + spotCount: Plot | undefined, + radialIntProfile: Plot | undefined }, tab: number, connection_error: boolean @@ -31,19 +31,19 @@ class DataProcessingPlots extends Component { state: MyState = { plots : { - indexing_rate: { + indexingRate: { x: [0,100,200,300,400,500], y: [0.1, 0.3,0.5, 0.2, 0.0, 0.1] }, - bkg_estimate: { + bkgEstimate: { x: [0,100,200,300,400,500], y: [50.1, 35.0, 20.4, 11.5, 7.1, 9.6] }, - spot_count: { + spotCount: { x: [0,100,200,300,400,500], y: [12,13,45,11,5,47] }, - radial_int_profile: { + radialIntProfile: { x: [0,100,200,300,400,500], y: [12,13,45,11,5,47] } @@ -58,7 +58,7 @@ class DataProcessingPlots extends Component { } getValues() { - fetch(this.addr + '/data_processing/plots') + fetch(this.addr + 'data_processing/plots') .then(handleErrors) .then(res => res.json()) .then(data => this.setState({plots: data, connection_error: false})) @@ -83,24 +83,24 @@ class DataProcessingPlots extends Component { selectPlot() { switch (this.state.tab) { case 1: - if (this.state.plots.indexing_rate !== undefined) + if (this.state.plots.indexingRate !== undefined) return ; + x={this.state.plots.indexingRate.x} y={this.state.plots.indexingRate.y}/>; else return
case 2: - if (this.state.plots.bkg_estimate !== undefined) + if (this.state.plots.bkgEstimate !== undefined) return ; + x={this.state.plots.bkgEstimate.x} y={this.state.plots.bkgEstimate.y}/>; else return
case 3: - if (this.state.plots.spot_count !== undefined) + if (this.state.plots.spotCount !== undefined) return ; + x={this.state.plots.spotCount.x} y={this.state.plots.spotCount.y}/>; else return
case 4: - if (this.state.plots.radial_int_profile !== undefined) + if (this.state.plots.radialIntProfile !== undefined) return ; + x={this.state.plots.radialIntProfile.x} y={this.state.plots.radialIntProfile.y}/>; else return
default: return
diff --git a/frontend_ui/src/components/DataProcessingSettings.tsx b/frontend_ui/src/components/DataProcessingSettings.tsx index c466c775..f2f015c2 100644 --- a/frontend_ui/src/components/DataProcessingSettings.tsx +++ b/frontend_ui/src/components/DataProcessingSettings.tsx @@ -10,15 +10,15 @@ type MyProps = { type MyState = { s: { - photon_count_threshold: number | string, - signal_to_noise_threshold: number | string, - min_pix_per_spot: number | string, - max_pix_per_spot: number | string, - local_bkg_size: number | string, - high_resolution_limit?: number | string, - low_resolution_limit?: number | string, - bkg_estimate_low_q: number | string, - bkg_estimate_high_q: number | string + photonCountThreshold: number | string, + signalToNoiseThreshold: number | string, + minPixPerSpot: number | string, + maxPixPerSpot: number | string, + localBkgSize: number | string, + highResolutionLimit?: number | string, + lowResolutionLimit?: number | string, + bkgEstimateLowQ: number | string, + bkgEstimateHighQ: number | string }, connection_error: boolean; } @@ -28,14 +28,14 @@ class DataProcessingSettings extends Component { interval : NodeJS.Timer | undefined; state : MyState = { s: { - photon_count_threshold: 8, - signal_to_noise_threshold: 3.0, - min_pix_per_spot: 2, - max_pix_per_spot: 50, - local_bkg_size: 5, - high_resolution_limit: 2.5, - bkg_estimate_low_q: 3, - bkg_estimate_high_q: 5 + photonCountThreshold: 8, + signalToNoiseThreshold: 3.0, + minPixPerSpot: 2, + maxPixPerSpot: 50, + localBkgSize: 5, + highResolutionLimit: 2.5, + bkgEstimateLowQ: 3, + bkgEstimateHighQ: 5 }, connection_error: true } @@ -45,7 +45,7 @@ class DataProcessingSettings extends Component { this.addr = props.addr; } putValues() { - fetch(this.addr + '/data_processing/settings', { + fetch(this.addr + 'data_processing/settings', { method: "PUT", body: JSON.stringify(this.state.s) }).then(handleErrors) @@ -53,7 +53,7 @@ class DataProcessingSettings extends Component { } getValues() { - fetch(this.addr + '/data_processing/settings') + fetch(this.addr + 'data_processing/settings') .then(handleErrors) .then(res => res.json()) .then(data => this.setState({s: data, connection_error: false})) @@ -76,7 +76,7 @@ class DataProcessingSettings extends Component { { s : { ...prevState.s, - photon_count_threshold: newValue as number + photonCountThreshold: newValue as number } } )); @@ -88,7 +88,7 @@ class DataProcessingSettings extends Component { { s : { ...prevState.s, - signal_to_noise_threshold: newValue as number + signalToNoiseThreshold: newValue as number } } )); @@ -100,7 +100,7 @@ class DataProcessingSettings extends Component { { s : { ...prevState.s, - min_pix_per_spot: newValue as number + minPixPerSpot: newValue as number } } )); @@ -112,7 +112,7 @@ class DataProcessingSettings extends Component { { s : { ...prevState.s, - high_resolution_limit: newValue as number + highResolutionLimit: newValue as number } } )); @@ -128,24 +128,24 @@ class DataProcessingSettings extends Component {
Data processing parameters

Count threshold
Signal-to-noise threshold
Minimum pixel / spot High resolution limit [Å]
diff --git a/frontend_ui/src/components/DetectorSettings.tsx b/frontend_ui/src/components/DetectorSettings.tsx index 33d78bc5..eccbdbfd 100644 --- a/frontend_ui/src/components/DetectorSettings.tsx +++ b/frontend_ui/src/components/DetectorSettings.tsx @@ -11,14 +11,14 @@ type MyProps = { type MyState = { s: { - frame_time_us: number | string, - use_storage_cells: boolean, - use_internal_packet_generator: boolean, - collect_raw_data: boolean, - count_time_us: number | string, - pedestal_g0_frames: number | string, - pedestal_g1_frames: number | string, - pedestal_g2_frames: number | string + frameTimeUs: number | string, + useStorageCells: boolean, + useInternalPacketGenerator: boolean, + collectRawData: boolean, + countTimeUs: number | string, + pedestalG0Frames: number | string, + pedestalG1Frames: number | string, + pedestalG2Frames: number | string }, frame_time_error: boolean, count_time_error: boolean, @@ -31,18 +31,17 @@ class DetectorSettings extends Component { constructor(props: MyProps) { super(props); this.addr = props.addr; - console.log(this.addr); } state = { s: { - frame_time_us: 1000, - use_storage_cells: false, - use_internal_packet_generator: false, - collect_raw_data: false, - count_time_us: 980, - pedestal_g0_frames: 2000, - pedestal_g1_frames: 300, - pedestal_g2_frames: 300 + frameTimeUs: 1000, + useStorageCells: false, + useInternalPacketGenerator: false, + collectRawData: false, + countTimeUs: 980, + pedestalG0Frames: 2000, + pedestalG1Frames: 300, + pedestalG2Frames: 300 }, frame_time_error: false, count_time_error: false, @@ -76,8 +75,8 @@ class DetectorSettings extends Component { frame_time_error: frame_err, count_time_error: count_err, s : {...prevState.s, - frame_time_us: frame_time, - count_time_us: count_time + frameTimeUs: frame_time, + countTimeUs: count_time } } )); @@ -85,18 +84,18 @@ class DetectorSettings extends Component { updateFrameTime = (event: React.ChangeEvent) => { - this.updateCollectionTime(event.target.value, this.state.s.count_time_us); + this.updateCollectionTime(event.target.value, this.state.s.countTimeUs); } updateCountTime = (event: React.ChangeEvent) => { - this.updateCollectionTime(this.state.s.frame_time_us, event.target.value); + this.updateCollectionTime(this.state.s.frameTimeUs, event.target.value); } storageCellToggle = (event: React.ChangeEvent) => { this.setState(prevState => ( { s : {...prevState.s, - use_storage_cells: event.target.checked} + useStorageCells: event.target.checked} } )); } @@ -105,19 +104,19 @@ class DetectorSettings extends Component { this.setState(prevState => ( { s : {...prevState.s, - collect_raw_data: event.target.checked} + collectRawData: event.target.checked} } )); } deactivate = () => { - fetch(this.addr + '/detector/deactivate', { + fetch(this.addr + 'detector/deactivate', { method: "POST" }).then(handleErrors) .catch(error => console.log(error) ); } putValues = () => { - fetch(this.addr + '/detector/settings', { + fetch(this.addr + 'detector/settings', { method: "PUT", body: JSON.stringify(this.state.s) }).then(handleErrors) @@ -125,7 +124,7 @@ class DetectorSettings extends Component { } getValues = () => { - fetch(this.addr + '/detector/settings') + fetch(this.addr + 'detector/settings') .then(handleErrors) .then(res => res.json()) .then(data => this.setState({ @@ -153,7 +152,7 @@ class DetectorSettings extends Component { { {

- Measure with storage cells

- Collect raw data

diff --git a/frontend_ui/src/components/StatusBar.tsx b/frontend_ui/src/components/StatusBar.tsx index eacbe03a..34b6fe47 100644 --- a/frontend_ui/src/components/StatusBar.tsx +++ b/frontend_ui/src/components/StatusBar.tsx @@ -32,9 +32,9 @@ type MyProps = { type MyState = { status: { - broker_state: string; + brokerState: string; progress?: number; - indexing_rate?: number; + indexingRate?: number; } connection_error: boolean; } @@ -53,31 +53,30 @@ class StatusBar extends Component { constructor(props: MyProps) { super(props); this.addr = props.addr; - console.log(this.addr); } state : MyState = { status: { - broker_state: "NOT_CONNECTED" + brokerState: "NOT_CONNECTED" }, connection_error: true } initialize = () => { - fetch(this.addr + '/detector/initialize', { + fetch(this.addr + 'detector/initialize', { method: "POST" }).then(handleErrors) .catch(error => console.log(error) ); } cancel = () => { - fetch(this.addr + '/detector/cancel', { + fetch(this.addr + 'detector/cancel', { method: "POST" }).then(handleErrors) .catch(error => console.log(error) ); } getValues() { - fetch(this.addr + '/detector/status') + fetch(this.addr + 'detector/status') .then(handleErrors) .then(res => res.json()) .then(data => this.setState({status: data, connection_error: false})) @@ -97,9 +96,9 @@ class StatusBar extends Component { statusDescription() { return
- State: {decodeDAQState (this.state.status.broker_state)} + State: {decodeDAQState (this.state.status.brokerState)} {"progress" in this.state.status ? " (" + FormatNumber(this.state.status.progress) + " %)" : ""} - {"indexing_rate" in this.state.status ? " Indexing rate: " + FormatNumber(this.state.status.indexing_rate) + "%" : ""} + {"indexing_rate" in this.state.status ? " Indexing rate: " + FormatNumber(this.state.status.indexingRate) + "%" : ""}
} render() {