Allow available instrument sessions to be updated dynamically

apps/i15-1/src/AppProviders.tsx

@@ -22,17 +22,19 @@ export function AppProviders({ api, theme, children }: Props) {
   const config = useLoadPvwsConfig();
   return (
     <ThemeProvider theme={theme}>
-      <InstrumentSessionProvider sessionsList={["cm44163-3", "cm44163-4"]}>
-        <ReduxProvider store={store(config)}>
-          <QueryClientProvider client={new QueryClient()}>
-            <UserAuthProvider>
-              <BlueapiProvider api={api}>
-                <ApolloProvider client={client}>{children}</ApolloProvider>
-              </BlueapiProvider>
-            </UserAuthProvider>
-          </QueryClientProvider>
-        </ReduxProvider>
-      </InstrumentSessionProvider>
+      <ReduxProvider store={store(config)}>
+        <QueryClientProvider client={new QueryClient()}>
+          <UserAuthProvider>
+            <BlueapiProvider api={api}>
+              <ApolloProvider client={client}>
+                <InstrumentSessionProvider>
+                  {children}
+                </InstrumentSessionProvider>
+              </ApolloProvider>
+            </BlueapiProvider>
+          </UserAuthProvider>
+        </QueryClientProvider>
+      </ReduxProvider>
     </ThemeProvider>
   );
 }

apps/i15-1/src/components/ExperimentTable/ULIMSExperimentsTable.tsx

@@ -73,7 +73,7 @@ export function ExperimentList() {
     });
   }
 
-  const visit = visitTextToVisit(instrumentSession);
+  const visit = visitTextToVisit(instrumentSession ?? "cm0-0");
 
   const { data, loading, error } = useQuery(GET_EXPERIMENTS, {
     skip: !visit,

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

@@ -0,0 +1,49 @@
+import { useLazyQuery } from "@apollo/client/react";
+import { getInstrumentSessionsQuery } from "../graphql/getInstrumentSessionsQuery.ts";
+import type { TypedDocumentNode } from "@apollo/client";
+import type {
+  InstrumentSessionQuery,
+  InstrumentSessionQueryVariables,
+} from "../graphql/getInstrumentSessionsQuery.generated.ts";
+import { useInstrumentSession } from "@atlas/app-shell";
+import { Button } from "@mui/material";
+
+export const InstrumentSessionButton = () => {
+  const { setInstrumentSession, setInstrumentSessionList } =
+    useInstrumentSession();
+
+  const GET_SESSIONS: TypedDocumentNode<
+    InstrumentSessionQuery,
+    InstrumentSessionQueryVariables
+  > = getInstrumentSessionsQuery;
+
+  const [fetchSessions] = useLazyQuery(GET_SESSIONS);
+
+  const handleButtonClick = async () => {
+    try {
+      const { data } = await fetchSessions({
+        variables: { instrumentKey: "I15-1" },
+      });
+
+      const edges = data?.instrumentByKey?.instrumentSessions?.edges;
+      if (edges && edges.length > 0) {
+        const sessionsList = edges.flatMap((edge) => {
+          const ref = edge?.node?.instrumentSessionReference;
+          return ref ? [ref.toLocaleLowerCase()] : [];
+        });
+        setInstrumentSessionList(sessionsList);
+        if (sessionsList.length == 1) {
+          setInstrumentSession(sessionsList[0]);
+        }
+      }
+    } catch (err) {
+      console.error("Failed to fetch sessions:", err);
+    }
+  };
+
+  return (
+    <Button variant="contained" onClick={handleButtonClick}>
+      Get Sessions
+    </Button>
+  );
+};

apps/i15-1/src/graphql/getInstrumentSessionsQuery.generated.ts

@@ -0,0 +1,10 @@
+/** Internal type. DO NOT USE DIRECTLY. */
+type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+/** Internal type. DO NOT USE DIRECTLY. */
+export type Incremental<T> = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never };
+export type InstrumentSessionQueryVariables = Exact<{
+  instrumentKey: string;
+}>;
+
+
+export type InstrumentSessionQuery = { instrumentByKey: { __typename: 'Instrument', instrumentSessions: { __typename: 'InstrumentSessionConnection', edges: Array<{ __typename: 'InstrumentSessionEdge', node: { __typename: 'InstrumentSession', instrumentSessionReference: string | null } }> } } | null };

apps/i15-1/src/graphql/getInstrumentSessionsQuery.ts

@@ -0,0 +1,15 @@
+import { gql } from "@apollo/client";
+
+export const getInstrumentSessionsQuery = gql`
+  query InstrumentSession($instrumentKey: String!) {
+    instrumentByKey(key: $instrumentKey) {
+      instrumentSessions(filterBy: { state: { eq: IN_PROGRESS } }) {
+        edges {
+          node {
+            instrumentSessionReference
+          }
+        }
+      }
+    }
+  }
+`;

apps/i15-1/src/mocks/handlers.ts

@@ -189,6 +189,27 @@ const fakeContainersForInstrument: {
   },
 };
 
