Adds a new page for Jungfrau rotations

src/App.tsx

@@ -10,6 +10,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import { BeamlineI24 } from "routes/BeamlineI24.tsx";
 import { FixedTarget } from "routes/FixedTarget.tsx";
 import { Extruder } from "routes/Extruder.tsx";
+import { JfRotation } from "routes/JungfrauRotation.tsx";
 import { loadConfig } from "./config.ts";
 import { useEffect, useState } from "react";
 
@@ -33,6 +34,10 @@ const router = createBrowserRouter(
           path: "extruder",
           element: <Extruder />,
         },
+        {
+          path: "jungfrau",
+          element: <JfRotation />,
+        },
       ],
     },
   ],

src/CustomTheme.tsx

@@ -27,11 +27,14 @@ const I24DiamondThemeOptions = mergeThemeOptions(
     colorSchemes: {
       light: {
         palette: {
+          primary: {
+            contrastText: "#000000",
+          },
           custom: {
             main: "#1976d2",
             light: "#68a0e2",
             dark: "#10569b",
-            contrastText: "#ffffff", // white
+            contrastText: "#ffffff",
           },
         },
       },

src/components/JungFrau/CollectDarksPanel.tsx

@@ -0,0 +1,150 @@
+import {
+  Box,
+  Card,
+  CardContent,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  Tooltip,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import React from "react";
+import { ParameterInput } from "../ParameterInputs";
+import { RunPlanButton } from "../../blueapi/BlueapiComponents";
+import { GainModes } from "./constants";
+
+export function CollectDarksPanel() {
+  const theme = useTheme();
+  const [filename, setFilename] = React.useState<string>("darks");
+  const [expTime, setExpTime] = React.useState<number>(0.001);
+  const [pedestalFrames, setPedestalFrames] = React.useState<number>(20);
+  const [pedestalLoops, setPedestalLoops] = React.useState<number>(200);
+  const [totTriggers, setTotTriggers] = React.useState<number>(1000);
+  const [gainMode, setGainMode] = React.useState<string>(GainModes[0]);
+
+  return (
+    <Box sx={{ flexGrow: 1, marginLeft: 15, marginRight: 5 }}>
+      <Card variant="outlined" sx={{ minWidth: 300, minHeight: 600 }}>
+        <CardContent>
+          <Typography
+            variant="h2"
+            sx={{
+              color: theme.palette.primary.contrastText,
+              fontSize: 24,
+              fontWeight: "fontWeightBold",
+            }}
+          >
+            Collect Darks
+          </Typography>
+          <Stack spacing={4} margin={4} alignItems={"center"}>
+            <Stack direction={"row"} spacing={2}>
+              <ParameterInput
+                value={filename}
+                onSet={setFilename}
+                label="Filename"
+                tooltip="Set filename for darks collection."
+              />
+              <ParameterInput
+                value={expTime}
+                onSet={setExpTime}
+                label="Exposure time (s)"
+                tooltip="Set exposure time for darks collection."
+              />
+            </Stack>
+            <Typography
+              variant="body1"
+              sx={{
+                color: theme.palette.primary.contrastText,
+                fontSize: 20,
+                fontWeight: "fontWeightBold",
+              }}
+            >
+              Pedestal
+            </Typography>
+            <Stack direction={"row"} spacing={2}>
+              <ParameterInput
+                value={pedestalFrames}
+                onSet={setPedestalFrames}
+                label="Pedestal frames"
+                tooltip="Number of pedestal frames to collect."
+              />
+              <ParameterInput
+                value={pedestalLoops}
+                onSet={setPedestalLoops}
+                label="Pedestal loops"
+                tooltip="Number of pedestal loops."
+              />
+            </Stack>
+            <RunPlanButton
+              btnLabel="Pedestal darks"
+              planName="do_pedestal_darks"
+              planParams={{
+                exp_time_s: expTime,
+                pedestal_frame: pedestalFrames,
+                pedestal_loops: pedestalLoops,
+                filename: filename,
+              }}
+              title="Collect pedestal darks"
+              btnSize="large"
+            />
+            <Typography
+              variant="body1"
+              sx={{
+                color: theme.palette.primary.contrastText,
+                fontSize: 20,
+                fontWeight: "fontWeightBold",
+              }}
+            >
+              Standard
+            </Typography>
+            <Stack direction={"row"} spacing={2}>
+              <ParameterInput
+                value={totTriggers}
+                onSet={setTotTriggers}
+                label="Total Triggers"
+                tooltip="Total triggers for the dark scan."
+              />
+              <Tooltip
+                title="Select gain mode before starting the darks acquisition.
+                WARNING. FixGO may damage the detector - use with caution."
+                placement="right"
+              >
+                <FormControl size="small" style={{ width: 180 }}>
+                  <InputLabel id="gain-label">Gain Mode</InputLabel>
+                  <Select
+                    labelId="gain-label"
+                    id="gain"
+                    value={gainMode}
+                    label="Gain Mode"
+                    onChange={(e) => setGainMode(e.target.value)}
+                  >
+                    {GainModes.map((choice) => (
+                      <MenuItem key={choice} value={choice}>
+                        {choice}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              </Tooltip>
+            </Stack>
+            <RunPlanButton
+              btnLabel="Standard darks"
+              planName="do_non_pedestal_darks"
+              planParams={{
+                gain_mode: gainMode,
+                exp_time_s: expTime,
+                total_triggers: totTriggers,
+                filename: filename,
+              }}
+              title="Collect non pedestal darks"
+              btnSize="large"
+            />
+          </Stack>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+}

src/components/JungFrau/CollectionSetupJf.tsx

@@ -0,0 +1,136 @@
+import {
+  Box,
+  Grid2 as Grid,
+  Stack,
+  TextField,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { AbortButton, RunPlanButton } from "blueapi/BlueapiComponents";
+import { ParameterInput } from "components/ParameterInputs";
+import { JungfrauRotationContext } from "context/jungfrau/JungfrauRotationContext";
+import { VisitContext } from "context/VisitContext";
+import React from "react";
+import { useContext } from "react";
+
+function fullStorageDirectory(visit: string): string {
+  const date = new Date();
+  const year = date.getFullYear();
+  return `/dls/i24/data/${year}/${visit}/jungfrau/`;
+}
+
+function RunButtons(): JSX.Element {
+  const {
+    expTime,
+    detDist,
+    fileName,
+    omegaStart,
+    omegaIncrement,
+    transFract,
+    sampleId,
+  } = useContext(JungfrauRotationContext);
+  console.log(transFract);
+  return (
+    <React.Fragment>
+      <Stack direction={"row"} spacing={4} justifyContent={"center"}>
+        <RunPlanButton
+          btnLabel="Run rotation scan"
+          planName="gui_run_jf_rotation_scan"
+          planParams={{
+            exposure_time_s: expTime,
+            omega_start_deg: omegaStart,
+            omega_increment_deg: omegaIncrement,
+            detector_distance_mm: detDist,
+            filename: fileName,
+            transmissions: transFract,
+            sample_id: sampleId,
+          }}
+          title="Run the jungfrau rotation scan plan"
+          btnSize="large"
+        />
+        <AbortButton />
+      </Stack>
+    </React.Fragment>
+  );
+}
+
+export function CollectionSetupJf() {
+  const theme = useTheme();
+  const context = useContext(JungfrauRotationContext);
+  const { visit } = useContext(VisitContext);
+  const storageDirectory = fullStorageDirectory(visit);
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Stack direction={"column"} alignItems={"center"} spacing={5}>
+        <Typography
+          variant="h2"
+          sx={{
+            color: theme.palette.primary.contrastText,
+            fontSize: 24,
+            fontWeight: "fontWeightBold",
+          }}
+        >
+          Collection Parameters
+        </Typography>
+        <TextField
+          size="small"
+          label="Storage Directory"
+          value={storageDirectory}
+          style={{ width: 570 }}
+          slotProps={{
+            input: { readOnly: true },
+          }}
+        />
+        <Grid container spacing={2} marginTop={3} justifyContent={"center"}>
+          <ParameterInput
+            value={context.fileName}
+            onSet={context.setFileName}
+            label="File Name"
+            tooltip="Name to use to save the data"
+          />
+          <ParameterInput
+            value={context.expTime}
+            onSet={context.setExpTime}
+            label="Exposure Time (s)"
+            tooltip="Exposure time for each window, in seconds"
+          />
+          <ParameterInput
+            value={context.detDist}
+            onSet={context.setDetDist}
+            label="Detector Distance (mm)"
+            tooltip="Sample detector distance, in millimeters"
+          />
+        </Grid>
+        <Grid container spacing={2} marginTop={3} justifyContent={"center"}>
+          <ParameterInput
+            value={context.omegaStart}
+            onSet={context.setOmegaStart}
+            label="Omega start (deg)"
+            tooltip="Rotation start value, in deg"
+          />
+          <ParameterInput
+            value={context.omegaIncrement}
+            onSet={context.setOmegaIncrement}
+            label="Omega increment (deg)"
+            tooltip="Rotation increment step, in deg"
+          />
+          <ParameterInput
+            value={context.sampleId}
+            onSet={context.setSampleId}
+            label="Sample ID"
+            tooltip="Sample id"
+          />
+        </Grid>
+        <Grid container spacing={2} marginTop={3} justifyContent={"center"}>
+          <ParameterInput
+            value={context.transFract}
+            onSet={context.setTransFract}
+            label="Transmission (fraction)"
+            tooltip="Request transmission value(s) for collection, expressed as a fraction. If running a single rotation, just input one value, if running multiples please pass a list."
+          />
+        </Grid>
+        <RunButtons />
+      </Stack>
+    </Box>
+  );
+}

src/components/JungFrau/constants.ts

@@ -0,0 +1,16 @@
+export type GainModeType =
+  | "Dynamic"
+  | "ForceSwitchG1"
+  | "ForceSwitchG2"
+  | "FixG1"
+  | "FixG2"
+  | "FixG0";
+
+export const GainModes = [
+  "Dynamic",
+  "ForceSwitchG1",
+  "ForceSwitchG2",
+  "FixG1",
+  "FixG2",
+  "FixG0",
+];

src/components/SerialNavBar.tsx

@@ -27,6 +27,9 @@ export function SerialNavBar() {
         <NavLink linkComponent={Link} to="/extruder">
           Extruder
         </NavLink>
+        <NavLink linkComponent={Link} to="/jungfrau">
+          JF Rotation
+        </NavLink>
       </NavLinks>
     </Navbar>
   );

src/context/VisitContext.ts

@@ -0,0 +1,10 @@
+import React, { createContext } from "react";
+
+export type VisitContextType = {
+  visit: string;
+  setVisit: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export const VisitContext = createContext<VisitContextType>(
+  null as unknown as VisitContextType,
+);

src/context/VisitProvider.tsx

@@ -0,0 +1,14 @@
+import { ReactNode, useState } from "react";
+import { VisitContext } from "./VisitContext";
+
+const defaultVisit = "cm44177-1"; // Until we can grab it after authentication
+
+export const VisitProvider = ({ children }: { children: ReactNode }) => {
+  const [visit, setVisit] = useState<string>(defaultVisit);
+
+  return (
+    <VisitContext.Provider value={{ visit, setVisit }}>
+      {children}
+    </VisitContext.Provider>
+  );
+};

src/context/jungfrau/JungfrauRotationContext.ts

@@ -0,0 +1,23 @@
+import { createContext } from "react";
+
+export type JungfrauRotationContextType = {
+  fileName: string;
+  expTime: number;
+  detDist: number;
+  transFract: number[];
+  omegaStart: number;
+  omegaIncrement: number;
+  sampleId: number;
+  setFileName: React.Dispatch<React.SetStateAction<string>>;
+  setExpTime: React.Dispatch<React.SetStateAction<number>>;
+  setDetDist: React.Dispatch<React.SetStateAction<number>>;
+  setTransFract: React.Dispatch<React.SetStateAction<number[]>>;
+  setOmegaStart: React.Dispatch<React.SetStateAction<number>>;
+  setOmegaIncrement: React.Dispatch<React.SetStateAction<number>>;
+  setSampleId: React.Dispatch<React.SetStateAction<number>>;
+};
+
+export const JungfrauRotationContext =
+  createContext<JungfrauRotationContextType>(
+    null as unknown as JungfrauRotationContextType,
+  );