-
Notifications
You must be signed in to change notification settings - Fork 175
/
AnnotatedSteps.tsx
110 lines (105 loc) · 2.88 KB
/
AnnotatedSteps.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import * as React from 'react'
import { css } from 'styled-components'
import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
import {
ALIGN_CENTER,
BORDERS,
COLORS,
DIRECTION_COLUMN,
Flex,
SPACING,
LegacyStyledText,
TYPOGRAPHY,
OVERFLOW_AUTO,
} from '@opentrons/components'
import { CommandIcon, CommandText } from '../../molecules/Command'
import type {
CompletedProtocolAnalysis,
ProtocolAnalysisOutput,
RunTimeCommand,
} from '@opentrons/shared-data'
interface AnnotatedStepsProps {
analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
currentCommandIndex?: number
}
export function AnnotatedSteps(props: AnnotatedStepsProps): JSX.Element {
const { analysis, currentCommandIndex } = props
const HIDE_SCROLLBAR = css`
::-webkit-scrollbar {
display: none;
}
`
return (
<Flex
css={HIDE_SCROLLBAR}
flexDirection={DIRECTION_COLUMN}
maxHeight="82vh"
flex="1 1 0"
overflowY={OVERFLOW_AUTO}
>
<Flex
flexDirection={DIRECTION_COLUMN}
marginY={SPACING.spacing16}
gridGap={SPACING.spacing4}
>
{analysis.commands.map((c, i) => (
<IndividualCommand
key={i}
stepNumber={(i + 1).toString()}
command={c}
isHighlighted={i === currentCommandIndex}
analysis={analysis}
/>
))}
</Flex>
</Flex>
)
}
interface IndividualCommandProps {
command: RunTimeCommand
analysis: ProtocolAnalysisOutput | CompletedProtocolAnalysis
stepNumber: string
isHighlighted: boolean
}
function IndividualCommand(props: IndividualCommandProps): JSX.Element {
const { command, analysis, stepNumber, isHighlighted } = props
const backgroundColor = isHighlighted ? COLORS.blue30 : COLORS.grey20
const iconColor = isHighlighted ? COLORS.blue60 : COLORS.grey50
return (
<Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
<LegacyStyledText
minWidth={SPACING.spacing16}
fontSize={TYPOGRAPHY.fontSizeCaption}
>
{stepNumber}
</LegacyStyledText>
<Flex
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing4}
width="100%"
backgroundColor={backgroundColor}
color={COLORS.black90}
borderRadius={BORDERS.borderRadius4}
padding={SPACING.spacing8}
css={css`
transition: background-color 500ms ease-out,
border-color 500ms ease-out;
`}
>
<Flex
key={command.id}
alignItems={ALIGN_CENTER}
gridGap={SPACING.spacing8}
>
<CommandIcon command={command} color={iconColor} />
<CommandText
command={command}
robotType={analysis?.robotType ?? FLEX_ROBOT_TYPE}
color={COLORS.black90}
commandTextData={analysis}
/>
</Flex>
</Flex>
</Flex>
)
}