fix(app,components): apply 40% opacity to disabled wells in liquids l…

…abware details modal (#14542)

adds a utility to apply 40% opacity to disabled well fill color instead of applying a legacy grey overlay. the disabledWell condition is only used in the liquids labware details modal, shared between ODD and desktop.

closes RAUT-976

app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx

@@ -26,7 +26,7 @@ import { getSlotLabwareDefinition } from '../utils/getSlotLabwareDefinition'
 import { LiquidDetailCard } from './LiquidDetailCard'
 import {
   getLiquidsByIdForLabware,
-  getWellFillFromLabwareId,
+  getDisabledWellFillFromLabwareId,
   getWellGroupForLiquidId,
   getDisabledWellGroupForLiquidId,
 } from './utils'
@@ -52,11 +52,6 @@ export const LiquidsLabwareDetailsModal = (
     commands
   )
   const labwareByLiquidId = parseLabwareInfoByLiquidId(commands)
-  const wellFill = getWellFillFromLabwareId(
-    labwareId,
-    liquids,
-    labwareByLiquidId
-  )
   const labwareInfo = getLiquidsByIdForLabware(labwareId, labwareByLiquidId)
   const { slotName, labwareName } = getLocationInfoNames(labwareId, commands)
   const loadLabwareCommand = commands
@@ -69,6 +64,14 @@ export const LiquidsLabwareDetailsModal = (
   const [selectedValue, setSelectedValue] = React.useState<typeof liquidId>(
     liquidId ?? filteredLiquidsInLoadOrder[0].id
   )
+
+  const wellFill = getDisabledWellFillFromLabwareId(
+    labwareId,
+    liquids,
+    labwareByLiquidId,
+    selectedValue
+  )
+
   const scrollToCurrentItem = (): void => {
     currentLiquidRef.current?.scrollIntoView({ behavior: 'smooth' })
   }

app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidsLabwareDetailsModal.test.tsx

@@ -13,7 +13,10 @@ import { useMostRecentCompletedAnalysis } from '../../../../LabwarePositionCheck
 import { mockDefinition } from '../../../../../redux/custom-labware/__fixtures__'
 import { getLocationInfoNames } from '../../utils/getLocationInfoNames'
 import { getSlotLabwareDefinition } from '../../utils/getSlotLabwareDefinition'
-import { getLiquidsByIdForLabware, getWellFillFromLabwareId } from '../utils'
+import {
+  getLiquidsByIdForLabware,
+  getDisabledWellFillFromLabwareId,
+} from '../utils'
 import { LiquidsLabwareDetailsModal } from '../LiquidsLabwareDetailsModal'
 import { LiquidDetailCard } from '../LiquidDetailCard'
 
@@ -53,8 +56,8 @@ const mockParseLiquidsInLoadOrder = parseLiquidsInLoadOrder as jest.MockedFuncti
 const mockLabwareRender = LabwareRender as jest.MockedFunction<
   typeof LabwareRender
 >
-const mockGetWellFillFromLabwareId = getWellFillFromLabwareId as jest.MockedFunction<
-  typeof getWellFillFromLabwareId
+const mockGetDisabledWellFillFromLabwareId = getDisabledWellFillFromLabwareId as jest.MockedFunction<
+  typeof getDisabledWellFillFromLabwareId
 >
 const mockUseMostRecentCompletedAnalysis = useMostRecentCompletedAnalysis as jest.MockedFunction<
   typeof useMostRecentCompletedAnalysis
@@ -111,7 +114,7 @@ describe('LiquidsLabwareDetailsModal', () => {
       },
     ])
     mockLiquidDetailCard.mockReturnValue(<div></div>)
-    mockGetWellFillFromLabwareId.mockReturnValue({})
+    mockGetDisabledWellFillFromLabwareId.mockReturnValue({})
     mockUseMostRecentCompletedAnalysis.mockReturnValue(
       {} as CompletedProtocolAnalysis
     )
@@ -144,7 +147,7 @@ describe('LiquidsLabwareDetailsModal', () => {
     getByText(nestedTextMatcher('mock LiquidDetailCard'))
   })
   it('should render labware render with well fill', () => {
-    mockGetWellFillFromLabwareId.mockReturnValue({
+    mockGetDisabledWellFillFromLabwareId.mockReturnValue({
       C1: '#ff4888',
       C2: '#ff4888',
     })
@@ -153,7 +156,7 @@ describe('LiquidsLabwareDetailsModal', () => {
   })
   it('should render labware render with well fill on odd', () => {
     mockGetIsOnDevice.mockReturnValue(true)
-    mockGetWellFillFromLabwareId.mockReturnValue({
+    mockGetDisabledWellFillFromLabwareId.mockReturnValue({
       C1: '#ff4888',
       C2: '#ff4888',
     })

app/src/organisms/Devices/ProtocolRun/SetupLiquids/utils.ts

@@ -1,5 +1,6 @@
-import { WellGroup } from '@opentrons/components'
+import { COLORS } from '@opentrons/components'
 
+import type { WellGroup } from '@opentrons/components'
 import type { LabwareByLiquidId } from '@opentrons/components/src/hardware-sim/ProtocolDeck/types'
 import type { Liquid } from '@opentrons/shared-data'
 
@@ -21,7 +22,42 @@ export function getWellFillFromLabwareId(
           [well: string]: string
         } = {}
         Object.keys(labware.volumeByWell).forEach(key => {
-          wellFill[key] = liquid?.displayColor ?? ''
+          wellFill[key] = liquid?.displayColor ?? COLORS.transparent
+        })
+        labwareWellFill = { ...labwareWellFill, ...wellFill }
+      }
+    })
+  })
+  return labwareWellFill
+}
+
+export function getDisabledWellFillFromLabwareId(
+  labwareId: string,
+  liquidsInLoadOrder: Liquid[],
+  labwareByLiquidId: LabwareByLiquidId,
+  selectedLabwareId?: string
+): { [well: string]: string } {
+  let labwareWellFill: { [well: string]: string } = {}
+  const liquidIds = Object.keys(labwareByLiquidId)
+  const labwareInfo = Object.values(labwareByLiquidId)
+
+  labwareInfo.forEach((labwareArray, index) => {
+    labwareArray.forEach(labware => {
+      if (labware.labwareId === labwareId) {
+        const liquidId = liquidIds[index]
+        const liquid = liquidsInLoadOrder.find(liquid => liquid.id === liquidId)
+        const wellFill: {
+          [well: string]: string
+        } = {}
+        Object.keys(labware.volumeByWell).forEach(key => {
+          if (liquidId === selectedLabwareId) {
+            wellFill[key] = liquid?.displayColor ?? COLORS.transparent
+            // apply 40% opacity to disabled wells if well not already filled
+          } else if (wellFill[key] == null && labwareWellFill[key] == null) {
+            wellFill[key] =
+              `${liquid?.displayColor}${COLORS.opacity40HexCode}` ??
+              COLORS.transparent
+          }
         })
         labwareWellFill = { ...labwareWellFill, ...wellFill }
       }

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

@@ -31,7 +31,7 @@ export const STYLE_BY_WELL_CONTENTS: {
   },
   disabledWell: {
     stroke: '#C6C6C6', // LEGACY --light-grey-hover
-    fill: '#EDEDEDCC', // LEGACY --lightest-gray + 80% opacity
+    fill: COLORS.transparent,
     strokeWidth: 0.6,
   },
   selectedWell: {