Skip to content

Commit 81736b0

Browse files
jeraderjerader
committed
fix(protocol-designer): remove flickering in timeline and fix distribute details
closes RQA-3630 RQA-3624
1 parent 71b21ae commit 81736b0

File tree

6 files changed

+45
-38
lines changed

6 files changed

+45
-38
lines changed

‎protocol-designer/src/assets/localization/en/protocol_steps.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"duplicate": "Duplicate step",
2828
"edit_step": "Edit step",
2929
"engage_height": "Engage height",
30-
"final_deck_state": "Final deck state",
30+
"final_deck_state": "Ending deck",
3131
"flow_type_title": "{{type}} flow rate",
3232
"from": "from",
3333
"heater_shaker": {
@@ -104,7 +104,7 @@
104104
"shake": "Shake",
105105
"single": "Single path",
106106
"speed": "Speed",
107-
"starting_deck_state": "Starting deck state",
107+
"starting_deck_state": "Starting deck",
108108
"step_substeps": "{{stepType}} details",
109109
"temperature": "Temperature",
110110
"temperature_module": {

‎protocol-designer/src/assets/localization/en/starting_deck_state.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
2+
"__end__": "Ending deck",
3+
"__initial_setup__": "Starting deck",
4+
"__presaved_step__": "Unsaved step",
25
"adapter_compatible_lab": "Adapter compatible labware",
36
"adapter": "Adapters",
47
"add_fixture": "Add a fixture",

‎protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,6 @@ interface StepSummaryProps {
7979
export function StepSummary(props: StepSummaryProps): JSX.Element | null {
8080
const { currentStep, stepDetails } = props
8181
const { t } = useTranslation(['protocol_steps', 'application'])
82-
8382
const labwareNicknamesById = useSelector(getLabwareNicknamesById)
8483
const additionalEquipmentEntities = useSelector(
8584
getAdditionalEquipmentEntities
@@ -91,7 +90,6 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
9190
return null
9291
}
9392
const { stepType } = currentStep
94-
9593
let stepSummaryContent: JSX.Element | null = null
9694
switch (stepType) {
9795
case 'mix':
@@ -405,7 +403,6 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
405403
default:
406404
stepSummaryContent = null
407405
}
408-
409406
return stepSummaryContent != null || stepDetails != null ? (
410407
<Flex
411408
flexDirection={DIRECTION_COLUMN}
@@ -414,7 +411,9 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
414411
>
415412
{stepSummaryContent != null ? (
416413
<ListItem type="noActive">
417-
<Flex padding={SPACING.spacing12}>{stepSummaryContent}</Flex>
414+
<Flex padding={SPACING.spacing12} height="4.75rem">
415+
{stepSummaryContent}
416+
</Flex>
418417
</ListItem>
419418
) : null}
420419
{stepDetails != null && stepDetails !== '' ? (

‎protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/Substep.tsx

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -132,24 +132,25 @@ function SubstepComponent(props: SubstepProps): JSX.Element {
132132
</ListItem>
133133
) : (
134134
<>
135-
<ListItem type="noActive">
136-
<Flex
137-
gridGap={SPACING.spacing4}
138-
padding={SPACING.spacing12}
139-
justifyContent={JUSTIFY_SPACE_BETWEEN}
140-
width="100%"
141-
alignItems={ALIGN_CENTER}
142-
>
143-
{ingredIds.length > 0 ? (
144-
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
145-
<LiquidIcon color={color} size="medium" />
135+
{source != null ? (
136+
<ListItem type="noActive">
137+
<Flex
138+
gridGap={SPACING.spacing4}
139+
padding={SPACING.spacing12}
140+
justifyContent={JUSTIFY_SPACE_BETWEEN}
141+
width="100%"
142+
alignItems={ALIGN_CENTER}
143+
>
144+
{ingredIds.length > 0 ? (
145+
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
146+
<LiquidIcon color={color} size="medium" />
147+
148+
<StyledText desktopStyle="bodyDefaultRegular">
149+
{ingredIds.map(groupId => ingredNames[groupId]).join(',')}
150+
</StyledText>
151+
</Flex>
152+
) : null}
146153

147-
<StyledText desktopStyle="bodyDefaultRegular">
148-
{ingredIds.map(groupId => ingredNames[groupId]).join(',')}
149-
</StyledText>
150-
</Flex>
151-
) : null}
152-
{source != null ? (
153154
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
154155
<StyledText desktopStyle="bodyDefaultRegular">
155156
{t('protocol_steps:aspirated')}
@@ -164,11 +165,11 @@ function SubstepComponent(props: SubstepProps): JSX.Element {
164165
})}
165166
/>
166167
</Flex>
167-
) : null}
168-
</Flex>
169-
</ListItem>
170-
<ListItem type="noActive">
171-
{dest !== undefined ? (
168+
</Flex>
169+
</ListItem>
170+
) : null}
171+
{dest != null ? (
172+
<ListItem type="noActive">
172173
<Flex
173174
gridGap={SPACING.spacing4}
174175
padding={SPACING.spacing12}
@@ -206,8 +207,8 @@ function SubstepComponent(props: SubstepProps): JSX.Element {
206207
</Flex>
207208
) : null}
208209
</Flex>
209-
) : null}
210-
</ListItem>
210+
</ListItem>
211+
) : null}
211212
</>
212213
)}
213214
</Flex>

‎protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
import {
1111
getSelectedStepId,
1212
getSelectedSubstep,
13+
getSelectedTerminalItemId,
1314
} from '../../../../ui/steps/selectors'
1415
import { getDesignerTab } from '../../../../file-data/selectors'
1516
import { getEnableHotKeysDisplay } from '../../../../feature-flags/selectors'
@@ -60,6 +61,7 @@ describe('ProtocolSteps', () => {
6061
vi.mocked(DeckSetupContainer).mockReturnValue(
6162
<div>mock DeckSetupContainer</div>
6263
)
64+
vi.mocked(getSelectedTerminalItemId).mockReturnValue(null)
6365
vi.mocked(OffDeck).mockReturnValue(<div>mock OffDeck</div>)
6466
vi.mocked(getUnsavedForm).mockReturnValue(null)
6567
vi.mocked(getSelectedSubstep).mockReturnValue(null)

‎protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
DIRECTION_COLUMN,
99
Flex,
1010
JUSTIFY_CENTER,
11-
JUSTIFY_FLEX_END,
1211
JUSTIFY_FLEX_START,
1312
JUSTIFY_SPACE_BETWEEN,
1413
POSITION_FIXED,
@@ -27,6 +26,7 @@ import {
2726
getSelectedSubstep,
2827
getSelectedStepId,
2928
getHoveredStepId,
29+
getSelectedTerminalItemId,
3030
} from '../../../ui/steps/selectors'
3131
import { DeckSetupContainer } from '../DeckSetup'
3232
import { OffDeck } from '../Offdeck'
@@ -42,6 +42,7 @@ const CONTENT_MAX_WIDTH = '46.9375rem'
4242
export function ProtocolSteps(): JSX.Element {
4343
const { i18n, t } = useTranslation('starting_deck_state')
4444
const formData = useSelector(getUnsavedForm)
45+
const selectedTerminalItem = useSelector(getSelectedTerminalItemId)
4546
const isMultiSelectMode = useSelector(getIsMultiSelectMode)
4647
const selectedSubstep = useSelector(getSelectedSubstep)
4748
const enableHoyKeyDisplay = useSelector(getEnableHotKeysDisplay)
@@ -89,14 +90,12 @@ export function ProtocolSteps(): JSX.Element {
8990
{tab === 'protocolSteps' ? (
9091
<TimelineAlerts justifyContent={JUSTIFY_CENTER} width="100%" />
9192
) : null}
92-
<Flex
93-
justifyContent={
94-
currentStep != null ? JUSTIFY_SPACE_BETWEEN : JUSTIFY_FLEX_END
95-
}
96-
>
97-
{currentStep != null ? (
93+
<Flex justifyContent={JUSTIFY_SPACE_BETWEEN}>
94+
{currentStep != null || selectedTerminalItem != null ? (
9895
<StyledText desktopStyle="headingSmallBold">
99-
{i18n.format(currentStep.stepName, 'capitalize')}
96+
{currentStep != null
97+
? i18n.format(currentStep.stepName, 'capitalize')
98+
: t(selectedTerminalItem)}
10099
</StyledText>
101100
) : null}
102101
<ToggleGroup
@@ -123,6 +122,9 @@ export function ProtocolSteps(): JSX.Element {
123122
stepDetails={stepDetails}
124123
/>
125124
) : null}
125+
{selectedTerminalItem != null && currentHoveredStepId == null ? (
126+
<Flex height="4.75rem" width="100%" />
127+
) : null}
126128
</Flex>
127129
</Flex>
128130
{enableHoyKeyDisplay ? (

0 commit comments

Comments
 (0)