fix(protocol-designer): liquids show up when zooming into slot (#16717)

closes RQA-3524

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 ? (
-                <g transform={`translate(0, 0)`}>
-                  <LabwareRender definition={selectedLabwareDef} />
-                </g>
+                <LabwareOnDeck
+                  labwareOnDeck={matchingSelectedLabwareOnDeck}
+                  x={0}
+                  y={0}
+                />
               ) : null}
-              {selectedNestedLabwareDef != null &&
+              {matchingSelectedNestedLabwareOnDeck != null &&
               selectedModuleModel != null &&
               hoveredLabware == null ? (
-                <g transform={`translate(0, 0)`}>
-                  <LabwareRender definition={selectedNestedLabwareDef} />
-                </g>
+                <LabwareOnDeck
+                  labwareOnDeck={matchingSelectedNestedLabwareOnDeck}
+                  x={0}
+                  y={0}
+                />
               ) : null}
               {hoveredLabwareDef != null && selectedModuleModel != null ? (
                 <g transform={`translate(0, 0)`}>
@@ -165,41 +195,47 @@ export const SelectedHoveredItems = (
           ) : null}
         </>
       ) : null}
-      {selectedLabwareDef != null &&
+      {matchingSelectedLabwareOnDeck != null &&
       slotPosition != null &&
       selectedModuleModel == null &&
       hoveredLabware == null ? (
         <>
-          <g transform={`translate(${slotPosition[0]}, ${slotPosition[1]})`}>
-            <LabwareRender definition={selectedLabwareDef} />
-          </g>
+          <LabwareOnDeck
+            x={slotPosition[0]}
+            y={slotPosition[1]}
+            labwareOnDeck={matchingSelectedLabwareOnDeck}
+          />
           {selectedNestedLabwareDefUri == null ? (
             <LabwareLabel
               isLast={true}
               isSelected={true}
-              labwareDef={selectedLabwareDef}
+              labwareDef={matchingSelectedLabwareOnDeck.def}
               position={slotPosition}
             />
           ) : null}
         </>
       ) : null}
-      {selectedNestedLabwareDef != null &&
+      {matchingSelectedNestedLabwareOnDeck != null &&
       slotPosition != null &&
       selectedModuleModel == null &&
       hoveredLabware == null ? (
         <>
-          <g transform={`translate(${slotPosition[0]}, ${slotPosition[1]})`}>
-            <LabwareRender definition={selectedNestedLabwareDef} />
-          </g>
-          {selectedLabwareDef != null ? (
+          <LabwareOnDeck
+            x={slotPosition[0]}
+            y={slotPosition[1]}
+            labwareOnDeck={matchingSelectedNestedLabwareOnDeck}
+          />
+          {matchingSelectedLabwareOnDeck != null ? (
             <LabwareLabel
               isLast={false}
               isSelected={true}
-              labwareDef={selectedLabwareDef}
+              labwareDef={matchingSelectedLabwareOnDeck.def}
               position={slotPosition}
               nestedLabwareInfo={[
                 {
-                  text: selectedNestedLabwareDef.metadata.displayName,
+                  text:
+                    matchingSelectedNestedLabwareOnDeck.def.metadata
+                      .displayName,
                   isSelected: true,
                   isLast: true,
                 },

protocol-designer/src/pages/Designer/DeckSetup/__tests__/SelectedHoveredItems.test.tsx

@@ -6,23 +6,28 @@ import { renderWithProviders } from '../../../../__testing-utils__'
 import {
   FLEX_ROBOT_TYPE,
   HEATERSHAKER_MODULE_V1,
+  fixture24Tuberack,
   getDeckDefFromRobotType,
 } from '@opentrons/shared-data'
-import { LabwareRender, Module } from '@opentrons/components'
+import { Module } from '@opentrons/components'
 import { selectors } from '../../../../labware-ingred/selectors'
+import { getInitialDeckSetup } from '../../../../step-forms/selectors'
 import { getCustomLabwareDefsByURI } from '../../../../labware-defs/selectors'
+import { LabwareOnDeck } from '../../../../components/DeckSetup/LabwareOnDeck'
 import { FixtureRender } from '../FixtureRender'
 import { SelectedHoveredItems } from '../SelectedHoveredItems'
 import type * as OpentronsComponents from '@opentrons/components'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
+vi.mock('../../../../step-forms/selectors')
 vi.mock('../FixtureRender')
 vi.mock('../../../../labware-ingred/selectors')
 vi.mock('../../../../labware-defs/selectors')
+vi.mock('../../../../components/DeckSetup/LabwareOnDeck')
 vi.mock('@opentrons/components', async importOriginal => {
   const actual = await importOriginal<typeof OpentronsComponents>()
   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(<div>mock LabwareOnDeck</div>)
     vi.mocked(selectors.getZoomedInSlotInfo).mockReturnValue({
       selectedLabwareDefUri: null,
       selectedNestedLabwareDefUri: null,
@@ -52,7 +71,6 @@ describe('SelectedHoveredItems', () => {
     })
     vi.mocked(getCustomLabwareDefsByURI).mockReturnValue({})
     vi.mocked(FixtureRender).mockReturnValue(<div>mock FixtureRender</div>)
-    vi.mocked(LabwareRender).mockReturnValue(<div>mock LabwareRender</div>)
     vi.mocked(Module).mockReturnValue(<div>mock Module</div>)
   })
   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