feat(protocol-designer): add dropdown field deck highlights

closes AUTH-1124

components/src/molecules/DeckLabel/__tests__/DeckLabel.test.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, beforeEach, expect } from 'vitest'
 
@@ -20,6 +19,7 @@ describe('DeckLabel', () => {
       text: 'mock DeckLabel text',
       isSelected: false,
       isLast: true,
+      isZoomed: true,
     }
   })
 

components/src/organisms/DeckLabelSet/__tests__/DeckLabelSet.test.tsx

@@ -14,11 +14,13 @@ const mockDeckLabels = [
     text: 'Label',
     isSelected: false,
     labelBorderRadius: BORDERS.borderRadius4,
+    isZoomed: true,
   },
   {
     text: 'Label',
     isSelected: false,
     labelBorderRadius: BORDERS.borderRadius4,
+    isZoomed: true,
   },
 ]
 

components/src/organisms/DeckLabelSet/index.tsx

@@ -15,21 +15,32 @@ interface DeckLabelSetProps {
   y: number
   width: number
   height: number
+  invert?: boolean
 }
 
 const DeckLabelSetComponent = (
   props: DeckLabelSetProps,
   ref: React.ForwardedRef<HTMLDivElement>
 ): JSX.Element => {
-  const { deckLabels, x, y, width, height } = props
+  const { deckLabels, x, y, width, height, invert = false } = props
 
   return (
-    <RobotCoordsForeignDiv x={x} y={y}>
-      <StyledBox width={width} height={height} data-testid="DeckLabeSet" />
-      <LabelContainer
-        ref={ref}
+    <RobotCoordsForeignDiv
+      x={x}
+      y={y}
+      innerDivProps={{
+        style: {
+          transform: `rotate(180deg) scaleX(-1) scaleY(${invert ? '-1' : '1'})`,
+        },
+      }}
+    >
+      <StyledBox
+        width={width}
+        height={height}
+        data-testid="DeckLabeSet"
         isZoomed={deckLabels.length > 0 ? deckLabels[0].isZoomed : true}
-      >
+      />
+      <LabelContainer ref={ref}>
         {deckLabels.length > 0
           ? deckLabels.map((deckLabel, index) => (
               <DeckLabel

protocol-designer/src/molecules/DropdownStepFormField/index.tsx

@@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next'
-import { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 import {
   COLORS,

protocol-designer/src/pages/Designer/DeckSetup/DeckItemHighlight.tsx

@@ -42,7 +42,7 @@ export function DeckItemHighlight(
   )
 
   if (tab === 'startingDeck' || slotPosition === null) return null
-
+console.log(selectedLocationSelection)
   return isHovered || isSelected ? (
     <>
       <RobotCoordsForeignDiv

protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx

@@ -340,9 +340,7 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
                                           text: isTrashBinSelected
                                             ? t('selected')
                                             : t('select'),
-                                          isSelected: isTrashBinSelected
-                                            ? true
-                                            : false,
+                                          isSelected: isTrashBinSelected,
                                           isLast: true,
                                           isZoomed: false,
                                         },
@@ -377,9 +375,7 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
                                       text: isWasteChuteSelected
                                         ? t('selected')
                                         : t('select'),
-                                      isSelected: isWasteChuteSelected
-                                        ? true
-                                        : false,
+                                      isSelected: isWasteChuteSelected,
                                       isLast: true,
                                       isZoomed: false,
                                     },
@@ -414,9 +410,7 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
                                       text: isWasteChuteSelected
                                         ? t('selected')
                                         : t('select'),
-                                      isSelected: isWasteChuteSelected
-                                        ? true
-                                        : false,
+                                      isSelected: isWasteChuteSelected,
                                       isLast: true,
                                       isZoomed: false,
                                     },

protocol-designer/src/pages/Designer/DeckSetup/HoveredItems.tsx

@@ -76,6 +76,7 @@ export const HoveredItems = (
             text: selectedLabwareDef.metadata.displayName,
             isLast: false,
             isSelected: true,
+            isZoomed: true,
           },
         ]
       : []

protocol-designer/src/pages/Designer/DeckSetup/ModuleLabel.tsx

@@ -1,12 +1,15 @@
 import { useRef, useState, useEffect } from 'react'
+import { useSelector } from 'react-redux'
 import { DeckLabelSet } from '@opentrons/components'
 import {
+  FLEX_ROBOT_TYPE,
   HEATERSHAKER_MODULE_TYPE,
   MAGNETIC_MODULE_TYPE,
   TEMPERATURE_MODULE_TYPE,
   THERMOCYCLER_MODULE_TYPE,
   getModuleDef2,
 } from '@opentrons/shared-data'
+import { getRobotType } from '../../../file-data/selectors'
 import type { DeckLabelProps } from '@opentrons/components'
 import type { CoordinateTuple, ModuleModel } from '@opentrons/shared-data'
 
@@ -31,6 +34,7 @@ export const ModuleLabel = (props: ModuleLabelProps): JSX.Element => {
     isZoomed = true,
     labelName,
   } = props
+  const robotType = useSelector(getRobotType)
   const labelContainerRef = useRef<HTMLDivElement>(null)
   const [labelContainerHeight, setLabelContainerHeight] = useState(12)
 
@@ -53,7 +57,11 @@ export const ModuleLabel = (props: ModuleLabelProps): JSX.Element => {
     leftOverhang = overhang + 14
   } else if (def?.moduleType === MAGNETIC_MODULE_TYPE) {
     leftOverhang = overhang + 8
-  } else if (def?.moduleType === THERMOCYCLER_MODULE_TYPE && !isZoomed) {
+  } else if (
+    def?.moduleType === THERMOCYCLER_MODULE_TYPE &&
+    !isZoomed &&
+    robotType === FLEX_ROBOT_TYPE
+  ) {
     leftOverhang = overhang + 20
   }
 

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

@@ -115,6 +115,7 @@ export const SelectedHoveredItems = (
       text: def.metadata.displayName,
       isSelected: true,
       isLast: hoveredLabware == null && selectedNestedLabwareDefUri == null,
+      isZoomed: true,
     }
     labwareInfos.push(selectedLabwareLabel)
   }
@@ -123,6 +124,7 @@ export const SelectedHoveredItems = (
       text: selectedNestedLabwareDef.metadata.displayName,
       isSelected: true,
       isLast: hoveredLabware == null,
+      isZoomed: true,
     }
     labwareInfos.push(selectedNestedLabwareLabel)
   }
@@ -136,6 +138,7 @@ export const SelectedHoveredItems = (
       text: hoveredLabwareDef.metadata.displayName,
       isSelected: false,
       isLast: true,
+      isZoomed: true,
     }
     labwareInfos.push(hoverLabelLabel)
   }
@@ -208,6 +211,7 @@ export const SelectedHoveredItems = (
               selectedNestedLabwareDef?.metadata.displayName ?? 'unknown name',
             isSelected: true,
             isLast: true,
+            isZoomed: true,
           },
         ]}
       />

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

