Skip to content

Commit

Permalink
feat:(app) Add desktop support for Error Recovery drop tip flows (#15758
Browse files Browse the repository at this point in the history 
)

Closes EXEC-554
  • Loading branch information
@mjhuff
mjhuff authored Jul 23, 2024
1 parent 9319ae4 commit a2af480
Show file tree
Hide file tree
Showing 14 changed files with 288 additions and 208 deletions.
8 changes: 5 additions & 3 deletions app/src/assets/localization/en/drop_tip_wizard.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
"exit_screen_title": "Exit before completing drop tip?",
"getting_ready": "Getting ready…",
"go_back": "go back",
"jog_too_far": "Jog too far?",
"start_over": "Start over",
"move_to_slot": "move to slot",
"no_proceed_to_drop_tip": "No, proceed to tip removal",
"position_and_blowout": "Ensure that the pipette tip is centered above and level with where you want the liquid to be blown out. If it isn't, use the controls below or your keyboard to jog the pipette until it is properly aligned.",
Expand All @@ -25,9 +27,9 @@
"remove_the_tips_from_pipette": "You may want to remove the tips from the pipette before using it again in a protocol.",
"remove_the_tips_manually": "Remove the tips manually. Then home the gantry. Homing with tips attached could pull liquid into the pipette and damage it.",
"remove_tips": "Remove tips",
"select_blowout_slot": "<block>You can blow out liquid into a labware.</block><block>Select the slot where you want to blow out the liquid on the deck map to the right. Once confirmed, the gantry will move to the chosen slot.</block>",
"select_blowout_slot_odd": "<block>You can blow out liquid into a labware.</block><br/><block>After the gantry moves to the chosen slot, use the jog controls to move the pipette to the exact position for blowing out.</block>",
"select_drop_tip_slot": "<block>You can return tips to a tip rack or dispose of them.</block><block>Select the slot where you want to drop the tips on the deck map to the right. Once confirmed, the gantry will move to the chosen slot.</block>",
"select_blowout_slot": "<block>Blowing out into a labware helps remove all liquid from the tip.</block><br/><block>Select the slot where you want to blow out the liquid on the deck map to the right. Once confirmed, the gantry will move to the chosen slot.</block>",
"select_blowout_slot_odd": "<block>Blowing out into a labware helps remove all liquid from the tip.</block><br/><block>After the gantry moves to the chosen slot, use the jog controls to move the pipette to the exact position for blowing out.</block>",
"select_drop_tip_slot": "<block>You can return tips to a tip rack or dispose of them.</block><br/><block>Select the slot where you want to drop the tips on the deck map to the right. Once confirmed, the gantry will move to the chosen slot.</block>",
"select_drop_tip_slot_odd": "<block>You can return tips to a tip rack or dispose of them.</block><br/><block>After the gantry moves to the chosen slot, use the jog controls to move the pipette to the exact position for dropping tips.</block>",
"skip": "Skip",
"stand_back_blowing_out": "Stand back, robot is blowing out liquid",
Expand Down
4 changes: 2 additions & 2 deletions app/src/assets/localization/en/error_recovery.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
"robot_will_retry_with_tips": "The robot will retry the failed step with new tips.",
"run_paused": "Run paused",
"select_tip_pickup_location": "Select tip pick-up location",
"skip": "Skip",
"skip_removal": "Skip removal",
"skip_to_next_step": "Skip to next step",
"skip_to_next_step_new_tips": "Skip to next step with new tips",
"skip_to_next_step_same_tips": "Skip to next step with same tips",
Expand All @@ -73,5 +73,5 @@
"view_error_details": "View error details",
"view_recovery_options": "View recovery options",
"you_can_still_drop_tips": "You can still drop the attached tips before proceeding to tip selection.",
"you_may_want_to_remove": "You may want to remove the tips from the {{mount}} pipette before using it again in a protocol"
"remove_tips_from_pipette": "Remove tips from {{mount}} pipette before canceling the run?"
}
2 changes: 1 addition & 1 deletion app/src/molecules/InProgressModal/InProgressModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const MODAL_STYLE = css`
}
`
const SPINNER_STYLE = css`
color: ${COLORS.grey50};
color: ${COLORS.grey60};
opacity: 100%;
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
color: ${COLORS.black90};
Expand Down
4 changes: 2 additions & 2 deletions app/src/molecules/SimpleWizardBody/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,8 @@ export function SimpleWizardBody(props: Props): JSX.Element {
<>
{isSuccess ? (
<img
width={robotType === FLEX_ROBOT_TYPE ? '250px' : '160px'}
height={robotType === FLEX_ROBOT_TYPE ? '208px' : '120px'}
width={robotType === FLEX_ROBOT_TYPE ? '170px' : '160px'}
height={robotType === FLEX_ROBOT_TYPE ? '141px' : '120px'}
src={SuccessIcon}
alt="Success Icon"
/>
Expand Down
103 changes: 59 additions & 44 deletions app/src/organisms/DropTipWizardFlows/BeforeBeginning.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
TYPOGRAPHY,
} from '@opentrons/components'

import { SmallButton, MediumButton } from '../../atoms/buttons'
import { SmallButton, MediumButton, TextOnlyButton } from '../../atoms/buttons'
import { DT_ROUTES } from './constants'

import blowoutVideo from '../../assets/videos/droptip-wizard/Blowout-Liquid.webm'
Expand Down Expand Up @@ -52,60 +52,59 @@ export const BeforeBeginning = ({
const buildTopText = (): string => {
if (issuedCommandsType === 'fixit') {
return fixitCommandTypeUtils?.copyOverrides
.tipDropCompleteBtnCopy as string
.beforeBeginningTopText as string
} else {
return t('before_you_begin_do_you_want_to_blowout')
}
}

if (isOnDevice) {
return (
<>
<Flex flexDirection={DIRECTION_COLUMN} height="100%">
<Flex css={ODD_TITLE_STYLE}>{buildTopText()}</Flex>
<Flex paddingBottom={SPACING.spacing8}>
<MediumButton
buttonType={flowType === 'blowout' ? 'primary' : 'secondary'}
flex="1"
onClick={() => {
setFlowType('blowout')
}}
buttonText={i18n.format(t('yes_blow_out_liquid'), 'capitalize')}
justifyContent={JUSTIFY_FLEX_START}
paddingLeft={SPACING.spacing24}
height="5.25rem"
/>
</Flex>
<Flex>
<MediumButton
buttonType={flowType === 'drop_tips' ? 'primary' : 'secondary'}
flex="1"
onClick={() => {
setFlowType('drop_tips')
}}
buttonText={i18n.format(
t('no_proceed_to_drop_tip'),
'capitalize'
)}
justifyContent={JUSTIFY_FLEX_START}
paddingLeft={SPACING.spacing24}
height="5.25rem"
/>
</Flex>
<Flex justifyContent={JUSTIFY_FLEX_END} marginTop="auto">
<SmallButton
buttonText={i18n.format(t('shared:continue'), 'capitalize')}
onClick={handleProceed}
disabled={flowType == null}
/>
</Flex>
<Flex
flexDirection={DIRECTION_COLUMN}
height="100%"
padding={issuedCommandsType === 'fixit' ? SPACING.spacing32 : null}
>
<Flex css={ODD_TITLE_STYLE}>{buildTopText()}</Flex>
<Flex paddingBottom={SPACING.spacing8}>
<MediumButton
buttonType={flowType === 'blowout' ? 'primary' : 'secondary'}
flex="1"
onClick={() => {
setFlowType('blowout')
}}
buttonText={i18n.format(t('yes_blow_out_liquid'), 'capitalize')}
justifyContent={JUSTIFY_FLEX_START}
paddingLeft={SPACING.spacing24}
height="5.25rem"
/>
</Flex>
</>
<Flex>
<MediumButton
buttonType={flowType === 'drop_tips' ? 'primary' : 'secondary'}
flex="1"
onClick={() => {
setFlowType('drop_tips')
}}
buttonText={i18n.format(t('no_proceed_to_drop_tip'), 'capitalize')}
justifyContent={JUSTIFY_FLEX_START}
paddingLeft={SPACING.spacing24}
height="5.25rem"
/>
</Flex>
<Flex justifyContent={JUSTIFY_FLEX_END} marginTop="auto">
<SmallButton
buttonText={i18n.format(t('shared:continue'), 'capitalize')}
onClick={handleProceed}
disabled={flowType == null}
/>
</Flex>
</Flex>
)
} else {
return (
<Flex css={TILE_CONTAINER_STYLE}>
<Title>{t('before_you_begin_do_you_want_to_blowout')}</Title>
<Title>{buildTopText()}</Title>
<Flex
justifyContent={JUSTIFY_SPACE_AROUND}
alignItems={ALIGN_CENTER}
Expand Down Expand Up @@ -163,8 +162,23 @@ export const BeforeBeginning = ({
</LegacyStyledText>
</Flex>
</Flex>
<Flex flexDirection={DIRECTION_ROW} justifyContent={JUSTIFY_FLEX_END}>
<Flex
flexDirection={DIRECTION_ROW}
justifyContent={
issuedCommandsType === 'fixit'
? JUSTIFY_SPACE_BETWEEN
: JUSTIFY_FLEX_END
}
>
{/* <NeedHelpLink href={NEED_HELP_URL} /> */}
{fixitCommandTypeUtils != null ? (
<TextOnlyButton
onClick={
fixitCommandTypeUtils.buttonOverrides.goBackBeforeBeginning
}
buttonText={t('shared:go_back')}
/>
) : null}
<PrimaryButton disabled={flowType == null} onClick={handleProceed}>
{i18n.format(t('shared:continue'), 'capitalize')}
</PrimaryButton>
Expand Down Expand Up @@ -242,6 +256,7 @@ const TILE_CONTAINER_STYLE = css`
flex-direction: ${DIRECTION_COLUMN};
justify-content: ${JUSTIFY_SPACE_BETWEEN};
padding: ${SPACING.spacing32};
height: 100%;
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
height: 29.5rem;
}
Expand Down
35 changes: 10 additions & 25 deletions app/src/organisms/DropTipWizardFlows/ChooseLocation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
ALIGN_CENTER,
ALIGN_FLEX_END,
Btn,
COLORS,
DIRECTION_COLUMN,
Flex,
JUSTIFY_SPACE_BETWEEN,
Expand All @@ -20,7 +19,7 @@ import {
} from '@opentrons/components'
import { getDeckDefFromRobotType } from '@opentrons/shared-data'

