I15-1: Add read only PV fields

apps/i15-1/package.json

@@ -11,7 +11,9 @@
   "dependencies": {
     "@atlas/blueapi": "workspace:*",
     "@atlas/blueapi-query": "workspace:*",
+    "@atlas/pvws-config": "workspace:*",
     "@diamondlightsource/sci-react-ui": "^0.4.0",
+    "@diamondlightsource/cs-web-lib": "0.9.5",
     "@mui/icons-material": "^6.5.0",
     "@mui/material": "<7.0.0",
     "@tanstack/react-query": "^5.90.21",
@@ -23,7 +25,9 @@
     "@vitejs/plugin-react-swc": "^3.11.0",
     "msw": "^2.10.4",
     "react-router-dom": "^7.7.1",
+    "react-redux": "^7.2.9",
     "typescript": "~5.9.3",
+    "@types/react-redux": "7.1.34",
     "vite": "^7.3.1",
     "vite-plugin-relay": "^2.1.0",
     "vitest": "*"

apps/i15-1/public/pvwsconfig.json

@@ -0,0 +1,5 @@
+{
+  "PVWS_SOCKET": "pvws.diamond.ac.uk",
+  "PVWS_SSL": true,
+  "THROTTLE_PERIOD": 100
+}

apps/i15-1/src/components/StatusCard.tsx

@@ -0,0 +1,55 @@
+import { Card, CardContent, Stack, Typography, useTheme } from "@mui/material";
+import type { ReactNode } from "react";
+
+type StatusCardProps = {
+  children: ReactNode;
+  title?: string;
+  bgColor?: string;
+  cardColor?: string;
+};
+
+export function StatusCard(props: StatusCardProps) {
+  const theme = useTheme();
+  const bgColor = props.bgColor
+    ? props.bgColor
+    : theme.palette.background.paper;
+  const cardColor = props.cardColor
+    ? props.cardColor
+    : theme.palette.text.primary;
+  if (props.title) {
+    return (
+      <Card
+        variant="outlined"
+        sx={{
+          minWidth: 250,
+          maxHeight: 200,
+          bgcolor: bgColor,
+          borderColor: cardColor,
+        }}
+      >
+        <CardContent>
+          <Stack spacing={1}>
+            <Typography
+              variant="body1"
+              sx={{
+                fontSize: 16,
+                fontStyle: "italic",
+                fontWeight: "bold",
+                color: cardColor,
+              }}
+            >
+              {props.title}
+            </Typography>
+            {props.children}
+          </Stack>
+        </CardContent>
+      </Card>
+    );
+  } else {
+    return (
+      <Card variant="outlined" sx={{ minWidth: 250, bgColor: bgColor }}>
+        <CardContent>{props.children}</CardContent>
+      </Card>
+    );
+  }
+}

apps/i15-1/src/main.tsx

@@ -1,13 +1,15 @@
 import { DiamondTheme, ThemeProvider } from "@diamondlightsource/sci-react-ui";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import { createRoot } from "react-dom/client";
-import { StrictMode } from "react";
+import { StrictMode, useEffect, useState } from "react";
 
 import { Layout } from "./routes/Layout.tsx";
 import Dashboard from "./routes/Dashboard.tsx";
 import Robot from "./routes/Robot.tsx";
 import { InstrumentSessionProvider } from "./context/instrumentSession/InstrumentSessionProvider.tsx";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { type CsWebLibConfig, store } from "@diamondlightsource/cs-web-lib";
+import { Provider } from "react-redux";
 
 declare global {
   interface Window {
@@ -17,6 +19,8 @@ declare global {
 
 import { createApi } from "@atlas/blueapi";
 import { BlueapiProvider } from "@atlas/blueapi-query";
+import { loadPvwsConfig } from "@atlas/pvws-config";
+import { Store } from "@mui/icons-material";
 import { UserAuthProvider } from "./context/userAuth/UserAuthProvider.tsx";
 
 async function enableMocking() {
@@ -46,18 +50,33 @@ const router = createBrowserRouter([
 const api = createApi("/api");
 const queryClient = new QueryClient();
 
+function App() {
+  const [config, setConfig] = useState<CsWebLibConfig>();
+  useEffect(() => {
+    loadPvwsConfig().then((config) => {
+      setConfig(config);
+    });
+  }, []);
+
+  return (
+    <Provider store={store(config)}>
+      <QueryClientProvider client={queryClient}>
+        <UserAuthProvider>
+          <BlueapiProvider api={api}>
+            <RouterProvider router={router} />
+          </BlueapiProvider>
+        </UserAuthProvider>
+      </QueryClientProvider>
+    </Provider>
+  );
+}
+
 enableMocking().then(() => {
   createRoot(document.getElementById("root")!).render(
     <InstrumentSessionProvider>
       <StrictMode>
         <ThemeProvider theme={DiamondTheme} defaultMode="light">
-          <QueryClientProvider client={queryClient}>
-            <UserAuthProvider>
-              <BlueapiProvider api={api}>
-                <RouterProvider router={router} />
-              </BlueapiProvider>
-            </UserAuthProvider>
-          </QueryClientProvider>
+          <App />
         </ThemeProvider>
       </StrictMode>
     </InstrumentSessionProvider>,

apps/i15-1/src/routes/Robot.tsx

@@ -1,40 +1,86 @@
 import { useInstrumentSession } from "../context/instrumentSession/useInstrumentSession";
-import { Box, Typography, Stack } from "@mui/material";
+import { Box, Typography, Stack, useTheme, TextField } from "@mui/material";
 import { useState } from "react";
 import { NumberInput } from "../components/NumberInput";
 import RunPlanButton from "../components/RunPlanButton";
+import { ReadOnlyPv } from "@atlas/pvws-config";
+import { StatusCard } from "../components/StatusCard";
 
 type RobotSampleFormData = {
   puck: number;
   position: number;
 };
 
+function StatusSidebar() {
+  const theme = useTheme();
+  return (
+    <Box sx={{ ml: 5 }}>
+      <Stack direction={"column"} spacing={2}>
+        <StatusCard
+          title="Currently loaded"
+          bgColor={theme.palette.info.light}
+          cardColor={theme.palette.primary.main}
+        >
+          <ReadOnlyPv label="Puck" pv="ca://BL15J-EA-LOC-01:PUCK:INDEX" />
+          <ReadOnlyPv
+            label="Sample Pin"
+            pv="ca://BL15J-EA-LOC-01:SAMPLE:INDEX"
+          />
+        </StatusCard>
+        <StatusCard
+          title="Ring status"
+          bgColor={theme.palette.success.light}
+          cardColor={theme.palette.primary.main}
+        >
+          <ReadOnlyPv
+            label="Ring Current"
+            pv="ca://SR-DI-DCCT-01:SIGNAL"
+            parseNumeric
+            units="mA"
+          />
+          <ReadOnlyPv
+            label="Ring Energy"
+            pv="ca://CS-CS-MSTAT-01:BEAMENERGY"
+            parseNumeric
+            units="GeV"
+          />
+        </StatusCard>
+      </Stack>
+    </Box>
+  );
+}
+
 function Robot() {
-  const { instrumentSession, setInstrumentSession } = useInstrumentSession();
+  const { instrumentSession } = useInstrumentSession();
   const [formData, setFormData] = useState<RobotSampleFormData>({
     puck: 1,
     position: 1,
   });
+  const theme = useTheme();
   return (
-    <>
-      <Box display={"flex"} justifyContent={"center"} sx={{ mt: 3 }}>
+    <Box
+      // component={"section"}
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        mt: 3,
+        mr: 5,
+        ml: 5,
+      }}
+    >
+      <Box
+        sx={{
+          padding: 5,
+          borderRadius: 1,
+          border: "1px solid",
+          borderColor: theme.palette.primary.main,
+        }}
+      >
         <Stack direction={"column"} spacing={3} alignItems={"center"}>
           <Typography component="h1" variant="h5">
             Sample Position
           </Typography>
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              gridTemplateColumns: {
-                xs: "1fr",
-                sm: "1fr 1fr",
-                md: "1fr 1fr 1fr",
-              },
-              gap: 3,
-              flexGrow: 1,
-            }}
-          >
+          <Stack direction={"row"} spacing={3} alignItems={"center"}>
             <NumberInput
               label="Puck"
               numberMode="natural"
@@ -51,7 +97,7 @@ function Robot() {
                 setFormData({ ...formData, ["position"]: parsedValue });
               }}
             />
-          </Box>
+          </Stack>
           <RunPlanButton
             name="robot_load"
             params={formData}
@@ -65,7 +111,8 @@ function Robot() {
           />
         </Stack>
       </Box>
-    </>
+      <StatusSidebar />
+    </Box>
   );
 }
 

apps/i15-1/vite.config.ts

@@ -5,6 +5,10 @@ import relay from "vite-plugin-relay";
 export default defineConfig({
   plugins: [react(), relay],
   define: {
+    "process.env": {
+      VITE_PVWS_SOCKET: "pvws.diamond.ac.uk",
+      VITE_PVWS_SSL: "true",
+    },
     global: {},
   },
 });

packages/pvws-config/README.md

@@ -0,0 +1,11 @@
+# `@atlas/pvws-config`
+
+## Installation
+
+To install it to an application `@atlas/myapp`:
+
+```
+pnpm add @atlas/pvws-config --filter myapp --workspace
+```
+
+## Usage

packages/pvws-config/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@atlas/pvws-config",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@diamondlightsource/cs-web-lib": "0.9.5",
+    "@mui/material": "<7.0.0",
+    "react-error-boundary": "^6.0.0"
+  },
+  "devDependencies": {
+    "@atlas/vitest-conf": "workspace:*",
+    "vitest": "*"
+  }
+}

packages/pvws-config/src/components/PvwsFallback.tsx

@@ -0,0 +1,14 @@
+import { TextField } from "@mui/material";
+import type { ReactNode } from "react";
+
+export function PvwsFallback(): ReactNode {
+  const errorMsg = <b>Error Connecting!</b>;
+  return (
+    <TextField
+      slotProps={{
+        input: { readOnly: true, color: "error" },
+      }}
+      defaultValue={errorMsg}
+    />
+  );
+}

packages/pvws-config/src/components/ReadOnlyPv.tsx

@@ -0,0 +1,46 @@
+import { Box, Typography, useTheme } from "@mui/material";
+import { ErrorBoundary } from "react-error-boundary";
+import type { ParsePvProps, RenderPvProps } from "../types";
+import { useParsedPvConnection } from "../useParsedPvConnection";
+import { PvwsFallback } from "./PvwsFallback";
+
+function renderValueWithUnits({
+  value,
+  units,
+}: {
+  value: string;
+  units: string;
+}) {
+  if (value != "not connected" && value != undefined) {
+    return value.concat(units);
+  } else {
+    return value;
+  }
+}
+
+function DefaultPvBox({ label, value }: { label: string; value: string }) {
+  const theme = useTheme();
+  return (
+    <Box>
+      <Typography variant="body1" color={theme.palette.text.primary}>
+        <b>{label} </b> {value}
+      </Typography>
+    </Box>
+  );
+}
+
+function PvComponent(props: ParsePvProps) {
+  const latestValue = useParsedPvConnection(props);
+  const fullValue = props.units
+    ? renderValueWithUnits({ value: latestValue, units: props.units })
+    : latestValue;
+  return <DefaultPvBox label={props.label} value={fullValue} />;
+}
+
+export function ReadOnlyPv(props: ParsePvProps) {
+  return (
+    <ErrorBoundary fallback={<PvwsFallback />}>
+      {PvComponent(props)}
+    </ErrorBoundary>
+  );
+}

packages/pvws-config/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./loadConfiguration";
+export * from "./types";
+export * from "./useParsedPvConnection";
+export * from "./components/ReadOnlyPv";