Skip to content

Commit 95d817a

Browse files
tizayitizayi
committed
change structure of results
1 parent cf80f11 commit 95d817a

13 files changed

Lines changed: 178 additions & 123 deletions

‎src/app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default function App(): React.JSX.Element {
4040
maxWidth={{ lg: 500 }}
4141
overflow={{ md: "visible", lg: "scroll" }}
4242
>
43-
<Stack spacing={1} sx={{ mt:1, mb:1 }}>
43+
<Stack spacing={1} sx={{ mb:1 }}>
4444
<BeamlineSelector />
4545
<DetectorDataEntry />
4646
<BeamStopDataEntry />

‎src/data-entry/beamlineSelector.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,13 +147,13 @@ export default function BeamlineSelector(): React.JSX.Element {
147147
<Box
148148
sx={{
149149
px: 2,
150-
py: 1.5,
150+
py: 0.75,
151151
bgcolor: "grey.100",
152152
borderBottom: 1,
153153
borderColor: "divider",
154154
}}
155155
>
156-
<Typography variant="h6" fontWeight={600}>
156+
<Typography variant="subtitle1" fontWeight={600}>
157157
Beamline
158158
</Typography>
159159
</Box>

‎src/data-entry/beamstop.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,13 @@ export default function BeamStopDataEntry(): React.JSX.Element {
6464
<Box
6565
sx={{
6666
px: 2,
67-
py: 1.5,
67+
py: 0.75,
6868
bgcolor: "grey.100",
6969
borderBottom: 1,
7070
borderColor: "divider",
7171
}}
7272
>
73-
<Typography variant="h6" fontWeight={600}>
73+
<Typography variant="subtitle1" fontWeight={600}>
7474
Beamstop
7575
</Typography>
7676
</Box>

‎src/data-entry/cameraTube.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ function CardHeader() {
2626
<Box
2727
sx={{
2828
px: 2,
29-
py: 1.5,
29+
py: 0.75,
3030
bgcolor: "grey.100",
3131
borderBottom: 1,
3232
borderColor: "divider",
3333
}}
3434
>
35-
<Typography variant="h6" fontWeight={600}>
35+
<Typography variant="subtitle1" fontWeight={600}>
3636
Camera Tube
3737
</Typography>
3838
</Box>

‎src/data-entry/detector.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,13 @@ export default function DetectorDataEntry(): React.JSX.Element {
3535
<Box
3636
sx={{
3737
px: 2,
38-
py: 1.5,
38+
py: 0.75,
3939
bgcolor: "grey.100",
4040
borderBottom: 1,
4141
borderColor: "divider",
4242
}}
4343
>
44-
<Typography variant="h6" fontWeight={600}>
44+
<Typography variant="subtitle1" fontWeight={600}>
4545
Detector
4646
</Typography>
4747
</Box>

‎src/dialogs/beamline/appConfigDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ export function AddAppConfigDialog({ open, handleClose }: DialogProps): React.JS
171171
sx={secondaryButtonSx}
172172
onClick={submitHandler}
173173
>
174-
Submit
174+
Add beamline
175175
</Button>
176176
</Stack>
177177
</DialogContent>

‎src/dialogs/detector/detectorDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ export function AddDetectorDialog({ open, handleClose }: DialogProps) {
160160
sx={secondaryButtonSx}
161161
onClick={submitHandler}
162162
>
163-
Submit
163+
Add detector
164164
</Button>
165165
</Stack>
166166
</DialogContent>

‎src/plot/centrePlot.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
VisCanvas,
99
} from "@h5web/lib";
1010
import { Card, CardContent, Stack } from "@mui/material";
11+
import Box from "@mui/material/Box";
1112
import { Unit, createUnit, unit } from "mathjs";
1213
import { Vector3 } from "three";
1314
import { computeQrange } from "../calculations/qrange";
@@ -90,7 +91,7 @@ export default function CentrePlot(): React.JSX.Element {
9091
// Update pixel units and calculate qrange together — updatePixelUnits must
9192
// run before computeQrange since both the Plotter and qrange calculation
9293
// depend on the "xpixel"/"ypixel" mathjs units being registered first.
93-
const { minPoint, maxPoint, visibleQRange, fullQRange } = useMemo(() => {
94+
const { minPoint, maxPoint, visibleQRange } = useMemo(() => {
9495
updatePixelUnits(detector);
9596
console.info(formatLogMessage("Calculating Q range"));
9697
return computeQrange(detector, beamstop, beamlineConfig, cameraTube);
@@ -157,12 +158,15 @@ export default function CentrePlot(): React.JSX.Element {
157158
<Stack direction={{ sm: "column", md: "row" }} spacing={1} flexGrow={1}>
158159
<Card variant="outlined" sx={{ aspectRatio: 1.07 / 1 }}>
159160
<CardContent sx={{ width: "100%", height: "100%" }}>
160-
<div
161-
style={{
161+
<Box
162+
sx={{
162163
display: "grid",
163164
width: "100%",
164165
height: "100%",
165-
border: "solid black",
166+
border: 1,
167+
borderColor: "divider",
168+
borderRadius: 1,
169+
overflow: "hidden",
166170
}}
167171
>
168172
<VisCanvas
@@ -322,14 +326,13 @@ export default function CentrePlot(): React.JSX.Element {
322326
)}
323327
</DataToHtml>
324328
</VisCanvas>
325-
</div>
329+
</Box>
326330
</CardContent>
327331
</Card>
328332
<LegendBar />
329333
</Stack>
330334
<ResultsBar
331335
visibleQRange={visibleQRange}
332-
fullQRange={fullQRange}
333336
config={resultsConfig}
334337
updateConfig={updateResultsConfig}
335338
/>

‎src/plot/legendBar.tsx‎

Lines changed: 41 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
Autocomplete,
3+
Box,
34
Card,
45
CardContent,
56
Checkbox,
@@ -34,14 +35,28 @@ export default function LegendBar(): React.JSX.Element {
3435
};
3536

3637
return (
37-
<Card variant="outlined" sx={{ flexGrow: 1, overflow: "scroll" }}>
38-
<CardContent>
38+
<Card variant="outlined" sx={{ flexGrow: 1, overflow: "hidden", display: "flex", flexDirection: "column" }}>
39+
<Box
40+
sx={{
41+
px: 2,
42+
py: 0.75,
43+
bgcolor: "grey.100",
44+
borderBottom: 1,
45+
borderColor: "divider",
46+
}}
47+
>
48+
<Typography variant="subtitle1" fontWeight={600}>
49+
Plot Controls
50+
</Typography>
51+
</Box>
52+
<CardContent sx={{ overflow: "auto" }}>
3953
<Stack spacing={1}>
4054
<FormGroup>
4155
{/* Detector */}
4256
<FormControlLabel
4357
control={
4458
<Checkbox
59+
size="small"
4560
checked={plotConfig.detector}
4661
onChange={(_, checked) =>
4762
plotConfig.update({ detector: checked })
@@ -56,7 +71,7 @@ export default function LegendBar(): React.JSX.Element {
5671
plotConfig.update({ detectorColor: color.rgb })
5772
}
5873
/>
59-
<Typography display={"flex"} alignItems={"center"}>
74+
<Typography variant="body2" display={"flex"} alignItems={"center"}>
6075
Detector
6176
</Typography>
6277
</Stack>
@@ -67,6 +82,7 @@ export default function LegendBar(): React.JSX.Element {
6782
<FormControlLabel
6883
control={
6984
<Checkbox
85+
size="small"
7086
checked={plotConfig.beamstop}
7187
onChange={(_, checked) => {
7288
plotConfig.update({ beamstop: checked });
@@ -81,7 +97,7 @@ export default function LegendBar(): React.JSX.Element {
8197
plotConfig.update({ beamstopColor: color.rgb })
8298
}
8399
/>
84-
<Typography display={"flex"} alignItems={"center"}>
100+
<Typography variant="body2" display={"flex"} alignItems={"center"}>
85101
Beamstop
86102
</Typography>
87103
</Stack>
@@ -91,6 +107,7 @@ export default function LegendBar(): React.JSX.Element {
91107
<FormControlLabel
92108
control={
93109
<Checkbox
110+
size="small"
94111
checked={plotConfig.clearance}
95112
onChange={(_, checked) => {
96113
plotConfig.update({ clearance: checked });
@@ -105,7 +122,7 @@ export default function LegendBar(): React.JSX.Element {
105122
plotConfig.update({ clearanceColor: color.rgb })
106123
}
107124
/>
108-
<Typography display={"flex"} alignItems={"center"}>
125+
<Typography variant="body2" display={"flex"} alignItems={"center"}>
109126
Clearance
110127
</Typography>
111128
</Stack>
@@ -115,6 +132,7 @@ export default function LegendBar(): React.JSX.Element {
115132
<FormControlLabel
116133
control={
117134
<Checkbox
135+
size="small"
118136
checked={plotConfig.visibleRange}
119137
onChange={(_, checked) =>
120138
plotConfig.update({ visibleRange: checked })
@@ -129,7 +147,7 @@ export default function LegendBar(): React.JSX.Element {
129147
plotConfig.update({ visibleColor: color.rgb })
130148
}
131149
/>
132-
<Typography display={"flex"} alignItems={"center"}>
150+
<Typography variant="body2" display={"flex"} alignItems={"center"}>
133151
Visible Range
134152
</Typography>
135153
</Stack>
@@ -139,6 +157,7 @@ export default function LegendBar(): React.JSX.Element {
139157
<FormControlLabel
140158
control={
141159
<Checkbox
160+
size="small"
142161
checked={plotConfig.requestedRange}
143162
onChange={(_, checked) =>
144163
plotConfig.update({ requestedRange: checked })
@@ -153,7 +172,7 @@ export default function LegendBar(): React.JSX.Element {
153172
plotConfig.update({ requestedRangeColor: color.rgb })
154173
}
155174
/>
156-
<Typography display={"flex"} alignItems={"center"}>
175+
<Typography variant="body2" display={"flex"} alignItems={"center"}>
157176
Requested Range
158177
</Typography>
159178
</Stack>
@@ -163,6 +182,7 @@ export default function LegendBar(): React.JSX.Element {
163182
<FormControlLabel
164183
control={
165184
<Checkbox
185+
size="small"
166186
checked={plotConfig.inaccessibleRange}
167187
onChange={(_, checked) =>
168188
plotConfig.update({ inaccessibleRange: checked })
@@ -177,7 +197,7 @@ export default function LegendBar(): React.JSX.Element {
177197
plotConfig.update({ inaccessibleRangeColor: color.rgb })
178198
}
179199
/>
180-
<Typography display={"flex"} alignItems={"center"}>
200+
<Typography variant="body2" display={"flex"} alignItems={"center"}>
181201
Inaccessible Range
182202
</Typography>
183203
</Stack>
@@ -188,6 +208,7 @@ export default function LegendBar(): React.JSX.Element {
188208
<FormControlLabel
189209
control={
190210
<Checkbox
211+
size="small"
191212
checked={plotConfig.cameraTube}
192213
onChange={(_, checked) =>
193214
plotConfig.update({ cameraTube: checked })
@@ -202,7 +223,7 @@ export default function LegendBar(): React.JSX.Element {
202223
plotConfig.update({ cameraTubeColor: color.rgb })
203224
}
204225
/>
205-
<Typography display={"flex"} alignItems={"center"}>
226+
<Typography variant="body2" display={"flex"} alignItems={"center"}>
206227
Camera Tube
207228
</Typography>
208229
</Stack>
@@ -214,6 +235,7 @@ export default function LegendBar(): React.JSX.Element {
214235
<FormControlLabel
215236
control={
216237
<Checkbox
238+
size="small"
217239
checked={plotConfig.mask}
218240
onChange={(_, checked) =>
219241
plotConfig.update({ mask: checked })
@@ -228,7 +250,7 @@ export default function LegendBar(): React.JSX.Element {
228250
plotConfig.update({ maskColor: color.rgb })
229251
}
230252
/>
231-
<Typography display={"flex"} alignItems={"center"}>
253+
<Typography variant="body2" display={"flex"} alignItems={"center"}>
232254
Mask
233255
</Typography>
234256
</Stack>
@@ -240,6 +262,7 @@ export default function LegendBar(): React.JSX.Element {
240262
<FormControlLabel
241263
control={
242264
<Checkbox
265+
size="small"
243266
checked={plotConfig.calibrant}
244267
onChange={(_, checked) =>
245268
plotConfig.update({ calibrant: checked })
@@ -274,8 +297,9 @@ export default function LegendBar(): React.JSX.Element {
274297
</FormGroup>
275298
{/* Axis control */}
276299
<FormControl>
277-
<FormLabel id="plot-axes-label">Axes:</FormLabel>
300+
<FormLabel id="plot-axes-label" sx={{ typography: "body2", mb: 0.5 }}>Axes</FormLabel>
278301
<RadioGroup
302+
row
279303
aria-labelledby="plot-axes-label"
280304
value={plotConfig.plotAxes}
281305
name="radio-buttons-group"
@@ -285,18 +309,18 @@ export default function LegendBar(): React.JSX.Element {
285309
>
286310
<FormControlLabel
287311
value={PlotAxes.millimetre}
288-
control={<Radio />}
289-
label="Axes in mm"
312+
control={<Radio size="small" />}
313+
label="mm"
290314
/>
291315
<FormControlLabel
292316
value={PlotAxes.pixel}
293-
control={<Radio />}
294-
label="Axes in pixels"
317+
control={<Radio size="small" />}
318+
label="pixels"
295319
/>
296320
<FormControlLabel
297321
value={PlotAxes.reciprocal}
298-
control={<Radio />}
299-
label="Axes in q(nm^-1)"
322+
control={<Radio size="small" />}
323+
label="q (nm⁻¹)"
300324
/>
301325
</RadioGroup>
302326
</FormControl>

‎src/results/MessageDiagram.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
11
import React from "react";
2+
import { useTheme } from "@mui/material";
23

34
export function MessageDiagram(props: { message: string }): React.JSX.Element {
5+
const theme = useTheme();
46
return (
57
<svg
68
style={{
79
display: "grid",
810
maxHeight: "200px",
9-
width: "90%",
10-
border: "solid black",
11+
width: "100%",
12+
border: `1px solid ${theme.palette.divider}`,
13+
borderRadius: theme.shape.borderRadius,
1114
}}
1215
>
13-
<text x="40%" y="50%">
16+
<text
17+
x="40%"
18+
y="50%"
19+
style={{
20+
fontFamily: theme.typography.fontFamily,
21+
fontSize: "0.75rem",
22+
fill: theme.palette.text.secondary,
23+
}}
24+
>
1425
{props.message}
1526
</text>
1627
</svg>

0 commit comments

Comments
 (0)