Skip to content

Commit

Permalink
add a custom hook
Browse files Browse the repository at this point in the history
  • Loading branch information
koji committed Jan 9, 2025
1 parent d5b7123 commit 35c33a0
Show file tree
Hide file tree
Showing 4 changed files with 207 additions and 139 deletions.
196 changes: 105 additions & 91 deletions protocol-designer/src/organisms/EditInstrumentsModal/PipetteConfiguration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -54,39 +54,42 @@ 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<SetStateAction<Gen | 'flex'>>
setPipetteType: Dispatch<SetStateAction<PipetteType | null>>
setPipetteVolume: Dispatch<SetStateAction<string | null>>
setSelectedTips: Dispatch<SetStateAction<string[]>>
// setPipetteGen: Dispatch<SetStateAction<Gen | 'flex'>>
// setPipetteType: Dispatch<SetStateAction<PipetteType | null>>
// setPipetteVolume: Dispatch<SetStateAction<string | null>>
// setSelectedTips: Dispatch<SetStateAction<string[]>>
pipetteConfig: ReturnType<typeof usePipetteConfig>
leftPipette?: PipetteOnDeck
rightPipette?: PipetteOnDeck
}

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 {
Expand All @@ -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 (
<Flex
Expand Down Expand Up @@ -154,9 +168,9 @@ export function PipetteConfiguration({
</Flex>
) : null}
{(pipetteType != null && robotType === FLEX_ROBOT_TYPE) ||
(pipetteGen !== 'flex' &&
pipetteType != null &&
robotType === OT2_ROBOT_TYPE) ? (
(pipetteGen !== 'flex' &&
pipetteType != null &&
robotType === OT2_ROBOT_TYPE) ? (
<Flex
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing8}
Expand Down Expand Up @@ -209,75 +223,75 @@ export function PipetteConfiguration({
) : null}
{allPipetteOptions.includes(selectedPipette as PipetteName)
? (() => {
const tiprackOptions = getTiprackOptions({
allLabware,
allowAllTipracks,
selectedPipetteName: selectedPipette,
})
return (
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
<StyledText desktopStyle="bodyLargeSemiBold">
{t('pipette_tips')}
</StyledText>
<StyledBox>
{tiprackOptions.map(option => (
<Checkbox
key={option.value}
disabled={
selectedTips.length === 3 &&
!selectedTips.includes(option.value)
}
isChecked={selectedTips.includes(option.value)}
labelText={removeOpentronsPhrases(option.name)}
onClick={() => {
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 (
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
<StyledText desktopStyle="bodyLargeSemiBold">
{t('pipette_tips')}
</StyledText>
<StyledBox>
{tiprackOptions.map(option => (
<Checkbox
key={option.value}
disabled={
selectedTips.length === 3 &&
!selectedTips.includes(option.value)
}
isChecked={selectedTips.includes(option.value)}
labelText={removeOpentronsPhrases(option.name)}
onClick={() => {
const updatedTips = selectedTips.includes(option.value)
? selectedTips.filter(v => v !== option.value)
: [...selectedTips, option.value]
setSelectedTips(updatedTips)
}}
/>
))}
<Flex
gridGap={SPACING.spacing8}
padding={SPACING.spacing4}
width={FLEX_MAX_CONTENT}
>
<StyledLabel>
<StyledText desktopStyle="bodyDefaultRegular">
{t('add_custom_tips')}
</StyledText>
<input
data-testid="SelectPipettes_customTipInput"
type="file"
onChange={e => dispatch(createCustomTiprackDef(e))}
/>
))}
<Flex
gridGap={SPACING.spacing8}
padding={SPACING.spacing4}
width={FLEX_MAX_CONTENT}
>
<StyledLabel>
<StyledText desktopStyle="bodyDefaultRegular">
{t('add_custom_tips')}
</StyledText>
<input
data-testid="SelectPipettes_customTipInput"
type="file"
onChange={e => dispatch(createCustomTiprackDef(e))}
/>
</StyledLabel>
{pipetteVolume === 'p1000' &&
</StyledLabel>
{pipetteVolume === 'p1000' &&
robotType === FLEX_ROBOT_TYPE ? null : (
<Btn
onClick={() => {
dispatch(
setFeatureFlags({
OT_PD_ALLOW_ALL_TIPRACKS: !allowAllTipracks,
})
)
}}
textDecoration={TYPOGRAPHY.textDecorationUnderline}
>
<StyledLabel>
<StyledText desktopStyle="bodyDefaultRegular">
{allowAllTipracks
? t('show_default_tips')
: t('show_all_tips')}
</StyledText>
</StyledLabel>{' '}
</Btn>
)}
</Flex>
</StyledBox>
</Flex>
)
})()
<Btn
onClick={() => {
dispatch(
setFeatureFlags({
OT_PD_ALLOW_ALL_TIPRACKS: !allowAllTipracks,
})
)
}}
textDecoration={TYPOGRAPHY.textDecorationUnderline}
>
<StyledLabel>
<StyledText desktopStyle="bodyDefaultRegular">
{allowAllTipracks
? t('show_default_tips')
: t('show_all_tips')}
</StyledText>
</StyledLabel>{' '}
</Btn>
)}
</Flex>
</StyledBox>
</Flex>
)
})()
: null}
</Flex>
)
Expand Down
54 changes: 33 additions & 21 deletions protocol-designer/src/organisms/EditInstrumentsModal/PipetteOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -52,12 +53,13 @@ interface PipetteOverviewProps {
pipettes: AllTemporalPropertiesForTimelineFrame['pipettes']
labware: AllTemporalPropertiesForTimelineFrame['labware']
robotType: RobotType
setPage: Dispatch<SetStateAction<'add' | 'overview'>>
setMount: Dispatch<SetStateAction<PipetteMount>>
setPipetteType: Dispatch<SetStateAction<PipetteType | null>>
setPipetteGen: Dispatch<SetStateAction<Gen | 'flex'>>
setPipetteVolume: Dispatch<SetStateAction<string | null>>
setSelectedTips: Dispatch<SetStateAction<string[]>>
// setPage: Dispatch<SetStateAction<'add' | 'overview'>>
// setMount: Dispatch<SetStateAction<PipetteMount>>
// setPipetteType: Dispatch<SetStateAction<PipetteType | null>>
// setPipetteGen: Dispatch<SetStateAction<Gen | 'flex'>>
// setPipetteVolume: Dispatch<SetStateAction<string | null>>
// setSelectedTips: Dispatch<SetStateAction<string[]>>
pipetteConfig: ReturnType<typeof usePipetteConfig>
leftPipette?: PipetteOnDeck
rightPipette?: PipetteOnDeck
gripper?: Gripper
Expand All @@ -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<ThunkDispatch<any>>()

const swapPipetteUpdate = mapValues(pipettes, pipette => {
Expand All @@ -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 (
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing24}>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
Expand All @@ -112,7 +124,7 @@ export function PipetteOverview({
{t('your_pipettes')}
</StyledText>
{has96Channel ||
(leftPipette == null && rightPipette == null) ? null : (
(leftPipette == null && rightPipette == null) ? null : (
<Btn
css={LINK_BUTTON_STYLE}
onClick={() =>
Expand Down Expand Up @@ -183,7 +195,7 @@ export function PipetteOverview({
/>
) : null}
{has96Channel ||
(leftPipette != null && rightPipette != null) ? null : (
(leftPipette != null && rightPipette != null) ? null : (
<EmptySelectorButton
onClick={() => {
setPage('add')
Expand Down
Loading

0 comments on commit 35c33a0

Please sign in to comment.