feat(protocol-designer): sort move labware source and destination by slot (#20078)

Sort the move labware step dropdown options (for both move target and
destination) by slot, according to order in
`FLEX_SINGLE_SLOT_ADDRESSABLE_AREAS` or
`OT2_SINGLE_SLOT_ADDRESSABLE_AREAS` depending on robot type.

Author: ncdiehl11

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/LabwareLocationField.tsx

@@ -10,6 +10,7 @@ import {
 import { getSlotInLocationStack } from '@opentrons/step-generation'
 
 import { DropdownStepFormField } from '/protocol-designer/components/molecules'
+import { getRobotType } from '/protocol-designer/file-data/selectors'
 import {
   getUnoccupiedStackOptions,
   TIPRACK_LID_LOADNAME,
@@ -25,6 +26,8 @@ import {
 } from '/protocol-designer/top-selectors/labware-locations'
 import { hoverSelection } from '/protocol-designer/ui/steps/actions/actions'
 
+import { getSortedAddressableArea } from './utils'
+
 import type { AddressableAreaName } from '@opentrons/shared-data'
 import type { Option } from '/protocol-designer/top-selectors/labware-locations'
 import type { FieldProps } from '../../types'
@@ -66,7 +69,7 @@ export function LabwareLocationField(
     deckSetupLabware[labware]?.def.parameters.loadName === TIPRACK_LID_LOADNAME
   const unoccupiedLabwareLocationsOptionsSelector =
     useSelector(getUnoccupiedLabwareLocationOptions) ?? []
-
+  const robotType = useSelector(getRobotType)
   // invalid offDeck move filter
   let unoccupiedLabwareLocationsOptions = [
     ...unoccupiedLabwareStackOptions,
@@ -109,11 +112,18 @@ export function LabwareLocationField(
         option => !allSlotNames.includes(option.value as AddressableAreaName)
       )
   }
-
+  const optionsSorted =
+    robotState != null
+      ? getSortedAddressableArea(
+          unoccupiedLabwareLocationsOptions,
+          robotState,
+          robotType
+        )
+      : unoccupiedLabwareLocationsOptions
   return (
     <DropdownStepFormField
       {...props}
-      options={unoccupiedLabwareLocationsOptions}
+      options={optionsSorted}
       errorToShow={props.errorToShow}
       width="100%"
       title={t('protocol_steps:new_location')}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/MoveLabwareField.tsx

@@ -1,10 +1,14 @@
 import { useTranslation } from 'react-i18next'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { DropdownStepFormField } from '/protocol-designer/components/molecules'
+import { getRobotType } from '/protocol-designer/file-data/selectors'
 import { useLabwareDropdownOptions } from '/protocol-designer/pages/Designer/utils'
+import { getRobotStateAtActiveItem } from '/protocol-designer/top-selectors/labware-locations'
 import { hoverSelection } from '/protocol-designer/ui/steps/actions/actions'
 
+import { getSortedAddressableArea } from './utils'
+
 import type { FieldProps } from '../../types'
 
 interface MoveLabwareFieldProps extends FieldProps {
@@ -13,12 +17,19 @@ interface MoveLabwareFieldProps extends FieldProps {
 export function MoveLabwareField(props: MoveLabwareFieldProps): JSX.Element {
   const { useGripper } = props
   const options = useLabwareDropdownOptions('moveLabware', useGripper)
+  const robotState = useSelector(getRobotStateAtActiveItem)
+  const robotType = useSelector(getRobotType)
   const dispatch = useDispatch()
   const { t } = useTranslation(['protocol_steps', 'application'])
+  const optionsSorted =
+    robotState != null
+      ? getSortedAddressableArea(options, robotState, robotType)
+      : options
+
   return (
     <DropdownStepFormField
       {...props}
-      options={options}
+      options={optionsSorted}
       title={t('select_labware')}
       width="100%"
       onEnter={(id: string) => {

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/utils.ts

@@ -0,0 +1,51 @@
+import {
+  ALL_FLEX_ADDRESSABLE_AREAS_SORTED,
+  FLEX_ROBOT_TYPE,
+  OT2_SINGLE_SLOT_ADDRESSABLE_AREAS,
+} from '@opentrons/shared-data'
+import { getSlotInLocationStack } from '@opentrons/step-generation'
+
+import type { DropdownOption } from '@opentrons/components'
+import type { AddressableAreaName, RobotType } from '@opentrons/shared-data'
+import type { TimelineFrame } from '@opentrons/step-generation'
+import type { Option } from '/protocol-designer/top-selectors/labware-locations'
+
+export const getSortedAddressableArea = (
+  options: Option[] | DropdownOption[],
+  robotState: TimelineFrame,
+  robotType: RobotType
+): Option[] | DropdownOption[] => {
+  const sortedAddressableAreasReference =
+    robotType === FLEX_ROBOT_TYPE
+      ? ALL_FLEX_ADDRESSABLE_AREAS_SORTED
+      : OT2_SINGLE_SLOT_ADDRESSABLE_AREAS
+  const { modules: modulesState, labware: labwareState } = robotState
+  return options.sort((a, b) => {
+    const getSlot = (value: string): string => {
+      if (modulesState?.[value]?.slot != null) {
+        return modulesState[value].slot
+      }
+      if (labwareState?.[value]?.stack != null) {
+        return getSlotInLocationStack(labwareState[value]?.stack)
+      }
+      // value is a slot or OFFDECK
+      return value
+    }
+    const slotA = getSlot(a.value) as AddressableAreaName
+    const slotB = getSlot(b.value) as AddressableAreaName
+    const indexA = sortedAddressableAreasReference.indexOf(slotA)
+    const indexB = sortedAddressableAreasReference.indexOf(slotB)
+
+    if (indexA === -1 && indexB === -1) {
+      return 0
+    }
+    if (indexA === -1) {
+      return 1
+    }
+    if (indexB === -1) {
+      return -1
+    }
+
+    return indexA - indexB
+  })
+}

shared-data/js/constants.ts

@@ -589,6 +589,25 @@ export const FLEX_STAGING_AREA_SLOT_ADDRESSABLE_AREAS: AddressableAreaName[] = [
   D4_ADDRESSABLE_AREA,
 ]
 
+export const ALL_FLEX_ADDRESSABLE_AREAS_SORTED: AddressableAreaName[] = [
+  A1_ADDRESSABLE_AREA,
+  A2_ADDRESSABLE_AREA,
+  A3_ADDRESSABLE_AREA,
+  A4_ADDRESSABLE_AREA,
+  B1_ADDRESSABLE_AREA,
+  B2_ADDRESSABLE_AREA,
+  B3_ADDRESSABLE_AREA,
+  B4_ADDRESSABLE_AREA,
+  C1_ADDRESSABLE_AREA,
+  C2_ADDRESSABLE_AREA,
+  C3_ADDRESSABLE_AREA,
+  C4_ADDRESSABLE_AREA,
+  D1_ADDRESSABLE_AREA,
+  D2_ADDRESSABLE_AREA,
+  D3_ADDRESSABLE_AREA,
+  D4_ADDRESSABLE_AREA,
+]
+
 export const MOVABLE_TRASH_ADDRESSABLE_AREAS: AddressableAreaName[] = [
   MOVABLE_TRASH_A1_ADDRESSABLE_AREA,
   MOVABLE_TRASH_A3_ADDRESSABLE_AREA,