Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(protocol-designer): correct step count in create file wizard #13807

Merged
merged 4 commits into from
Oct 19, 2023
Merged

feat(protocol-designer): correct step count in create file wizard #13807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c376438
add logic to account for staging area tile
jerader Oct 18, 2023
7047091
feat(protocol-designer): correct step count in create file wizard
jerader Oct 18, 2023
19ae849
fix go back button
jerader Oct 18, 2023
2a71be9
add overflowY: auto
jerader Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions protocol-designer/src/components/modals/CreateFileWizard/ModulesAndOtherTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,10 +173,23 @@ export function ModulesAndOtherTile(props: WizardTileProps): JSX.Element {
if (!enableDeckModification || robotType === OT2_ROBOT_TYPE) {
if (values.pipettesByMount.left.pipetteName === 'p1000_96') {
goBack(4)
} else if (values.pipettesByMount.right.pipetteName === '') {
} else if (
values.pipettesByMount.right.pipetteName === '' &&
robotType === FLEX_ROBOT_TYPE
) {
goBack(3)
} else {
} else if (
values.pipettesByMount.right.pipetteName === '' &&
robotType === OT2_ROBOT_TYPE
) {
goBack(2)
} else if (
values.pipettesByMount.right.pipetteName !== '' &&
robotType === FLEX_ROBOT_TYPE
) {
goBack(2)
} else {
goBack()
Comment on lines +176 to +192
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this is very confusing, I am not sure how to clean it up. When the feature flag is removed the options will become clearer I think. So maybe we can keep as is for now and refactor when the ff is removed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the nest isn't deep (only 1 nest) so it would be okay.
When we can remove ff, we can remove this if statement, if (!enableDeckModification || robotType === OT2_ROBOT_TYPE) { right?

}
} else {
goBack()
Expand Down
7 changes: 6 additions & 1 deletion protocol-designer/src/components/modals/CreateFileWizard/PipetteTypeTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,12 @@ export function PipetteTypeTile(props: PipetteTypeTileProps): JSX.Element {

return (
<HandleEnter onEnter={proceed}>
<Flex flexDirection={DIRECTION_COLUMN} padding={SPACING.spacing32}>
<Flex
flexDirection={DIRECTION_COLUMN}
padding={SPACING.spacing32}
height="auto"
overflowY="auto"
>
<Flex
flexDirection={DIRECTION_COLUMN}
height="26rem"
Expand Down
10 changes: 5 additions & 5 deletions protocol-designer/src/components/modals/CreateFileWizard/__tests__/CreateFileWizard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,27 +116,27 @@ describe('CreateFileWizard', () => {
let next = getByRole('button', { name: 'Next' })
next.click()
// add protocol name
getByText('Step 1 / 7')
getByText('Step 1 / 6')
const inputField = getByLabelText('MetadataTile_protocolName')
fireEvent.change(inputField, { target: { value: 'mockName' } })
next = getByRole('button', { name: 'Next' })
next.click()
getByText('Step 2 / 7')
getByText('Step 2 / 6')
// select P20 Single-Channel GEN2
getByLabelText('EquipmentOption_flex_P20 Single-Channel GEN2').click()
next = getByRole('button', { name: 'Next' })
next.click()
getByText('Step 3 / 7')
getByText('Step 3 / 6')
// select 10uL tipracks
getByLabelText('EquipmentOption_flex_10uL tipracks').click()
next = getByRole('button', { name: 'Next' })
next.click()
getByText('Step 4 / 7')
getByText('Step 4 / 6')
// select none for 2nd pipette
getByLabelText('EquipmentOption_flex_None').click()
next = getByRole('button', { name: 'Next' })
next.click()
getByText('Step 7 / 7')
getByText('Step 6 / 6')
// no modules and continue
getByRole('button', { name: 'Review file details' }).click()
expect(mockCreateNewProtocol).toHaveBeenCalled()
Expand Down
47 changes: 41 additions & 6 deletions protocol-designer/src/components/modals/CreateFileWizard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,15 @@ const WIZARD_STEPS: WizardStep[] = [
'staging_area',
'modulesAndOther',
]
const WIZARD_STEPS_OT2: WizardStep[] = [
'robotType',
'metadata',
'first_pipette_type',
'first_pipette_tips',
'second_pipette_type',
'second_pipette_tips',
'modulesAndOther',
]

export function CreateFileWizard(): JSX.Element | null {
const { t } = useTranslation()
Expand All @@ -96,7 +105,10 @@ export function CreateFileWizard(): JSX.Element | null {
)
const enableDeckModification = useSelector(getEnableDeckModification)

const [currentStepIndex, setCurrentStepIndex] = React.useState(0)
const [currentStepIndex, setCurrentStepIndex] = React.useState<number>(0)
const [wizardSteps, setWizardSteps] = React.useState<WizardStep[]>(
WIZARD_STEPS
)

React.useEffect(() => {
// re-initialize wizard step count when modal is closed
Expand Down Expand Up @@ -270,18 +282,18 @@ export function CreateFileWizard(): JSX.Element | null {
<WizardHeader
title={t('modal.create_file_wizard.create_new_protocol')}
currentStep={currentStepIndex}
totalSteps={WIZARD_STEPS.length - 1}
totalSteps={wizardSteps.length - 1}
onExit={handleCancel}
/>
)
const currentWizardStep = WIZARD_STEPS[currentStepIndex]
const currentWizardStep = wizardSteps[currentStepIndex]
const goBack = (stepsBack: number = 1): void => {
if (currentStepIndex >= 0 + stepsBack) {
setCurrentStepIndex(currentStepIndex - stepsBack)
}
}
const proceed = (stepsForward: number = 1): void => {
if (currentStepIndex + stepsForward < WIZARD_STEPS.length) {
if (currentStepIndex + stepsForward < wizardSteps.length) {
setCurrentStepIndex(currentStepIndex + stepsForward)
}
}
Expand All @@ -293,6 +305,7 @@ export function CreateFileWizard(): JSX.Element | null {
createProtocolFile={createProtocolFile}
proceed={proceed}
goBack={goBack}
setWizardSteps={setWizardSteps}
/>
</ModalShell>
) : null
Expand Down Expand Up @@ -398,18 +411,40 @@ interface CreateFileFormProps {
createProtocolFile: (values: FormState) => void
goBack: () => void
proceed: () => void
setWizardSteps: React.Dispatch<React.SetStateAction<WizardStep[]>>
}

function CreateFileForm(props: CreateFileFormProps): JSX.Element {
const { currentWizardStep, createProtocolFile, proceed, goBack } = props
const {
currentWizardStep,
createProtocolFile,
proceed,
goBack,
setWizardSteps,
} = props

const handleProceedRobotType = (robotType: string): void => {
if (robotType === OT2_ROBOT_TYPE) {
setWizardSteps(WIZARD_STEPS_OT2)
} else {
setWizardSteps(WIZARD_STEPS)
}
}

const contentsByWizardStep: {
[wizardStep in WizardStep]: (
formikProps: FormikProps<FormState>
) => JSX.Element
} = {
robotType: (formikProps: FormikProps<FormState>) => (
<RobotTypeTile {...{ ...formikProps, proceed, goBack }} />
<RobotTypeTile
{...formikProps}
goBack={goBack}
proceed={() => {
handleProceedRobotType(formikProps.values.fields.robotType)
proceed()
}}
/>
),
metadata: (formikProps: FormikProps<FormState>) => (
<MetadataTile {...formikProps} proceed={proceed} goBack={goBack} />
Expand Down
19 changes: 9 additions & 10 deletions protocol-designer/src/components/modules/FlexSlotMap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,15 @@ export function FlexSlotMap(props: FlexSlotMapProps): JSX.Element {
viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
>
{deckDef.locations.orderedSlots.map(slotDef => (
<>
<DeckSlotLocation
slotName={slotDef.id}
deckDefinition={deckDef}
slotClipColor={COLORS.transparent}
slotBaseColor={COLORS.light1}
/>
</>
<DeckSlotLocation
key={slotDef.id}
slotName={slotDef.id}
deckDefinition={deckDef}
slotClipColor={COLORS.transparent}
slotBaseColor={COLORS.light1}
/>
))}
{selectedSlots.map(selectedSlot => {
{selectedSlots.map((selectedSlot, index) => {
const slot = deckDef.locations.orderedSlots.find(
slot => slot.id === selectedSlot
)
Expand Down Expand Up @@ -85,7 +84,7 @@ export function FlexSlotMap(props: FlexSlotMapProps): JSX.Element {

return (
<RobotCoordsForeignObject
key={`${selectedSlot}_${slot?.id}`}
key={`${selectedSlot}_${slot?.id}_${index}`}
width={xDimension}
height={yDimension}
x={x}
Expand Down