fix(app): fix WellSelection over-render

Opentrons · Oct 10, 2024 · fa0702f · fa0702f
1 parent eeb8972
commit fa0702f
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 32 deletions.
diff --git a/app/src/organisms/ErrorRecoveryFlows/__fixtures__/index.ts b/app/src/organisms/ErrorRecoveryFlows/__fixtures__/index.ts
@@ -72,7 +72,10 @@ export const mockRecoveryContentProps: RecoveryContentProps = {
   recoveryCommands: {} as any,
   tipStatusUtils: {} as any,
   currentRecoveryOptionUtils: {} as any,
-  failedLabwareUtils: { pickUpTipLabware: mockPickUpTipLabware } as any,
+  failedLabwareUtils: {
+    pickUpTipLabware: mockPickUpTipLabware,
+    selectedTipLocation: { A1: null },
+  } as any,
   failedPipetteInfo: {} as any,
   deckMapUtils: { setSelectedLocation: () => {} } as any,
   stepCounts: {} as any,

diff --git a/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryCommands.test.ts b/app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useRecoveryCommands.test.ts
@@ -27,7 +27,7 @@ describe('useRecoveryCommands', () => {
   } as any
   const mockRunId = '123'
   const mockFailedLabwareUtils = {
-    selectedTipLocations: { A1: null },
+    selectedTipLocation: { A1: null },
     pickUpTipLabware: { id: 'MOCK_LW_ID' },
   } as any
   const mockProceedToRouteAndStep = vi.fn()
@@ -223,7 +223,7 @@ describe('useRecoveryCommands', () => {
     } as any
 
     const buildPickUpTipsCmd = buildPickUpTips(
-      mockFailedLabwareUtils.selectedTipLocations,
+      mockFailedLabwareUtils.selectedTipLocation,
       mockFailedCmdWithPipetteId,
       mockFailedLabware
     )

diff --git a/app/src/organisms/ErrorRecoveryFlows/hooks/useFailedLabwareUtils.ts b/app/src/organisms/ErrorRecoveryFlows/hooks/useFailedLabwareUtils.ts
@@ -170,7 +170,7 @@ function getRelevantPickUpTipCommand(
 
 interface UseTipSelectionUtilsResult {
   /* Always returns null if the relevant labware is not relevant to tip pick up. */
-  selectedTipLocations: WellGroup | null
+  selectedTipLocation: WellGroup | null
   tipSelectorDef: LabwareDefinition2
   selectTips: (tipGroup: WellGroup) => void
   deselectTips: (locations: string[]) => void
@@ -220,7 +220,7 @@ function useTipSelectionUtils(
     selectedLocs != null && Object.keys(selectedLocs).length > 0
 
   return {
-    selectedTipLocations: selectedLocs,
+    selectedTipLocation: selectedLocs,
     tipSelectorDef,
     selectTips,
     deselectTips,

diff --git a/app/src/organisms/ErrorRecoveryFlows/hooks/useRecoveryCommands.ts b/app/src/organisms/ErrorRecoveryFlows/hooks/useRecoveryCommands.ts
@@ -162,10 +162,10 @@ export function useRecoveryCommands({
 
   // Pick up the user-selected tips
   const pickUpTips = useCallback((): Promise<CommandData[]> => {
-    const { selectedTipLocations, failedLabware } = failedLabwareUtils
+    const { selectedTipLocation, failedLabware } = failedLabwareUtils
 
     const pickUpTipCmd = buildPickUpTips(
-      selectedTipLocations,
+      selectedTipLocation,
       failedCommandByRunRecord,
       failedLabware
     )

diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/TipSelection.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/TipSelection.tsx
@@ -12,7 +12,7 @@ export function TipSelection(props: TipSelectionProps): JSX.Element {
 
   const {
     tipSelectorDef,
-    selectedTipLocations,
+    selectedTipLocation,
     selectTips,
     deselectTips,
   } = failedLabwareUtils
@@ -33,7 +33,7 @@ export function TipSelection(props: TipSelectionProps): JSX.Element {
     <WellSelection
       definition={tipSelectorDef}
       deselectWells={onDeselectTips}
-      selectedPrimaryWells={selectedTipLocations as WellGroup}
+      selectedPrimaryWell={Object.keys(selectedTipLocation as WellGroup)[0]}
       selectWells={onSelectTips}
       channels={failedPipetteInfo?.data.channels ?? 1}
     />

diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelection.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TipSelection.test.tsx
@@ -35,7 +35,7 @@ describe('TipSelection', () => {
     expect(vi.mocked(WellSelection)).toHaveBeenCalledWith(
       expect.objectContaining({
         definition: props.failedLabwareUtils.tipSelectorDef,
-        selectedPrimaryWells: props.failedLabwareUtils.selectedTipLocations,
+        selectedPrimaryWell: 'A1',
         channels: props.failedPipetteInfo?.data.channels ?? 1,
       }),
       {}

diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectDestWells.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectDestWells.tsx
@@ -189,7 +189,7 @@ export function SelectDestWells(props: SelectDestWellsProps): JSX.Element {
                   )
                 )
               }}
-              selectedPrimaryWells={selectedWells}
+              selectedPrimaryWell={Object.keys(selectedWells)[0]}
               selectWells={wellGroup => {
                 if (Object.keys(wellGroup).length > 0) {
                   setIsNumberWellsSelectedError(false)

diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectSourceWells.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectSourceWells.tsx
@@ -117,7 +117,7 @@ export function SelectSourceWells(props: SelectSourceWellsProps): JSX.Element {
                   )
                 )
               }}
-              selectedPrimaryWells={selectedWells}
+              selectedPrimaryWell={Object.keys(selectedWells)[0]}
               selectWells={wellGroup => {
                 setSelectedWells(prevWells => ({ ...prevWells, ...wellGroup }))
               }}

diff --git a/app/src/organisms/WellSelection/index.tsx b/app/src/organisms/WellSelection/index.tsx
@@ -20,7 +20,9 @@ import type { GenericRect } from './types'
 interface WellSelectionProps {
   definition: LabwareDefinition2
   deselectWells: (wells: string[]) => void
-  selectedPrimaryWells: WellGroup
+  /* A well from which to derive the well set.
+   * If utilizing this component specifically in the context of a command, this should be the 'wellName'. */
+  selectedPrimaryWell: string
   selectWells: (wellGroup: WellGroup) => unknown
   channels: PipetteChannels
 }
@@ -29,7 +31,7 @@ export function WellSelection(props: WellSelectionProps): JSX.Element {
   const {
     definition,
     deselectWells,
-    selectedPrimaryWells,
+    selectedPrimaryWell,
     selectWells,
     channels,
   } = props
@@ -50,7 +52,9 @@ export function WellSelection(props: WellSelectionProps): JSX.Element {
             wellName,
             channels,
           })
-          if (!wellSet) return acc
+          if (!wellSet) {
+            return acc
+          }
           return { ...acc, [wellSet[0]]: null }
         },
         {}
@@ -100,23 +104,22 @@ export function WellSelection(props: WellSelectionProps): JSX.Element {
     setHighlightedWells({})
   }
 
-  // For rendering, show all wells not just primary wells
-  const allSelectedWells =
-    channels === 8 || channels === 96
-      ? reduce<WellGroup, WellGroup>(
-          selectedPrimaryWells,
-          (acc, _, wellName): WellGroup => {
-            const wellSet = getWellSetForMultichannel({
-              labwareDef: definition,
-              wellName,
-              channels,
-            })
-            if (!wellSet) return acc
-            return { ...acc, ...arrayToWellGroup(wellSet) }
-          },
-          {}
-        )
-      : selectedPrimaryWells
+  // For rendering, show all valid wells, not just primary wells
+  const buildAllSelectedWells = (): WellGroup => {
+    if (channels === 8 || channels === 96) {
+      const wellSet = getWellSetForMultichannel({
+        labwareDef: definition,
+        wellName: selectedPrimaryWell,
+        channels,
+      })
+
+      return wellSet != null ? arrayToWellGroup(wellSet) : {}
+    } else {
+      return { [selectedPrimaryWell]: null }
+    }
+  }
+
+  const allSelectedWells = buildAllSelectedWells()
 
   const wellFill: WellFill = {}
   const wellStroke: WellStroke = {}