feat(protocol-designer, components): add dropdown field deck highligh…

…ts (#17122)

closes AUTH-1124

components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx

@@ -8,6 +8,7 @@ import {
   JUSTIFY_CENTER,
   TEXT_ALIGN_CENTER,
 } from '../../styles'
+import { DeckLabelSet } from '../../organisms'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
@@ -17,14 +18,24 @@ import type {
   DeckDefinition,
   ModuleType,
 } from '@opentrons/shared-data'
+import type { DeckLabelProps } from '../../molecules'
 
+const WASTE_CHUTE_WIDTH = 130
+const WASTE_CHUTE_HEIGHT = 138
+const WASTE_CHUTE_X = 322
+const WASTE_CHUTE_Y = -51
+const TAG_HEIGHT = 28
 interface WasteChuteFixtureProps extends React.SVGProps<SVGGElement> {
   cutoutId: typeof WASTE_CHUTE_CUTOUT
   deckDefinition: DeckDefinition
   moduleType?: ModuleType
   fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
   wasteChuteColor?: string
   showExtensions?: boolean
+  /** optional prop to highlight the border of the wasteChute */
+  showHighlight?: boolean
+  /** optional tag info to display a tag below the waste */
+  tagInfo?: DeckLabelProps[]
 }
 
 export function WasteChuteFixture(
@@ -35,6 +46,8 @@ export function WasteChuteFixture(
     deckDefinition,
     fixtureBaseColor = COLORS.grey35,
     wasteChuteColor = COLORS.grey50,
+    showHighlight,
+    tagInfo,
     ...restProps
   } = props
 
@@ -64,6 +77,8 @@ export function WasteChuteFixture(
       <WasteChute
         backgroundColor={wasteChuteColor}
         wasteIconColor={fixtureBaseColor}
+        showHighlight={showHighlight}
+        tagInfo={tagInfo}
       />
     </g>
   )
@@ -72,43 +87,57 @@ export function WasteChuteFixture(
 interface WasteChuteProps {
   wasteIconColor: string
   backgroundColor: string
+  showHighlight?: boolean
+  tagInfo?: DeckLabelProps[]
 }
 
 /**
  * a deck map foreign object representing the physical location of the waste chute connected to the deck
  */
 export function WasteChute(props: WasteChuteProps): JSX.Element {
-  const { wasteIconColor, backgroundColor } = props
+  const { wasteIconColor, backgroundColor, showHighlight, tagInfo } = props
 
   return (
-    <RobotCoordsForeignObject
-      width={130}
-      height={138}
-      x={322}
-      y={-51}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Flex
-        alignItems={ALIGN_CENTER}
-        backgroundColor={backgroundColor}
-        borderRadius="6px"
-        color={wasteIconColor}
-        flexDirection={DIRECTION_COLUMN}
-        gridGap={SPACING.spacing4}
-        justifyContent={JUSTIFY_CENTER}
-        padding={SPACING.spacing8}
-        width="100%"
+    <>
+      <RobotCoordsForeignObject
+        width={WASTE_CHUTE_WIDTH}
+        height={WASTE_CHUTE_HEIGHT}
+        x={WASTE_CHUTE_X}
+        y={-51}
+        flexProps={{ flex: '1' }}
+        foreignObjectProps={{ flex: '1' }}
       >
-        <Icon name="trash" color={wasteIconColor} height="2rem" />
-        <Text
-          color={COLORS.white}
-          textAlign={TEXT_ALIGN_CENTER}
-          css={TYPOGRAPHY.bodyTextSemiBold}
+        <Flex
+          alignItems={ALIGN_CENTER}
+          backgroundColor={backgroundColor}
+          borderRadius="6px"
+          color={wasteIconColor}
+          flexDirection={DIRECTION_COLUMN}
+          gridGap={SPACING.spacing4}
+          justifyContent={JUSTIFY_CENTER}
+          padding={SPACING.spacing8}
+          width="100%"
+          border={showHighlight ? `3px solid ${COLORS.blue50}` : 'none'}
         >
-          Waste chute
-        </Text>
-      </Flex>
-    </RobotCoordsForeignObject>
+          <Icon name="trash" color={wasteIconColor} height="2rem" />
+          <Text
+            color={COLORS.white}
+            textAlign={TEXT_ALIGN_CENTER}
+            css={TYPOGRAPHY.bodyTextSemiBold}
+          >
+            Waste chute
+          </Text>
+        </Flex>
+      </RobotCoordsForeignObject>
+      {tagInfo != null && tagInfo.length > 0 ? (
+        <DeckLabelSet
+          width={WASTE_CHUTE_WIDTH}
+          height={WASTE_CHUTE_HEIGHT}
+          x={WASTE_CHUTE_X}
+          y={WASTE_CHUTE_Y - TAG_HEIGHT}
+          deckLabels={tagInfo}
+        />
+      ) : null}
+    </>
   )
 }

components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx

@@ -8,6 +8,7 @@ import { SlotClip } from './SlotClip'
 import { WasteChute } from './WasteChuteFixture'
 
 import type { DeckDefinition, ModuleType } from '@opentrons/shared-data'
+import type { DeckLabelProps } from '../../molecules'
 
 interface WasteChuteStagingAreaFixtureProps
   extends React.SVGProps<SVGGElement> {
@@ -18,6 +19,8 @@ interface WasteChuteStagingAreaFixtureProps
   slotClipColor?: React.SVGProps<SVGPathElement>['stroke']
   wasteChuteColor?: string
   showExtensions?: boolean
+  showHighlight?: boolean
+  tagInfo?: DeckLabelProps[]
 }
 
 export function WasteChuteStagingAreaFixture(
@@ -29,6 +32,8 @@ export function WasteChuteStagingAreaFixture(
     fixtureBaseColor = COLORS.grey35,
     slotClipColor = COLORS.grey60,
     wasteChuteColor = COLORS.grey50,
+    showHighlight,
+    tagInfo,
     ...restProps
   } = props
 
@@ -62,6 +67,8 @@ export function WasteChuteStagingAreaFixture(
       <WasteChute
         wasteIconColor={fixtureBaseColor}
         backgroundColor={wasteChuteColor}
+        showHighlight={showHighlight}
+        tagInfo={tagInfo}
       />
     </g>
   )

components/src/hardware-sim/Deck/DeckFromLayers.tsx

@@ -15,6 +15,8 @@ import { ALL_OT2_DECK_LAYERS } from './constants'
 
 import type { RobotType } from '@opentrons/shared-data'
 
+export * from './OT2Layers'
+
 export interface DeckFromLayersProps {
   robotType: RobotType
   layerBlocklist: string[]

components/src/hardware-sim/Deck/FlexTrash.tsx

@@ -4,13 +4,15 @@ import {
   opentrons1Trash3200MlFixedV1 as trashLabwareDef,
 } from '@opentrons/shared-data'
 import { Icon } from '../../icons'
+import { DeckLabelSet } from '../../organisms'
 import { Flex, Text } from '../../primitives'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { COLORS, BORDERS } from '../../helix-design-system'
 import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
 
 import type { RobotType } from '@opentrons/shared-data'
+import type { DeckLabelProps } from '../../molecules'
 
 // only allow edge cutout locations (columns 1 and 3)
 export type TrashCutoutId =
@@ -23,11 +25,16 @@ export type TrashCutoutId =
   | 'cutoutC3'
   | 'cutoutD3'
 
+const HEIGHT_OF_TAG = 28
 interface FlexTrashProps {
   robotType: RobotType
   trashIconColor: string
   backgroundColor: string
   trashCutoutId?: TrashCutoutId
+  /** optional prop to highlight the border of the trashBin */
+  showHighlight?: boolean
+  /** optional tag info to display a tag below the trash */
+  tagInfo?: DeckLabelProps[]
 }
 
 /**
@@ -40,6 +47,8 @@ export const FlexTrash = ({
   trashIconColor,
   backgroundColor,
   trashCutoutId,
+  showHighlight,
+  tagInfo,
 }: FlexTrashProps): JSX.Element | null => {
   // be sure we don't try to render for an OT-2
   if (robotType !== FLEX_ROBOT_TYPE) return null
@@ -96,6 +105,7 @@ export const FlexTrash = ({
           justifyContent={JUSTIFY_CENTER}
           gridGap={SPACING.spacing8}
           width="100%"
+          border={showHighlight ? `3px solid ${COLORS.blue50}` : 'none'}
         >
           {rotateDegrees === '180' ? (
             <Text
@@ -123,6 +133,15 @@ export const FlexTrash = ({
           ) : null}
         </Flex>
       </RobotCoordsForeignObject>
+      {tagInfo != null && tagInfo.length > 0 ? (
+        <DeckLabelSet
+          width={xDimension}
+          height={yDimension}
+          x={x + xAdjustment}
+          y={y + yAdjustment - HEIGHT_OF_TAG}
+          deckLabels={tagInfo}
+        />
+      ) : null}
     </g>
   ) : null
 }

components/src/hardware-sim/Deck/OT2Layers.tsx

@@ -1,3 +1,5 @@
+import { COLORS } from '../../helix-design-system'
+
 export function FixedBase(): JSX.Element {
   return (
     <g id="fixedBase">
@@ -14,15 +16,20 @@ export function FixedBase(): JSX.Element {
   )
 }
 
-export function FixedTrash(): JSX.Element {
+interface FixedTrashProps {
+  highlight?: boolean
+}
+export function FixedTrash(props: FixedTrashProps): JSX.Element {
+  const { highlight = false } = props
   return (
     <g id="fixedTrash">
       <path
         d="M441.107,289.57v135.86c0,8.368-6.808,15.176-15.176,15.176H283.07c-8.368,0-15.176-6.808-15.176-15.176V289.57c0-8.368,6.808-15.177,15.176-15.177h142.86C434.298,274.394,441.107,281.202,441.107,289.57z M425.053,434H283.947c-1.24,0-2.484-0.034-3.702-0.287c-2-0.416-3.81-1.446-4.884-3.227c-1.152-1.91-1.289-4.185-1.289-6.359v-88.629c0-2.683,0.259-5.609,2.263-7.612c2.004-2.003,4.928-2.263,7.612-2.263h25.939c1.693,0.006,3.545-0.167,4.807-1.429c1.262-1.262,1.435-3.115,1.429-4.807v-28.94c0-2.124,0.129-4.338,1.209-6.225c1.059-1.851,2.904-2.933,4.954-3.36c1.222-0.255,2.468-0.289,3.712-0.289h99.056c2.124,0,4.339,0.129,6.226,1.209c1.851,1.06,2.933,2.904,3.36,4.954c0.255,1.222,0.289,2.468,0.289,3.712v133.68c0,2.684-0.259,5.607-2.263,7.611C430.661,433.741,427.737,434,425.053,434z"
         style={{
-          fill: 'rgb(237, 237, 237)',
-          stroke: 'none',
+          fill: highlight ? 'none' : 'rgb(237, 237, 237)',
+          stroke: highlight ? COLORS.blue50 : 'none',
           fillRule: 'evenodd',
+          strokeWidth: 2,
         }}
       ></path>
     </g>

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/molecules/DeckLabel/index.tsx

@@ -11,6 +11,7 @@ import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { ModuleModel } from '@opentrons/shared-data'
 
 export interface DeckLabelProps {
+  isZoomed: boolean
   text: string
   isSelected: boolean
   moduleModel?: ModuleModel
@@ -26,6 +27,7 @@ export function DeckLabel({
   moduleModel,
   maxWidth = FLEX_MAX_CONTENT,
   isLast = false,
+  isZoomed,
 }: DeckLabelProps): JSX.Element {
   const DECK_LABEL_BASE_STYLE = (
     labelBorderRadius?: string
@@ -59,7 +61,7 @@ export function DeckLabel({
 
   return (
     <Flex
-      fontSize="6px"
+      fontSize={isZoomed ? '6px' : '18px'}
       data-testid={`DeckLabel_${isSelected ? 'Selected' : 'UnSelected'}`}
       css={
         isSelected
@@ -68,7 +70,7 @@ export function DeckLabel({
       }
     >
       <Flex gridGap={SPACING.spacing2} alignItems={ALIGN_CENTER}>
-        {moduleModel != null ? (
+        {moduleModel != null && isZoomed ? (
           <ModuleIcon size="0.5rem" moduleType={getModuleType(moduleModel)} />
         ) : null}
         <StyledText color={isSelected ? COLORS.white : COLORS.blue50}>

components/src/molecules/DropdownMenu/index.tsx

@@ -65,6 +65,8 @@ export interface DropdownMenuProps {
   disabled?: boolean
   /** optional placement of the menu */
   menuPlacement?: 'auto' | 'top' | 'bottom'
+  onEnter?: (id: string) => void
+  onExit?: () => void
 }
 
 // TODO: (smb: 4/15/22) refactor this to use html select for accessibility
@@ -84,6 +86,8 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     disabled = false,
     onFocus,
     onBlur,
+    onEnter,
+    onExit,
     menuPlacement = 'auto',
   } = props
   const [targetProps, tooltipProps] = useHoverTooltip()
@@ -290,6 +294,8 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                     setShowDropdownMenu(false)
                   }}
                   border="none"
+                  onMouseEnter={() => onEnter?.(option.value)}
+                  onMouseLeave={onExit}
                 >
                   <Flex
                     gridGap={SPACING.spacing8}

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,
   },
 ]