-
Notifications
You must be signed in to change notification settings - Fork 171
/
AttachTip.js
86 lines (75 loc) · 2.42 KB
/
AttachTip.js
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
// @flow
import * as React from 'react'
import type { CalibrateDeckStartedProps, CalibrationStep } from './types'
import { PrimaryButton, Link } from '@opentrons/components'
import styles from './styles.css'
export type AttachTipProps = {|
...CalibrateDeckStartedProps,
proceed: () => mixed,
|}
type Channels = 'single' | 'multi'
const DIAGRAMS: { [step: CalibrationStep]: { [Channels]: string } } = {
'1': {
single: require('./images/attach-tip-single@3x.png'),
multi: require('./images/attach-tip-multi@3x.png'),
},
'6': {
single: require('./images/detach-tip-single@3x.png'),
multi: require('./images/detach-tip-multi@3x.png'),
},
}
const PIPETTE_CALIBRATION_URL =
'https://support.opentrons.com/en/articles/2687641-get-started-calibrate-pipettes-and-labware'
export function AttachTip(props: AttachTipProps): React.Node {
const multi = props.pipette.channels === 8
const tipLocation = multi ? 'very first channel at front of' : ''
const diagramSrc = getDiagramSrc(props)
let instructions, buttonText
if (props.calibrationStep === '1') {
instructions = (
<span>
<p>
Place an Opentrons tip on the {tipLocation} pipette before continuing.
</p>
<p>Confirm tip is attached to start calibration.</p>
</span>
)
buttonText = 'confirm tip attached'
} else {
instructions = (
<span>
<p>Remove the Opentrons tip from the pipette.</p>
<p>
In order to effectively use this new deck calibration, please
calibrate your pipette prior to running your next protocol.
</p>
<p>
Learn more about pipette calibration
<Link href={PIPETTE_CALIBRATION_URL} external>
here
</Link>
</p>
</span>
)
buttonText = 'save deck calibration and exit'
}
return (
<div className={styles.attach_tip_contents}>
<div className={styles.attach_tip_instructions}>
{instructions}
<PrimaryButton title={buttonText} onClick={props.proceed}>
{buttonText}
</PrimaryButton>
</div>
<div className={styles.attach_tip_diagram}>
<img src={diagramSrc} />
</div>
</div>
)
}
function getDiagramSrc(props: AttachTipProps): string {
const { calibrationStep, pipette } = props
const channelsKey = pipette.channels === 8 ? 'multi' : 'single'
return DIAGRAMS[calibrationStep][channelsKey]
}