import { SmallButton } from '../../atoms/buttons'
import { SmallButton, TextOnlyButton } from '../../atoms/buttons'
import { TwoColumn, DeckMapContent } from '../../molecules/InterventionModal'

import type {
Expand Down Expand Up @@ -59,6 +58,7 @@ export const ChooseLocation = (
body,
robotType,
moveToAddressableArea,
issuedCommandsType,
} = props
const { i18n, t } = useTranslation(['drop_tip_wizard', 'shared'])
const [
Expand All @@ -79,7 +79,10 @@ export const ChooseLocation = (
}
}
return (
<Flex css={CONTAINER_STYLE}>
<Flex
css={CONTAINER_STYLE}
height={issuedCommandsType === 'fixit' ? '100%' : '24.625rem'}
>
<TwoColumn>
<Flex flexDirection={DIRECTION_COLUMN} flex="1" gap={SPACING.spacing16}>
<Title>{title}</Title>
Expand All @@ -102,9 +105,10 @@ export const ChooseLocation = (
handleGoBack()
}}
>
<LegacyStyledText css={GO_BACK_BUTTON_STYLE}>
{t('shared:go_back')}
</LegacyStyledText>
<TextOnlyButton
onClick={handleGoBack}
buttonText={t('shared:go_back')}
/>
</Btn>
<PrimaryButton
onClick={handleConfirmPosition}
Expand All @@ -130,24 +134,6 @@ export const ChooseLocation = (
)
}

