Skip to content

Commit 4a37f06

Browse files
noemifrisinanoemifrisina
committed
Use cards
1 parent c14d370 commit 4a37f06

File tree

1 file changed

+146
-109
lines changed

1 file changed

+146
-109
lines changed

‎src/screens/BeamlineStats.tsx‎

Lines changed: 146 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { Box, Grid2, Stack, useTheme } from "@mui/material";
1+
import {
2+
Box,
3+
Card,
4+
CardContent,
5+
Grid2,
6+
Stack,
7+
Typography,
8+
useTheme,
9+
} from "@mui/material";
210
import { PvItem } from "../pv/types";
311
import { PvComponent } from "../pv/PvComponent";
412
import { forceString, parseNumericPv } from "../pv/util";
@@ -11,123 +19,152 @@ type StateBoxProps = { bgColor: string; title: string; titleColor: string };
1119
// Maybe I should leave this for separate PR when I put in drawer ...
1220
function PmacStagesState(props: StateBoxProps) {
1321
return (
14-
<Grid2
15-
bgcolor={props.bgColor}
16-
justifyContent={"center"}
17-
sx={{
18-
maxWidth: 500,
19-
position: "relative",
20-
padding: 2,
21-
display: "flex",
22-
}}
23-
>
24-
<Stack alignItems={"center"}>
25-
<Box color={props.titleColor}>
26-
<b>{props.title}</b>
27-
</Box>
28-
<Stack spacing={2} direction="row">
29-
<Stack alignItems={"center"} spacing={1}>
30-
<PvComponent
31-
label="Stage X"
32-
pv="ca://ME14E-MO-CHIP-01:X.RBV"
33-
transformValue={parseNumericPv}
34-
decimals={4}
35-
/>
36-
<PvComponent
37-
label="Stage Y"
38-
pv="ca://ME14E-MO-CHIP-01:Y.RBV"
39-
transformValue={parseNumericPv}
40-
decimals={4}
41-
/>
42-
<PvComponent
43-
label="Stage Z"
44-
pv="ca://ME14E-MO-CHIP-01:Z.RBV"
45-
transformValue={parseNumericPv}
46-
decimals={4}
47-
/>
48-
</Stack>
49-
<Stack alignItems={"center"} spacing={1} justifyContent={"center"}>
50-
<PvComponent
51-
label="Scan Status"
52-
pv="ca://BL24I-MO-STEP-14:signal:P2401"
53-
transformValue={forceString}
54-
/>
55-
<PvComponent
56-
label="Frames Counter"
57-
pv="ca://BL24I-MO-STEP-14:signal:P2402"
58-
transformValue={forceString}
59-
/>
60-
</Stack>
61-
</Stack>
62-
</Stack>
63-
</Grid2>
22+
<Card variant="outlined" sx={{ minWidth: 300, bgcolor: props.bgColor }}>
23+
<CardContent>
24+
<Typography
25+
variant="h1"
26+
sx={{
27+
color: props.titleColor,
28+
fontSize: 18,
29+
fontWeight: "fontWeightBold",
30+
}}
31+
>
32+
{props.title}
33+
</Typography>
34+
<PvComponent
35+
label="Stage X"
36+
pv="ca://ME14E-MO-CHIP-01:X.RBV"
37+
transformValue={parseNumericPv}
38+
decimals={4}
39+
/>
40+
<PvComponent
41+
label="Stage Y"
42+
pv="ca://ME14E-MO-CHIP-01:Y.RBV"
43+
transformValue={parseNumericPv}
44+
decimals={4}
45+
/>
46+
<PvComponent
47+
label="Stage Z"
48+
pv="ca://ME14E-MO-CHIP-01:Z.RBV"
49+
transformValue={parseNumericPv}
50+
decimals={4}
51+
/>
52+
<PvComponent
53+
label="Scan Status"
54+
pv="ca://BL24I-MO-STEP-14:signal:P2401"
55+
transformValue={forceString}
56+
/>
57+
<PvComponent
58+
label="Frames Counter"
59+
pv="ca://BL24I-MO-STEP-14:signal:P2402"
60+
transformValue={forceString}
61+
/>
62+
</CardContent>
63+
</Card>
64+
);
65+
}
66+
67+
function BeamlineInfo(props: StateBoxProps) {
68+
return (
69+
<Card variant="outlined" sx={{ minWidth: 300, bgcolor: props.bgColor }}>
70+
<CardContent>
71+
<Typography
72+
variant="h1"
73+
sx={{
74+
color: props.titleColor,
75+
fontSize: 18,
76+
fontWeight: "fontWeightBold",
77+
}}
78+
>
79+
{props.title}
80+
</Typography>
81+
<PvComponent
82+
label="Flux"
83+
pv="ca://BL24I-EA-FLUX-01:XBPM-03"
84+
transformValue={parseNumericPv}
85+
decimals={2}
86+
scaleFactor={1e-9}
87+
render={({ label, value }: PvItem) => {
88+
return (
89+
<Box>
90+
<p>
91+
<b>{label}:</b> {value}e+09
92+
</p>
93+
</Box>
94+
);
95+
}}
96+
/>
97+
<PvComponent
98+
label="Energy"
99+
pv="ca://BL24I-MO-DCM-01:ENERGY.RBV"
100+
transformValue={parseNumericPv}
101+
decimals={4}
102+
/>
103+
<PvComponent
104+
label="Filter Transmission"
105+
pv="ca://BL24I-OP-ATTN-01:MATCH"
106+
transformValue={parseNumericPv}
107+
decimals={4}
108+
/>
109+
</CardContent>
110+
</Card>
111+
);
112+
}
113+
114+
function ShuttersState(props: StateBoxProps) {
115+
return (
116+
<Card variant="outlined" sx={{ minWidth: 300, bgcolor: props.bgColor }}>
117+
<CardContent>
118+
<Typography
119+
variant="h1"
120+
sx={{
121+
color: props.titleColor,
122+
fontSize: 18,
123+
fontWeight: "fontWeightBold",
124+
}}
125+
>
126+
{props.title}
127+
</Typography>
128+
<PvComponent
129+
label="Experiment Shutter"
130+
pv="ca://BL24I-PS-SHTR-01:CON"
131+
transformValue={forceString}
132+
/>
133+
<PvComponent
134+
label="Fast Shutter"
135+
pv="ca://BL24I-EA-SHTR-01:STA"
136+
transformValue={forceString}
137+
/>
138+
</CardContent>
139+
</Card>
64140
);
65141
}
66142

