feat(protocol-designer): filter liquid class options and show warning (#18559)

This PR wires up liquid class filtering based on form field selection on
page 1 of moveLiquid and mix forms. It also wires up the warning logic
for showing why some (if any) liquid classes are disabled based on those
selections and for prioritizing which warning should show if there are
multiple reasons for disabling.

Closes AUTH-1530

Author: ncdiehl11

protocol-designer/src/constants.ts

@@ -257,3 +257,5 @@ export const CHANNELS_MAPPED_TO_MAX_SPEED: Record<
     },
   },
 }
+
+export const MINIMUM_LIQUID_CLASS_VOLUME = 1

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MixTools/index.tsx

@@ -12,7 +12,10 @@ import {
   getLabwareEntities,
   getPipetteEntities,
 } from '../../../../../../step-forms/selectors'
-import { useAssignLiquidClass } from '../MoveLiquidTools/hooks'
+import {
+  useAssignLiquidClass,
+  useSupportedLiquidClassOptions,
+} from '../MoveLiquidTools/hooks'
 import { LiquidClassesStepTools } from '../MoveLiquidTools/LiquidClassesStepTools'
 import { FirstStepMixTools } from './FirstStepMixTools'
 import { SecondStepMixTools } from './SecondStepMixTools'
@@ -57,6 +60,11 @@ export function MixTools(
     propsForFields.liquidClass.updateValue
   )
 
