Adds a new page for Jungfrau rotations

src/App.tsx

@@ -6,6 +6,7 @@ import { BeamlineI24 } from "./routes/BeamlineI24";
 import { FixedTarget } from "./routes/FixedTarget";
 import { SerialNavBar } from "./components/SerialNavBar";
 import { Extruder } from "./routes/Extruder";
+import { JfRotation } from "./routes/JungfrauRotation";
 
 function App() {
   const theme = useTheme();
@@ -31,6 +32,9 @@ function App() {
         <Route path="/extruder">
           <Extruder />
         </Route>
+        <Route path="/jungfrau">
+          <JfRotation />
+        </Route>
       </Switch>
       <Footer
         logo={theme.logos?.short}

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,68 @@
+import {
+  Box,
+  Card,
+  CardContent,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import React from "react";
+import { ParameterInput } from "../ParameterInputs";
+import { RunPlanButton } from "../../blueapi/BlueapiComponents";
+
+export function CollectDarksPanel() {
+  const theme = useTheme();
+  const [expTime, setExpTime] = React.useState<number>(0.001);
+  const [pedestalFrames, setPedestalFrames] = React.useState<number>(20);
+  const [pedestalLoops, setPedestalLoops] = React.useState<number>(200);
+
+  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={1} margin={2} alignContent={"center"}>
+            <ParameterInput
+              value={expTime}
+              onSet={setExpTime}
+              label="Exposure time (s)"
+              tooltip="Set exposure time for darks collection."
+            />
+            <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,
+            }}
+            title="Collect pedestal darks"
+            btnSize="large"
+          />
+        </CardContent>
+      </Card>
+    </Box>
+  );
+}

src/components/JungFrau/CollectionSetupJf.tsx

@@ -0,0 +1,182 @@
+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 React from "react";
+import { useContext, useState } from "react";
+
+function fullStorageDirectory(visit: string, subDir: string): string {
+  const date = new Date();
+  const year = date.getFullYear();
+  return `/dls/i24/data/${year}/${visit}/jungfrau/${subDir}`;
+}
+
+function RunButtons({
+  visit,
+  storageDirectory,
+}: {
+  visit: string;
+  storageDirectory: string;
+}): JSX.Element {
+  const {
+    expTime,
+    detDist,
+    fileName,
+    shutterOpenT,
+    omegaStart,
+    omegaIncrement,
+    scanWidth,
+    transFract,
+  } = useContext(JungfrauRotationContext);
+  return (
+    <React.Fragment>
+      <Stack direction={"row"} spacing={4} justifyContent={"center"}>
+        <RunPlanButton
+          btnLabel="Run single rotation"
+          planName="run_single_rotation_plan"
+          planParams={{
+            exposure_time_s: expTime,
+            omega_start_deg: omegaStart,
+            omega_increment_deg: omegaIncrement,
+            total_scan_width_deg: scanWidth,
+            detector_distance_mm: detDist,
+            visit: visit,
+            file_name: fileName,
+            storage_directory: storageDirectory,
+            shutter_opening_time_s: shutterOpenT,
+            transmission: transFract[0],
+          }}
+          title="Run single rotation scan"
+          btnSize="large"
+        />
+        <RunPlanButton
+          btnLabel="Run multiple rotations"
+          planName="run_multi_rotation_plan"
+          planParams={{
+            exposure_time_s: expTime,
+            omega_start_deg: omegaStart,
+            omega_increment_deg: omegaIncrement,
+            total_scan_width_deg: scanWidth,
+            detector_distance_mm: detDist,
+            visit: visit,
+            file_name: fileName,
+            storage_directory: storageDirectory,
+            shutter_opening_time_s: shutterOpenT,
+            transmission_fractions: transFract,
+          }}
+          title="Run multiple rotation scans ar different transmissions"
+          btnSize="large"
+        />
+        <AbortButton />
+      </Stack>
+    </React.Fragment>
+  );
+}
+
+export function CollectionSetupJf() {
+  const theme = useTheme();
+  const context = useContext(JungfrauRotationContext);
+  const [visit, setVisit] = useState<string>("cm40647-5");
+  const storageDirectory = fullStorageDirectory(visit, context.directory);
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Stack direction={"column"} alignItems={"center"} spacing={3}>
+        <Typography
+          variant="h2"
+          sx={{
+            color: theme.palette.primary.contrastText,
+            fontSize: 24,
+            fontWeight: "fontWeightBold",
+          }}
+        >
+          Parameters
+        </Typography>
+        <Grid container spacing={2} marginTop={3} justifyContent={"center"}>
+          <ParameterInput
+            value={visit}
+            onSet={setVisit}
+            label="Visit"
+            tooltip="Current visit directory"
+          />
+          <ParameterInput
+            value={context.directory}
+            onSet={context.setDirectory}
+            label="Sub-directory"
+            tooltip="Location inside visit directory to save data"
+          />
+          <ParameterInput
+            value={context.fileName}
+            onSet={context.setFileName}
+            label="File Name"
+            tooltip="Name to use to save the data"
+          />
+        </Grid>
+        <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.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"
+          />
+          <ParameterInput
+            value={context.shutterOpenT}
+            onSet={context.setShutterOpenT}
+            label="Shutter opening time (s)"
+            tooltip="Fast shutter opening time, in seconds"
+          />
+        </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.scanWidth}
+            onSet={context.setScanWidth}
+            label="Scan Width (deg)"
+            tooltip="Total scan width, in deg"
+          />
+        </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 visit={visit} storageDirectory={storageDirectory} />
+      </Stack>
+    </Box>
+  );
+}

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/jungfrau/JungfrauRotationContext.ts

