feat(app, components): add assets for absorbance reader and display them in app

api-client/src/modules/api-types.ts

@@ -81,7 +81,7 @@ export interface HeaterShakerData {
   status: HeaterShakerStatus
 }
 export interface AbsorbanceReaderData {
-  lidStatus: 'open' | 'closed' | 'unknown'
+  lidStatus: 'on' | 'off' | 'unknown'
   platePresence: 'present' | 'absent' | 'unknown'
   sampleWavelength: number | null
   status: AbsorbanceReaderStatus

app/src/assets/localization/en/device_details.json

@@ -4,6 +4,7 @@
   "about_pipette_name": "About {{name}} Pipette",
   "about_pipette": "About pipette",
   "abs_reader_status": "Absorbance Plate Reader Status",
+  "abs_reader_lid_status": "Lid status: {{status}}",
   "add_fixture_description": "Add this hardware to your deck configuration. It will be referenced during protocol analysis.",
   "add_to_slot": "Add to slot {{slotName}}",
   "add": "Add",

app/src/local-resources/modules/getModuleImage.ts

@@ -8,6 +8,7 @@ import thermoModuleGen1HighRes from '/app/assets/images/modules/thermocyclerModu
 import heaterShakerModuleHighRes from '/app/assets/images/modules/[email protected]'
 import thermoModuleGen2 from '/app/assets/images/thermocycler_gen_2_closed.png'
 import magneticBlockGen1 from '/app/assets/images/magnetic_block_gen_1.png'
+import absorbanceReader from '/app/assets/images/opentrons_plate_reader.png'
 
 import type { ModuleModel } from '@opentrons/shared-data'
 
@@ -30,6 +31,8 @@ export function getModuleImage(
       return thermoModuleGen2
     case 'magneticBlockV1':
       return magneticBlockGen1
+    case 'absorbanceReaderV1':
+      return absorbanceReader
     default:
       return 'Error: unknown module model'
   }

app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx

@@ -21,6 +21,7 @@ import {
   useHoverTooltip,
 } from '@opentrons/components'
 import {
+  ABSORBANCE_READER_TYPE,
   FLEX_ROBOT_TYPE,
   getCutoutIdForSlotName,
   getDeckDefFromRobotType,
@@ -260,6 +261,7 @@ export function ModulesListItem({
   if (
     isFlex &&
     attachedModuleMatch != null &&
+    attachedModuleMatch.moduleType !== ABSORBANCE_READER_TYPE &&
     attachedModuleMatch.moduleOffset?.last_modified == null
   ) {
     renderModuleStatus = (

app/src/organisms/ModuleCard/AbsorbanceReaderData.tsx

@@ -1,5 +1,7 @@
 import { useTranslation } from 'react-i18next'
-import { TYPOGRAPHY, LegacyStyledText } from '@opentrons/components'
+import { StyledText, COLORS } from '@opentrons/components'
+import { StatusLabel } from '/app/atoms/StatusLabel'
+
 import type { AbsorbanceReaderModule } from '/app/redux/modules/types'
 
 interface AbsorbanceReaderProps {
@@ -12,16 +14,41 @@ export const AbsorbanceReaderData = (
   const { moduleData } = props
   const { t } = useTranslation('device_details')
 
+  const StatusLabelProps = {
+    status: 'Idle',
+    backgroundColor: COLORS.grey30,
+    iconColor: COLORS.grey60,
+    textColor: COLORS.grey60,
+    pulse: false,
+  }
+  switch (moduleData.status) {
+    case 'measuring': {
+      StatusLabelProps.status = 'Reading'
+      StatusLabelProps.backgroundColor = COLORS.blue30
+      StatusLabelProps.iconColor = COLORS.blue60
+      StatusLabelProps.textColor = COLORS.blue60
+      break
+    }
+    case 'error': {
+      StatusLabelProps.status = 'Error'
+      StatusLabelProps.backgroundColor = COLORS.yellow30
+      StatusLabelProps.iconColor = COLORS.yellow60
+      StatusLabelProps.textColor = COLORS.yellow60
+      break
+    }
+  }
+
   return (
     <>
-      <LegacyStyledText
-        fontSize={TYPOGRAPHY.fontSizeCaption}
+      <StatusLabel {...StatusLabelProps} />
+      <StyledText
+        desktopStyle="bodyDefaultRegular"
         data-testid="abs_module_data"
       >
-        {t('abs_reader_status', {
-          status: moduleData.status,
+        {t('abs_reader_lid_status', {
+          status: moduleData.lidStatus === 'on' ? 'open' : 'closed',
         })}
-      </LegacyStyledText>
+      </StyledText>
     </>
   )
 }

app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx

@@ -12,6 +12,7 @@ import {
 } from '@opentrons/components'
 
 import {
+  ABSORBANCE_READER_TYPE,
   HEATERSHAKER_MODULE_TYPE,
   MODULE_MODELS_OT2_ONLY,
   TEMPERATURE_MODULE_TYPE,
@@ -119,6 +120,7 @@ export const ModuleOverflowMenu = (
     <Flex position={POSITION_RELATIVE}>
       <MenuList>
         {isFlex &&
+        module.moduleType !== ABSORBANCE_READER_TYPE &&
         !MODULE_MODELS_OT2_ONLY.some(
           modModel => modModel === module.moduleModel
         ) ? (

app/src/organisms/ModuleCard/hooks.tsx

@@ -354,7 +354,14 @@ export function useModuleOverflowMenu(
               },
       },
     ],
-    absorbanceReaderType: [],
+    absorbanceReaderType: [
+      {
+        setSetting: t('overflow_menu_about'),
+        isSecondary: false,
+        menuButtons: [],
+        onClick: handleAboutClick,
+      },
+    ],
   }
 
   return {

app/src/organisms/ModuleCard/index.tsx

@@ -131,6 +131,7 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
   const requireModuleCalibration =
     isFlex &&
     !MODULE_MODELS_OT2_ONLY.some(modModel => modModel === module.moduleModel) &&
+    module.moduleType !== ABSORBANCE_READER_TYPE &&
     module.moduleOffset?.last_modified == null
   const isPipetteReady =
     !Boolean(attachPipetteRequired) &&
@@ -172,7 +173,7 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
 
   let moduleData: JSX.Element = <div></div>
   switch (module.moduleType) {
-    case 'magneticModuleType': {
+    case MAGNETIC_MODULE_TYPE: {
       moduleData = (
         <MagneticModuleData
           moduleStatus={module.data.status}
@@ -183,7 +184,7 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
       break
     }
 
-    case 'temperatureModuleType': {
+    case TEMPERATURE_MODULE_TYPE: {
       moduleData = (
         <TemperatureModuleData
           moduleStatus={module.data.status}
@@ -194,12 +195,12 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
       break
     }
 
-    case 'thermocyclerModuleType': {
+    case THERMOCYCLER_MODULE_TYPE: {
       moduleData = <ThermocyclerModuleData data={module.data} />
       break
     }
 
-    case 'heaterShakerModuleType': {
+    case HEATERSHAKER_MODULE_TYPE: {
       moduleData = (
         <HeaterShakerModuleData
           moduleData={module.data}
@@ -209,7 +210,7 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
       break
     }
 
-    case 'absorbanceReaderType': {
+    case ABSORBANCE_READER_TYPE: {
       moduleData = <AbsorbanceReaderData moduleData={module.data} />
       break
     }

app/src/organisms/ModuleCard/utils.ts

@@ -11,6 +11,7 @@ import thermoModuleGen1Opened from '/app/assets/images/thermocycler_open_transpa
 import heaterShakerModule from '/app/assets/images/heater_shaker_module_transparent.png'
 import thermoModuleGen2Closed from '/app/assets/images/thermocycler_gen_2_closed.png'
 import thermoModuleGen2Opened from '/app/assets/images/thermocycler_gen_2_opened.png'
+import absorbanceReader from '/app/assets/images/opentrons_plate_reader.png'
 
 import type { AttachedModule } from '/app/redux/modules/types'
 
@@ -37,6 +38,8 @@ export function getModuleCardImage(attachedModule: AttachedModule): string {
       } else {
         return thermoModuleGen2Opened
       }
+    case 'absorbanceReaderV1':
+      return absorbanceReader
     //  this should never be reached
     default:
       return 'unknown module model, this is an error'

app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ModuleTable.tsx

@@ -15,6 +15,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import {
+  ABSORBANCE_READER_TYPE,
   getCutoutFixturesForModuleModel,
   getCutoutIdsFromModuleSlotName,
   getModuleDisplayName,
@@ -203,7 +204,8 @@ function ModuleTableItem({
     )
   } else if (
     isModuleReady &&
-    module.attachedModuleMatch?.moduleOffset?.last_modified != null
+    (module.attachedModuleMatch?.moduleOffset?.last_modified != null ||
+      module.attachedModuleMatch?.moduleType === ABSORBANCE_READER_TYPE)
   ) {
     moduleStatus = (
       <Chip
@@ -265,7 +267,9 @@ function ModuleTableItem({
         alignItems={ALIGN_CENTER}
         backgroundColor={
           isModuleReady &&
-          module.attachedModuleMatch?.moduleOffset?.last_modified != null &&
+          (module.attachedModuleMatch?.moduleOffset?.last_modified != null ||
+            module.attachedModuleMatch?.moduleType ===
+              ABSORBANCE_READER_TYPE) &&
           conflictedFixture == null
             ? COLORS.green35
             : isNonConnectingModule && conflictedFixture == null

app/src/redux/modules/api-types.ts

@@ -79,7 +79,7 @@ export interface HeaterShakerData {
   status: HeaterShakerStatus
 }
 export interface AbsorbanceReaderData {
-  lidStatus: 'open' | 'closed' | 'unknown'
+  lidStatus: 'on' | 'off' | 'unknown'
   platePresence: 'present' | 'absent' | 'unknown'
   sampleWavelength: number | null
   status: AbsorbanceReaderStatus

app/src/redux/modules/constants.ts

@@ -10,6 +10,7 @@ export {
   TEMPERATURE_MODULE_TYPE,
   THERMOCYCLER_MODULE_TYPE,
   HEATERSHAKER_MODULE_TYPE,
+  ABSORBANCE_READER_TYPE,
 } from '@opentrons/shared-data'
 
 // http paths