From 7e1fb794e14f03e2edc407ed1c3512526198611c Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Thu, 15 Oct 2026 09:12:50 +0000 Subject: [PATCH 1/8] add query for ProcessingView --- .../ProcessingView/ProcessingView.tsx | 8 ++++++++ .../src/graphql/ProcessingViewQuery.ts | 20 +++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 frontend/unified/src/graphql/ProcessingViewQuery.ts diff --git a/frontend/unified/src/components/ProcessingView/ProcessingView.tsx b/frontend/unified/src/components/ProcessingView/ProcessingView.tsx index c1349786..6cc2c9a4 100644 --- a/frontend/unified/src/components/ProcessingView/ProcessingView.tsx +++ b/frontend/unified/src/components/ProcessingView/ProcessingView.tsx @@ -11,6 +11,8 @@ import { import { ChevronDown } from "lucide-react"; import { ParameterConfiguration } from "../ParameterConfiguration/ParameterConfiguration"; import { InstrumentSession } from "../SessionSelector"; +import { PROCESSINGVIEW_QUERY } from "../../graphql/ProcessingViewQuery"; +import { useSuspenseQuery } from "@apollo/client/react"; const ProcessingView = ({ visit, @@ -27,6 +29,9 @@ const ProcessingView = ({ BEAMLINES_DEFAULT_TECHNIQUE[beamline] ); + const { data, error } = useSuspenseQuery(PROCESSINGVIEW_QUERY); + if (error) console.error(`Error: ${error.message}`); + return ( <> @@ -56,6 +61,9 @@ const ProcessingView = ({ beamline={beamline} scanIds={scanIds} startTime={startTime} + templateList={data.workflowTemplates.nodes.filter((t) => + t.name.startsWith(technique.toLowerCase()) + )} /> diff --git a/frontend/unified/src/graphql/ProcessingViewQuery.ts b/frontend/unified/src/graphql/ProcessingViewQuery.ts new file mode 100644 index 00000000..639a568e --- /dev/null +++ b/frontend/unified/src/graphql/ProcessingViewQuery.ts @@ -0,0 +1,20 @@ +import { gql, TypedDocumentNode } from "@apollo/client"; +import { + ProcessingViewQuery, + ProcessingViewQueryVariables, +} from "./__generated__/ProcessingViewQuery.generated"; + +export const PROCESSINGVIEW_QUERY: TypedDocumentNode< + ProcessingViewQuery, + ProcessingViewQueryVariables +> = gql` + query ProcessingViewQuery { + workflowTemplates(filter: { scienceGroup: IMAGING }) { + __typename + nodes { + name + description + } + } + } +`; From 907444425ce6846ba30055078f994e0fa1131420 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Thu, 15 Oct 2026 09:13:09 +0000 Subject: [PATCH 2/8] create Templates type --- frontend/unified/src/types.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/unified/src/types.ts b/frontend/unified/src/types.ts index 9b4b5e98..b9dd01da 100644 --- a/frontend/unified/src/types.ts +++ b/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"]; From dca4ca6bb71c480cc7e9f29d3e5de0f75d00360d Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Thu, 15 Oct 2026 09:13:32 +0000 Subject: [PATCH 3/8] update ParameterConfiguration --- .../ParameterConfiguration.tsx | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/frontend/unified/src/components/ParameterConfiguration/ParameterConfiguration.tsx b/frontend/unified/src/components/ParameterConfiguration/ParameterConfiguration.tsx index 68ed5e15..fdb291a5 100644 --- a/frontend/unified/src/components/ParameterConfiguration/ParameterConfiguration.tsx +++ b/frontend/unified/src/components/ParameterConfiguration/ParameterConfiguration.tsx @@ -1,11 +1,10 @@ import { Alert, Button, Snackbar, Typography } from "@mui/material"; -import { Beamline, Technique } from "../../types"; +import { Beamline, Technique, Templates } from "../../types"; import { SUBMIT_WORKFLOW_TEMPLATE } from "../../../../tomography/src/components/workflows/Submission"; import { useMutation } 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 { @@ -19,6 +18,7 @@ type ParameterConfigurationProps = { beamline: Beamline; startTime: InstrumentSession["startTime"]; scanIds: number[]; + templateList: Templates; }; export const ParameterConfiguration: React.FC = ({ @@ -27,12 +27,10 @@ export const ParameterConfiguration: React.FC = ({ beamline, startTime, scanIds, + templateList, }: ParameterConfigurationProps) => { - const templateList = templateOptions.filter((option) => - option.value.includes(technique.toLowerCase()) - ); const [template, setTemplate] = useState( - templateList[0]?.value ?? null + templateList[0].name ?? null ); const [templateParameters, setTemplateParameters] = useState({}); const [resourceParameters, setResourceParameters] = useState({ @@ -96,10 +94,6 @@ export const ParameterConfiguration: React.FC = ({ ); }; - const PlaceholderComponent = ( -

No available component for {template} template

- ); - const parameterConfigurationComponent = template ? getParamConfigComponent( technique, @@ -121,7 +115,9 @@ export const ParameterConfiguration: React.FC = ({ setTemplate={setTemplate} /> Options - {parameterConfigurationComponent ?? PlaceholderComponent} + {parameterConfigurationComponent ?? ( +

No available component for {template} template

+ )} ) : ( -

No templates found

+ No templates available )} Date: Thu, 15 Oct 2026 09:13:41 +0000 Subject: [PATCH 4/8] update TemplateSelector --- .../components/ProcessingView/TemplateSelector.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/unified/src/components/ProcessingView/TemplateSelector.tsx b/frontend/unified/src/components/ProcessingView/TemplateSelector.tsx index ce014f9a..3e90af87 100644 --- a/frontend/unified/src/components/ProcessingView/TemplateSelector.tsx +++ b/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,8 +26,8 @@ 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 ""; @@ -45,13 +45,13 @@ const TemplateSelector = ({ onChange={handleSelect} > {templateList.map((opt) => ( - - {opt.label} + + {opt.name} ))} {template && ( - + From 78c710e13af277e042292ac9c3d7380397b1f459 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Thu, 15 Oct 2026 09:13:57 +0000 Subject: [PATCH 5/8] add suspense to ProcessingView --- frontend/unified/src/App.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/frontend/unified/src/App.tsx b/frontend/unified/src/App.tsx index 507843a2..1650a7d7 100644 --- a/frontend/unified/src/App.tsx +++ b/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 = () => { - + + + From bb1e5b3f7179f1551faf214a5a270027adf9b9c2 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Thu, 15 Oct 2026 09:17:00 +0000 Subject: [PATCH 6/8] update TemplateSelector --- .../unified/src/components/ProcessingView/TemplateSelector.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/unified/src/components/ProcessingView/TemplateSelector.tsx b/frontend/unified/src/components/ProcessingView/TemplateSelector.tsx index 3e90af87..df425770 100644 --- a/frontend/unified/src/components/ProcessingView/TemplateSelector.tsx +++ b/frontend/unified/src/components/ProcessingView/TemplateSelector.tsx @@ -30,7 +30,7 @@ const TemplateSelector = ({ return option.description; } } - return ""; + return "No description available"; })(); return ( From 692219860fdc69e0c68f206ce9eab8f620d8f5f2 Mon Sep 17 00:00:00 2001 From: Yousef Moazzam Date: Thu, 15 Oct 2026 11:21:30 +0100 Subject: [PATCH 7/8] Query workflow templates in param config component --- .../ParameterConfiguration.tsx | 15 +++++++++----- .../ProcessingView/ProcessingView.tsx | 8 -------- .../graphql/ParameterConfigurationQuery.ts | 20 +++++++++++++++++++ .../src/graphql/ProcessingViewQuery.ts | 20 ------------------- 4 files changed, 30 insertions(+), 33 deletions(-) create mode 100644 frontend/unified/src/graphql/ParameterConfigurationQuery.ts delete mode 100644 frontend/unified/src/graphql/ProcessingViewQuery.ts diff --git a/frontend/unified/src/components/ParameterConfiguration/ParameterConfiguration.tsx b/frontend/unified/src/components/ParameterConfiguration/ParameterConfiguration.tsx index fdb291a5..90a1a224 100644 --- a/frontend/unified/src/components/ParameterConfiguration/ParameterConfiguration.tsx +++ b/frontend/unified/src/components/ParameterConfiguration/ParameterConfiguration.tsx @@ -1,7 +1,7 @@ import { Alert, Button, Snackbar, Typography } from "@mui/material"; -import { Beamline, Technique, Templates } from "../../types"; +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"; @@ -11,6 +11,7 @@ import { determineBeamlineRawDataFilepath, determineBeamlineVisitDirpath, } from "./utils/utils"; +import { PARAMETERCONFIGURATION_QUERY } from "../../graphql/ParameterConfigurationQuery"; type ParameterConfigurationProps = { technique: Technique; @@ -18,7 +19,6 @@ type ParameterConfigurationProps = { beamline: Beamline; startTime: InstrumentSession["startTime"]; scanIds: number[]; - templateList: Templates; }; export const ParameterConfiguration: React.FC = ({ @@ -27,10 +27,13 @@ export const ParameterConfiguration: React.FC = ({ beamline, startTime, scanIds, - templateList, }: ParameterConfigurationProps) => { + const { data, error } = useSuspenseQuery(PARAMETERCONFIGURATION_QUERY); + const templateList = data.workflowTemplates.nodes.filter((t) => + t.name.startsWith(technique.toLowerCase()) + ); const [template, setTemplate] = useState( - templateList[0].name ?? null + templateList.length > 0 ? templateList[0].name : null ); const [templateParameters, setTemplateParameters] = useState({}); const [resourceParameters, setResourceParameters] = useState({ @@ -43,6 +46,8 @@ export const ParameterConfiguration: React.FC = ({ const [mutation] = useMutation(SUBMIT_WORKFLOW_TEMPLATE); + if (error) console.error(`Error: ${error.message}`); + const sessionYear = new Date(startTime).getFullYear(); const visitDirpath = determineBeamlineVisitDirpath( beamline, diff --git a/frontend/unified/src/components/ProcessingView/ProcessingView.tsx b/frontend/unified/src/components/ProcessingView/ProcessingView.tsx index 6cc2c9a4..c1349786 100644 --- a/frontend/unified/src/components/ProcessingView/ProcessingView.tsx +++ b/frontend/unified/src/components/ProcessingView/ProcessingView.tsx @@ -11,8 +11,6 @@ import { import { ChevronDown } from "lucide-react"; import { ParameterConfiguration } from "../ParameterConfiguration/ParameterConfiguration"; import { InstrumentSession } from "../SessionSelector"; -import { PROCESSINGVIEW_QUERY } from "../../graphql/ProcessingViewQuery"; -import { useSuspenseQuery } from "@apollo/client/react"; const ProcessingView = ({ visit, @@ -29,9 +27,6 @@ const ProcessingView = ({ BEAMLINES_DEFAULT_TECHNIQUE[beamline] ); - const { data, error } = useSuspenseQuery(PROCESSINGVIEW_QUERY); - if (error) console.error(`Error: ${error.message}`); - return ( <> @@ -61,9 +56,6 @@ const ProcessingView = ({ beamline={beamline} scanIds={scanIds} startTime={startTime} - templateList={data.workflowTemplates.nodes.filter((t) => - t.name.startsWith(technique.toLowerCase()) - )} /> diff --git a/frontend/unified/src/graphql/ParameterConfigurationQuery.ts b/frontend/unified/src/graphql/ParameterConfigurationQuery.ts new file mode 100644 index 00000000..4ed3ee7e --- /dev/null +++ b/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 + } + } + } +`; diff --git a/frontend/unified/src/graphql/ProcessingViewQuery.ts b/frontend/unified/src/graphql/ProcessingViewQuery.ts deleted file mode 100644 index 639a568e..00000000 --- a/frontend/unified/src/graphql/ProcessingViewQuery.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { gql, TypedDocumentNode } from "@apollo/client"; -import { - ProcessingViewQuery, - ProcessingViewQueryVariables, -} from "./__generated__/ProcessingViewQuery.generated"; - -export const PROCESSINGVIEW_QUERY: TypedDocumentNode< - ProcessingViewQuery, - ProcessingViewQueryVariables -> = gql` - query ProcessingViewQuery { - workflowTemplates(filter: { scienceGroup: IMAGING }) { - __typename - nodes { - name - description - } - } - } -`; From 80a2712f34863b0ef445efd50a6dd543a6aea617 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Thu, 15 Oct 2026 13:08:54 +0000 Subject: [PATCH 8/8] remove hardcoded templates --- frontend/unified/src/data/templates.ts | 79 -------------------------- 1 file changed, 79 deletions(-) delete mode 100644 frontend/unified/src/data/templates.ts diff --git a/frontend/unified/src/data/templates.ts b/frontend/unified/src/data/templates.ts deleted file mode 100644 index 5913d00c..00000000 --- a/frontend/unified/src/data/templates.ts +++ /dev/null @@ -1,79 +0,0 @@ -import type { Option } from "../types/workflowFields"; - -export const templateOptions: Option[] = [ - { - label: "DPC", - value: "dpc-batch", - desc: "DPC imaging produces an image of the phase shifts to the X-ray beam as a result of interaction with the sample by measuring the gradient of the phase and retrieving the phase shifts by a straightforward integration step.", - }, - { - label: "XANES Auto-processing", - value: "xanes", - desc: "XANES is a utility which attempts to stack a sequence of datasets acquired at different energy for a particular line group and perform alignment based on a line group.", - }, - { - label: "XANES Point", - value: "xanes-point", - desc: "XANES-point is a utility which takes in a scan file (inpath) and a line group (edge_element), performs windowing of this line group, and saves a two-column text file (outpath): the first column is the energy in keV, and the second column is the summed windowed MCA intensity across the 4 channels.", - }, - { - label: "XANES Sparse", - value: "xanes-sparse", - desc: "XANES-sparse is a utility which takes the last scan file of a sparse XANES scan (inpath), defines the 2D full grid, inserts the data in the correct rows, stack the images, and completes the missing data by using looped alternating steepest descent (ASD).", - }, - { - label: "XRD 1D", - value: "xrd1d-batch", - desc: "XRD can be used to spatially map changes in crystallographic direction, d-spacing or strain across a sample.", - }, - { - label: "XRD 2D", - value: "xrd2d-batch", - desc: "XRD 2D is a utility which performs Azimuthal integration (ExcaliburXRDIntegration) and saves result to a nxs file", - }, - { - label: "Ptypy Reconstruction for I08-1", - value: "ptypy-i08-1-from-config", - desc: "Runs a PtyPy reconstruction job inside a container based on data collected at I08-1.", - }, - { - label: "Ptypy Reconstruction for P99", - value: "ptypy-p99-from-config", - desc: "Runs a PtyPy reconstruction job inside a container based on data collected at P99.", - }, - { - label: "ptycho", - value: "ptycho-recon", - desc: "simple ptyrex reconstruction", - }, - { - label: "ptyrex", - value: "ptyrex-submission", - desc: "simple ptyrex reconstruction", - }, - { - label: "ptycho tomography", - value: "ptycho-tomography", - desc: "process multiple ptychography data sets in order to cover a range tomographic angles", - }, - { - label: "NBED Mapping", - value: "nbed-orientation-mapping", - desc: "nbed orientation mapping", - }, - { - label: "Mib Batch", - value: "e02mib2x-auto", - desc: "Batch conversion of mib files", - }, - { - label: "CoR Sweep", - value: "httomo-cor-sweep", - desc: "optimise the centre of rotation", - }, - { - label: "FBP 180", - value: "httomo-fbp-180", - desc: "Reconstruct 180 degree scan with FBP3d_tomobar method", - }, -];