From c37643861d11ec58ee39406fc81154b98be5d8ff Mon Sep 17 00:00:00 2001 From: Jethary Date: Tue, 17 Oct 2023 20:07:14 -0400 Subject: [PATCH 1/4] add logic to account for staging area tile --- .../modals/CreateFileWizard/index.tsx | 122 ++++++++++++++++-- .../src/components/modules/FlexSlotMap.tsx | 18 ++- 2 files changed, 122 insertions(+), 18 deletions(-) diff --git a/protocol-designer/src/components/modals/CreateFileWizard/index.tsx b/protocol-designer/src/components/modals/CreateFileWizard/index.tsx index 68fed6cfee2..cd626891a0b 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/index.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/index.tsx @@ -86,6 +86,40 @@ const WIZARD_STEPS: WizardStep[] = [ 'staging_area', 'modulesAndOther', ] +// const WIZARD_STEPS_1_PIP: WizardStep[] = [ +// 'robotType', +// 'metadata', +// 'first_pipette_type', +// 'first_pipette_tips', +// 'second_pipette_type', +// 'staging_area', +// 'modulesAndOther', +// ] +// const WIZARD_STEPS_96_CHANNEL: WizardStep[] = [ +// 'robotType', +// 'metadata', +// 'first_pipette_type', +// 'first_pipette_tips', +// 'staging_area', +// 'modulesAndOther', +// ] +const WIZARD_STEPS_OT2: WizardStep[] = [ + 'robotType', + 'metadata', + 'first_pipette_type', + 'first_pipette_tips', + 'second_pipette_type', + 'second_pipette_tips', + 'modulesAndOther', +] +// const WIZARD_STEPS_OT2_1_PIP: WizardStep[] = [ +// 'robotType', +// 'metadata', +// 'first_pipette_type', +// 'first_pipette_tips', +// 'second_pipette_type', +// 'modulesAndOther', +// ] export function CreateFileWizard(): JSX.Element | null { const { t } = useTranslation() @@ -96,7 +130,10 @@ export function CreateFileWizard(): JSX.Element | null { ) const enableDeckModification = useSelector(getEnableDeckModification) - const [currentStepIndex, setCurrentStepIndex] = React.useState(0) + const [currentStepIndex, setCurrentStepIndex] = React.useState(0) + const [wizardSteps, setWizardSteps] = React.useState( + WIZARD_STEPS + ) React.useEffect(() => { // re-initialize wizard step count when modal is closed @@ -270,18 +307,18 @@ export function CreateFileWizard(): JSX.Element | null { ) - 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) } } @@ -293,6 +330,7 @@ export function CreateFileWizard(): JSX.Element | null { createProtocolFile={createProtocolFile} proceed={proceed} goBack={goBack} + setWizardSteps={setWizardSteps} /> ) : null @@ -398,10 +436,51 @@ interface CreateFileFormProps { createProtocolFile: (values: FormState) => void goBack: () => void proceed: () => void + setWizardSteps: React.Dispatch> } 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 handleProceed96Channel = ( + // has96Channel: boolean, + // robotType: string + // ): void => { + // if (has96Channel) { + // setWizardSteps(WIZARD_STEPS_96_CHANNEL) + // } else if (robotType === OT2_ROBOT_TYPE) { + // setWizardSteps(WIZARD_STEPS_OT2) + // } else { + // setWizardSteps(WIZARD_STEPS) + // } + // } + // const handleProceed2ndPipette = ( + // has2ndPip: boolean, + // robotType: string + // ): void => { + // if (robotType === OT2_ROBOT_TYPE && !has2ndPip) { + // setWizardSteps(WIZARD_STEPS_OT2_1_PIP) + // } else if (robotType === FLEX_ROBOT_TYPE && !has2ndPip) { + // setWizardSteps(WIZARD_STEPS_1_PIP) + // } else if (robotType === OT2_ROBOT_TYPE && has2ndPip) { + // setWizardSteps(WIZARD_STEPS_OT2) + // } else { + // setWizardSteps(WIZARD_STEPS) + // } + // } const contentsByWizardStep: { [wizardStep in WizardStep]: ( @@ -409,19 +488,46 @@ function CreateFileForm(props: CreateFileFormProps): JSX.Element { ) => JSX.Element } = { robotType: (formikProps: FormikProps) => ( - + { + handleProceedRobotType(formikProps.values.fields.robotType) + proceed() + }} + /> ), metadata: (formikProps: FormikProps) => ( ), first_pipette_type: (formikProps: FormikProps) => ( - + { + // handleProceed96Channel( + // formikProps.values.pipettesByMount.left.pipetteName === 'p1000_96', + // formikProps.values.fields.robotType + // ) + proceed() + }} + /> ), first_pipette_tips: (formikProps: FormikProps) => ( ), second_pipette_type: (formikProps: FormikProps) => ( - + { + // handleProceed2ndPipette( + // formikProps.values.pipettesByMount.right.pipetteName == null, + // formikProps.values.fields.robotType + // ) + proceed() + }} + /> ), second_pipette_tips: (formikProps: FormikProps) => ( diff --git a/protocol-designer/src/components/modules/FlexSlotMap.tsx b/protocol-designer/src/components/modules/FlexSlotMap.tsx index 90dc24e9ed3..9398905769e 100644 --- a/protocol-designer/src/components/modules/FlexSlotMap.tsx +++ b/protocol-designer/src/components/modules/FlexSlotMap.tsx @@ -45,16 +45,14 @@ 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 => ( - <> - - + ))} - {selectedSlots.map(selectedSlot => { + {selectedSlots.map((selectedSlot, index) => { const slot = deckDef.locations.orderedSlots.find( slot => slot.id === selectedSlot ) @@ -85,7 +83,7 @@ export function FlexSlotMap(props: FlexSlotMapProps): JSX.Element { return ( Date: Wed, 18 Oct 2023 10:01:22 -0400 Subject: [PATCH 2/4] feat(protocol-designer): correct step count in create file wizard closes RAUT-775 --- .../__tests__/CreateFileWizard.test.tsx | 10 +-- .../modals/CreateFileWizard/index.tsx | 75 +------------------ .../src/components/modules/FlexSlotMap.tsx | 1 + 3 files changed, 8 insertions(+), 78 deletions(-) diff --git a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/CreateFileWizard.test.tsx b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/CreateFileWizard.test.tsx index e50c9f19af6..6af56a4f5dd 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/CreateFileWizard.test.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/CreateFileWizard.test.tsx @@ -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() diff --git a/protocol-designer/src/components/modals/CreateFileWizard/index.tsx b/protocol-designer/src/components/modals/CreateFileWizard/index.tsx index cd626891a0b..59794108f6a 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/index.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/index.tsx @@ -86,23 +86,6 @@ const WIZARD_STEPS: WizardStep[] = [ 'staging_area', 'modulesAndOther', ] -// const WIZARD_STEPS_1_PIP: WizardStep[] = [ -// 'robotType', -// 'metadata', -// 'first_pipette_type', -// 'first_pipette_tips', -// 'second_pipette_type', -// 'staging_area', -// 'modulesAndOther', -// ] -// const WIZARD_STEPS_96_CHANNEL: WizardStep[] = [ -// 'robotType', -// 'metadata', -// 'first_pipette_type', -// 'first_pipette_tips', -// 'staging_area', -// 'modulesAndOther', -// ] const WIZARD_STEPS_OT2: WizardStep[] = [ 'robotType', 'metadata', @@ -112,14 +95,6 @@ const WIZARD_STEPS_OT2: WizardStep[] = [ 'second_pipette_tips', 'modulesAndOther', ] -// const WIZARD_STEPS_OT2_1_PIP: WizardStep[] = [ -// 'robotType', -// 'metadata', -// 'first_pipette_type', -// 'first_pipette_tips', -// 'second_pipette_type', -// 'modulesAndOther', -// ] export function CreateFileWizard(): JSX.Element | null { const { t } = useTranslation() @@ -455,32 +430,6 @@ function CreateFileForm(props: CreateFileFormProps): JSX.Element { setWizardSteps(WIZARD_STEPS) } } - // const handleProceed96Channel = ( - // has96Channel: boolean, - // robotType: string - // ): void => { - // if (has96Channel) { - // setWizardSteps(WIZARD_STEPS_96_CHANNEL) - // } else if (robotType === OT2_ROBOT_TYPE) { - // setWizardSteps(WIZARD_STEPS_OT2) - // } else { - // setWizardSteps(WIZARD_STEPS) - // } - // } - // const handleProceed2ndPipette = ( - // has2ndPip: boolean, - // robotType: string - // ): void => { - // if (robotType === OT2_ROBOT_TYPE && !has2ndPip) { - // setWizardSteps(WIZARD_STEPS_OT2_1_PIP) - // } else if (robotType === FLEX_ROBOT_TYPE && !has2ndPip) { - // setWizardSteps(WIZARD_STEPS_1_PIP) - // } else if (robotType === OT2_ROBOT_TYPE && has2ndPip) { - // setWizardSteps(WIZARD_STEPS_OT2) - // } else { - // setWizardSteps(WIZARD_STEPS) - // } - // } const contentsByWizardStep: { [wizardStep in WizardStep]: ( @@ -501,33 +450,13 @@ function CreateFileForm(props: CreateFileFormProps): JSX.Element { ), first_pipette_type: (formikProps: FormikProps) => ( - { - // handleProceed96Channel( - // formikProps.values.pipettesByMount.left.pipetteName === 'p1000_96', - // formikProps.values.fields.robotType - // ) - proceed() - }} - /> + ), first_pipette_tips: (formikProps: FormikProps) => ( ), second_pipette_type: (formikProps: FormikProps) => ( - { - // handleProceed2ndPipette( - // formikProps.values.pipettesByMount.right.pipetteName == null, - // formikProps.values.fields.robotType - // ) - proceed() - }} - /> + ), second_pipette_tips: (formikProps: FormikProps) => ( diff --git a/protocol-designer/src/components/modules/FlexSlotMap.tsx b/protocol-designer/src/components/modules/FlexSlotMap.tsx index 9398905769e..0f46be8f3a7 100644 --- a/protocol-designer/src/components/modules/FlexSlotMap.tsx +++ b/protocol-designer/src/components/modules/FlexSlotMap.tsx @@ -46,6 +46,7 @@ export function FlexSlotMap(props: FlexSlotMapProps): JSX.Element { > {deckDef.locations.orderedSlots.map(slotDef => ( Date: Wed, 18 Oct 2023 10:42:56 -0400 Subject: [PATCH 3/4] fix go back button --- .../CreateFileWizard/ModulesAndOtherTile.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/protocol-designer/src/components/modals/CreateFileWizard/ModulesAndOtherTile.tsx b/protocol-designer/src/components/modals/CreateFileWizard/ModulesAndOtherTile.tsx index 35069ea5d79..058e364448e 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/ModulesAndOtherTile.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/ModulesAndOtherTile.tsx @@ -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() } } else { goBack() From 2a71be9021cc70f728da446bef32d1e6ce7e7c0a Mon Sep 17 00:00:00 2001 From: Jethary Date: Thu, 19 Oct 2023 08:12:08 -0400 Subject: [PATCH 4/4] add overflowY: auto --- .../components/modals/CreateFileWizard/PipetteTypeTile.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/protocol-designer/src/components/modals/CreateFileWizard/PipetteTypeTile.tsx b/protocol-designer/src/components/modals/CreateFileWizard/PipetteTypeTile.tsx index 537b458601f..f08d7338d7d 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/PipetteTypeTile.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/PipetteTypeTile.tsx @@ -88,7 +88,12 @@ export function PipetteTypeTile(props: PipetteTypeTileProps): JSX.Element { return ( - +