diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx
index 80bd38a3255..962f5c579c2 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx
@@ -29,6 +29,7 @@ import {
getModuleType,
TC_MODULE_LOCATION_OT2,
TC_MODULE_LOCATION_OT3,
+ THERMOCYCLER_MODULE_TYPE,
} from '@opentrons/shared-data'
import tiprackAdapter from '../../../../assets/images/labware/opentrons_flex_96_tiprack_adapter.png'
@@ -72,7 +73,7 @@ export const LabwareStackModal = (
const isModuleThermocycler =
moduleModel == null
? false
- : getModuleType(moduleModel) === 'thermocyclerModuleType'
+ : getModuleType(moduleModel) === THERMOCYCLER_MODULE_TYPE
const thermocyclerLocation =
robotType === FLEX_ROBOT_TYPE
? TC_MODULE_LOCATION_OT3
@@ -210,14 +211,21 @@ export const LabwareStackModal = (
justifyContent={JUSTIFY_SPACE_BETWEEN}
>
-
+ {adapterDef.parameters.loadName ===
+ 'opentrons_flex_96_tiprack_adapter' ? (
+ tiprackAdapterImg
+ ) : (
+
+ )}
-
+ {moduleModel != null ? (
+
+ ) : null}
>
) : null}
{moduleModel != null ? (
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx
index 8a35d8d203e..71609edb0ff 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx
@@ -137,20 +137,43 @@ export function SetupLabwareMap({
const topLabwareId = labwareInAdapter?.result?.labwareId ?? labwareId
const topLabwareDisplayName =
labwareInAdapter?.params.displayName ?? displayName
+ const isLabwareInStack =
+ topLabwareDefinition != null &&
+ topLabwareId != null &&
+ labwareInAdapter != null
return {
labwareLocation: { slotName },
definition: topLabwareDefinition,
topLabwareId,
topLabwareDisplayName,
+ highlight: isLabwareInStack && hoverLabwareId === topLabwareId,
labwareChildren: (
-
+ {
+ if (isLabwareInStack) {
+ setLabwareStackDetailsLabwareId(topLabwareId)
+ }
+ }}
+ onMouseEnter={() => {
+ if (topLabwareDefinition != null && topLabwareId != null) {
+ setHoverLabwareId(() => topLabwareId)
+ }
+ }}
+ onMouseLeave={() => {
+ setHoverLabwareId(null)
+ }}
+ >
+
+
),
+ stacked: isLabwareInStack,
}
}
)
diff --git a/app/src/organisms/Devices/ProtocolRun/utils/__tests__/getLocationInfoNames.test.ts b/app/src/organisms/Devices/ProtocolRun/utils/__tests__/getLocationInfoNames.test.ts
index f917f64035f..d0b3551972f 100644
--- a/app/src/organisms/Devices/ProtocolRun/utils/__tests__/getLocationInfoNames.test.ts
+++ b/app/src/organisms/Devices/ProtocolRun/utils/__tests__/getLocationInfoNames.test.ts
@@ -6,6 +6,7 @@ import type { ModuleModel } from '@opentrons/shared-data'
const ADAPTER_DISPLAY_NAME = 'Opentrons 96 Flat Bottom Adapter'
const LABWARE_DISPLAY_NAME = 'Corning 24 Well Plate 3.4 mL Flat'
const SLOT = '5'
+const SLOT_EXTENSION = 'C4'
const MOCK_MODEL = 'heaterShakerModuleV1' as ModuleModel
const ADAPTER_ID =
'd9a85adf-d272-4edd-9aae-426ef5756fef:opentrons/opentrons_96_flat_bottom_adapter/1'
@@ -119,6 +120,34 @@ const MOCK_ADAPTER_COMMANDS = [
},
},
]
+const MOCK_ADAPTER_EXTENSION_COMMANDS = [
+ {
+ commandType: 'loadLabware',
+ params: {
+ location: {
+ addressableAreaName: SLOT_EXTENSION,
+ },
+ },
+ result: {
+ labwareId: ADAPTER_ID,
+ definition: {
+ metadata: { displayName: ADAPTER_DISPLAY_NAME },
+ },
+ },
+ },
+ {
+ commandType: 'loadLabware',
+ params: {
+ location: {
+ labwareId: ADAPTER_ID,
+ },
+ },
+ result: {
+ labwareId: LABWARE_ID,
+ definition: {},
+ },
+ },
+]
vi.mock('@opentrons/shared-data')
@@ -168,4 +197,15 @@ describe('getLocationInfoNames', () => {
getLocationInfoNames(LABWARE_ID, MOCK_ADAPTER_COMMANDS as any)
).toEqual(expected)
})
+ it('returns the adapter, slot number if the labware is on an adapter on the deck extension slot', () => {
+ const expected = {
+ slotName: SLOT_EXTENSION,
+ labwareName: LABWARE_DISPLAY_NAME,
+ adapterName: ADAPTER_DISPLAY_NAME,
+ adapterId: ADAPTER_ID,
+ }
+ expect(
+ getLocationInfoNames(LABWARE_ID, MOCK_ADAPTER_EXTENSION_COMMANDS as any)
+ ).toEqual(expected)
+ })
})
diff --git a/app/src/organisms/Devices/ProtocolRun/utils/getLocationInfoNames.ts b/app/src/organisms/Devices/ProtocolRun/utils/getLocationInfoNames.ts
index c3404945dcb..26d618859f9 100644
--- a/app/src/organisms/Devices/ProtocolRun/utils/getLocationInfoNames.ts
+++ b/app/src/organisms/Devices/ProtocolRun/utils/getLocationInfoNames.ts
@@ -87,6 +87,18 @@ export function getLocationInfoNames(
loadedAdapterCommand?.result?.definition.metadata.displayName,
adapterId: loadedAdapterCommand?.result?.labwareId,
}
+ } else if (
+ loadedAdapterCommand?.params.location !== 'offDeck' &&
+ 'addressableAreaName' in loadedAdapterCommand?.params.location
+ ) {
+ return {
+ slotName: loadedAdapterCommand?.params.location.addressableAreaName,
+ labwareName,
+ labwareNickname,
+ adapterName:
+ loadedAdapterCommand?.result?.definition.metadata.displayName,
+ adapterId: loadedAdapterCommand?.result?.labwareId,
+ }
} else if (
loadedAdapterCommand?.params.location !== 'offDeck' &&
'moduleId' in loadedAdapterCommand?.params.location
diff --git a/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx b/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx
index 1e00d266008..49c6fd38d74 100644
--- a/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx
+++ b/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx
@@ -85,6 +85,10 @@ export function LabwareMapView(props: LabwareMapViewProps): JSX.Element {
const topLabwareDefinition =
labwareInAdapter?.result?.definition ?? labwareDef
const topLabwareId = labwareInAdapter?.result?.labwareId ?? labwareId
+ const isLabwareInStack =
+ topLabwareDefinition != null &&
+ topLabwareId != null &&
+ labwareInAdapter != null
return {
labwareLocation: { slotName },
@@ -95,6 +99,7 @@ export function LabwareMapView(props: LabwareMapViewProps): JSX.Element {
},
labwareChildren: null,
highlight: true,
+ stacked: isLabwareInStack,
}
}
)
diff --git a/components/src/hardware-sim/Labware/LabwareAdapter/index.tsx b/components/src/hardware-sim/Labware/LabwareAdapter/index.tsx
index 978fb7cbea3..fc05d8b5621 100644
--- a/components/src/hardware-sim/Labware/LabwareAdapter/index.tsx
+++ b/components/src/hardware-sim/Labware/LabwareAdapter/index.tsx
@@ -4,6 +4,9 @@ import { Opentrons96FlatBottomAdapter } from './Opentrons96FlatBottomAdapter'
import { OpentronsUniversalFlatAdapter } from './OpentronsUniversalFlatAdapter'
import { OpentronsAluminumFlatBottomPlate } from './OpentronsAluminumFlatBottomPlate'
import { OpentronsFlex96TiprackAdapter } from './OpentronsFlex96TiprackAdapter'
+import { COLORS } from '../../../helix-design-system'
+import { LabwareOutline } from '../labwareInternals'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
const LABWARE_ADAPTER_LOADNAME_PATHS = {
opentrons_96_deep_well_adapter: Opentrons96DeepWellAdapter,
@@ -20,13 +23,28 @@ export const labwareAdapterLoadNames = Object.keys(
export interface LabwareAdapterProps {
labwareLoadName: LabwareAdapterLoadName
+ definition?: LabwareDefinition2
+ highlight?: boolean
}
export const LabwareAdapter = (
props: LabwareAdapterProps
): JSX.Element | null => {
- const { labwareLoadName } = props
+ const { labwareLoadName, definition, highlight = false } = props
+ const highlightOutline =
+ highlight && definition != null ? (
+
+ ) : null
const SVGElement = LABWARE_ADAPTER_LOADNAME_PATHS[labwareLoadName]
- return
+ return (
+
+
+ {highlightOutline}
+
+ )
}
diff --git a/components/src/hardware-sim/Labware/LabwareRender.tsx b/components/src/hardware-sim/Labware/LabwareRender.tsx
index 41c2537a7d9..9137a2d2f15 100644
--- a/components/src/hardware-sim/Labware/LabwareRender.tsx
+++ b/components/src/hardware-sim/Labware/LabwareRender.tsx
@@ -88,6 +88,8 @@ export const LabwareRender = (props: LabwareRenderProps): JSX.Element => {
>
diff --git a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
index 7478c671114..743743bd6c0 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
+++ b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
@@ -65,6 +65,7 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
rx="8"
ry="8"
showRadius={showRadius}
+ fill={backgroundFill}
/>