fix(app,components): apply drop shadow filter to labware highlight (#…

…16117) we've been using a gaussian blur filter to the SVG labware outline to achieve a box-shadow-like effect to highlight labware. the drop shadow filter does a closer approximation to box shadow. multiple drop shadow filters do even better to approximate the spread specified in designs. closes RQA-3019
Opentrons · Aug 26, 2024 · eb857f4 · eb857f4
1 parent 0da0f4d
commit eb857f4
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 16 deletions.
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx
@@ -88,6 +88,10 @@ export function SetupLabwareMap({
         topLabwareDefinition != null &&
         topLabwareId != null &&
         hoverLabwareId === topLabwareId,
+      highlightShadowLabware:
+        topLabwareDefinition != null &&
+        topLabwareId != null &&
+        hoverLabwareId === topLabwareId,
       stacked: topLabwareDefinition != null && topLabwareId != null,
       moduleChildren: (
         // open modal
@@ -148,6 +152,7 @@ export function SetupLabwareMap({
         topLabwareId,
         topLabwareDisplayName,
         highlight: isLabwareInStack && hoverLabwareId === topLabwareId,
+        highlightShadow: isLabwareInStack && hoverLabwareId === topLabwareId,
         labwareChildren: (
           <g
             cursor={isLabwareInStack ? 'pointer' : ''}

diff --git a/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx b/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx
@@ -71,6 +71,8 @@ export function LabwareMapView(props: LabwareMapViewProps): JSX.Element {
             }
           : undefined,
       highlightLabware: true,
+      highlightShadowLabware:
+        topLabwareDefinition != null && topLabwareId != null,
       moduleChildren: null,
       stacked: topLabwareDefinition != null && topLabwareId != null,
     }
@@ -99,6 +101,7 @@ export function LabwareMapView(props: LabwareMapViewProps): JSX.Element {
         },
         labwareChildren: null,
         highlight: true,
+        highlightShadow: isLabwareInStack,
         stacked: isLabwareInStack,
       }
     }

diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
@@ -57,6 +57,7 @@ export interface LabwareOnDeck {
   labwareChildren?: React.ReactNode
   onLabwareClick?: () => void
   highlight?: boolean
+  highlightShadow?: boolean
   stacked?: boolean
 }
 
@@ -70,6 +71,7 @@ export interface ModuleOnDeck {
   moduleChildren?: React.ReactNode
   onLabwareClick?: () => void
   highlightLabware?: boolean
+  highlightShadowLabware?: boolean
   stacked?: boolean
 }
 interface BaseDeckProps {
@@ -250,6 +252,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
             moduleChildren,
             onLabwareClick,
             highlightLabware,
+            highlightShadowLabware,
           }) => {
             const slotPosition = getPositionFromSlotId(
               moduleLocation.slotName,
@@ -277,6 +280,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                         'left' && moduleModel === HEATERSHAKER_MODULE_V1
                     }
                     highlight={highlightLabware}
+                    highlightShadow={highlightShadowLabware}
                   />
                 ) : null}
                 {moduleChildren}
@@ -294,6 +298,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
             missingTips,
             onLabwareClick,
             highlight,
+            highlightShadow,
           }) => {
             if (
               labwareLocation === 'offDeck' ||
@@ -322,6 +327,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                   wellFill={wellFill ?? undefined}
                   missingTips={missingTips}
                   highlight={highlight}
+                  highlightShadow={highlightShadow}
                 />
                 {labwareChildren}
               </g>

diff --git a/components/src/hardware-sim/Labware/LabwareAdapter/index.tsx b/components/src/hardware-sim/Labware/LabwareAdapter/index.tsx
@@ -25,12 +25,18 @@ export interface LabwareAdapterProps {
   labwareLoadName: LabwareAdapterLoadName
   definition?: LabwareDefinition2
   highlight?: boolean
+  highlightShadow?: boolean
 }
 
 export const LabwareAdapter = (
   props: LabwareAdapterProps
 ): JSX.Element | null => {
-  const { labwareLoadName, definition, highlight = false } = props
+  const {
+    labwareLoadName,
+    definition,
+    highlight = false,
+    highlightShadow,
+  } = props
   const highlightOutline =
     highlight && definition != null ? (
       <LabwareOutline
@@ -39,10 +45,24 @@ export const LabwareAdapter = (
         fill={COLORS.transparent}
       />
     ) : null
+  const highlightShadowOutline =
+    highlight && definition != null ? (
+      <LabwareOutline
+        definition={definition}
+        highlight={highlight}
+        highlightShadow={highlightShadow}
+        fill={COLORS.transparent}
+      />
+    ) : null
   const SVGElement = LABWARE_ADAPTER_LOADNAME_PATHS[labwareLoadName]
 
   return (
     <g>
+      {/**
+       * render an initial shadow outline first in the DOM so that the SVG highlight shadow
+       * does not layer over the inside of the SVG labware adapter
+       */}
+      {highlightShadowOutline}
       <SVGElement />
       {highlightOutline}
     </g>

diff --git a/components/src/hardware-sim/Labware/LabwareRender.tsx b/components/src/hardware-sim/Labware/LabwareRender.tsx
@@ -51,6 +51,8 @@ export interface LabwareRenderProps {
   labwareStroke?: CSSProperties['stroke']
   /** adds thicker blue border with blur to labware */
   highlight?: boolean
+  /** adds a drop shadow to the highlight border */
+  highlightShadow?: boolean
   /** Optional callback, called with WellMouseEvent args onMouseEnter */
   onMouseEnterWell?: (e: WellMouseEvent) => unknown
   /** Optional callback, called with WellMouseEvent args onMouseLeave */
@@ -90,6 +92,7 @@ export const LabwareRender = (props: LabwareRenderProps): JSX.Element => {
             labwareLoadName={labwareLoadName as LabwareAdapterLoadName}
             definition={definition}
             highlight={props.highlight}
+            highlightShadow={props.highlightShadow}
           />
         </g>
       </g>
@@ -107,6 +110,7 @@ export const LabwareRender = (props: LabwareRenderProps): JSX.Element => {
         onMouseLeaveWell={props.onMouseLeaveWell}
         onLabwareClick={props.onLabwareClick}
         highlight={props.highlight}
+        highlightShadow={props.highlightShadow}
       />
       {props.wellStroke != null ? (
         <StrokedWells

diff --git a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
@@ -16,6 +16,8 @@ export interface LabwareOutlineProps {
   isTiprack?: boolean
   /** adds thicker blue border with blur to labware, defaults to false */
   highlight?: boolean
+  /** adds a drop shadow to the highlight border */
+  highlightShadow?: boolean
   /** [legacy] override the border color */
   stroke?: CSSProperties['stroke']
   fill?: CSSProperties['fill']
@@ -31,6 +33,7 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
     height = SLOT_RENDER_HEIGHT,
     isTiprack = false,
     highlight = false,
+    highlightShadow = false,
     stroke,
     fill,
     showRadius = true,
@@ -52,31 +55,41 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
         <>
           <defs>
             <filter id="feOffset" filterUnits="objectBoundingBox">
-              <feGaussianBlur stdDeviation="6" />
+              {/* *
+               * TODO(bh, 2024-08-23): layer drop shadow filters to mimic CSS box shadow - may need to evaluate performance
+               * https://stackoverflow.com/questions/22486039/css3-filter-drop-shadow-spread-property-alternatives
+               * */}
+              <feDropShadow
+                dx="0"
+                dy="0"
+                stdDeviation="3"
+                floodColor={COLORS.blue50}
+              />
+              <feDropShadow
+                dx="0"
+                dy="0"
+                stdDeviation="1.75"
+                floodColor={COLORS.blue50}
+              />
+              <feDropShadow
+                dx="0"
+                dy="0"
+                stdDeviation="1"
+                floodColor={COLORS.blue50}
+              />
             </filter>
           </defs>
-          {/* TODO(bh, 2024-07-22): adjust gaussian blur for stacks */}
           <LabwareBorder
-            borderThickness={1.5 * OUTLINE_THICKNESS_MM}
+            borderThickness={2.2 * OUTLINE_THICKNESS_MM}
             xDimension={dimensions.xDimension}
             yDimension={dimensions.yDimension}
-            filter="url(#feOffset)"
-            stroke="#74B0FF"
+            filter={highlightShadow ? 'url(#feOffset)' : ''}
+            stroke={COLORS.blue50}
             rx="8"
             ry="8"
             showRadius={showRadius}
             fill={backgroundFill}
           />
-          <LabwareBorder
-            borderThickness={2.2 * OUTLINE_THICKNESS_MM}
-            xDimension={dimensions.xDimension}
-            yDimension={dimensions.yDimension}
-            stroke={COLORS.blue50}
-            fill={backgroundFill}
-            rx="4"
-            ry="4"
-            showRadius={showRadius}
-          />
         </>
       ) : (
         <LabwareBorder

diff --git a/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx b/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx
@@ -17,6 +17,8 @@ export interface StaticLabwareProps {
   definition: LabwareDefinition2
   /** Add thicker blurred blue border to labware, defaults to false */
   highlight?: boolean
+  /** adds a drop shadow to the highlight border */
+  highlightShadow?: boolean
   /** Optional callback to be executed when entire labware element is clicked */
   onLabwareClick?: () => void
   /** Optional callback to be executed when mouse enters a well element */
@@ -55,6 +57,7 @@ export function StaticLabwareComponent(props: StaticLabwareProps): JSX.Element {
   const {
     definition,
     highlight,
+    highlightShadow,
     onLabwareClick,
     onMouseEnterWell,
     onMouseLeaveWell,
@@ -69,6 +72,7 @@ export function StaticLabwareComponent(props: StaticLabwareProps): JSX.Element {
         <LabwareOutline
           definition={definition}
           highlight={highlight}
+          highlightShadow={highlightShadow}
           fill={fill}
           showRadius={showRadius}
         />

diff --git a/components/src/hardware-sim/ProtocolDeck/index.tsx b/components/src/hardware-sim/ProtocolDeck/index.tsx
@@ -92,6 +92,10 @@ export function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null {
             </LabwareInfo>
           ) : null,
         highlightLabware: handleLabwareClick != null,
+        highlightShadowLabware:
+          handleLabwareClick != null &&
+          topLabwareDefinition != null &&
+          topLabwareId != null,
         onLabwareClick:
           handleLabwareClick != null &&
           topLabwareDefinition != null &&
@@ -140,6 +144,7 @@ export function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null {
           </LabwareInfo>
         ) : null,
         highlight: handleLabwareClick != null,
+        highlightShadow: handleLabwareClick != null && isLabwareInStack,
         onLabwareClick:
           handleLabwareClick != null
             ? () => {