@@ -8,14 +8,19 @@ import { renderWithProviders } from '../../../../__testing-utils__'
 
 import { selectors } from '../../../../labware-ingred/selectors'
 import { getDeckSetupForActiveItem } from '../../../../top-selectors/labware-locations'
-import { DeckSetupTools } from '../DeckSetupTools'
-import { DeckSetupContainer } from '../DeckSetupContainer'
+import {
+  getHoveredSelection,
+  getSelectedSelection,
+} from '../../../../ui/steps/selectors'
 import { getSelectedTerminalItemId } from '../../../../ui/steps'
 import { getDisableModuleRestrictions } from '../../../../feature-flags/selectors'
 import { getRobotType } from '../../../../file-data/selectors'
 import { DeckSetupDetails } from '../DeckSetupDetails'
+import { DeckSetupTools } from '../DeckSetupTools'
+import { DeckSetupContainer } from '../DeckSetupContainer'
 import type * as OpentronsComponents from '@opentrons/components'
 
+vi.mock('../../../../ui/steps/selectors')
 vi.mock('../../../../top-selectors/labware-locations')
 vi.mock('../../../../feature-flags/selectors')
 vi.mock('../DeckSetupTools')
@@ -41,6 +46,8 @@ describe('DeckSetupContainer', () => {
       slot: 'D3',
       cutout: 'cutoutD3',
     })
