Start using context and filling in params

Author: noemifrisina

src/components/JungFrau/CollectionSetupJf.tsx

@@ -1 +1,109 @@
-export function CollectionSetJf() {}
+import {
+  Box,
+  Grid2 as Grid,
+  Stack,
+  TextField,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { ParameterInput } from "components/ParameterInputs";
+import { JungfrauRotationContext } from "context/jungfrau/JungfrauRotationContext";
+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}`;
+}
+
+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={2}>
+        <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>
+      </Stack>
+    </Box>
+  );
+}

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>
+  );
+};

src/screens/CollectionPanel.tsx

@@ -2,6 +2,8 @@ import { Box, Typography } from "@mui/material";
 import { CollectionSetupFt } from "components/FixedTarget/CollectionSetupFt";
 import { CollectionSetupEx } from "components/Extruder/CollectionSetupEx";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import { CollectionSetupJf } from "components/JungFrau/CollectionSetupJf";
+import { JungfrauRotationProvider } from "context/jungfrau/JungfrauRotationProvider";
 type ExptType = {
   expt: "extruder" | "fixed-target" | "jf";
 };
@@ -24,6 +26,11 @@ export function ParamsPanel(expt: ExptType) {
     case "extruder":
       return <CollectionSetupEx />;
     case "jf":
+      return (
+        <JungfrauRotationProvider>
+          <CollectionSetupJf />
+        </JungfrauRotationProvider>
+      );
     default:
       return <FallbackScreen />;
   }

vite.config.ts

@@ -16,6 +16,7 @@ export default defineConfig({
       assets: path.resolve(__dirname, "./src/assets"),
       blueapi: path.resolve(__dirname, "./src/blueapi"),
       components: path.resolve(__dirname, "./src/components"),
+      context: path.resolve(__dirname, "./src/context"),
       pv: path.resolve(__dirname, "./src/pv"),
       routes: path.resolve(__dirname, "./src/routes"),
       screens: path.resolve(__dirname, "./src/screens"),