Merge pull request #726 from sanger/x1221-visiumQC-range

record the main peak size in addition to the concentration on the Vis…
sanger · Jul 10, 2024 · 2b217e7 · 2b217e7
2 parents b26ff43 + 5bbea43
commit 2b217e7
Show file tree

Hide file tree

Showing 9 changed files with 1,701 additions and 1,656 deletions.
diff --git a/cypress/e2e/pages/libraryAmpAndGeneration.cy.ts b/cypress/e2e/pages/libraryAmpAndGeneration.cy.ts
@@ -184,7 +184,7 @@ describe('LibraryAmpAndGeneration Page', () => {
             cy.findByRole('button', { name: 'Record Cycle >' }).click();
           });
           it('displays the previously entered cycle value', () => {
-            cy.findAllByTestId('Cycles-input').each((elem) => {
+            cy.findAllByTestId('CYCLES-input').each((elem) => {
               cy.wrap(elem).should('have.value', '3');
             });
           });
@@ -243,7 +243,7 @@ describe('LibraryAmpAndGeneration Page', () => {
             cy.findByRole('button', { name: 'Record Cycle >' }).click();
           });
           it('removes the previously entered cycle values ', () => {
-            cy.findAllByTestId('Cycles-input').each((elem) => {
+            cy.findAllByTestId('CYCLES-input').each((elem) => {
               cy.wrap(elem).should('have.value', '');
             });
           });

diff --git a/cypress/e2e/pages/visiumQC.cy.ts b/cypress/e2e/pages/visiumQC.cy.ts
@@ -298,7 +298,7 @@ describe('Visium QC Page', () => {
 
       it('shows cq value in all text fields in CQ column of table', () => {
         cy.findByTestId('all-Cycles').clear().type('3');
-        cy.findAllByTestId('Cycles-input').should('have.value', 3);
+        cy.findAllByTestId('CYCLES-input').should('have.value', 3);
       });
     });
 
@@ -376,7 +376,7 @@ describe('Visium QC Page', () => {
       context('When all values are valid and there is no server error', () => {
         before(() => {
           selectOption('measurementType', 'cDNA concentration');
-          cy.findAllByTestId('cDNA concentration-input').eq(0).type('.45');
+          cy.findAllByTestId('CDNA CONCENTRATION-input').eq(0).type('.45');
           selectOption('comments0', 'Potential to work');
           saveButton().click();
         });
@@ -599,7 +599,7 @@ describe('Visium QC Page', () => {
         cy.findByTestId('all-Cq value').type('5');
       });
       it('updates all the Cq value inputs inside the table related to the slots', () => {
-        cy.findAllByTestId('Cq value-input').should('have.value', 5);
+        cy.findAllByTestId('CQ VALUE-input').should('have.value', 5);
       });
     });
 

diff --git a/src/components/slotMeasurement/SlotMeasurements.tsx b/src/components/slotMeasurement/SlotMeasurements.tsx
@@ -8,7 +8,9 @@ import CustomReactSelect, { OptionType } from '../forms/CustomReactSelect';
 import { Dictionary, groupBy } from 'lodash';
 
 export type MeasurementConfigProps = {
+  measurementType: string[];
   name: string;
+  unit?: string;
   stepIncrement?: string;
   validateFunction?: (value: string) => void;
   initialMeasurementVal?: string;
@@ -30,11 +32,6 @@ type MeasurementRow = {
   measurements: SlotMeasurementRequest[];
   samples?: SampleFieldsFragment[];
 };
-const setMeasurementNameTableTitle = (measurementName: string): string => {
-  return measurementName === 'cDNA concentration' || measurementName === 'Library concentration'
-    ? `${measurementName.toUpperCase()} (pg/\u00B5l)`
-    : measurementName.toUpperCase();
-};
 
 /**
  * Component to display SlotMeasurements as a table with two columns - slot address & measurement value
@@ -110,7 +107,7 @@ const SlotMeasurements = ({ slotMeasurements, measurementConfig, onChangeField,
         : []),
       ...measurementConfig.map((measurementProp, measurementIndex) => {
         return {
-          Header: setMeasurementNameTableTitle(measurementProp.name),
+          Header: measurementProp.name + ` (${measurementProp.unit})`,
           id: measurementProp.name,
           allCapital: false,
           Cell: ({ row }: { row: Row<MeasurementRow> }) => {
@@ -153,12 +150,15 @@ const SlotMeasurements = ({ slotMeasurements, measurementConfig, onChangeField,
                   <CustomReactSelect
                     label={''}
                     dataTestId={`comments${row.index}`}
-                    name={`slotMeasurements.${row.index}.commentId`}
+                    name={`slotMeasurements.${row.index * measurementConfig.length}.commentId`}
                     className={'flex'}
                     emptyOption={true}
                     value={row.original.measurements[0].commentId}
                     handleChange={(val) => {
-                      onChangeField?.(`slotMeasurements.${row.index}.commentId`, (val as OptionType).value);
+                      onChangeField?.(
+                        `slotMeasurements.${row.index * measurementConfig.length}.commentId`,
+                        (val as OptionType).value
+                      );
                     }}
                     options={selectOptionValues(comments, 'text', 'id')}
                   />

diff --git a/src/components/visiumQC/Amplification.tsx b/src/components/visiumQC/Amplification.tsx
@@ -67,11 +67,13 @@ const Amplification = ({
   const memoMeasurementConfig: MeasurementConfigProps[] = React.useMemo(
     () => [
       {
-        name: 'Cq value',
+        measurementType: ['Amplification'],
+        name: 'CQ VALUE',
         readOnly: true
       },
       {
-        name: 'Cycles',
+        measurementType: ['Amplification'],
+        name: 'CYCLES',
         stepIncrement: '1',
         validateFunction: validateCyclesMeasurementValue,
         initialMeasurementVal: ''

diff --git a/src/components/visiumQC/CDNAConentration.tsx b/src/components/visiumQC/CDNAConentration.tsx
@@ -17,6 +17,68 @@ export type CDNAConcentrationProps = {
   cleanedOutAddress?: string[];
 };
 
+enum MeasurementTypes {
+  cDNAConcentration = 'cDNA concentration',
+  LibraryConcentration = 'Library concentration'
+}
+
+/***
+ *  Only acceptable 0 and decimal numbers of format ###.## Visium concentration
+ * @param value
+ */
+function validateConcentrationMeasurementValue(value: string) {
+  let error;
+  if (value === '') {
+    error = 'Required';
+  } else if (Number(value) < 0) {
+    error = 'Positive value required';
+  }
+  return error;
+}
+
+const measurements: MeasurementConfigProps[] = [
+  {
+    measurementType: [MeasurementTypes.cDNAConcentration],
+    name: 'CDNA CONCENTRATION',
+    unit: 'pg/\u00B5l',
+    stepIncrement: '.01',
+    initialMeasurementVal: '0',
+    validateFunction: validateConcentrationMeasurementValue
+  },
+  {
+    measurementType: [MeasurementTypes.LibraryConcentration],
+    name: `LIBRARY CONCENTRATION`,
+    unit: 'pg/\u00B5l',
+    stepIncrement: '.01',
+    initialMeasurementVal: '0',
+    validateFunction: validateConcentrationMeasurementValue
+  },
+  {
+    measurementType: [MeasurementTypes.cDNAConcentration, MeasurementTypes.LibraryConcentration],
+    name: 'MINIMUM SIZE',
+    unit: 'bp',
+    stepIncrement: '1',
+    initialMeasurementVal: '0',
+    validateFunction: validateConcentrationMeasurementValue
+  },
+  {
+    measurementType: [MeasurementTypes.cDNAConcentration, MeasurementTypes.LibraryConcentration],
+    name: 'MAXIMUM SIZE',
+    unit: 'bp',
+    stepIncrement: '1',
+    initialMeasurementVal: '0',
+    validateFunction: validateConcentrationMeasurementValue
+  },
+  {
+    measurementType: [MeasurementTypes.LibraryConcentration],
+    name: 'MAIN PEAK SIZE',
+    unit: 'bp',
+    stepIncrement: '1',
+    initialMeasurementVal: '0',
+    validateFunction: validateConcentrationMeasurementValue
+  }
+];
+
 const CDNAConcentration = ({
   labware,
   slotMeasurements,
@@ -26,22 +88,10 @@ const CDNAConcentration = ({
 }: CDNAConcentrationProps) => {
   const { setErrors, setTouched, setFieldValue } = useFormikContext<VisiumQCFormData>();
   const [measurementName, setMeasurementName] = useState('');
-  const measurementConfig: MeasurementConfigProps[] = React.useMemo(
-    () =>
-      ['cDNA concentration', 'Library concentration'].map((measurementName) => {
-        return {
-          name: measurementName,
-          stepIncrement: '.01',
-          initialMeasurementVal: '0',
-          validateFunction: validateConcentrationMeasurementValue
-        };
-      }),
-    []
-  );
 
   const memoMeasurementConfig: MeasurementConfigProps[] = React.useMemo(() => {
-    return measurementConfig.filter((measurement) => measurement.name === measurementName);
-  }, [measurementConfig, measurementName]);
+    return measurements.filter((measurement) => measurement.measurementType.includes(measurementName));
+  }, [measurementName]);
 
   /***
    * When labwares changes, the slotMeasurements has to be initialized accordingly
@@ -55,17 +105,17 @@ const CDNAConcentration = ({
     }
     setFieldValue('barcode', labware.barcode);
     let slotMeasurements: SlotMeasurementRequest[] = [];
-    if (measurementName.length > 0) {
-      slotMeasurements = labware.slots.filter(isSlotFilled).map((slot) => {
-        return {
+    labware.slots.filter(isSlotFilled).forEach((slot) => {
+      memoMeasurementConfig.forEach((measurement) => {
+        slotMeasurements.push({
           address: slot.address,
-          name: measurementName,
+          name: measurement.name,
           value: '0'
-        };
+        });
       });
-      setFieldValue('slotMeasurements', slotMeasurements);
-    }
-  }, [labware, measurementName, setErrors, setTouched, setFieldValue]);
+    });
+    setFieldValue('slotMeasurements', slotMeasurements);
+  }, [labware, measurementName, setErrors, setTouched, setFieldValue, memoMeasurementConfig]);
 
   const handleChangeField = React.useCallback(
     (fieldName: string, value: string) => {
@@ -74,19 +124,6 @@ const CDNAConcentration = ({
     [setFieldValue]
   );
 
-  /***
-   *  Only acceptable 0 and decimal numbers of format ###.## Visium concentration
-   * @param value
-   */
-  function validateConcentrationMeasurementValue(value: string) {
-    let error;
-    if (value === '') {
-      error = 'Required';
-    } else if (Number(value) < 0) {
-      error = 'Positive value required';
-    }
-    return error;
-  }
   const onRemoveLabware = React.useCallback(
     (barcode: string) => {
       removeLabware(barcode);
@@ -121,12 +158,10 @@ const CDNAConcentration = ({
                     setMeasurementName((val as OptionType).label);
                     await setFieldValue('slotMeasurements', []);
                   }}
-                  options={measurementConfig.map((measurement) => {
-                    return {
-                      label: measurement.name,
-                      value: measurement.name
-                    };
-                  })}
+                  options={[
+                    { label: MeasurementTypes.cDNAConcentration, value: MeasurementTypes.cDNAConcentration },
+                    { label: MeasurementTypes.LibraryConcentration, value: MeasurementTypes.LibraryConcentration }
+                  ]}
                 />
               </div>
             }

diff --git a/src/components/visiumQC/QPcrResults.tsx b/src/components/visiumQC/QPcrResults.tsx
@@ -14,7 +14,8 @@ const QPcrResults = ({ labware, slotMeasurements, removeLabware, cleanedOutAddre
   const memoMeasurementConfig: MeasurementConfigProps[] = React.useMemo(
     () => [
       {
-        name: 'Cq value',
+        measurementType: ['Cq value'],
+        name: 'CQ VALUE',
         stepIncrement: '.01',
         validateFunction: validateCqMeasurementValue,
         initialMeasurementVal: ''