+    vi.mocked(getSelectedSelection).mockReturnValue([{ id: null, text: null }])
+    vi.mocked(getHoveredSelection).mockReturnValue({ id: null, text: null })
     vi.mocked(DeckSetupTools).mockReturnValue(<div>mock DeckSetupTools</div>)
     vi.mocked(DeckSetupDetails).mockReturnValue(
       <div>mock DeckSetupDetails</div>

protocol-designer/src/pages/Designer/HighlightLabware.tsx

@@ -41,6 +41,7 @@ export function HighlightLabware(
   } else if (isLabwareSelectionSelected) {
     labelText = selectedLabwareSelection[0].text ?? undefined
   }
+  console.log(selectedLabwareSelection)
   if (highlighted || selected) {
     return (
       <LabwareLabel

protocol-designer/src/pages/Designer/Offdeck/HighlightOffdeckSlot.tsx

@@ -0,0 +1,49 @@
+import { useSelector } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import { DeckLabelSet } from '@opentrons/components'
+import {
+  getHoveredSelection,
+  getSelectedSelection,
+} from '../../../ui/steps/selectors'
+import type { CoordinateTuple } from '@opentrons/shared-data'
+import type { LabwareOnDeck } from '../../../step-forms'
+
+interface HighlightOffdeckSlotProps {
+  labwareOnDeck: LabwareOnDeck
+  position: CoordinateTuple
+}
+
+export function HighlightOffdeckSlot(
+  props: HighlightOffdeckSlotProps
+): JSX.Element | null {
+  const { labwareOnDeck, position } = props
+  const { t } = useTranslation('application')
+  const hoveredLabwareOnSelection = useSelector(getHoveredSelection)
+  const selectedLabwareSelection = useSelector(getSelectedSelection)
+  const isLabwareSelectionSelected = selectedLabwareSelection.some(
+    selected => selected.id === labwareOnDeck.id
+  )
+  const selected = isLabwareSelectionSelected
+  const highlighted = hoveredLabwareOnSelection.id === labwareOnDeck.id
+
+  if (highlighted ?? selected) {
+    return (
+      <DeckLabelSet
+        deckLabels={[
+          {
+            text: selected ? t('selected') : t('select'),
+            isSelected: selected,
+            isLast: true,
+            isZoomed: false,
+          },
+        ]}
+        x={position[0] - labwareOnDeck.def.cornerOffsetFromSlot.x}
+        y={position[1] + labwareOnDeck.def.cornerOffsetFromSlot.y}
+        width={153}
+        height={102}
+        invert={true}
+      />
+    )
+  }
+  return null
+}

protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx

@@ -24,9 +24,9 @@ import { SlotDetailsContainer } from '../../../organisms'
 import { wellFillFromWellContents } from '../../../organisms/LabwareOnDeck/utils'
 import { getRobotType } from '../../../file-data/selectors'
 import { SlotOverflowMenu } from '../DeckSetup/SlotOverflowMenu'
+import { HighlightOffdeckSlot } from './HighlightOffdeckSlot'
 import type { DeckSlotId } from '@opentrons/shared-data'
 import type { DeckSetupTabType } from '../types'
-import { HighlightLabware } from '../HighlightLabware'
 
 const OFFDECK_MAP_WIDTH = '41.625rem'
 
@@ -142,7 +142,12 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
                     </>
                   )}
                 </RobotWorkSpace>
-                <HighlightLabware labwareOnDeck={lw} position={[20, 0, 0]} />
+                <Flex marginTop="-6.3rem">
+                  <HighlightOffdeckSlot
+                    labwareOnDeck={lw}
+                    position={[0, 0, 0]}
+                  />
+                </Flex>
                 {menuListId === lw.id ? (
                   <Flex
                     marginTop={`-${SPACING.spacing32}`}

protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx

@@ -10,9 +10,11 @@ import { getRobotType } from '../../../../file-data/selectors'
 import { getDeckSetupForActiveItem } from '../../../../top-selectors/labware-locations'
 import { getAllWellContentsForActiveItem } from '../../../../top-selectors/well-contents'
 import { OffDeckDetails } from '../OffDeckDetails'
+import { HighlightOffdeckSlot } from '../HighlightOffdeckSlot'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type * as Components from '@opentrons/components'
 
+vi.mock('../HighlightOffdeckSlot')
 vi.mock('../../../../top-selectors/labware-locations')
 vi.mock('../../../../file-data/selectors')
 vi.mock('../../../../labware-ingred/selectors')
@@ -55,12 +57,16 @@ describe('OffDeckDetails', () => {
     })
     vi.mocked(selectors.getLiquidDisplayColors).mockReturnValue([])
     vi.mocked(getAllWellContentsForActiveItem).mockReturnValue({})
+    vi.mocked(HighlightOffdeckSlot).mockReturnValue(
+      <div>Highlight Offdeck Slot</div>
+    )
   })
 
   it('renders off-deck overview with 1 labware', () => {
     render(props)
     screen.getByText('OFF-DECK LABWARE')
     screen.getByText('mock LabwareRender')
     screen.getByText('Add labware')
+    screen.getByText('Highlight Offdeck Slot')
   })
 })

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx

@@ -103,9 +103,6 @@ describe('MagnetTools', () => {
   it('renders the text and a switch button for v2', () => {
     render(props)
     screen.getByText('Module')
-    screen.getByText('10')
-    screen.getByText('mock labware')
-    screen.getByText('mock module')
     screen.getByText('Magnet state')
     screen.getByLabelText('Engage')
     const toggleButton = screen.getByRole('switch')

protocol-designer/src/step-forms/reducers/index.ts

@@ -35,7 +35,6 @@ import {
   _getLabwareEntitiesRootState,
   _getInitialDeckSetupRootState,
   _getAdditionalEquipmentEntitiesRootState,
-  _getModuleEntitiesRootState,
 } from '../selectors'
 import {
   createPresavedStepForm,
@@ -158,7 +157,6 @@ export const unsavedForm = (
         additionalEquipmentEntities: _getAdditionalEquipmentEntitiesRootState(
           rootState
         ),
-        moduleEntities: _getModuleEntitiesRootState(rootState),
       })
     }
 

protocol-designer/src/step-forms/test/createPresavedStepForm.test.ts

@@ -37,6 +37,7 @@ beforeEach(() => {
     def: {
       parameters: {
         magneticModuleEngageHeight: EXAMPLE_ENGAGE_HEIGHT,
+        isTiprack: false,
       },
     },
   }