67143
export function BeamlineStatsTabPanel() {
68144
const theme = useTheme();
69145
const bgColor = theme.palette.background.paper;
70146
return (
71-
<Box sx={{ flexGrow: 1 }}>
72-
<Stack spacing={4} alignItems={"center"}>
147+
<Box sx={{ flexGrow: 1, marginLeft: 30, marginRight: 30 }}>
148+
{/* <Stack spacing={4} alignItems={"center"}> */}
149+
<Stack spacing={4}>
73150
<WorkerStatus />
74-
<Grid2 container spacing={3} justifyContent="center">
75-
<Box bgcolor={bgColor}>
76-
<PvComponent
77-
label="Flux"
78-
pv="ca://BL24I-EA-FLUX-01:XBPM-03"
79-
transformValue={parseNumericPv}
80-
decimals={2}
81-
scaleFactor={1e-9}
82-
render={({ label, value }: PvItem) => {
83-
return (
84-
<Box>
85-
<p>
86-
<b>{label}:</b> {value}e+09
87-
</p>
88-
</Box>
89-
);
90-
}}
91-
/>
92-
</Box>
93-
<Box bgcolor={bgColor}>
94-
<PvComponent
95-
label="Energy"
96-
pv="ca://BL24I-MO-DCM-01:ENERGY.RBV"
97-
transformValue={parseNumericPv}
98-
decimals={4}
99-
/>
100-
</Box>
101-
<Box bgcolor={bgColor}>
102-
<PvComponent
103-
label="Filter Transmission"
104-
pv="ca://BL24I-OP-ATTN-01:MATCH"
105-
transformValue={parseNumericPv}
106-
decimals={4}
107-
/>
108-
</Box>
151+
<Grid2 container spacing={2}>
152+
<BeamlineInfo
153+
bgColor={bgColor}
154+
title="Beamline Status"
155+
titleColor={theme.palette.info.main}
156+
/>
157+
<ShuttersState
158+
bgColor={bgColor}
159+
title="Shutters"
160+
titleColor={theme.palette.info.main}
161+
/>
162+
<PmacStagesState
163+
bgColor={bgColor}
164+
title="Serial Fixed Target Stages"
165+
titleColor={theme.palette.info.main}
166+
/>
109167
</Grid2>
110-
<Grid2 container spacing={4} justifyContent="center">
111-
<Box bgcolor={bgColor}>
112-
<PvComponent
113-
label="Experiment Shutter"
114-
pv="ca://BL24I-PS-SHTR-01:CON"
115-
transformValue={forceString}
116-
/>
117-
</Box>
118-
<Box bgcolor={bgColor}>
119-
<PvComponent
120-
label="Fast Shutter"
121-
pv="ca://BL24I-EA-SHTR-01:STA"
122-
transformValue={forceString}
123-
/>
124-
</Box>
125-
</Grid2>
126-
<PmacStagesState
127-
bgColor={bgColor}
128-
title="Serial Fixed Target Stages"
129-
titleColor={theme.palette.info.main}
130-
/>
131168
</Stack>
132169
</Box>
133170
);

0 commit comments

Comments
 (0)