From c8714076e13ae78c1b961c9a2bf7d53783256f4c Mon Sep 17 00:00:00 2001
From: Jethary Alcid <66035149+jerader@users.noreply.github.com>
Date: Thu, 7 Nov 2024 10:10:58 -0500
Subject: [PATCH] fix(protocol-designer): liquids show up when zooming into
slot (#16717)
closes RQA-3524
---
.../DeckSetup/SelectedHoveredItems.tsx | 100 ++++++++++++------
.../__tests__/SelectedHoveredItems.test.tsx | 57 ++++++++--
2 files changed, 114 insertions(+), 43 deletions(-)
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/SelectedHoveredItems.tsx b/protocol-designer/src/pages/Designer/DeckSetup/SelectedHoveredItems.tsx
index 71f07b973e3..2f3d0b4323d 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/SelectedHoveredItems.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/SelectedHoveredItems.tsx
@@ -7,6 +7,8 @@ import {
import { selectors } from '../../../labware-ingred/selectors'
import { getOnlyLatestDefs } from '../../../labware-defs'
import { getCustomLabwareDefsByURI } from '../../../labware-defs/selectors'
+import { getInitialDeckSetup } from '../../../step-forms/selectors'
+import { LabwareOnDeck } from '../../../components/DeckSetup/LabwareOnDeck'
import { ModuleLabel } from './ModuleLabel'
import { LabwareLabel } from '../LabwareLabel'
import { FixtureRender } from './FixtureRender'
@@ -48,20 +50,44 @@ export const SelectedHoveredItems = (
} = selectedSlotInfo
const customLabwareDefs = useSelector(getCustomLabwareDefsByURI)
const defs = getOnlyLatestDefs()
-
+ const deckSetup = useSelector(getInitialDeckSetup)
+ const { labware, modules } = deckSetup
+ const matchingSelectedLabwareOnDeck = Object.values(labware).find(labware => {
+ const moduleUnderLabware = Object.values(modules).find(
+ mod => mod.id === labware.slot
+ )
+ const matchingSlot =
+ moduleUnderLabware != null ? moduleUnderLabware.slot : labware.slot
+ return (
+ matchingSlot === selectedSlot.slot &&
+ labware.labwareDefURI === selectedLabwareDefUri
+ )
+ })
+ const matchingSelectedNestedLabwareOnDeck = Object.values(labware).find(
+ lw => {
+ const adapterUnderLabware = Object.values(labware).find(
+ lab => lab.id === lw.slot
+ )
+ if (adapterUnderLabware == null) {
+ return
+ }
+ const moduleUnderLabware = Object.values(modules).find(
+ mod => mod.id === adapterUnderLabware.slot
+ )
+ const matchingSlot =
+ moduleUnderLabware != null
+ ? moduleUnderLabware.slot
+ : adapterUnderLabware.slot
+ return (
+ lw.labwareDefURI === selectedNestedLabwareDefUri &&
+ matchingSlot === selectedSlot.slot
+ )
+ }
+ )
const hoveredLabwareDef =
hoveredLabware != null
? defs[hoveredLabware] ?? customLabwareDefs[hoveredLabware] ?? null
: null
- const selectedLabwareDef =
- selectedLabwareDefUri != null
- ? defs[selectedLabwareDefUri] ?? customLabwareDefs[selectedLabwareDefUri]
- : null
- const selectedNestedLabwareDef =
- selectedNestedLabwareDefUri != null
- ? defs[selectedNestedLabwareDefUri] ??
- customLabwareDefs[selectedNestedLabwareDefUri]
- : null
const orientation =
slotPosition != null
@@ -83,9 +109,9 @@ export const SelectedHoveredItems = (
}
labwareInfos.push(selectedLabwareLabel)
}
- if (selectedNestedLabwareDef != null && hoveredLabware == null) {
+ if (matchingSelectedNestedLabwareOnDeck != null && hoveredLabware == null) {
const selectedNestedLabwareLabel = {
- text: selectedNestedLabwareDef.metadata.displayName,
+ text: matchingSelectedNestedLabwareOnDeck.def.metadata.displayName,
isSelected: true,
isLast: hoveredLabware == null,
}
@@ -132,19 +158,23 @@ export const SelectedHoveredItems = (
orientation={orientation}
>
<>
- {selectedLabwareDef != null &&
+ {matchingSelectedLabwareOnDeck != null &&
selectedModuleModel != null &&
hoveredLabware == null ? (
-
-
-
+
) : null}
- {selectedNestedLabwareDef != null &&
+ {matchingSelectedNestedLabwareOnDeck != null &&
selectedModuleModel != null &&
hoveredLabware == null ? (
-
-
-
+
) : null}
{hoveredLabwareDef != null && selectedModuleModel != null ? (
@@ -165,41 +195,47 @@ export const SelectedHoveredItems = (
) : null}
) : null}
- {selectedLabwareDef != null &&
+ {matchingSelectedLabwareOnDeck != null &&
slotPosition != null &&
selectedModuleModel == null &&
hoveredLabware == null ? (
<>
-
-
-
+
{selectedNestedLabwareDefUri == null ? (
) : null}
) : null}
- {selectedNestedLabwareDef != null &&
+ {matchingSelectedNestedLabwareOnDeck != null &&
slotPosition != null &&
selectedModuleModel == null &&
hoveredLabware == null ? (
<>
-
-
-
- {selectedLabwareDef != null ? (
+
+ {matchingSelectedLabwareOnDeck != null ? (
{
const actual = await importOriginal()
return {
...actual,
- LabwareRender: vi.fn(),
Module: vi.fn(),
}
})
@@ -43,6 +48,20 @@ describe('SelectedHoveredItems', () => {
hoveredFixture: null,
slotPosition: [0, 0, 0],
}
+ vi.mocked(getInitialDeckSetup).mockReturnValue({
+ modules: {},
+ additionalEquipmentOnDeck: {},
+ pipettes: {},
+ labware: {
+ labware: {
+ id: 'mockId',
+ def: fixture24Tuberack as LabwareDefinition2,
+ labwareDefURI: 'fixture/fixture_universal_flat_bottom_adapter/1',
+ slot: 'D3',
+ },
+ },
+ })
+ vi.mocked(LabwareOnDeck).mockReturnValue(mock LabwareOnDeck
)
vi.mocked(selectors.getZoomedInSlotInfo).mockReturnValue({
selectedLabwareDefUri: null,
selectedNestedLabwareDefUri: null,
@@ -52,7 +71,6 @@ describe('SelectedHoveredItems', () => {
})
vi.mocked(getCustomLabwareDefsByURI).mockReturnValue({})
vi.mocked(FixtureRender).mockReturnValue(mock FixtureRender
)
- vi.mocked(LabwareRender).mockReturnValue(mock LabwareRender
)
vi.mocked(Module).mockReturnValue(mock Module
)
})
it('renders a selected fixture by itself', () => {
@@ -70,9 +88,9 @@ describe('SelectedHoveredItems', () => {
})
render(props)
screen.getByText('mock FixtureRender')
- screen.getByText('mock LabwareRender')
+ screen.getByText('mock LabwareOnDeck')
expect(screen.queryByText('mock Module')).not.toBeInTheDocument()
- screen.getByText('Fixture Opentrons Universal Flat Heater-Shaker Adapter')
+ screen.getByText('Opentrons screwcap 2mL tuberack')
})
it('renders a selected module', () => {
vi.mocked(selectors.getZoomedInSlotInfo).mockReturnValue({
@@ -102,6 +120,25 @@ describe('SelectedHoveredItems', () => {
screen.getByText('Fixture Opentrons Universal Flat Heater-Shaker Adapter')
})
it('renders selected fixture and both labware and nested labware', () => {
+ vi.mocked(getInitialDeckSetup).mockReturnValue({
+ modules: {},
+ additionalEquipmentOnDeck: {},
+ pipettes: {},
+ labware: {
+ labware: {
+ id: 'mockId',
+ def: fixture24Tuberack as LabwareDefinition2,
+ labwareDefURI: 'fixture/fixture_universal_flat_bottom_adapter/1',
+ slot: 'D3',
+ },
+ labware2: {
+ id: 'mockId2',
+ def: fixture24Tuberack as LabwareDefinition2,
+ labwareDefURI: 'fixture/fixture_universal_flat_bottom_adapter/1',
+ slot: 'mockId',
+ },
+ },
+ })
vi.mocked(selectors.getZoomedInSlotInfo).mockReturnValue({
selectedLabwareDefUri: 'fixture/fixture_universal_flat_bottom_adapter/1',
selectedNestedLabwareDefUri:
@@ -112,12 +149,10 @@ describe('SelectedHoveredItems', () => {
})
render(props)
screen.getByText('mock FixtureRender')
- expect(screen.getAllByText('mock LabwareRender')).toHaveLength(2)
- expect(
- screen.getAllByText(
- 'Fixture Opentrons Universal Flat Heater-Shaker Adapter'
- )
- ).toHaveLength(2)
+ expect(screen.getAllByText('mock LabwareOnDeck')).toHaveLength(2)
+ expect(screen.getAllByText('Opentrons screwcap 2mL tuberack')).toHaveLength(
+ 2
+ )
})
it('renders nothing when there is a hovered module but selected fixture', () => {
props.hoveredModule = HEATERSHAKER_MODULE_V1