add bio risk codes to the labware details page

src/components/RouteLayout.tsx

@@ -501,20 +501,19 @@ const RouteLayout = () => {
         <Route
           path="/labware/:barcode"
           loader={async ({ params }) => {
-            // the matching param will be available to the loader
             if (params.barcode) {
-              const res = await stanCore.FindPermData({
-                barcode: params.barcode
-              });
-              const flagDetails = await stanCore.GetLabwareFlagDetails({
-                barcodes: [params.barcode]
-              });
+              const [perData, flagDetails, labwareBioRiskCodes] = await Promise.all([
+                stanCore.FindPermData({ barcode: params.barcode }),
+                stanCore.GetLabwareFlagDetails({ barcodes: [params.barcode] }),
+                stanCore.GetLabwareBioRiskCodes({ barcode: params.barcode })
+              ]);
               return {
-                ...res.visiumPermData,
-                labwareFlagDetails: flagDetails.labwareFlagDetails
+                ...perData.visiumPermData,
+                labwareFlagDetails: flagDetails.labwareFlagDetails,
+                labwareBioRiskCodes: labwareBioRiskCodes.labwareBioRiskCodes
               };
             }
-          }} // the loader will be called with the params object
+          }}
           element={<LabwareDetails />}
         />
         <Route element={<AuthLayout role={UserRole.Enduser} />}>

src/components/dataTableColumns/sampleColumns.tsx

@@ -2,6 +2,7 @@ import { Column } from 'react-table';
 import {
   LabwareFieldsFragment,
   LabwareType,
+  SampleBioRisk,
   SampleFieldsFragment,
   SamplePositionFieldsFragment
 } from '../../types/sdk';
@@ -13,7 +14,7 @@ import MutedText from '../MutedText';
  */
 export type SampleDataTableRow = SampleFieldsFragment & { slotAddress: string } & {
   sectionPosition?: string;
-} & { barcode?: string } & { labwareType?: LabwareType };
+} & { barcode?: string } & { labwareType?: LabwareType } & { bioRiskCode?: string };
 
 type ColumnFactory<E = any> = (meta?: E) => Column<SampleDataTableRow>;
 
@@ -34,7 +35,8 @@ const samplePositionMapBySampleIdSlotId = (
 
 export function buildSampleDataTableRows(
   labware: LabwareFieldsFragment,
-  samplePositionResults: SamplePositionFieldsFragment[]
+  samplePositionResults: SamplePositionFieldsFragment[],
+  labwareBioRiskCodes: Array<SampleBioRisk>
 ): SampleDataTableRow[] {
   const samplePositionResultsMap = samplePositionMapBySampleIdSlotId(samplePositionResults);
 
@@ -43,7 +45,8 @@ export function buildSampleDataTableRows(
       return {
         ...sample,
         slotAddress: slot.address,
-        sectionPosition: samplePositionResultsMap[`${sample.id}-${slot.id}`]?.region
+        sectionPosition: samplePositionResultsMap[`${sample.id}-${slot.id}`]?.region,
+        bioRiskCode: labwareBioRiskCodes.find((sbr) => sbr.sampleId === sample.id)?.bioRiskCode
       };
     });
   });
@@ -133,3 +136,10 @@ export const labwareType: ColumnFactory = () => {
     accessor: (sample) => sample.labwareType?.name
   };
 };
+
+export const bioRiskCode: ColumnFactory = () => {
+  return {
+    Header: 'Biological Risk Number',
+    accessor: (sample) => sample.bioRiskCode
+  };
+};

src/graphql/fragments/SampleBioRiskFields.graphql

@@ -0,0 +1,4 @@
+fragment SampleBioRiskFields on SampleBioRisk {
+  sampleId
+  bioRiskCode
+}

src/graphql/queries/GetLabwareBioRiskCodes.graphql

