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} />