fix(protocol-designer): highlight used wells when selected on step

closes AUTH-1190
Opentrons · Dec 18, 2024 · fbce3bb · fbce3bb
1 parent c752197
commit fbce3bb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
@@ -1,4 +1,5 @@
 import { useSelector, useDispatch } from 'react-redux'
+import { useTranslation } from 'react-i18next'
 import { useConditionalConfirm } from '@opentrons/components'
 import {
   getHoveredTerminalItemId,
@@ -28,7 +29,6 @@ import type {
 } from '../../../../ui/steps'
 import type { TerminalItemId } from '../../../../steplist'
 import type { ThunkDispatch } from '../../../../types'
-import { useTranslation } from 'react-i18next'
 
 export interface TerminalItemStepProps {
   id: TerminalItemId

diff --git a/protocol-designer/src/top-selectors/substep-highlight.ts b/protocol-designer/src/top-selectors/substep-highlight.ts
@@ -4,7 +4,11 @@ import { ALL, COLUMN, getWellNamePerMultiTip } from '@opentrons/shared-data'
 import * as StepGeneration from '@opentrons/step-generation'
 import { selectors as stepFormSelectors } from '../step-forms'
 import { selectors as fileDataSelectors } from '../file-data'
-import { getHoveredStepId, getHoveredSubstep } from '../ui/steps'
+import {
+  getHoveredStepId,
+  getHoveredSubstep,
+  getSelectedStepId,
+} from '../ui/steps'
 import { getWellSetForMultichannel } from '../utils'
 import type { WellGroup } from '@opentrons/components'
 import type {
@@ -14,6 +18,7 @@ import type {
 import type { PipetteEntity, LabwareEntity } from '@opentrons/step-generation'
 import type { Selector } from '../types'
 import type { SubstepItemData } from '../steplist/types'
+import { getSelectedSubstep } from '../ui/steps/selectors'
 
 function _wellsForPipette(
   pipetteEntity: PipetteEntity,
@@ -275,17 +280,19 @@ export const wellHighlightsByLabwareId: Selector<
   getHoveredSubstep,
   fileDataSelectors.getSubsteps,
   stepFormSelectors.getOrderedStepIds,
+  getSelectedStepId,
   (
     robotStateTimeline,
     invariantContext,
     allStepArgsAndErrors,
     hoveredStepId,
     hoveredSubstep,
     substepsById,
-    orderedStepIds
+    orderedStepIds,
+    selectedStepId
   ) => {
     const timeline = robotStateTimeline.timeline
-    const stepId = hoveredStepId
+    const stepId = hoveredStepId || selectedStepId
     const timelineIndex = orderedStepIds.findIndex(i => i === stepId)
     const frame = timeline[timelineIndex]
     const robotState = frame && frame.robotState