Merge pull request #53 from DiamondLightSource/8-23_tidy-up-buttons-and-fields

Add beamline stats fields and start tidying up

Author: noemifrisina

package-lock.json

@@ -4,7 +4,6 @@ import { DetectorMotionTabPanel } from "./screens/DetectorMotion";
 import { BeamlineStatsTabPanel } from "./screens/BeamlineStats";
 import { OavMover } from "./screens/OavMover";
 import "./App.css";
-import { BlueApiInfo } from "./screens/BlueApiInfo";
 import { ParamsPanel } from "./screens/CollectionPanel";
 import {
   ColourSchemeButton,
@@ -64,15 +63,14 @@ function FixedTargetPanels() {
           textColor="secondary"
           centered
         >
-          <Tab label="BlueAPI info" {...a11yProps(0)} />
+          <Tab label="Beamline info" {...a11yProps(0)} />
           <Tab label="Detector position" {...a11yProps(1)} />
           <Tab label="OAV view" {...a11yProps(2)} />
-          <Tab label="Beamline stats" {...a11yProps(3)} />
-          <Tab label="Fixed Target Collection" {...a11yProps(4)} />
+          <Tab label="Fixed Target Collection" {...a11yProps(3)} />
         </Tabs>
       </Box>
       <CustomTabPanel value={value} index={0}>
-        <BlueApiInfo />
+        <BeamlineStatsTabPanel />
       </CustomTabPanel>
       <CustomTabPanel value={value} index={1}>
         <DetectorMotionTabPanel />
@@ -81,9 +79,6 @@ function FixedTargetPanels() {
         <OavMover />
       </CustomTabPanel>
       <CustomTabPanel value={value} index={3}>
-        <BeamlineStatsTabPanel />
-      </CustomTabPanel>
-      <CustomTabPanel value={value} index={4}>
         <ParamsPanel />
       </CustomTabPanel>
     </div>

src/App.tsx

@@ -14,7 +14,7 @@ declare module "@mui/material/styles" {
   }
 }
 
-// Update the Button's color options to include a violet option
+// Update the Button's color options to include a new option
 declare module "@mui/material/Button" {
   interface ButtonPropsColorOverrides {
     custom: true;
@@ -49,6 +49,10 @@ export const I24DiamondTheme: Theme = createTheme({
           dark: "#10569b",
           contrastText: "#ffffff", // white
         },
+        background: {
+          default: "#050505",
+          paper: "#121212",
+        },
       },
     },
   },

src/CustomTheme.tsx

@@ -1,11 +1,11 @@
 import { Box } from "@mui/material";
+import { PvComponent } from "../pv/PvComponent";
+import { PvItem, PvDescription } from "../pv/types";
 import {
-  PvComponent,
-  PvItem,
-  PvDescription,
+  parseNumericPv,
+  pvIntArrayToString,
   useParsedPvConnection,
-} from "../pv/PvComponent";
-import { parseNumericPv, pvIntArrayToString } from "../pv/util";
+} from "../pv/util";
 import React from "react";
 
 export const useContainerDimensions = (

src/components/OavVideoStream.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { PvDescription, useParsedPvConnection } from "../pv/PvComponent";
+import { PvDescription } from "../pv/types";
 import { submitAndRunPlanImmediately } from "../blueapi/blueapi";
 import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
-import { forceString } from "../pv/util";
+import { forceString, useParsedPvConnection } from "../pv/util";
 
 type SelectionProps = PvDescription & {
   id: string;

src/components/SelectionControl.tsx

@@ -1,4 +1,4 @@
-import { Box, Stack } from "@mui/material";
+import { Box, Grid2, Stack } from "@mui/material";
 
 import { processUseBlueApiCall, useBlueApiCall } from "../blueapi/blueapi";
 import { useState } from "react";
@@ -7,16 +7,18 @@ export function WorkerStatus() {
   const [currentState, setCurrentState] = useState<string>("UNKNOWN");
   const workerStateInfo = useBlueApiCall("/worker/state");
   return (
-    <Stack padding={1} direction={"row"} spacing={1}>
-      <b>BlueAPI worker status: </b>
-      <Box>
-        {processUseBlueApiCall(workerStateInfo, (res) => {
-          if (!res.bodyUsed) {
-            res.json().then((text) => setCurrentState(text));
-          }
-          return currentState;
-        })}
-      </Box>
-    </Stack>
+    <Grid2 size={12}>
+      <Stack direction={"row"} spacing={1} justifyContent={"center"}>
+        <b>BlueAPI worker status: </b>
+        <Box>
+          {processUseBlueApiCall(workerStateInfo, (res) => {
+            if (!res.bodyUsed) {
+              res.json().then((text) => setCurrentState(text));
+            }
+            return currentState;
+          })}
+        </Box>
+      </Stack>
+    </Grid2>
   );
 }

src/components/SleepButton.tsx

@@ -1,48 +1,55 @@
-import { useConnection } from "@diamondlightsource/cs-web-lib";
-import { Box } from "@mui/material";
+import { Box, useTheme } from "@mui/material";
 import { ErrorBoundary } from "react-error-boundary";
-import { RawValue } from "./util";
+import { PvComponentProps, PvDescription, PvItem } from "./types";
+import { useParsedPvConnection, forceString } from "./util";
 
-type Transformer = (value: RawValue) => string | number;
-export type PvDisplayTypes = string | number;
-export type PvItem = { label: string; value: RawValue | PvDisplayTypes };
-export type PvItemComponent = ({ label, value }: PvItem) => JSX.Element;
-export type PvItemHandler = ({ label, value }: PvItem) => void;
-export type PvDescription = {
-  label: string;
-  pv: string;
-};
-export type PvComponentProps = PvDescription & {
-  render: PvItemComponent;
-  transformValue?: Transformer;
-};
-
-export function useParsedPvConnection(
-  props: PvDescription & { transformValue?: Transformer }
-) {
-  const [_effectivePvName, connected, _readonly, latestValue] = useConnection(
-    props.label,
-    props.pv
-  );
-  const rawValue: RawValue = connected ? latestValue : "not connected";
-  const returnValue = props.transformValue
-    ? props.transformValue(rawValue)
-    : rawValue;
-  console.log(
-    `fetched parsed value ${returnValue} for PV: ${props.pv} labeled ${props.label}`
+function defaultPvBox(label: string, value: number | string): JSX.Element {
+  return (
+    <Box>
+      <p>
+        <b>{label}:</b> {value}
+      </p>
+    </Box>
   );
-  return returnValue;
 }
 
-function WsPvComponent(props: PvComponentProps) {
+function WsPvComponent(props: PvComponentProps): JSX.Element {
   const latestValue = useParsedPvConnection(props);
-  return <Box>{props.render({ label: props.label, value: latestValue })}</Box>;
+  const renderedPvBox = props.render ? (
+    <Box>{props.render({ label: props.label, value: latestValue })}</Box>
+  ) : (
+    defaultPvBox(props.label, latestValue)
+  );
+  return renderedPvBox;
 }
 
 export function PvComponent(props: PvComponentProps) {
+  const theme = useTheme();
   return (
-    <ErrorBoundary fallback={<p>Error Connecting!</p>}>
+    <ErrorBoundary
+      fallback={
+        <Box color={theme.palette.error.main}>
+          <p>Error Connecting!</p>
+        </Box>
+      }
+    >
       {WsPvComponent(props)}
     </ErrorBoundary>
   );
 }
+
+export function RoPvBox(props: PvDescription) {
+  return PvComponent({
+    ...props,
+    transformValue: forceString,
+    render: (props: PvItem) => {
+      return (
+        <Box>
+          <p>
+            {props.label} : {props.value}
+          </p>
+        </Box>
+      );
+    },
+  });
+}

src/components/WorkerStatus.tsx

@@ -0,0 +1,30 @@
+import { DType } from "@diamondlightsource/cs-web-lib";
+
+type NotConnected = "not connected";
+export type RawValue = DType | undefined | NotConnected;
+
+type TransformString = (value: RawValue) => string | number;
+type TransformNumeric = (
+  value: RawValue,
+  decimals?: number,
+  scaleFactor?: number
+) => string | number;
+export type PvTransformer = TransformString | TransformNumeric;
+
+export type PvDescription = {
+  label: string;
+  pv: string;
+};
+
+export type PvItem = { label: string; value: number | string | NotConnected };
+type PvItemComponent = ({ label, value }: PvItem) => JSX.Element;
+
+export type RenderedPvValue = RawValue | string | number;
+
+export type ParsePvProps = PvDescription & {
+  transformValue: PvTransformer;
+  decimals?: number;
+  scaleFactor?: number;
+};
+
+export type PvComponentProps = ParsePvProps & { render?: PvItemComponent };

src/pv/PvComponent.tsx

@@ -1,5 +1,6 @@
 import { DType } from "@diamondlightsource/cs-web-lib";
-export type RawValue = DType | "not connected" | undefined;
+import { useConnection } from "@diamondlightsource/cs-web-lib";
+import { ParsePvProps, PvDescription, RawValue } from "./types";
 
 export function forceString(value: RawValue | string | number): string {
   let displayValue: string;
@@ -21,7 +22,7 @@ export function parseNumericPv(
   value: string | number | DType | undefined,
   decimals?: number,
   scaleFactor?: number
-) {
+): string {
   const decimalsToUse = decimals ? decimals : 2;
   const scaleFactorToUse = scaleFactor ? scaleFactor : 1;
   if (value === undefined) {
@@ -57,3 +58,37 @@ export function pvIntArrayToString(value: RawValue): string {
     }
   }
 }
+
+function ReadPvRawValue(props: PvDescription): RawValue {
+  const [_effectivePvName, connected, _readonly, latestValue] = useConnection(
+    props.label,
+    props.pv
+  );
+  const rawValue: RawValue = connected ? latestValue : "not connected";
+  return rawValue;
+}
+
+export function useParsedPvConnection(props: ParsePvProps): number | string {
+  const rawValue = ReadPvRawValue({ label: props.label, pv: props.pv });
+  let returnValue;
+  if (rawValue === "not connected") {
+    returnValue = "not connected";
+  } else if (!rawValue) {
+    console.error("Parsed value was undefined");
+    returnValue = "undefined";
+  } else {
+    returnValue = props.transformValue
+      ? props.transformValue(rawValue, props.decimals, props.scaleFactor)
+      : rawValue;
+  }
+
+  // If it's a Dtype cast to string
+  if (typeof returnValue !== "string" || typeof returnValue !== "number") {
+    returnValue = returnValue.toString();
+  }
+
+  console.log(
+    `fetched parsed value ${returnValue} for PV: ${props.pv} labeled ${props.label}`
+  );
+  return returnValue;
+}