feat(components,-protocol-designer,-step-generation): full absorbance…

… reader step form UI This PR completes the UI for absorbance reader step form, specifically creating the initialization editor component. It also adds form errors for all implicated fields throughout the form. Closes AUTH-1267, Closes AUTH-1315
Opentrons · Jan 17, 2025 · a68ed73 · a68ed73
1 parent c88beba
commit a68ed73
Show file tree

Hide file tree

Showing 18 changed files with 829 additions and 76 deletions.
diff --git a/components/src/atoms/InputField/index.tsx b/components/src/atoms/InputField/index.tsx
@@ -357,7 +357,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
             <StyledText
               desktopStyle="bodyDefaultRegular"
               css={FORM_BOTTOM_SPACE_STYLE}
-              color={COLORS.grey60}
+              color={hasError ? COLORS.red50 : COLORS.grey60}
             >
               {props.caption}
             </StyledText>

diff --git a/protocol-designer/src/assets/localization/en/form.json b/protocol-designer/src/assets/localization/en/form.json
@@ -30,7 +30,63 @@
     "right": "(R)"
   },
   "step_edit_form": {
+    "absorbanceReader": {
+      "add_wavelength": {
+        "disabled": "Maximum allowed wavelengths reached",
+        "label": "Add wavelength"
+      },
+      "color_parentheses": "({{color}})",
+      "current_initialization_settings": "Current initialization settings",
+      "custom_wavelength": {
+        "caption": "Value between 350 - 1000 nm",
+        "label": "Custom wavelength"
+      },
+      "delete": "Delete",
+      "errors": {
+        "custom_wavelength_required": "Custom wavelength required",
+        "wavelength_out_of_range": "Value falls outside of accepted range"
+      },
+      "initialization_setting": {
+        "multi": {
+          "description": "Up to 6 wavelengths can be programmed.",
+          "title": "Multi initialization setting"
+        },
+        "single": {
+          "title": "Single initialization setting"
+        }
+      },
+      "module_controls": "Module controls",
+      "no_settings_defined": "No settings defined",
+      "reference_wavelength": "Reference wavelength",
+      "reference_wavelength_parentheses": "(Reference wavelength)",
+      "reference_wavelength_color_parentheses": "({{color}}, reference wavelength)",
+      "wavelength": "Wavelength"
+    },
     "field": {
+      "absorbanceReader": {
+        "absorbanceReaderFormType": {
+          "absorbanceReaderInitialize": {
+            "change": "Change initialization settings",
+            "define": "Define initialization settings"
+          },
+          "absorbanceReaderLid": "Change lid position",
+          "absorbanceReaderRead": "Read labware"
+        },
+        "lidOpen": {
+          "closed": "Closed",
+          "label": "Lid position",
+          "open": "Open"
+        },
+        "mode": {
+          "label": "Select mode type",
+          "multi": "Multi",
+          "single": "Single"
+        },
+        "moduleId": {
+          "module": "Module"
+        },
+        "referenceWavelengthActive": "Add reference wavelength?"
+      },
       "airGap": {
         "label": "air gap"
       },

diff --git a/protocol-designer/src/constants.ts b/protocol-designer/src/constants.ts
@@ -175,6 +175,8 @@ export const STAGING_AREA_CUTOUTS_ORDERED: CutoutId[] = [
   'cutoutD3',
   'cutoutA3',
 ]
+
+// Values for absorbance reader
 export const ABSORBANCE_READER_INITIALIZE_MODE_SINGLE = 'single'
 export const ABSORBANCE_READER_INITIALIZE_MODE_MULTI = 'multi'
 export const ABSORBANCE_READER_INITIALIZE: 'absorbanceReaderInitialize' =
@@ -183,3 +185,5 @@ export const ABSORBANCE_READER_READ: 'absorbanceReaderRead' =
   'absorbanceReaderRead'
 export const ABSORBANCE_READER_LID: 'absorbanceReaderLid' =
   'absorbanceReaderLid'
+export const ABSORBANCE_READER_MIN_WAVELENGTH_NM = 350
+export const ABSORBANCE_READER_MAX_WAVELENGTH_NM = 1000
diff --git a/protocol-designer/src/form-types.ts b/protocol-designer/src/form-types.ts
@@ -392,10 +392,10 @@ export interface HydratedAbsorbanceReaderFormData {
   mode:
     | typeof ABSORBANCE_READER_INITIALIZE_MODE_MULTI
     | typeof ABSORBANCE_READER_INITIALIZE_MODE_SINGLE
-    | null
   moduleId: string
-  referenceWavelength: number | null
-  wavelengths: number[] | null
+  referenceWavelength: string | null
+  referenceWavelengthActive: boolean
+  wavelengths: string[] | null
 }
 // TODO: Ian 2019-01-17 Moving away from this and towards nesting all form fields
 // inside `fields` key, but deprecating transfer/consolidate/distribute is a pre-req