mx/Jungfraujoch
0
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 37 Wiki Activity

Frontend: Update for Python gRPC <-> http bridge

Browse Source
This commit is contained in:
leonarski_f
2023-04-08 20:13:42 +02:00
parent 53c2e0bb0d
commit 1bb490bfa3
6 changed files with 179 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend_ui/src/App.tsx
View File

@@ -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 {

191
frontend_ui/src/components/Calibration.tsx
View File

@@ -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<MyProps, MyState> {
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<MyProps, MyState> {
}
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<MyProps, MyState> {
}
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 <Paper style={{textAlign: 'center'}} sx={{ height: 527, width: '100%' }}>
{this.state.calib.module_statistics !== undefined ?
<DataGrid
getRowId={(row) => 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]}
/>
/> : <div/>
}
</Paper>
}

34
frontend_ui/src/components/DataProcessingPlots.tsx
View File

@@ -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<MyProps, MyState> {
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<MyProps, MyState> {
}
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<MyProps, MyState> {
selectPlot() {
switch (this.state.tab) {
case 1:
if (this.state.plots.indexing_rate !== undefined)
if (this.state.plots.indexingRate !== undefined)
return <PlotWrapper xaxis="Image number" yaxis="Indexing rate"
x={this.state.plots.indexing_rate.x} y={this.state.plots.indexing_rate.y}/>;
x={this.state.plots.indexingRate.x} y={this.state.plots.indexingRate.y}/>;
else return <div/>
case 2:
if (this.state.plots.bkg_estimate !== undefined)
if (this.state.plots.bkgEstimate !== undefined)
return <PlotWrapper xaxis="Image number" yaxis="Photon count"
x={this.state.plots.bkg_estimate.x} y={this.state.plots.bkg_estimate.y}/>;
x={this.state.plots.bkgEstimate.x} y={this.state.plots.bkgEstimate.y}/>;
else return <div/>
case 3:
if (this.state.plots.spot_count !== undefined)
if (this.state.plots.spotCount !== undefined)
return <PlotWrapper xaxis="Image number" yaxis="Spot count"
x={this.state.plots.spot_count.x} y={this.state.plots.spot_count.y}/>;
x={this.state.plots.spotCount.x} y={this.state.plots.spotCount.y}/>;
else return <div/>
case 4:
if (this.state.plots.radial_int_profile !== undefined)
if (this.state.plots.radialIntProfile !== undefined)
return <PlotWrapper xaxis="Q [A^-1]" yaxis="Photon count"
x={this.state.plots.radial_int_profile.x} y={this.state.plots.radial_int_profile.y}/>;
x={this.state.plots.radialIntProfile.x} y={this.state.plots.radialIntProfile.y}/>;
else return <div/>
default:
return <div/>

54
frontend_ui/src/components/DataProcessingSettings.tsx
View File

@@ -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<MyProps, MyState> {
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<MyProps, MyState> {
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<MyProps, MyState> {
}
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<MyProps, MyState> {
{
s : {
...prevState.s,
photon_count_threshold: newValue as number
photonCountThreshold: newValue as number
}
}
));
@@ -88,7 +88,7 @@ class DataProcessingSettings extends Component<MyProps, MyState> {
{
s : {
...prevState.s,
signal_to_noise_threshold: newValue as number
signalToNoiseThreshold: newValue as number
}
}
));
@@ -100,7 +100,7 @@ class DataProcessingSettings extends Component<MyProps, MyState> {
{
s : {
...prevState.s,
min_pix_per_spot: newValue as number
minPixPerSpot: newValue as number
}
}
));
@@ -112,7 +112,7 @@ class DataProcessingSettings extends Component<MyProps, MyState> {
{
s : {
...prevState.s,
high_resolution_limit: newValue as number
highResolutionLimit: newValue as number
}
}
));
@@ -128,24 +128,24 @@ class DataProcessingSettings extends Component<MyProps, MyState> {
<br/><strong>Data processing parameters</strong><br/><br/>
<Typography gutterBottom> Count threshold </Typography>
<Slider disabled={this.state.connection_error}
value={Number(this.state.s.photon_count_threshold)}
value={Number(this.state.s.photonCountThreshold)}
onChange={this.setPhotonCountThreshold}
min={1} max={50} step={1} valueLabelDisplay="auto" />
<br/><Typography> Signal-to-noise threshold </Typography>
<Slider disabled={this.state.connection_error}
value={Number(this.state.s.signal_to_noise_threshold)}
value={Number(this.state.s.signalToNoiseThreshold)}
onChange={this.setSignalToNoiseThreshold}
min={2} max={10} step={0.5} valueLabelDisplay="auto" />
<br/><Typography> Minimum pixel / spot </Typography>
<Slider disabled={this.state.connection_error}
value={Number(this.state.s.min_pix_per_spot)}
value={Number(this.state.s.minPixPerSpot)}
onChange={this.setMinPixPerSpot}
min={1} max={8} step={1} valueLabelDisplay="auto" />
<Typography> High resolution limit [&#8491;] </Typography>
<Slider disabled={this.state.connection_error}
value={Number(this.state.s.high_resolution_limit)}
value={Number(this.state.s.highResolutionLimit)}
onChange={this.setHighResolutionLimit}
min={1} max={5} step={0.2} valueLabelDisplay="auto" />
<br/>

59
frontend_ui/src/components/DetectorSettings.tsx
View File

@@ -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<MyProps, MyState> {
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<MyProps, MyState> {
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<MyProps, MyState> {
updateFrameTime = (event: React.ChangeEvent<HTMLInputElement>) => {
this.updateCollectionTime(event.target.value, this.state.s.count_time_us);
this.updateCollectionTime(event.target.value, this.state.s.countTimeUs);
}
updateCountTime = (event: React.ChangeEvent<HTMLInputElement>) => {
this.updateCollectionTime(this.state.s.frame_time_us, event.target.value);
this.updateCollectionTime(this.state.s.frameTimeUs, event.target.value);
}
storageCellToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
this.setState(prevState => (
{
s : {...prevState.s,
use_storage_cells: event.target.checked}
useStorageCells: event.target.checked}
}
));
}
@@ -105,19 +104,19 @@ class DetectorSettings extends Component<MyProps, MyState> {
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<MyProps, MyState> {
}
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<MyProps, MyState> {
<TextField id="frame_time" label="Frame (unsummed) time" variant="outlined"
error={this.state.frame_time_error}
onChange={this.updateFrameTime}
value={this.state.s.frame_time_us}
value={this.state.s.frameTimeUs}
disabled={this.state.connection_error}
InputProps = {{
inputProps: {
@@ -165,7 +164,7 @@ class DetectorSettings extends Component<MyProps, MyState> {
<TextField id="integration_time" label="Integration time" variant="outlined"
error={this.state.count_time_error}
onChange={this.updateCountTime}
value={this.state.s.count_time_us}
value={this.state.s.countTimeUs}
disabled={this.state.connection_error}
InputProps = {{
inputProps: {
@@ -176,11 +175,11 @@ class DetectorSettings extends Component<MyProps, MyState> {
<br/><br/>
<Switch onChange={this.storageCellToggle} checked={this.state.s.use_storage_cells}
<Switch onChange={this.storageCellToggle} checked={this.state.s.useStorageCells}
disabled={this.state.connection_error}/>
Measure with storage cells<br/><br/>
<Switch onChange={this.rawDataToggle} checked={this.state.s.collect_raw_data}
<Switch onChange={this.rawDataToggle} checked={this.state.s.collectRawData}
disabled={this.state.connection_error}/>
Collect raw data <br/><br/>

17
frontend_ui/src/components/StatusBar.tsx
View File

@@ -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<MyProps, MyState> {
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<MyProps, MyState> {
statusDescription() {
return <div>
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) + "%" : ""}
</div>
}
render() {