fix(protocol-designer): add drag selection to manual tip selector modal (#21191)

# Overview

Use drag selection on manual tip selector modal. This is especially
helpful when you are using a single channel and eight channel pipettes
when you need to select multiple wells at once

## Test Plan and Hands on Testing

- smoke tested on 1ch, 96ch, and 8ch.
video of 1ch below. I did not include video for 96ch because there isn't
much drag selection you can do since it you are blocked from picking up
tips until the first group is selected.


[1ch_protocol.py](https://github.com/user-attachments/files/26468917/1ch_protocol.py)


https://github.com/user-attachments/assets/2c5ea014-d516-4d46-908f-45d05948f44c


https://github.com/user-attachments/assets/77e2b740-26ca-42eb-b045-30be3bd01304

## Changelog

- added `INTERACTIVE_WELL_DATA_ATTRIBUTE` to `UsedTip` and `NewTip` to
allow the selection rectangle to detect which tip it was selecting
- added handleSelectionMove - this adds tips selected by the rectangle
to a list of hoveredWells which changes the well appearance
- added handleSelectionDone- when the selection is complete it adds the
primary highlighted tip to the selected tips
- made hoveredWells a list instead of one string to handle the multi
hovering of the drag feature

## Review requests


## Risk assessment

- high, changes well selection mode 
closes RQA-5304

Author: rclarke0

components/src/hardware-sim/Labware/labwareInternals/Tips/NewTip.tsx

@@ -1,10 +1,19 @@
+import { INTERACTIVE_WELL_DATA_ATTRIBUTE } from '@opentrons/shared-data'
+
 import { COLORS } from '../../../../helix-design-system'
 import { DEFAULT_TIP_SIZE } from './constants'
 
-export function NewTip(props: { size?: string }): JSX.Element {
-  const { size } = props
+export function NewTip(props: {
+  wellName: string
+  size?: string
+}): JSX.Element {
+  const { size, wellName } = props
+  const commonProps = {
+    [INTERACTIVE_WELL_DATA_ATTRIBUTE]: wellName,
+  }
   const width = size ?? DEFAULT_TIP_SIZE
   const height = size ?? DEFAULT_TIP_SIZE
+
   return (
     <svg
       width={width}
@@ -13,7 +22,7 @@ export function NewTip(props: { size?: string }): JSX.Element {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="10" cy="10" r="10" fill={COLORS.blue35} />
+      <circle cx="10" cy="10" r="10" fill={COLORS.blue35} {...commonProps} />
       <circle cx="10" cy="10" r="5" stroke={COLORS.grey50} strokeWidth="2" />
     </svg>
   )

components/src/hardware-sim/Labware/labwareInternals/Tips/TipStatus.tsx

@@ -28,9 +28,9 @@ export function TipStatus(props: TipStatusProps): JSX.Element {
   const { type, size, text, wellMap, wellName } = props
   switch (type) {
     case NEW:
-      return <NewTip size={size} />
+      return <NewTip size={size} wellName={wellName} />
     case USED:
-      return <UsedTip size={size} />
+      return <UsedTip size={size} wellName={wellName} />
     case SELECTED:
       return (
         <SelectedWell

components/src/hardware-sim/Labware/labwareInternals/Tips/UsedTip.tsx

@@ -1,10 +1,18 @@
+import { INTERACTIVE_WELL_DATA_ATTRIBUTE } from '@opentrons/shared-data'
+
 import { COLORS } from '../../../../helix-design-system'
 import { DEFAULT_TIP_SIZE } from './constants'
 
-export function UsedTip(props: { size?: string }): JSX.Element {
-  const { size } = props
+export function UsedTip(props: {
+  wellName: string
+  size?: string
+}): JSX.Element {
+  const { size, wellName } = props
   const width = size ?? DEFAULT_TIP_SIZE
   const height = size ?? DEFAULT_TIP_SIZE
+  const commonProps = {
+    [INTERACTIVE_WELL_DATA_ATTRIBUTE]: wellName,
+  }
   return (
     <svg
       width={width}
@@ -13,7 +21,7 @@ export function UsedTip(props: { size?: string }): JSX.Element {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="10" cy="10" r="10" fill={COLORS.blue35} />
+      <circle cx="10" cy="10" r="10" fill={COLORS.blue35} {...commonProps} />
       <circle
         cx="10"
         cy="10"

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/TipSelectionWizard/SelectTips.tsx

@@ -30,9 +30,11 @@ import {
 import { EMPTY, getSlotInLocationStack } from '@opentrons/step-generation'
 
 import { LabwareOnDeck } from '/protocol-designer/components/organisms'
+import { SelectionRect } from '/protocol-designer/components/organisms/Labware/SelectionRect'
 import { getRobotType } from '/protocol-designer/file-data/selectors'
 import { getRobotStateAtActiveItem } from '/protocol-designer/top-selectors/labware-locations'
 import { getLabwareNicknamesById } from '/protocol-designer/ui/labware/selectors'
+import { getCollidingWells } from '/protocol-designer/utils/index'
 
 import { INACCESSIBLE_PARTIAL_TIP } from '../NozzleAndWellSelectionModal/constants'
 import { getEntireWellSelection } from '../NozzleAndWellSelectionModal/utils'
@@ -61,14 +63,13 @@ import type {
   PipetteV2Specs,
   PrimaryNozzleConfigurationStyle,
 } from '@opentrons/shared-data'
+import type { GenericRect } from '/protocol-designer/collision-types'
 import type {
   AccessibilityStatus,
   InaccessibleReason,
   TipSelectionBaseProps,
 } from './types'
 
-const NINETY_SIX_ALL_TARGET_WELL = 'A1'
-
 export function SelectTips(
   props: TipSelectionBaseProps & {
     pipetteSpecs: PipetteV2Specs
@@ -84,9 +85,9 @@ export function SelectTips(
   const { t } = useTranslation('tip_selection')
   const labwareNicknamesById = useSelector(getLabwareNicknamesById)
   const robotType = useSelector(getRobotType)
-  const [hoveredWell, setHoveredWell] = useState<string | null>(null)
+  const [hoveredWells, setHoveredWells] = useState<string[] | null>(null)
   const leaveTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  const currentHoveredWellRef = useRef<string | null>(null)
+  const currentHoveredWellRef = useRef<string[] | null>(null)
 
   const {
     pipetteSpecs,
@@ -126,13 +127,7 @@ export function SelectTips(
       ? (tipAccessibilityStatus[selectedTiprackId] ?? {})
       : {}
 
-  const allWellsAffectedByHover = getEntireWellSelection(
-    hoveredWell,
-    labwareDef.ordering,
-    nozzles,
-    primaryNozzle,
-    channels
-  )
+  const allWellsAffectedByHover = hoveredWells ?? []
 
   const areAllHoveredWellsAccessibleAndOccupied = allWellsAffectedByHover.every(
     well =>
@@ -166,6 +161,22 @@ export function SelectTips(
   const numPickupsRemaining = numTotalPickups - selectedTips.length
   const hasPickupsRemaining = numPickupsRemaining > 0
 
+  const _getWellsFromRect: (rect: GenericRect) => string[][] = rect => {
+    const wellsInRect = getCollidingWells(rect)
+    const highlightedWells: string[][] = []
+    for (const well in wellsInRect) {
+      const wellSelection = getEntireWellSelection(
+        well,
+        labwareDef.ordering,
+        nozzles,
+        primaryNozzle,
+        channels
+      )
+      highlightedWells.push(wellSelection)
+    }
+    return highlightedWells
+  }
+
   const handleUnselectWell = (unselectIndex: number): void => {
     setSelectedTips(selectedTips.slice(0, unselectIndex))
   }
@@ -180,7 +191,6 @@ export function SelectTips(
       },
       {}
     )
-
     if (
       // always allow tip unselection
       !(wellName in prevSelectedTipsByIndex) &&
@@ -255,40 +265,91 @@ export function SelectTips(
 
   const handleHoverWell = (e: WellMouseEvent): void => {
     const { wellName } = e
-    let transformedWellName = wellName
-    if (
-      (channels === 8 && nozzles === ALL) ||
-      (channels === 96 && nozzles === COLUMN)
-    ) {
-      const column = wellName.slice(1, wellName.length)
-      transformedWellName = `A${column}`
-    } else if (channels === 96 && nozzles === ALL) {
-      transformedWellName = NINETY_SIX_ALL_TARGET_WELL
-    } else if (channels === 96 && nozzles === ROW) {
-      const rowName = wellName.slice(0, 1)
-      transformedWellName = `${rowName}1`
-    }
+    const allHoveredWells = getEntireWellSelection(
+      wellName,
+      labwareDef.ordering,
+      nozzles,
+      primaryNozzle,
+      channels
+    )
+
     if (leaveTimeoutRef.current) {
       clearTimeout(leaveTimeoutRef.current)
       leaveTimeoutRef.current = null
     }
-    setHoveredWell(transformedWellName)
-    currentHoveredWellRef.current = transformedWellName
+    setHoveredWells(allHoveredWells)
+    currentHoveredWellRef.current = allHoveredWells
   }
 
   const handleLeaveWell = (_: WellMouseEvent): void => {
     if (leaveTimeoutRef.current) {
       clearTimeout(leaveTimeoutRef.current)
     }
     leaveTimeoutRef.current = setTimeout(() => {
-      if (currentHoveredWellRef.current === hoveredWell) {
-        setHoveredWell(null)
-        currentHoveredWellRef.current = null
-      }
+      setHoveredWells(null)
+      currentHoveredWellRef.current = null
+
       leaveTimeoutRef.current = null
     }, 300)
   }
+  const selectedWellsByIndex = selectedTips.reduce<Record<string, number>>(
+    (acc, tipList, index) => {
+      const innerAcc = tipList.reduce<Record<string, number>>(
+        (acc, tip) => ({ ...acc, [tip]: index }),
+        {}
+      )
+      return { ...acc, ...innerAcc }
+    },
+    {}
+  )
+  const handleSelectionMove = (e: MouseEvent, rect: GenericRect): void => {
+    if (!e.shiftKey) {
+      const wellsUnderRect = _getWellsFromRect(rect)
+      const flat = [...new Set(wellsUnderRect.flat())]
+      setHoveredWells(flat)
+    }
+  }
+  const handleSelectionDone = (e: MouseEvent, rect: GenericRect): void => {
+    if (!e.shiftKey) {
+      const wellsUnderRect = _getWellsFromRect(rect)
+      const filteredWellsUnderRect = wellsUnderRect.filter(wellGroup =>
+        wellGroup.every(
+          wellName =>
+            tipAccessibileStatusByWellName[wellName].isAccessible &&
+            hasPickupsRemaining
+        )
+      )
+      setSelectedTips(prev => {
+        const next = [...prev]
+        const selectedFlat = new Set(prev.flat())
+        const allAlreadySelected = filteredWellsUnderRect.every(group =>
+          group.every(well => selectedFlat.has(well))
+        )
 
+        let updated: string[][]
+        // Remove all wells if the entire selection is already selected
+        if (allAlreadySelected) {
+          const keysToRemove = new Set(wellsUnderRect.map(g => g[0]))
+          updated = next.filter(group => !keysToRemove.has(group[0]))
+        } else {
+          // Add additional selected wells if there is a mixture of selected and unselected
+          updated = [...next]
+          wellsUnderRect.forEach(wellGroup => {
+            const primaryWellInGroup = wellGroup[0]
+            const exists = updated.some(
+              wellGroup => wellGroup[0] === primaryWellInGroup
+            )
+            // Add to update list if the well does not currently exist in the list and is accessible
+            if (!exists && selectedWellsByIndex[primaryWellInGroup] !== 1) {
+              updated.push(wellGroup)
+            }
+          })
+        }
+        return updated
+      })
+      setHoveredWells(null)
+    }
+  }
   let controls: JSX.Element = <></>
   const labware = activeDeckSetup.labware[selectedTiprackId ?? '']
   const slot = getSlotInLocationStack(labware.stack)
@@ -299,16 +360,7 @@ export function SelectTips(
     controls = <></>
   } else {
     const tipState = robotState?.tipState.tipracks[selectedTiprackId ?? '']
-    const selectedWellsByIndex = selectedTips.reduce<Record<string, number>>(
-      (acc, tipList, index) => {
-        const innerAcc = tipList.reduce<Record<string, number>>(
-          (acc, tip) => ({ ...acc, [tip]: index }),
-          {}
-        )
-        return { ...acc, ...innerAcc }
-      },
-      {}
-    )
+
     const is96Channel = channels === 96
     const tipStatusByWellName =
       tipState != null
@@ -363,20 +415,20 @@ export function SelectTips(
           borderStroke={COLORS.yellow40}
           ignoreMissingTips
         />
-        {hoveredWell != null ? (
+        {hoveredWells != null ? (
           <PipetteShadow
             robotType={robotType}
             pipetteSpec={pipetteSpecs}
             slotPosition={slotPosition}
-            hoveredWell={hoveredWell}
+            hoveredWell={hoveredWells[0]}
             selectedLabwareId={selectedTiprackId}
             labwareState={activeDeckSetup.labware}
             isHoveredWellSelected={selectedTips
               .flat()
-              .some(tip => tip === hoveredWell)}
+              .some(tip => tip === hoveredWells[0])}
             hasPickupsRemaining={hasPickupsRemaining}
             isAccessible={hoveredWellsInaccessibilityStatus == null}
-            inaccessibleReason={hoveredWellsInaccessibilityStatus}
+            inaccessibleReason={hoveredWellsInaccessibilityStatus ?? null}
             primaryNozzle={primaryNozzle}
             enclosingViewbox={viewBox}
             nozzles={nozzles}
@@ -404,12 +456,18 @@ export function SelectTips(
       </Flex>
       <div className={styles.modal_body_select_tips}>
         <div className={styles.select_tips_deck_container}>
-          <BaseDeckTipSelection
-            viewBox={viewBox}
-            showSlotLabels={false}
-            controls={controls}
-            labwareIdToHide={selectedTiprackId}
-          />
+          <SelectionRect
+            onSelectionMove={handleSelectionMove}
+            onSelectionDone={handleSelectionDone}
+            customWidth={45}
+          >
+            <BaseDeckTipSelection
+              viewBox={viewBox}
+              showSlotLabels={false}
+              controls={controls}
+              labwareIdToHide={selectedTiprackId}
+            />
+          </SelectionRect>
         </div>
         <div className={styles.legend_box}>
           <SelectionLegend selectionType={TIP} size={DEFAULT_TIP_SIZE} />