const GO_BACK_BUTTON_STYLE = css`
${TYPOGRAPHY.pSemiBold};
color: ${COLORS.grey50};
&:hover {
opacity: 70%;
}
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
font-size: ${TYPOGRAPHY.fontSize22};
padding-left: 0;
&:hover {
opacity: 100%;
}
}
`

const ALIGN_BUTTONS = css`
align-items: ${ALIGN_FLEX_END};
Expand All @@ -160,7 +146,6 @@ const CONTAINER_STYLE = css`
flex-direction: ${DIRECTION_COLUMN};
justify-content: ${JUSTIFY_SPACE_BETWEEN};
padding: ${SPACING.spacing32};
height: 24.625rem;
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
justify-content: ${JUSTIFY_FLEX_START};
gap: ${SPACING.spacing32};
Expand Down
20 changes: 17 additions & 3 deletions app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ import * as React from 'react'
import { createPortal } from 'react-dom'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { css } from 'styled-components'

import {
BORDERS,
COLORS,
DIRECTION_COLUMN,
RESPONSIVENESS,
Flex,
JUSTIFY_FLEX_END,
JUSTIFY_SPACE_BETWEEN,
Expand Down Expand Up @@ -109,7 +111,8 @@ export function DropTipWizard(props: DropTipWizardProps): JSX.Element {
)
}

// TODO(jh, 06-07-24): All content views could use refactoring and DQA. Create shared components from designs. EXEC-520.
// TODO(jh, 06-07-24): All content views could use refactoring and DQA. Create shared components from designs.
// Convince design not to use SimpleWizardBody. EXEC-520.
export function DropTipWizardContainer(
props: DropTipWizardContainerProps
): JSX.Element {
Expand Down Expand Up @@ -218,7 +221,12 @@ export const DropTipWizardContent = (
}

function buildRobotInMotion(): JSX.Element {
return <InProgressModal description={t('stand_back_robot_in_motion')} />
return (
<>
{issuedCommandsType === 'fixit' ? <Flex /> : null}
<InProgressModal description={t('stand_back_robot_in_motion')} />
</>
)
}

function buildShowExitConfirmation(): JSX.Element {
Expand All @@ -244,7 +252,7 @@ export const DropTipWizardContent = (
header={errorDetails?.header ?? t('error_dropping_tips')}
subHeader={subHeader}
justifyContentForOddButton={JUSTIFY_FLEX_END}
marginTop={`-${SPACING.spacing68}`} // See EXEC-520. This clearly isn't ideal.
css={ERROR_MODAL_FIXIT_STYLE}
>
{button}
</SimpleWizardBody>
Expand Down Expand Up @@ -397,3 +405,9 @@ function useInitiateExit(): {

return { isExitInitiated, toggleExitInitiated }
}

const ERROR_MODAL_FIXIT_STYLE = css`
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
margin-top: -${SPACING.spacing68}; // See EXEC-520. This clearly isn't ideal.
}
`
Loading

0 comments on commit a2af480

Please sign in to comment.