@@ -0,0 +1,30 @@
+// Note not adding visit to it as I want to get that into an overall context
+
+import { createContext } from "react";
+
+// changeble only by staff. For now just a text field
+export type JungfrauRotationContextType = {
+  directory: string;
+  fileName: string;
+  expTime: number;
+  detDist: number;
+  shutterOpenT: number;
+  transFract: number[];
+  omegaStart: number;
+  omegaIncrement: number;
+  scanWidth: number;
+  setDirectory: React.Dispatch<React.SetStateAction<string>>;
+  setFileName: React.Dispatch<React.SetStateAction<string>>;
+  setExpTime: React.Dispatch<React.SetStateAction<number>>;
+  setDetDist: React.Dispatch<React.SetStateAction<number>>;
+  setShutterOpenT: React.Dispatch<React.SetStateAction<number>>;
+  setTransFract: React.Dispatch<React.SetStateAction<number[]>>;
+  setOmegaStart: React.Dispatch<React.SetStateAction<number>>;
+  setOmegaIncrement: React.Dispatch<React.SetStateAction<number>>;
+  setScanWidth: React.Dispatch<React.SetStateAction<number>>;
+};
+
+export const JungfrauRotationContext =
+  createContext<JungfrauRotationContextType>(
+    null as unknown as JungfrauRotationContextType,
+  );

src/context/jungfrau/JungfrauRotationProvider.tsx

@@ -0,0 +1,45 @@
+import { ReactNode, useState } from "react";
+import { JungfrauRotationContext } from "./JungfrauRotationContext";
+
+export const JungfrauRotationProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [directory, setDirectory] = useState<string>("test");
+  const [fileName, setFileName] = useState<string>("thau");
+  const [expTime, setExpTime] = useState<number>(0.001);
+  const [detDist, setDetDist] = useState<number>(200);
+  const [shutterOpenT, setShutterOpenT] = useState<number>(0.25);
+  const [transFract, setTransFract] = useState<number[]>([0.5]);
+  const [omegaStart, setOmegaStart] = useState<number>(0);
+  const [omegaIncrement, setOmegaIncrement] = useState<number>(0.1);
+  const [scanWidth, setScanWidth] = useState<number>(360);
+
+  return (
+    <JungfrauRotationContext.Provider
+      value={{
+        directory,
+        fileName,
+        expTime,
+        detDist,
+        shutterOpenT,
+        transFract,
+        omegaStart,
+        omegaIncrement,
+        scanWidth,
+        setDirectory,
+        setFileName,
+        setExpTime,
+        setDetDist,
+        setShutterOpenT,
+        setTransFract,
+        setOmegaStart,
+        setOmegaIncrement,
+        setScanWidth,
+      }}
+    >
+      {children}
+    </JungfrauRotationContext.Provider>
+  );
+};