diff --git a/protocol-designer/src/organisms/EditInstrumentsModal/PipetteConfiguration.tsx b/protocol-designer/src/organisms/EditInstrumentsModal/PipetteConfiguration.tsx index 1717cbca340..3098d7593a0 100644 --- a/protocol-designer/src/organisms/EditInstrumentsModal/PipetteConfiguration.tsx +++ b/protocol-designer/src/organisms/EditInstrumentsModal/PipetteConfiguration.tsx @@ -41,9 +41,9 @@ import { PIPETTE_VOLUMES, } from '../../pages/CreateNewProtocolWizard/constants' -import type { Dispatch, SetStateAction } from 'react' +// import type { Dispatch, SetStateAction } from 'react' import type { - PipetteMount, + // PipetteMount, PipetteName, RobotType, } from '@opentrons/shared-data' @@ -54,22 +54,24 @@ import type { PipetteInfoByType, PipetteType, } from '../../pages/CreateNewProtocolWizard/types' - import type { ThunkDispatch } from '../../types' +import type { usePipetteConfig } from './usePipetteConfig' + interface PipetteConfigurationProps { has96Channel: boolean robotType: RobotType - pipetteType: PipetteType | null - pipetteGen: Gen | 'flex' - mount: PipetteMount - pipetteVolume: string | null - selectedTips: string[] + // pipetteType: PipetteType | null + // pipetteGen: Gen | 'flex' + // mount: PipetteMount + // pipetteVolume: string | null + // selectedTips: string[] selectedPipette: string - setPipetteGen: Dispatch> - setPipetteType: Dispatch> - setPipetteVolume: Dispatch> - setSelectedTips: Dispatch> + // setPipetteGen: Dispatch> + // setPipetteType: Dispatch> + // setPipetteVolume: Dispatch> + // setSelectedTips: Dispatch> + pipetteConfig: ReturnType leftPipette?: PipetteOnDeck rightPipette?: PipetteOnDeck } @@ -77,16 +79,17 @@ interface PipetteConfigurationProps { export function PipetteConfiguration({ has96Channel, robotType, - pipetteType, - pipetteGen, - mount, - pipetteVolume, - selectedTips, + // pipetteType, + // pipetteGen, + // mount, + // pipetteVolume, + // selectedTips, selectedPipette, - setPipetteGen, - setPipetteType, - setPipetteVolume, - setSelectedTips, + // setPipetteGen, + // setPipetteType, + // setPipetteVolume, + // setSelectedTips, + pipetteConfig, leftPipette, rightPipette, }: PipetteConfigurationProps): JSX.Element { @@ -95,6 +98,17 @@ export function PipetteConfiguration({ const allLabware = useSelector(getLabwareDefsByURI) const allowAllTipracks = useSelector(getAllowAllTipracks) const allPipetteOptions = getAllPipetteNames('maxVolume', 'channels') + const { + mount, + pipetteType, + setPipetteType, + pipetteGen, + setPipetteGen, + pipetteVolume, + setPipetteVolume, + selectedTips, + setSelectedTips, + } = pipetteConfig; return ( ) : null} {(pipetteType != null && robotType === FLEX_ROBOT_TYPE) || - (pipetteGen !== 'flex' && - pipetteType != null && - robotType === OT2_ROBOT_TYPE) ? ( + (pipetteGen !== 'flex' && + pipetteType != null && + robotType === OT2_ROBOT_TYPE) ? ( { - const tiprackOptions = getTiprackOptions({ - allLabware, - allowAllTipracks, - selectedPipetteName: selectedPipette, - }) - return ( - - - {t('pipette_tips')} - - - {tiprackOptions.map(option => ( - { - const updatedTips = selectedTips.includes(option.value) - ? selectedTips.filter(v => v !== option.value) - : [...selectedTips, option.value] - setSelectedTips(updatedTips) - }} + const tiprackOptions = getTiprackOptions({ + allLabware, + allowAllTipracks, + selectedPipetteName: selectedPipette, + }) + return ( + + + {t('pipette_tips')} + + + {tiprackOptions.map(option => ( + { + const updatedTips = selectedTips.includes(option.value) + ? selectedTips.filter(v => v !== option.value) + : [...selectedTips, option.value] + setSelectedTips(updatedTips) + }} + /> + ))} + + + + {t('add_custom_tips')} + + dispatch(createCustomTiprackDef(e))} /> - ))} - - - - {t('add_custom_tips')} - - dispatch(createCustomTiprackDef(e))} - /> - - {pipetteVolume === 'p1000' && + + {pipetteVolume === 'p1000' && robotType === FLEX_ROBOT_TYPE ? null : ( - { - dispatch( - setFeatureFlags({ - OT_PD_ALLOW_ALL_TIPRACKS: !allowAllTipracks, - }) - ) - }} - textDecoration={TYPOGRAPHY.textDecorationUnderline} - > - - - {allowAllTipracks - ? t('show_default_tips') - : t('show_all_tips')} - - {' '} - - )} - - - - ) - })() + { + dispatch( + setFeatureFlags({ + OT_PD_ALLOW_ALL_TIPRACKS: !allowAllTipracks, + }) + ) + }} + textDecoration={TYPOGRAPHY.textDecorationUnderline} + > + + + {allowAllTipracks + ? t('show_default_tips') + : t('show_all_tips')} + + {' '} + + )} + + + + ) + })() : null} ) diff --git a/protocol-designer/src/organisms/EditInstrumentsModal/PipetteOverview.tsx b/protocol-designer/src/organisms/EditInstrumentsModal/PipetteOverview.tsx index 1e417a87807..ce87654bbe0 100644 --- a/protocol-designer/src/organisms/EditInstrumentsModal/PipetteOverview.tsx +++ b/protocol-designer/src/organisms/EditInstrumentsModal/PipetteOverview.tsx @@ -28,18 +28,19 @@ import { getSectionsFromPipetteName } from './utils' import { INITIAL_DECK_SETUP_STEP_ID } from '../../constants' import { LINK_BUTTON_STYLE } from '../../atoms' -import type { Dispatch, SetStateAction } from 'react' +// import type { Dispatch, SetStateAction } from 'react' import type { AdditionalEquipmentName } from '@opentrons/step-generation' -import type { PipetteMount, RobotType } from '@opentrons/shared-data' +import type { /* PipetteMount, */ RobotType } from '@opentrons/shared-data' import type { AllTemporalPropertiesForTimelineFrame, PipetteOnDeck, } from '../../step-forms' -import type { - Gen, - PipetteType, -} from '../../pages/CreateNewProtocolWizard/types' +// import type { +// Gen, +// PipetteType, +// } from '../../pages/CreateNewProtocolWizard/types' import type { ThunkDispatch } from '../../types' +import type { usePipetteConfig } from './usePipetteConfig' interface Gripper { name: AdditionalEquipmentName @@ -52,12 +53,13 @@ interface PipetteOverviewProps { pipettes: AllTemporalPropertiesForTimelineFrame['pipettes'] labware: AllTemporalPropertiesForTimelineFrame['labware'] robotType: RobotType - setPage: Dispatch> - setMount: Dispatch> - setPipetteType: Dispatch> - setPipetteGen: Dispatch> - setPipetteVolume: Dispatch> - setSelectedTips: Dispatch> + // setPage: Dispatch> + // setMount: Dispatch> + // setPipetteType: Dispatch> + // setPipetteGen: Dispatch> + // setPipetteVolume: Dispatch> + // setSelectedTips: Dispatch> + pipetteConfig: ReturnType leftPipette?: PipetteOnDeck rightPipette?: PipetteOnDeck gripper?: Gripper @@ -68,17 +70,18 @@ export function PipetteOverview({ pipettes, labware, robotType, - setPage, - setMount, - setPipetteType, - setPipetteGen, - setPipetteVolume, - setSelectedTips, + // setPage, + // setMount, + // setPipetteType, + // setPipetteGen, + // setPipetteVolume, + // setSelectedTips, + pipetteConfig, leftPipette, rightPipette, gripper, }: PipetteOverviewProps): JSX.Element { - const { i18n, t } = useTranslation('create_new_protocol') + const { i18n, t } = useTranslation(['create_new_protocol', 'protocol_overview']) const dispatch = useDispatch>() const swapPipetteUpdate = mapValues(pipettes, pipette => { @@ -104,6 +107,15 @@ export function PipetteOverview({ .filter(lw => lw.def.parameters.isTiprack) .filter(tip => rightPipette?.tiprackDefURI.includes(tip.labwareDefURI)) + const { + setPage, + setMount, + setPipetteType, + setPipetteGen, + setPipetteVolume, + setSelectedTips, + } = pipetteConfig; + return ( @@ -112,7 +124,7 @@ export function PipetteOverview({ {t('your_pipettes')} {has96Channel || - (leftPipette == null && rightPipette == null) ? null : ( + (leftPipette == null && rightPipette == null) ? null : ( @@ -183,7 +195,7 @@ export function PipetteOverview({ /> ) : null} {has96Channel || - (leftPipette != null && rightPipette != null) ? null : ( + (leftPipette != null && rightPipette != null) ? null : ( { setPage('add') diff --git a/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx b/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx index 48bdc83893a..f1ac2062845 100644 --- a/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx +++ b/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx @@ -25,6 +25,7 @@ import { editPipettes } from './editPipettes' import { HandleEnter } from '../../atoms/HandleEnter' import { PipetteOverview } from './PipetteOverview' import { PipetteConfiguration } from './PipetteConfiguration' +import { usePipetteConfig } from './usePipetteConfig' import type { PipetteMount, PipetteName } from '@opentrons/shared-data' import type { @@ -44,15 +45,15 @@ export function EditInstrumentsModal( const dispatch = useDispatch>() const { t } = useTranslation([ 'create_new_protocol', - 'protocol_overview', 'shared', ]) - const [page, setPage] = useState<'add' | 'overview'>('overview') - const [mount, setMount] = useState('left') - const [pipetteType, setPipetteType] = useState(null) - const [pipetteGen, setPipetteGen] = useState('flex') - const [pipetteVolume, setPipetteVolume] = useState(null) - const [selectedTips, setSelectedTips] = useState([]) + const pipetteConfig = usePipetteConfig() + // const [page, setPage] = useState<'add' | 'overview'>('overview') + // const [mount, setMount] = useState('left') + // const [pipetteType, setPipetteType] = useState(null) + // const [pipetteGen, setPipetteGen] = useState('flex') + // const [pipetteVolume, setPipetteVolume] = useState(null) + // const [selectedTips, setSelectedTips] = useState([]) const robotType = useSelector(getRobotType) const orderedStepIds = useSelector(stepFormSelectors.getOrderedStepIds) const initialDeckSetup = useSelector(getInitialDeckSetup) @@ -66,16 +67,17 @@ export function EditInstrumentsModal( const gripper = Object.values(additionalEquipment).find( ae => ae.name === 'gripper' ) + const { page, mount, pipetteType, pipetteGen, pipetteVolume, selectedTips, setPage, resetFields } = pipetteConfig const selectedPipette = pipetteType === '96' || pipetteGen === 'GEN1' ? `${pipetteVolume}_${pipetteType}` : `${pipetteVolume}_${pipetteType}_${pipetteGen.toLowerCase()}` - const resetFields = (): void => { - setPipetteType(null) - setPipetteGen('flex') - setPipetteVolume(null) - } + // const resetFields = (): void => { + // setPipetteType(null) + // setPipetteGen('flex') + // setPipetteVolume(null) + // } const handleOnSave = (): void => { if (page === 'overview') { @@ -151,32 +153,34 @@ export function EditInstrumentsModal( labware={labware} pipettes={pipettes} robotType={robotType} - setPage={setPage} - setMount={setMount} - setPipetteType={setPipetteType} - setPipetteGen={setPipetteGen} - setPipetteVolume={setPipetteVolume} - setSelectedTips={setSelectedTips} + // setPage={setPage} + // setMount={setMount} + // setPipetteType={setPipetteType} + // setPipetteGen={setPipetteGen} + // setPipetteVolume={setPipetteVolume} + // setSelectedTips={setSelectedTips} leftPipette={leftPipette} rightPipette={rightPipette} gripper={gripper} + pipetteConfig={pipetteConfig} /> ) : ( )} diff --git a/protocol-designer/src/organisms/EditInstrumentsModal/usePipetteConfig.ts b/protocol-designer/src/organisms/EditInstrumentsModal/usePipetteConfig.ts new file mode 100644 index 00000000000..19b7c24fd82 --- /dev/null +++ b/protocol-designer/src/organisms/EditInstrumentsModal/usePipetteConfig.ts @@ -0,0 +1,38 @@ +import { useState } from 'react' +import type { PipetteMount } from '@opentrons/shared-data' +import type { + Gen, + PipetteType, +} from '../../pages/CreateNewProtocolWizard/types' + +export function usePipetteConfig() { + const [page, setPage] = useState<'add' | 'overview'>('overview') + const [mount, setMount] = useState('left') + const [pipetteType, setPipetteType] = useState(null) + const [pipetteGen, setPipetteGen] = useState('flex') + const [pipetteVolume, setPipetteVolume] = useState(null) + const [selectedTips, setSelectedTips] = useState([]) + + const resetFields = (): void => { + setPipetteType(null) + setPipetteGen('flex') + setPipetteVolume(null) + setSelectedTips([]) + } + + return { + page, + setPage, + mount, + setMount, + pipetteType, + setPipetteType, + pipetteGen, + setPipetteGen, + pipetteVolume, + setPipetteVolume, + selectedTips, + setSelectedTips, + resetFields, + } +}