+const fakeInstrumentSession = {
+  data: {
+    instrumentByKey: {
+      instrumentSessions: {
+        edges: [
+          {
+            node: {
+              instrumentSessionReference: "CM44163-4",
+            },
+          },
+          {
+            node: {
+              instrumentSessionReference: "CM44163-5",
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
 function setWorkerState(new_state: string) {
   workerStatus.status = new_state;
 }
@@ -785,6 +806,10 @@ export const handlers = [
       }
     }
 
+    if (body.operationName === "InstrumentSession") {
+      return HttpResponse.json(fakeInstrumentSession);
+    }
+
     return HttpResponse.json(fakeExperiments);
   }),
 

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

@@ -4,12 +4,14 @@ import PrecisionManufacturingIcon from "@mui/icons-material/PrecisionManufacturi
 import QueueIcon from "@mui/icons-material/Queue";
 import { useUserAuth } from "../context/userAuth/useUserAuth.ts";
 import { User } from "@diamondlightsource/sci-react-ui";
+import { InstrumentSessionButton } from "../components/getInstrumentSessionButton.tsx";
 
 function Dashboard() {
   const user = useUserAuth();
 
   const handleLogIn = () => window.location.assign("/oauth2/sign_in");
   const handleLogOut = () => window.location.assign("/oauth2/sign_out");
+
   return (
     <>
       <Container maxWidth="sm" sx={{ mb: 4 }}>
@@ -26,6 +28,7 @@ function Dashboard() {
                 : { fedid: user.person }
             }
           />
+          <InstrumentSessionButton />
           <Stack direction={"row"} spacing={5}>
             <Button
               component={Link}

packages/app-shell/src/context/instrumentSession/InstrumentSessionProvider.tsx

@@ -2,11 +2,13 @@ import { useState, useEffect, useContext, type ReactNode } from "react";
 import { createContext } from "react";
 
 export const ID_STORAGE_KEY = "instrument-session-id";
+export const LIST_STORAGE_KEY = "instrument-session-list";
 
 export type InstrumentSessionContextType = {
-  instrumentSession: string;
+  instrumentSession: string | null;
   setInstrumentSession: (session: string) => void;
-  sessionsList: string[];
+  instrumentSessionList: string[] | null;
+  setInstrumentSessionList: (list: string[]) => void;
 };
 
 export const InstrumentSessionContext = createContext<
@@ -15,37 +17,51 @@ export const InstrumentSessionContext = createContext<
 
 export const InstrumentSessionProvider = ({
   children,
-  sessionsList = ["cm123-4", "cm567-8"],
+  sessionsList = null,
 }: {
   children: ReactNode;
-  sessionsList?: string[];
+  sessionsList?: string[] | null;
 }) => {
-  const [instrumentSession, setInstrumentSession] = useState<string>(() => {
-    try {
-      const rawItem = localStorage.getItem(ID_STORAGE_KEY);
-      if (!rawItem) {
-        return sessionsList[0];
+  const [instrumentSessionList, setInstrumentSessionList] = useState<
+    string[] | null
+  >(sessionsList);
+
+  useEffect(() => {
+    localStorage.setItem(
+      LIST_STORAGE_KEY,
+      JSON.stringify(instrumentSessionList),
+    );
+  }, [instrumentSessionList]);
+
+  const [instrumentSession, setInstrumentSession] = useState<string | null>(
+    () => {
+      try {
+        const rawItem = localStorage.getItem(ID_STORAGE_KEY);
+        if (!rawItem) {
+          return sessionsList ? sessionsList[0] : null;
+        }
+        return JSON.parse(rawItem);
+      } catch (error) {
+        console.error(
+          "Failed to load instrument session from localStorage:",
+          error,
+        );
+        return sessionsList ? sessionsList[0] : null;
       }
-      return JSON.parse(rawItem);
-    } catch (error) {
-      console.error(
-        "Failed to load instrument session from localStorage:",
-        error,
-      );
-      return sessionsList[0];
-    }
-  });
+    },
+  );
 
   useEffect(() => {
-    localStorage.setItem(ID_STORAGE_KEY, instrumentSession);
+    localStorage.setItem(ID_STORAGE_KEY, JSON.stringify(instrumentSession));
   }, [instrumentSession]);
 
   return (
     <InstrumentSessionContext.Provider
       value={{
         instrumentSession,
         setInstrumentSession,
-        sessionsList,
+        instrumentSessionList,
+        setInstrumentSessionList,
       }}
     >
       {children}