feat(app): highlight ODD tappable labware

adds a labware highlight outline to tappable labware on the ODD labware map view modal

closes PLAT-371

Author: brenthagen

app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx

@@ -83,6 +83,7 @@ export function LabwareMapViewModal(
               handleLabwareClick(topLabwareDefinition, topLabwareId)
             }
           : undefined,
+      highlightLabware: true,
       moduleChildren: null,
     }
   })
@@ -105,6 +106,7 @@ export function LabwareMapViewModal(
           handleLabwareClick(topLabwareDefinition, topLabwareId)
         },
         labwareChildren: null,
+        highlight: true,
       }
     }
   )

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

@@ -54,6 +54,7 @@ export interface LabwareOnDeck {
   /** generic prop to render self-positioned children for each labware */
   labwareChildren?: React.ReactNode
   onLabwareClick?: () => void
+  highlight?: boolean
 }
 
 export interface ModuleOnDeck {
@@ -65,6 +66,7 @@ export interface ModuleOnDeck {
   /** generic prop to render self-positioned children for each module */
   moduleChildren?: React.ReactNode
   onLabwareClick?: () => void
+  highlightLabware?: boolean
 }
 interface BaseDeckProps {
   deckConfig: DeckConfiguration
@@ -240,6 +242,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
             innerProps,
             moduleChildren,
             onLabwareClick,
+            highlightLabware,
           }) => {
             const slotPosition = getPositionFromSlotId(
               moduleLocation.slotName,
@@ -266,6 +269,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                       inferModuleOrientationFromXCoordinate(slotPosition[0]) ===
                         'left' && moduleModel === HEATERSHAKER_MODULE_V1
                     }
+                    highlight={highlightLabware}
                   />
                 ) : null}
                 {moduleChildren}
@@ -281,6 +285,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
             wellFill,
             missingTips,
             onLabwareClick,
+            highlight,
           }) => {
             if (
               labwareLocation === 'offDeck' ||
@@ -308,6 +313,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                   onLabwareClick={onLabwareClick}
                   wellFill={wellFill ?? undefined}
                   missingTips={missingTips}
+                  highlight={highlight}
                 />
                 {labwareChildren}
               </g>

components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx

@@ -46,6 +46,7 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
               <feGaussianBlur stdDeviation="6" />
             </filter>
           </defs>
+          {/* TODO(bh, 2024-07-22): adjust gaussian blur for stacks */}
           <LabwareBorder
             borderThickness={1.5 * OUTLINE_THICKNESS_MM}
             xDimension={dimensions.xDimension}
@@ -56,7 +57,7 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
             ry="8"
           />
           <LabwareBorder
-            borderThickness={1.5 * OUTLINE_THICKNESS_MM}
+            borderThickness={2.2 * OUTLINE_THICKNESS_MM}
             xDimension={dimensions.xDimension}
             yDimension={dimensions.yDimension}
             stroke={COLORS.blue50}