+  const orderedSupportedLiquidClassOptions = useSupportedLiquidClassOptions(
+    orderedLiquidClassOptions,
+    formData
+  )
+
   const stepComponents: Record<number, () => JSX.Element> = {
     0: () => (
       <FirstStepMixTools
@@ -76,7 +84,7 @@ export function MixTools(
             propsForFields={propsForFields}
             setShowFormErrors={setShowFormErrors}
             formData={formData}
-            orderedLiquidClassOptions={orderedLiquidClassOptions}
+            orderedLiquidClassOptions={orderedSupportedLiquidClassOptions}
             type="mix"
           />
         ) : (

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/hooks.ts

@@ -2,8 +2,12 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
-import { getAllLiquidClassDefs } from '@opentrons/shared-data'
+import {
+  getAllLiquidClassDefs,
+  getFlexNameConversion,
+} from '@opentrons/shared-data'
 
+import { MINIMUM_LIQUID_CLASS_VOLUME } from '../../../../../../constants'
 import {
   getCurrentFormIsPresaved,
   getCurrentFormUnsavedChangedFields,
@@ -15,6 +19,7 @@ import { getAllWellsFromPrimaryWells } from '../../../../../../steplist/formLeve
 import { getAllWellContentsForActiveItem } from '../../../../../../top-selectors/well-contents'
 import { getShouldUpdateForLiquidClass } from '../../utils'
 
+import type { PathOption } from '@opentrons/step-generation'
 import type { FormData } from '../../../../../../form-types'
 
 export interface LiquidClassOption {
@@ -133,3 +138,44 @@ export function useAssignLiquidClass(
 
   return orderedLiquidClassOptions
 }
+
+export const useSupportedLiquidClassOptions = (
+  liquidClassOptions: LiquidClassOption[],
+  formData: FormData
+): LiquidClassOption[] => {
+  const { pipette, tipRack, volume: rawVolume } = formData
+  const path = 'path' in formData ? (formData.path as PathOption) : null // handle mix or move liquid forms
+  const pipetteEntities = useSelector(getPipetteEntities)
+  const liquidClasses = getAllLiquidClassDefs()
+  const pipetteEntity = pipetteEntities[pipette]
+
+  // early exit if pipette is not found to be permissive (not practical)
+  if (pipetteEntity == null) {
+    console.warn('No pipette found')
+    return liquidClassOptions
+  }
+
+  const pipetteName = getFlexNameConversion(pipetteEntity.spec)
+  const volume = Number(rawVolume)
+  if (volume < MINIMUM_LIQUID_CLASS_VOLUME) {
+    return []
+  }
+
+  const supportedOptions = liquidClassOptions.reduce<LiquidClassOption[]>(
+    (acc, option) => {
+      const liquidClass = liquidClasses[option.value]
+      const byTipLookup = liquidClass?.byPipette
+        .find(({ pipetteModel }) => pipetteModel === pipetteName)
+        ?.byTipType.find(({ tiprack }) => tiprack === tipRack)
+      if (
+        byTipLookup == null ||
+        (path === 'multiDispense' && !('multiDispense' in byTipLookup))
+      ) {
+        return acc
+      }
+      return [...acc, option]
+    },
+    []
+  )
+  return supportedOptions
+}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/index.tsx

@@ -5,7 +5,7 @@ import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 import { getEnableLiquidClasses } from '../../../../../../feature-flags/selectors'
 import { getRobotType } from '../../../../../../file-data/selectors'
 import { FirstStepMoveLiquidTools } from './FirstStepMoveLiquidTools'
-import { useAssignLiquidClass } from './hooks'
+import { useAssignLiquidClass, useSupportedLiquidClassOptions } from './hooks'
 import { LiquidClassesStepTools } from './LiquidClassesStepTools'
 import { SecondStepsMoveLiquidTools } from './SecondStepsMoveLiquidTools'
 
@@ -27,6 +27,11 @@ export function MoveLiquidTools(props: StepFormProps): JSX.Element {
     'aspirate_wells',
     propsForFields.liquidClass.updateValue
   )
+
+  const orderedSupportedLiquidClassOptions = useSupportedLiquidClassOptions(
+    orderedLiquidClassOptions,
+    formData
+  )
   const robotType = useSelector(getRobotType)
 
   const renderStepComponent = (): JSX.Element => {
@@ -47,7 +52,7 @@ export function MoveLiquidTools(props: StepFormProps): JSX.Element {
                 formData={formData}
                 setShowFormErrors={setShowFormErrors}
                 type="transfer"
-                orderedLiquidClassOptions={orderedLiquidClassOptions}
+                orderedLiquidClassOptions={orderedSupportedLiquidClassOptions}
               />
             ) : (
               <SecondStepsMoveLiquidTools

protocol-designer/src/pages/ProtocolOverview/index.tsx

@@ -94,6 +94,7 @@ export function ProtocolOverview(): JSX.Element {
   )
   const { timeline } = useSelector(fileSelectors.getRobotStateTimeline)
   const hasCommands = timeline.length > 0
+
   const dispatch: ThunkDispatch<any> = useDispatch()
   const [showMaterialsListModal, setShowMaterialsListModal] = useState<boolean>(
     false

protocol-designer/src/steplist/formLevel/index.ts

@@ -74,6 +74,7 @@ import {
 import {
   belowPipetteMinimumVolume,
   composeWarnings,
+  incompatibleLiquidClass,
   maxDispenseWellVolume,
   minAspirateAirGapVolume,
   minDispenseAirGapVolume,
@@ -179,7 +180,8 @@ const stepFormHelperMap: {
     ),
     getWarnings: composeWarnings(
       belowPipetteMinimumVolume,
-      mixTipPositionInTube
+      mixTipPositionInTube,
+      incompatibleLiquidClass
     ),
   },
   pause: {
@@ -233,7 +235,8 @@ const stepFormHelperMap: {
       minDisposalVolume,
       minAspirateAirGapVolume,
       minDispenseAirGapVolume,
-      tipPositionInTube
+      tipPositionInTube,
+      incompatibleLiquidClass
     ),
   },
   magnet: {

protocol-designer/src/steplist/formLevel/test/warnings.test.ts

@@ -1,19 +1,32 @@
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { fixture24Tuberack, fixture96Plate } from '@opentrons/shared-data'
+import {
+  fixture24Tuberack,
+  fixture96Plate,
+  getAllLiquidClassDefs,
+} from '@opentrons/shared-data'
 
 import {
   _minAirGapVolume,
   belowPipetteMinimumVolume,
+  incompatibleLiquidClass,
   maxDispenseWellVolume,
   minDisposalVolume,
   mixTipPositionInTube,
   tipPositionInTube,
 } from '../warnings'
 
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareDefinition2, LiquidClass } from '@opentrons/shared-data'
 import type { LabwareEntity } from '@opentrons/step-generation'
 
+vi.mock('@opentrons/shared-data', async () => {
+  const actual = await vi.importActual('@opentrons/shared-data')
+  return {
+    ...actual,
+    getAllLiquidClassDefs: vi.fn(),
+  }
+})
+
 type CheckboxFields = 'aspirate_airGap_checkbox' | 'dispense_airGap_checkbox'
 type VolumeFields = 'aspirate_airGap_volume' | 'dispense_airGap_volume'
 describe('Min air gap volume', () => {
@@ -338,3 +351,105 @@ describe('Max dispense well volume', () => {
     })
   })
 })
+
+const MOCK_GLYCEROL = {
+  liquidClassName: 'glycerol50V1',
+  byPipette: [
+    {
+      pipetteModel: 'flex_1channel_1000',
+      byTipType: [
+        {
+          tiprack: 'opentrons/opentrons_flex_96_tiprack_1000ul/1',
+          aspirate: {},
+          singleDispense: {},
+          multiDispense: {},
+        },
+      ],
+    },
+  ],
+} as LiquidClass
+const MOCK_WATER = {
+  liquidClassName: 'waterV1',
+  byPipette: [
+    {
+      pipetteModel: 'flex_1channel_1000',
+      byTipType: [
+        {
+          tiprack: 'opentrons/opentrons_flex_96_tiprack_1000ul/1',
+          aspirate: {},
+          singleDispense: {},
+          multiDispense: {},
+        },
+      ],
+    },
+  ],
+} as LiquidClass
+describe('class compatibility', () => {
+  let fields: any
+  beforeEach(() => {
+    fields = {
+      pipette: {
+        spec: { channels: 1, liquids: { default: { maxVolume: 1000 } } },
+      },
+      tipRack: 'opentrons/opentrons_flex_96_tiprack_1000ul/1',
+      liquidClass: 'glycerol_50',
+      path: 'singleDispense',
+    }
+    vi.mocked(getAllLiquidClassDefs).mockReturnValue({
+      glycerol_50: MOCK_GLYCEROL,
+      water: MOCK_WATER,
+    })
+  })
+
+  it('should return null if the liquid class is compatible with the pipette, tips, volume, and path', () => {
+    expect(incompatibleLiquidClass(fields)).toBe(null)
+  })
+  it('should return liquid classes incompatible with the pipette warning if pipette incompatible with all liquid classes', () => {
+    fields = {
+      ...fields,
+      pipette: {
+        spec: { channels: 2, liquids: { default: { maxVolume: 1000 } } },
+      },
+    }
+    expect(incompatibleLiquidClass(fields)?.type).toBe(
+      'INCOMPATIBLE_ALL_PIPETTE'
+    )
+  })
+  it('should return liquid classes incompatible with the pipette warning if pipette incompatible with some liquid classes', () => {
+    vi.mocked(getAllLiquidClassDefs).mockReturnValue({
+      water: MOCK_WATER,
+      glycerol_50: { ...MOCK_GLYCEROL, byPipette: [] },
+    })
+    expect(incompatibleLiquidClass(fields)?.type).toBe(
+      'INCOMPATIBLE_SOME_PIPETTE'
+    )
+  })
+  it('should return liquid classes incompatible with the pipette warning if tiprack incompatible with all liquid classes', () => {
+    fields = {
+      ...fields,
+      tipRack: 'badTiprack',
+    }
+    expect(incompatibleLiquidClass(fields)?.type).toBe(
+      'INCOMPATIBLE_TIP_RACK_ALL'
+    )
+  })
+  it('should return liquid classes incompatible with the pipette warning if tiprack incompatible with some liquid classes', () => {
+    vi.mocked(getAllLiquidClassDefs).mockReturnValue({
+      water: MOCK_WATER,
+      glycerol_50: {
+        ...MOCK_GLYCEROL,
+        byPipette: [{ pipetteModel: 'flex_1channel_1000', byTipType: [] }],
+      },
+    })
+    expect(incompatibleLiquidClass(fields)?.type).toBe(
+      'INCOMPATIBLE_TIP_RACK_SOME'
+    )
+  })
+  it('should return liquid classes incompatible with the pipette warning if pipette incompatible with all liquid classes', () => {
+    fields = {
+      ...fields,
+      volume: 0.01,
+    }
+    expect(incompatibleLiquidClass(fields)?.type).toBe('LOW_VOLUME_TRANSFER')
+  })
+})