Merge pull request #724 from sanger/x1219-xeniumQC-runName

x1219 - link the run name of the Xenium Analyser to the QC step
sanger · Jul 10, 2024 · b26ff43 · b26ff43
2 parents bea923d + 1004a6c
commit b26ff43
Show file tree

Hide file tree

Showing 6 changed files with 1,604 additions and 1,521 deletions.
diff --git a/cypress/e2e/pages/xeniumQC.cy.ts b/cypress/e2e/pages/xeniumQC.cy.ts
@@ -31,6 +31,7 @@ describe('Xenium QC', () => {
       //display work number for all labware
       cy.findByTestId('workNumberAll').should('be.visible');
       cy.findByTestId('completion').should('be.visible');
+      cy.findByTestId('runName').should('be.visible');
     });
   });
   describe('When  two labware is scanned ', () => {

diff --git a/src/components/xeniumQC/XeniumLabwareQC.tsx b/src/components/xeniumQC/XeniumLabwareQC.tsx
@@ -23,6 +23,12 @@ type XeniumLabwareQCProps = {
 
 export const XeniumLabwareQC = ({ labware, comments, index, removeLabware }: XeniumLabwareQCProps) => {
   const { values, setFieldValue, setValues } = useFormikContext<XeniumQCFormData>();
+  const runNamesSelectOption: OptionType[] = values.labware[index]
+    ? values.labware[index].runNames!.map((runName) => {
+        return { value: runName, label: runName } as OptionType;
+      })
+    : ([] as OptionType[]);
+
   return (
     <div className="max-w-screen-xl mx-auto" data-testid={'xenium-labware-qc'}>
       {labware && (
@@ -47,7 +53,7 @@ export const XeniumLabwareQC = ({ labware, comments, index, removeLabware }: Xen
                 </div>
               </div>
               <div className="flex flex-row items-center justify-start"></div>
-              <div className={'grid grid-cols-2 gap-4'}>
+              <div className={'grid grid-cols-3 gap-4'}>
                 <WorkNumberSelect
                   label={'SGP Number'}
                   name={`labware.${index}.workNumber`}
@@ -58,6 +64,17 @@ export const XeniumLabwareQC = ({ labware, comments, index, removeLabware }: Xen
                   workNumber={values.labware[index]?.workNumber}
                 />
 
+                <CustomReactSelect
+                  label={'Run Name'}
+                  dataTestId={'runName'}
+                  name={`labware.${index}.selectedRunName`}
+                  emptyOption={true}
+                  options={runNamesSelectOption}
+                  handleChange={async (val) => {
+                    await setFieldValue(`labware.${index}.selectedRunName`, val ? (val as OptionType).value : '');
+                  }}
+                />
+
                 <CustomReactSelect
                   label={'Comments'}
                   dataTestId={`${labware.barcode}-comments`}

diff --git a/src/graphql/queries/GetRunNames.graphql b/src/graphql/queries/GetRunNames.graphql
@@ -0,0 +1,3 @@
+query GetRunNames($barcode: String!) {
+  runNames(barcode: $barcode)
+}
diff --git a/src/mocks/handlers/xeniumHandlers.ts b/src/mocks/handlers/xeniumHandlers.ts
@@ -3,6 +3,7 @@ import commentRepository from '../repositories/commentRepository';
 import {
   GetAnalyserScanDataQuery,
   GetAnalyserScanDataQueryVariables,
+  GetRunNamesQuery,
   RecordAnalyserMutation,
   RecordAnalyserMutationVariables
 } from '../../types/sdk';
@@ -43,6 +44,18 @@ const xeniumHandlers = [
       },
       { status: 200 }
     );
+  }),
+
+  graphql.query<GetRunNamesQuery, GetAnalyserScanDataQueryVariables>('GetRunNames', () => {
+    return HttpResponse.json({
+      data: {
+        runNames: [
+          faker.string.alphanumeric({ length: { min: 5, max: 8 } }),
+          faker.string.alphanumeric({ length: { min: 5, max: 8 } }),
+          faker.string.alphanumeric({ length: { min: 5, max: 8 } })
+        ]
+      }
+    });
   })
 ];
 

diff --git a/src/pages/XeniumQC.tsx b/src/pages/XeniumQC.tsx
@@ -4,10 +4,11 @@ import {
   LabwareFlaggedFieldsFragment,
   QcLabwareRequest,
   RecordQcLabwareMutation,
+  RoiFieldsFragment,
   SampleFieldsFragment
 } from '../types/sdk';
 import * as Yup from 'yup';
-import { StanCoreContext } from '../lib/sdk';
+import { stanCore, StanCoreContext } from '../lib/sdk';
 import createFormMachine from '../lib/machines/form/formMachine';
 import { useMachine } from '@xstate/react';
 import AppShell from '../components/AppShell';
@@ -38,6 +39,8 @@ type QcFormLabware = {
   comments: string[];
   roiComments: string[];
   sampleComments: Array<SampleComment>;
+  runNames?: string[];
+  selectedRunName?: string;
 };
 
 export type XeniumQCFormData = {
@@ -46,6 +49,22 @@ export type XeniumQCFormData = {
   completion: string;
 };
 
+const getRegionsOfInterestGroupedByRoi = async (barcode: string): Promise<Record<string, RoiFieldsFragment[]>> => {
+  const response = await stanCore.GetRegionsOfInterest({
+    barcodes: [barcode]
+  });
+  if (response.rois.length === 0 || response.rois[0]!.rois.length === 0) return {};
+  return groupByRoi(response.rois[0]!.rois!);
+};
+
+const getRunNames = async (barcode: string): Promise<string[]> => {
+  return await stanCore
+    .GetRunNames({
+      barcode: barcode
+    })
+    .then((response) => response.runNames);
+};
+
 const XeniumQC = () => {
   const comments = useLoaderData() as CommentFieldsFragment[];
   const stanCore = useContext(StanCoreContext);
@@ -79,6 +98,8 @@ const XeniumQC = () => {
           barcode: Yup.string().required(),
           workNumber: Yup.string().required().label('SGP Number'),
           comments: Yup.array().min(0).optional(),
+          runNames: Yup.array().min(0).optional(),
+          selectedRunName: Yup.string().optional(),
           roiComments: Yup.array().min(0).optional(),
           sampleComments: Yup.array()
             .of(
@@ -102,44 +123,43 @@ const XeniumQC = () => {
     completion: currentTime
   };
 
-  const getRegionsOfInterest = useCallback(
+  const getRelatedLabwareData = useCallback(
     async (
-      foundLabware: LabwareFlaggedFieldsFragment,
+      barcode: string,
       setValues: (values: SetStateAction<XeniumQCFormData>, shouldValidate?: boolean) => {}
     ): Promise<string[]> => {
       try {
-        const response = await stanCore.GetRegionsOfInterest({
-          barcodes: [foundLabware.barcode]
-        });
-        const groupedByRoi = groupByRoi(response.rois[0]!.rois!);
-        if (response.rois.length > 0) {
-          setValues((prev) => {
-            prev.labware.push({
-              barcode: foundLabware.barcode,
-              workNumber: prev.workNumberAll,
-              completion: prev.completion,
-              comments: [],
-              roiComments: [],
-              sampleComments: Object.keys(groupedByRoi).map((roi) => {
-                return {
-                  sampleAddress: groupedByRoi[roi].map((data) => {
-                    return { sample: data.sample ?? '', address: data.address };
-                  }),
-                  roi,
-                  comments: []
-                };
-              })
-            });
-            return prev;
+        const groupedByRoi = await getRegionsOfInterestGroupedByRoi(barcode);
+        if (Object.keys(groupedByRoi).length === 0)
+          return [`No region of interest is recorded against the scanned labware ${barcode}.`];
+        const runNames = await getRunNames(barcode);
+        setValues((prev) => {
+          prev.labware.push({
+            barcode: barcode,
+            workNumber: prev.workNumberAll,
+            completion: prev.completion,
+            comments: [],
+            roiComments: [],
+            runNames,
+            sampleComments: Object.keys(groupedByRoi).map((roi) => {
+              return {
+                sampleAddress: groupedByRoi[roi].map((data) => {
+                  return { sample: data.sample ?? '', address: data.address };
+                }),
+                roi,
+                comments: []
+              };
+            })
           });
-        }
+          return prev;
+        });
 
         return [];
       } catch (error) {
-        return ['Error fetching the regions of interests related to the labware ' + foundLabware.barcode];
+        return [`There was an error fetching the related data for the labware ${barcode}.`];
       }
     },
-    [stanCore]
+    []
   );
 
   return (
@@ -162,6 +182,7 @@ const XeniumQC = () => {
                     barcode: lw.barcode,
                     workNumber: lw.workNumber,
                     comments: lw.comments.map((comment) => Number(comment)),
+                    runName: lw.selectedRunName,
                     sampleComments: lw.sampleComments?.flatMap((sampleComment) => {
                       return sampleComment.sampleAddress.flatMap((sampleAdress) => {
                         return sampleComment.comments.map((commentId) => {
@@ -204,7 +225,7 @@ const XeniumQC = () => {
                           labwares: LabwareFlaggedFieldsFragment[],
                           foundLabware: LabwareFlaggedFieldsFragment
                         ) => {
-                          return getRegionsOfInterest(foundLabware, setValues);
+                          return getRelatedLabwareData(foundLabware.barcode, setValues);
                         }}
                       >
                         {({ labwares, removeLabware }) => (