@@ -0,0 +1,5 @@
+query GetLabwareBioRiskCodes($barcode: String!) {
+  labwareBioRiskCodes(barcode: $barcode) {
+    ...SampleBioRiskFields
+  }
+}

src/mocks/handlers/bioRiskHandler.ts

@@ -4,13 +4,16 @@ import {
   AddBioRiskMutationVariables,
   GetBioRisksQuery,
   GetBioRisksQueryVariables,
+  GetLabwareBioRiskCodesQuery,
+  GetLabwareBioRiskCodesQueryVariables,
+  Labware,
   SetBioRiskEnabledMutation,
   SetBioRiskEnabledMutationVariables
 } from '../../types/sdk';
 import { isEnabled } from '../../lib/helpers';
-import BioRiskRepository from '../repositories/bioRiskRepository';
 import bioRiskRepository from '../repositories/bioRiskRepository';
 import bioRiskFactory from '../../lib/factories/bioRiskFactory';
+import labwareFactory from '../../lib/factories/labwareFactory';
 
 const bioRiskHandler = [
   graphql.mutation<AddBioRiskMutation, AddBioRiskMutationVariables>('AddBioRisk', ({ variables }) => {
@@ -42,12 +45,32 @@ const bioRiskHandler = [
     return HttpResponse.json(
       {
         data: {
-          bioRisks: BioRiskRepository.findAll().filter((bioRisk) => variables.includeDisabled || isEnabled(bioRisk))
+          bioRisks: bioRiskRepository.findAll().filter((bioRisk) => variables.includeDisabled || isEnabled(bioRisk))
         }
       },
       { status: 200 }
     );
-  })
+  }),
+
+  graphql.query<GetLabwareBioRiskCodesQuery, GetLabwareBioRiskCodesQueryVariables>(
+    'GetLabwareBioRiskCodes',
+    ({ variables }) => {
+      const labware: Labware = labwareFactory.build({ barcode: variables.barcode });
+      return HttpResponse.json(
+        {
+          data: {
+            labwareBioRiskCodes: labware.slots.map((slot) => {
+              return {
+                sampleId: slot.samples[0].id,
+                bioRiskCode: bioRiskFactory.build().code
+              };
+            })
+          }
+        },
+        { status: 200 }
+      );
+    }
+  )
 ];
 
 export default bioRiskHandler;

src/pages/LabwareDetails.tsx

@@ -5,6 +5,7 @@ import {
   AddressPermDataFieldsFragment,
   FlagDetail,
   LabwareFieldsFragment,
+  SampleBioRisk,
   SamplePositionFieldsFragment,
   SlotFieldsFragment,
   UserRole
@@ -30,10 +31,12 @@ type LabwareDetailsProps = {
   permData?: AddressPermDataFieldsFragment[];
   samplePositionResults: SamplePositionFieldsFragment[];
   labwareFlagDetails: FlagDetail[];
+  labwareBioRiskCodes: Array<SampleBioRisk>;
 };
 
 export default function LabwareDetails() {
-  const { labware, permData, samplePositionResults, labwareFlagDetails } = useLoaderData() as LabwareDetailsProps;
+  const { labware, permData, samplePositionResults, labwareFlagDetails, labwareBioRiskCodes } =
+    useLoaderData() as LabwareDetailsProps;
   const getPermDataForSlot = (
     slot: SlotFieldsFragment,
     permData: AddressPermDataFieldsFragment[]
@@ -123,9 +126,10 @@ export default function LabwareDetails() {
                   sampleColumns.donorName(),
                   sampleColumns.medium(),
                   sampleColumns.fixative(),
-                  sampleColumns.huMFre()
+                  sampleColumns.huMFre(),
+                  sampleColumns.bioRiskCode()
                 ]}
-                data={sampleColumns.buildSampleDataTableRows(labware, samplePositionResults)}
+                data={sampleColumns.buildSampleDataTableRows(labware, samplePositionResults, labwareBioRiskCodes)}
               />
             </div>
           </div>