X1234 section planning

src/components/planning/LabwarePlan.tsx

@@ -51,6 +51,12 @@ type LabwarePlanProps = {
   operationType: string;
 
   sampleColors: Map<number, string>;
+
+  /** Specified number of labware when setting the plan */
+  numLabware: number;
+
+  /** Specified section thickness when setting the plan */
+  sectionThickness: number;
   /**
    * Callback triggered when the delete button is clicked
    * @param cid the client ID of the {@link LabwarePlan}
@@ -66,7 +72,20 @@ type LabwarePlanProps = {
 };
 
 const LabwarePlan = React.forwardRef<HTMLDivElement, LabwarePlanProps>(
-  ({ cid, outputLabware, onDeleteButtonClick, onComplete, sampleColors, operationType, sourceLabware }, ref) => {
+  (
+    {
+      cid,
+      outputLabware,
+      onDeleteButtonClick,
+      onComplete,
+      sampleColors,
+      operationType,
+      sourceLabware,
+      numLabware,
+      sectionThickness
+    },
+    ref
+  ) => {
     const labwarePlanMachine = React.useMemo(() => {
       return createLabwarePlanMachine(buildInitialLayoutPlan(sourceLabware, sampleColors, outputLabware));
     }, [sourceLabware, sampleColors, outputLabware]);
@@ -120,7 +139,7 @@ const LabwarePlan = React.forwardRef<HTMLDivElement, LabwarePlanProps>(
         className="relative p-3 shadow"
       >
         <Formik<FormValues>
-          initialValues={buildInitialValues(operationType, outputLabware.labwareType)}
+          initialValues={buildInitialValues(operationType, outputLabware.labwareType, numLabware, sectionThickness)}
           validationSchema={buildValidationSchema(outputLabware.labwareType)}
           onSubmit={async (values) => {
             const newValues = {
@@ -336,18 +355,21 @@ type FormValues = {
 /**
  * The initial values for the labware plan form
  */
-function buildInitialValues(operationType: string, labwareType: LabwareTypeFieldsFragment): FormValues {
+function buildInitialValues(
+  operationType: string,
+  labwareType: LabwareTypeFieldsFragment,
+  quantity: number,
+  sectionThickness: number
+): FormValues {
   let formValues: FormValues = {
     operationType,
-    quantity: 1
+    quantity,
+    sectionThickness
   };
 
   if (labwareType.name === LabwareTypeName.VISIUM_LP) {
     formValues.barcode = '';
   }
-  if (labwareType.name !== LabwareTypeName.FETAL_WASTE_CONTAINER) {
-    formValues.sectionThickness = 0;
-  }
   if (
     labwareType.name === LabwareTypeName.VISIUM_LP ||
     labwareType.name === LabwareTypeName.VISIUM_TO ||

src/pages/sectioning/Plan.tsx

@@ -48,6 +48,10 @@ function Plan() {
 
   const [selectedLabwareType, setSelectedLabwareType] = React.useState<string>(LabwareTypeName.TUBE);
 
+  const [numLabware, setNumLabware] = React.useState<number>(1);
+
+  const [sectionThickness, setSectionThickness] = React.useState<number>(1);
+
   const sectioningInfo = useLoaderData() as GetSectioningInfoQuery;
   /**
    * Limit the labware types the user can Section on to.
@@ -89,24 +93,46 @@ function Plan() {
               sourceLabware={sourceLabware}
               onDeleteButtonClick={deleteAction}
               onComplete={confirmAction!}
+              numLabware={numLabware}
+              sectionThickness={sectionThickness}
             />
           ))}
         </>
       );
     },
-    []
+    [sectionThickness, numLabware]
   );
   const buildPlanCreationSettings = React.useCallback(() => {
     return (
-      <CustomReactSelect
-        className="mt-1 block w-full md:w-1/2"
-        dataTestId={'labware-type'}
-        handleChange={(val) => setSelectedLabwareType((val as OptionType).label)}
-        value={selectedLabwareType}
-        options={selectOptionValues(allowedLabwareTypes, 'name', 'name')}
-      />
+      <div className="mt-4 grid grid-cols-3 gap-x-2 gap-y-1 text-center">
+        <div className="text-gray-500">Labware type</div>
+        <div className="text-gray-500">Number of labware</div>
+        <div className="text-gray-500">Section Thickness</div>
+        <CustomReactSelect
+          dataTestId={'labware-type'}
+          handleChange={(val) => setSelectedLabwareType((val as OptionType).label)}
+          value={selectedLabwareType}
+          options={selectOptionValues(allowedLabwareTypes, 'name', 'name')}
+        />
+        <input
+          type="number"
+          className="block h-10 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-sdb-100 focus:border-sdb-100"
+          onChange={(e) => setNumLabware(Number(e.currentTarget.value))}
+          value={numLabware}
+          data-testid={'numLabware'}
+          min={1}
+        />
+        <input
+          type="number"
+          className="block h-10 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-sdb-100 focus:border-sdb-100"
+          onChange={(e) => setSectionThickness(Number(e.currentTarget.value))}
+          value={sectionThickness}
+          data-testid={'sectionThickness'}
+          min={1}
+        />
+      </div>
     );
-  }, [allowedLabwareTypes, setSelectedLabwareType, selectedLabwareType]);
+  }, [allowedLabwareTypes, setSelectedLabwareType, selectedLabwareType, setNumLabware, numLabware, sectionThickness]);
 
   return (
     <AppShell>

tests/unit/components/planning/labwarePlan.spec.tsx

@@ -10,6 +10,7 @@ import { LabwareType } from '../../../../src/types/sdk';
 import { createLabwarePlanMachine } from '../../../../src/components/planning/labwarePlan.machine';
 import { createActor } from 'xstate';
 import { convertLabwareToFlaggedLabware } from '../../../../src/lib/helpers/labwareHelper';
+
 beforeAll(() => {
   enableMapSet();
 });
@@ -246,17 +247,17 @@ describe('Fields validations', () => {
   });
 });
 const expectDisplayNumberOfLabwareAndSectionThicknessInputs = () => {
-  expect(screen.getByTestId('Number of Labware')).toBeVisible();
-  expect(screen.getByTestId('Section Thickness')).toBeVisible();
+  expect(screen.getByTestId('Number of Labware')).toHaveValue(2);
+  expect(screen.getByTestId('Section Thickness')).toHaveValue(3);
   expect(screen.queryByTestId('formInput')).toBeNull();
   expect(screen.queryByTestId('slide-costing')).toBeNull();
 };
 
 const expectDisplayNumberOfLabwareSectionThicknessLotNumberAndSlideCosting = () => {
   expect(screen.getByTestId('formInput')).toBeVisible();
-  expect(screen.getByTestId('Number of Labware')).toBeVisible();
+  expect(screen.getByTestId('Number of Labware')).toHaveValue(2);
   expect(screen.getByTestId('Barcode')).toBeVisible();
-  expect(screen.getByTestId('Section Thickness')).toBeVisible();
+  expect(screen.getByTestId('Section Thickness')).toHaveValue(3);
 };
 
 const renderLabwarePlan = (outputLabwareType: string) => {
@@ -271,6 +272,8 @@ const renderLabwarePlan = (outputLabwareType: string) => {
         sourceLabware={[buildFlaggedLabware(LabwareTypeName.TUBE)]}
         onDeleteButtonClick={jest.fn()}
         onComplete={jest.fn()}
+        numLabware={2}
+        sectionThickness={3}
       />
     </div>
   );