Nl/add template list query

frontend/unified/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { Suspense, useState } from "react";
 import { ApolloProvider, useQuery } from "@apollo/client/react";
 
 import { Box, Chip, Drawer, Grid, Stack, Typography } from "@mui/material";
@@ -189,13 +189,15 @@ export const App: React.FC = () => {
         <ApolloProvider client={apolloClientWorkflows}>
           <Grid container spacing={HORIZONTAL_SPACING} columns={2}>
             <Stack spacing={VERTICAL_SPACING} width="500px">
-              <ProcessingView
-                key={`process-${sessionName}`}
-                visit={selectedVisit}
-                beamline={beamline}
-                startTime={session.startTime}
-                scanIds={selectedScanIds}
-              />
+              <Suspense>
+                <ProcessingView
+                  key={`process-${sessionName}`}
+                  visit={selectedVisit}
+                  beamline={beamline}
+                  startTime={session.startTime}
+                  scanIds={selectedScanIds}
+                />
+              </Suspense>
             </Stack>
             <WorkflowsDataFetcher visit={selectedVisit} />
           </Grid>

frontend/unified/src/components/ParameterConfiguration/ParameterConfiguration.tsx

@@ -1,17 +1,17 @@
 import { Alert, Button, Snackbar, Typography } from "@mui/material";
 import { Beamline, Technique } from "../../types";
 import { SUBMIT_WORKFLOW_TEMPLATE } from "../../../../tomography/src/components/workflows/Submission";
-import { useMutation } from "@apollo/client/react";
+import { useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { Visit } from "@diamondlightsource/sci-react-ui";
 import { InstrumentSession } from "../SessionSelector";
 import TemplateSelector from "../ProcessingView/TemplateSelector";
-import { templateOptions } from "../../data/templates";
 import { getParamConfigComponent } from "./utils/getParamConfigComponent";
 import { useState } from "react";
 import {
   determineBeamlineRawDataFilepath,
   determineBeamlineVisitDirpath,
 } from "./utils/utils";
+import { PARAMETERCONFIGURATION_QUERY } from "../../graphql/ParameterConfigurationQuery";
 
 type ParameterConfigurationProps = {
   technique: Technique;
@@ -28,11 +28,12 @@ export const ParameterConfiguration: React.FC<ParameterConfigurationProps> = ({
   startTime,
   scanIds,
 }: ParameterConfigurationProps) => {
-  const templateList = templateOptions.filter((option) =>
-    option.value.includes(technique.toLowerCase())
+  const { data, error } = useSuspenseQuery(PARAMETERCONFIGURATION_QUERY);
+  const templateList = data.workflowTemplates.nodes.filter((t) =>
+    t.name.startsWith(technique.toLowerCase())
   );
   const [template, setTemplate] = useState<string | null>(
-    templateList[0]?.value ?? null
+    templateList.length > 0 ? templateList[0].name : null
   );
   const [templateParameters, setTemplateParameters] = useState<object>({});
   const [resourceParameters, setResourceParameters] = useState({
@@ -45,6 +46,8 @@ export const ParameterConfiguration: React.FC<ParameterConfigurationProps> = ({
 
   const [mutation] = useMutation(SUBMIT_WORKFLOW_TEMPLATE);
 
+  if (error) console.error(`Error: ${error.message}`);
+
   const sessionYear = new Date(startTime).getFullYear();
   const visitDirpath = determineBeamlineVisitDirpath(
     beamline,
@@ -96,10 +99,6 @@ export const ParameterConfiguration: React.FC<ParameterConfigurationProps> = ({
     );
   };
 
-  const PlaceholderComponent = (
-    <p>No available component for {template} template</p>
-  );
-
   const parameterConfigurationComponent = template
     ? getParamConfigComponent(
         technique,
@@ -121,7 +120,9 @@ export const ParameterConfiguration: React.FC<ParameterConfigurationProps> = ({
             setTemplate={setTemplate}
           />
           <Typography variant="h6">Options</Typography>
-          {parameterConfigurationComponent ?? PlaceholderComponent}
+          {parameterConfigurationComponent ?? (
+            <p>No available component for {template} template</p>
+          )}
           <Button
             disabled={!parameterConfigurationComponent}
             variant="contained"
@@ -132,7 +133,7 @@ export const ParameterConfiguration: React.FC<ParameterConfigurationProps> = ({
           </Button>
         </>
       ) : (
-        <p>No templates found</p>
+        <Typography>No templates available</Typography>
       )}
 
       <Snackbar

frontend/unified/src/components/ProcessingView/TemplateSelector.tsx

@@ -9,14 +9,14 @@ import {
   Stack,
 } from "@mui/material";
 import InfoIcon from "@mui/icons-material/Info";
-import { Option } from "../../types";
+import { Templates } from "../../types";
 
 const TemplateSelector = ({
   templateList,
   template,
   setTemplate,
 }: {
-  templateList: Option[];
+  templateList: Templates;
   template: string;
   setTemplate: (_: string) => void;
 }) => {
@@ -26,11 +26,11 @@ const TemplateSelector = ({
 
   const desc = (function () {
     for (const option of templateList) {
-      if (option.value === template) {
-        return option.desc;
+      if (option.name === template) {
+        return option.description;
       }
     }
-    return "";
+    return "No description available";
   })();
 
   return (
@@ -45,13 +45,13 @@ const TemplateSelector = ({
           onChange={handleSelect}
         >
           {templateList.map((opt) => (
-            <MenuItem key={opt.value} value={opt.value}>
-              {opt.label}
+            <MenuItem key={opt.name} value={opt.name}>
+              {opt.name}
             </MenuItem>
           ))}
         </Select>
         {template && (
-          <Tooltip title={desc}>
+          <Tooltip title={desc ?? "No description available"}>
             <IconButton>
               <InfoIcon />
             </IconButton>

frontend/unified/src/graphql/ParameterConfigurationQuery.ts

@@ -0,0 +1,20 @@
+import { gql, TypedDocumentNode } from "@apollo/client";
+import {
+  ParameterConfigurationQuery,
+  ParameterConfigurationQueryVariables,
+} from "./__generated__/ParameterConfigurationQuery.generated";
+
+export const PARAMETERCONFIGURATION_QUERY: TypedDocumentNode<
+  ParameterConfigurationQuery,
+  ParameterConfigurationQueryVariables
+> = gql`
+  query ParameterConfigurationQuery {
+    workflowTemplates(filter: { scienceGroup: IMAGING }) {
+      __typename
+      nodes {
+        name
+        description
+      }
+    }
+  }
+`;

frontend/unified/src/types.ts

@@ -1,3 +1,5 @@
+import { ProcessingViewQuery } from "./graphql/__generated__/ProcessingViewQuery.generated";
+
 const Technique = {
   Dpc: "Dpc",
   Nbed: "Nbed",
@@ -65,8 +67,6 @@ export const BEAMLINES_DEFAULT_TECHNIQUE = {
   [Beamline.P99]: Technique.Ptypy,
 };
 
-export type Option = { label: string; value: string; desc?: string };
-
 export type TemplateComponentProps = {
   setParameters: (_: object) => void;
   setResourceParameters: (_: object) => void;
@@ -87,3 +87,5 @@ export type Task = {
   name: string;
   status: TaskStatus;
 };
+
+export type Templates = ProcessingViewQuery["workflowTemplates"]["nodes"];