From bc17aa4666eabc1736126c89bee1af161d5deae6 Mon Sep 17 00:00:00 2001
From: Jethary Alcid <66035149+jerader@users.noreply.github.com>
Date: Wed, 18 Dec 2024 10:16:00 -0500
Subject: [PATCH] fix(protocol-designer): highlight used wells when selected on
 step (#17136)

closes AUTH-1190
---
 .../ProtocolSteps/Timeline/TerminalItemStep.tsx      |  2 +-
 .../src/top-selectors/substep-highlight.ts           | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx
index 39fd70a9f78..ffb13d31a7d 100644
--- 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
index 049bd59e7df..8724f86a909 100644
--- 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 {
@@ -275,6 +279,7 @@ export const wellHighlightsByLabwareId: Selector<
   getHoveredSubstep,
   fileDataSelectors.getSubsteps,
   stepFormSelectors.getOrderedStepIds,
+  getSelectedStepId,
   (
     robotStateTimeline,
     invariantContext,
@@ -282,10 +287,11 @@ export const wellHighlightsByLabwareId: Selector<
     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