From f50ade580108f792132fda15b52dca11715b88fa Mon Sep 17 00:00:00 2001
From: Brent Hagen <brent.hagen@opentrons.com>
Date: Tue, 23 Jul 2024 19:15:53 -0400
Subject: [PATCH] feat(app): highlight ODD tappable labware

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

closes PLAT-371
---
 .../organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx  | 2 ++
 components/src/hardware-sim/BaseDeck/BaseDeck.tsx           | 6 ++++++
 .../Labware/labwareInternals/LabwareOutline.tsx             | 3 ++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx b/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx
index e663d4dc9b9..e985386d461 100644
--- a/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx
+++ b/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,
       }
     }
   )
diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
index f7a3baaf715..50791c42b3c 100644
--- a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
+++ b/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>
diff --git a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
index ffd6e85ce55..14a33b00aa0 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
+++ b/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}