Small bits and pieces

Author: noemifrisina

src/App.tsx

@@ -107,8 +107,7 @@ function App() {
       ]}
     >
       <FixedTargetPanels />
-      <Footer color={theme.palette.primary.main}>
-        {/* <Footer logo={theme.logos.normal} color={theme.palette.primary.main}> */}
+      <Footer logo={theme.logos?.normal} color={theme.palette.primary.main}>
         <FooterLinks>
           <ColourSchemeButton sx={{ marginLeft: "1px", marginTop: "2px" }} />
         </FooterLinks>

src/CustomTheme.tsx

@@ -56,7 +56,7 @@ export const I24DiamondTheme: Theme = createTheme({
 
 // To be improved and extended to light mode once
 // https://github.com/DiamondLightSource/sci-react-ui/pull/70
-// is merged and released (v0.2.0)
+// is merged and released (v0.2.0+)
 
 /** Set up a customisable theme derived from the common DiamondTheme
  * This way it should be possible to easily add settings if required

src/components/OavVideoStream.tsx

@@ -1,9 +1,16 @@
 import { Box } from "@mui/material";
-import { PvComponent, PvItem, PvDescription, useParsedPvConnection } from "../pv/PvComponent";
+import {
+  PvComponent,
+  PvItem,
+  PvDescription,
+  useParsedPvConnection,
+} from "../pv/PvComponent";
 import { parseNumericPv, pvIntArrayToString } from "../pv/util";
 import React from "react";
 
-export const useContainerDimensions = (ref: React.MutableRefObject<HTMLHeadingElement | null>) => {
+const useContainerDimensions = (
+  ref: React.MutableRefObject<HTMLHeadingElement | null>
+) => {
   const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
   React.useEffect(() => {
     const getDimensions = () => ({
@@ -62,7 +69,10 @@ export function OavVideoStream(
     label: props.label,
     render: (props: PvItem) => {
       const value = props.value ? props.value : "undefined";
-      if (!streamUrl.startsWith("http") && value.toString().startsWith("http")) {
+      if (
+        !streamUrl.startsWith("http") &&
+        value.toString().startsWith("http")
+      ) {
         setStreamUrl(value.toString());
       }
       return (
@@ -148,8 +158,12 @@ function VideoBoxWithOverlay(props: {
               // x and y relative to the crosshair
               const [relX, relY] = [x - props.crosshairX, y - props.crosshairY];
               // fraction of the image in x/y * original dimension in pixels
-              const scaledX = props.originalDims ? (relX / width) * props.originalDims.width : x;
-              const scaledY = props.originalDims ? (relY / height) * props.originalDims.height : y;
+              const scaledX = props.originalDims
+                ? (relX / width) * props.originalDims.width
+                : x;
+              const scaledY = props.originalDims
+                ? (relY / height) * props.originalDims.height
+                : y;
               props.onCoordClick(scaledX, scaledY);
             }
           }

src/screens/OavMover.tsx

@@ -182,52 +182,50 @@ export function OavMover() {
   const theme = useTheme();
   const bgColor = theme.palette.background.paper;
   return (
-    <div>
-      <Grid2 container spacing={2} columns={12}>
-        <Grid2 size={9} sx={{ bgcolor: bgColor }}>
-          <Box width={"100%"}>
-            <OavVideoStream
-              pv="ca://BL24I-DI-OAV-01:"
-              label="I24 OAV image stream"
-              crosshairX={crosshairX}
-              crosshairY={crosshairY}
-              onCoordClick={(x: number, y: number) => {
-                const [x_um, y_um] = [x / pixelsPerMicron, y / pixelsPerMicron];
-                console.log(
-                  `Clicked on position (${x}, ${y}) (px relative to beam centre) in original stream. Relative position in um (${x_um}, ${y_um}). Submitting to BlueAPI...`
-                );
-                const [x_int, y_int] = [Math.round(x), Math.round(y)];
-                if (Number.isNaN(x_um) || Number.isNaN(y_um)) {
-                  console.log(
-                    "Not submitting plan while disconnected from PVs!"
-                  );
-                } else {
-                  submitAndRunPlanImmediately("gui_gonio_move_on_click", {
-                    position_px: [x_int, y_int],
-                  });
-                }
-              }}
-            />
-          </Box>
-        </Grid2>
-        <Grid2 size={3} height={3}>
-          <MoveArrows />
-          <Grid2 size={3} padding={1} />
-          <BeamCentre
-            setCrosshairX={setCrosshairX}
-            setCrosshairY={setCrosshairY}
-          />
-          <PixelsToMicrons setPixelsPerMicron={setPixelsPerMicron} />
-          <BacklightControl
-            label="backlight-pos"
-            pv="ca://BL24I-MO-BL-01:MP:SELECT"
-          />
-          <ZoomControl
-            label="zoom-level"
-            pv="ca://BL24I-EA-OAV-01:FZOOM:MP:SELECT"
+    // <div>
+    <Grid2 container spacing={2} columns={12}>
+      <Grid2 size={9} sx={{ bgcolor: bgColor }}>
+        <Box width={"100%"}>
+          <OavVideoStream
+            pv="ca://BL24I-DI-OAV-01:"
+            label="I24 OAV image stream"
+            crosshairX={crosshairX}
+            crosshairY={crosshairY}
+            onCoordClick={(x: number, y: number) => {
+              const [x_um, y_um] = [x / pixelsPerMicron, y / pixelsPerMicron];
+              console.log(
+                `Clicked on position (${x}, ${y}) (px relative to beam centre) in original stream. Relative position in um (${x_um}, ${y_um}). Submitting to BlueAPI...`
+              );
+              const [x_int, y_int] = [Math.round(x), Math.round(y)];
+              if (Number.isNaN(x_um) || Number.isNaN(y_um)) {
+                console.log("Not submitting plan while disconnected from PVs!");
+              } else {
+                submitAndRunPlanImmediately("gui_gonio_move_on_click", {
+                  position_px: [x_int, y_int],
+                });
+              }
+            }}
           />
-        </Grid2>
+        </Box>
+      </Grid2>
+      <Grid2 size={3} height={3}>
+        <MoveArrows />
+        <Grid2 size={3} padding={1} />
+        <BeamCentre
+          setCrosshairX={setCrosshairX}
+          setCrosshairY={setCrosshairY}
+        />
+        <PixelsToMicrons setPixelsPerMicron={setPixelsPerMicron} />
+        <BacklightControl
+          label="backlight-pos"
+          pv="ca://BL24I-MO-BL-01:MP:SELECT"
+        />
+        <ZoomControl
+          label="zoom-level"
+          pv="ca://BL24I-EA-OAV-01:FZOOM:MP:SELECT"
+        />
       </Grid2>
-    </div>
+    </Grid2>
+    // </div>
   );
 }