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/components/WaffleNavbar.tsx

@@ -8,6 +8,7 @@ import {
   User,
 } from "@diamondlightsource/sci-react-ui";
 import { useUserAuth } from "../context/userAuth/useUserAuth";
+import React from "react";
 
 function WaffleNavbar() {
   const user = useUserAuth();
@@ -19,24 +20,6 @@ function WaffleNavbar() {
     <Navbar
       logo="theme"
       containerWidth={false}
-      leftSlot={
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            width: "100%",
-            flexWrap: "nowrap",
-            overflow: "hidden",
-          }}
-        >
-          <NavLinks>
-            <NavLink to="/robot" linkComponent={Link}>
-              Robot
-            </NavLink>
-          </NavLinks>
-        </Box>
-      }
       rightSlot={
         <Box sx={{ marginLeft: 4 }}>
           <User
@@ -52,7 +35,15 @@ function WaffleNavbar() {
           <ColourSchemeButton />
         </Box>
       }
-    />
+    >
+      <React.Fragment>
+        <NavLinks>
+          <NavLink to="/robot" linkComponent={Link}>
+            Robot
+          </NavLink>
+        </NavLinks>
+      </React.Fragment>
+    </Navbar>
   );
 }
 

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 { store } from "@diamondlightsource/cs-web-lib";
+import { Provider } from "react-redux";
 
 declare global {
   interface Window {
@@ -17,6 +19,7 @@ declare global {
 
 import { createApi } from "@atlas/blueapi";
 import { BlueapiProvider } from "@atlas/blueapi-query";
+import { useLoadPvwsConfig } from "@atlas/pvws-config";
 import { UserAuthProvider } from "./context/userAuth/UserAuthProvider.tsx";
 
 async function enableMocking() {
@@ -46,18 +49,28 @@ const router = createBrowserRouter([
 const api = createApi("/api");
 const queryClient = new QueryClient();
 
+function App() {
+  const config = useLoadPvwsConfig();
+
+  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/mocks/handlers.ts

@@ -1,8 +1,10 @@
-import { http, HttpResponse } from "msw";
+import { http, HttpResponse, ws } from "msw";
 
 const fakeTaskId = "7304e8e0-81c6-4978-9a9d-9046ab79ce3c";
 let workerStatus = { status: "IDLE", duration: 0 };
 
+const fakePvws = ws.link("wss://pvws.diamond.ac.uk/pvws/pv");
+
 export const handlers = [
   http.put("/api/worker/task", () => {
     workerStatus.status = "RUNNING";
@@ -32,4 +34,8 @@ export const handlers = [
     } else workerStatus.duration++;
     return HttpResponse.json(workerStatus.status);
   }),
+
+  fakePvws.addEventListener("connection", () => {
+    console.log("WebSocket client connecting...");
+  }),
 ];

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: {},
   },
 });