From fbce3bb30afc36e7c2657bb55621dd778f2c8b96 Mon Sep 17 00:00:00 2001
From: Jethary <jethary@opentrons.com>
Date: Wed, 18 Dec 2024 09:09:34 -0500
Subject: [PATCH] fix(protocol-designer): highlight used wells when selected on
 step

closes AUTH-1190
---
 .../ProtocolSteps/Timeline/TerminalItemStep.tsx     |  2 +-
 .../src/top-selectors/substep-highlight.ts          | 13 ++++++++++---
 2 files changed, 11 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..8ce1d6fc770 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 {
@@ -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,6 +280,7 @@ export const wellHighlightsByLabwareId: Selector<
   getHoveredSubstep,
   fileDataSelectors.getSubsteps,
   stepFormSelectors.getOrderedStepIds,
+  getSelectedStepId,
   (
     robotStateTimeline,
     invariantContext,
@@ -282,10 +288,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