add absorbance reader to app deck configuration

app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx

@@ -247,6 +247,7 @@ export function AddFixtureModal({
             {
               cutoutId,
               cutoutFixtureId: ABSORBANCE_READER_V1_FIXTURE,
+              opentronsModuleSerialNumber: mod.serialNumber,
             },
           ])
         availableOptions = [

components/src/hardware-sim/DeckConfigurator/AbsorbanceReaderFixture.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+import { Icon } from '../../icons'
+import { Btn, Text } from '../../primitives'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  COLUMN_3_X_ADJUSTMENT,
+  CONFIG_STYLE_EDITABLE,
+  CONFIG_STYLE_READ_ONLY,
+  FIXTURE_HEIGHT,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
+  Y_ADJUSTMENT,
+  CONFIG_STYLE_SELECTED,
+} from './constants'
+
+import type {
+  CutoutFixtureId,
+  CutoutId,
+  DeckDefinition,
+} from '@opentrons/shared-data'
+
+
+interface AbsorbanceReaderFixtureProps {
+  deckDefinition: DeckDefinition
+  fixtureLocation: CutoutId
+  cutoutFixtureId: CutoutFixtureId
+  handleClickRemove?: (
+    fixtureLocation: CutoutId,
+    cutoutFixtureId: CutoutFixtureId
+  ) => void
+  selected?: boolean
+}
+
+const ABSORBANCE_READER_FIXTURE_DISPLAY_NAME = 'Absorbance Reader'
+
+export function AbsorbanceReaderFixture(
+  props: AbsorbanceReaderFixtureProps
+): JSX.Element {
+  const {
+    deckDefinition,
+    handleClickRemove,
+    fixtureLocation,
+    cutoutFixtureId,
+    selected = false,
+  } = props
+
+  const cutoutDef = deckDefinition.locations.cutouts.find(
+    cutout => cutout.id === fixtureLocation
+  )
+
+  /**
+   * deck definition cutout position is the position of the single slot located within that cutout
+   * so, to get the position of the cutout itself we must add an adjustment to the slot position
+   * the adjustment for x is different for right side/left side
+   */
+  // TODO (AA): fix the slot length for the absorbance reader fixture
+  const [xSlotPosition = 0, ySlotPosition = 0] = cutoutDef?.position ?? []
+
+  const x = xSlotPosition + COLUMN_3_X_ADJUSTMENT
+
+  const y = ySlotPosition + Y_ADJUSTMENT
+
+  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
+  return (
+    <RobotCoordsForeignObject
+      width={COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH}
+      height={FIXTURE_HEIGHT}
+      x={x}
+      y={y}
+      flexProps={{ flex: '1' }}
+      foreignObjectProps={{ flex: '1' }}
+    >
+      <Btn
+        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
+        cursor={handleClickRemove != null ? 'pointer' : 'default'}
+        onClick={
+          handleClickRemove != null
+            ? () => handleClickRemove(fixtureLocation, cutoutFixtureId)
+            : () => {}
+        }
+      >
+        <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
+          {ABSORBANCE_READER_FIXTURE_DISPLAY_NAME}
+        </Text>
+        {handleClickRemove != null ? (
+          <Icon name="remove" color={COLORS.white} size="2rem" />
+        ) : null}
+      </Btn>
+    </RobotCoordsForeignObject>
+  )
+}

components/src/hardware-sim/DeckConfigurator/index.tsx

@@ -12,6 +12,7 @@ import {
   HEATERSHAKER_MODULE_V1_FIXTURE,
   TEMPERATURE_MODULE_V2_FIXTURE,
   MAGNETIC_BLOCK_V1_FIXTURE,
+  ABSORBANCE_READER_V1_FIXTURE,
   STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
 } from '@opentrons/shared-data'
 
@@ -34,6 +35,7 @@ import { TemperatureModuleFixture } from './TemperatureModuleFixture'
 import { HeaterShakerFixture } from './HeaterShakerFixture'
 import { MagneticBlockFixture } from './MagneticBlockFixture'
 import { ThermocyclerFixture } from './ThermocyclerFixture'
+import { AbsorbanceReaderFixture } from './AbsorbanceReaderFixture'
 
 interface DeckConfiguratorProps {
   deckConfig: DeckConfiguration
@@ -105,6 +107,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
     ] as CutoutFixtureId[]).includes(cutoutFixtureId)
   )
+  const absorbanceReaderFixtures = deckConfig.filter(({ cutoutFixtureId }) => cutoutFixtureId === ABSORBANCE_READER_V1_FIXTURE )
 
   return (
     <RobotCoordinateSpace
@@ -231,6 +234,18 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
           selected={cutoutId === selectedCutoutId}
         />
       ))}
+      {absorbanceReaderFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <AbsorbanceReaderFixture
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
       {additionalStaticFixtures?.map(staticFixture => (
         <StaticFixture
           key={staticFixture.location}