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

refactor(protocol-designer): refactor EditInstrumentsModal #17226

Open
wants to merge 8 commits into
base: edge
Choose a base branch
from
Open

refactor(protocol-designer): refactor EditInstrumentsModal #17226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1d36549
refactor(protocol-designer): refactor EditInstrumentsModal
koji Jan 8, 2025
d5b7123
export select pipette part as PipetteConfiguration component
koji Jan 8, 2025
35c33a0
add a custom hook
Jan 9, 2025
c636b0e
add the type to the custom hook
koji Jan 9, 2025
991e9ef
remove unused lines
koji Jan 9, 2025
f6c6b41
add test for EditInstrumentModal
koji Jan 9, 2025
cd2a664
fix lint error
koji Jan 9, 2025
9ed51cc
add tests for a custom hook
koji Jan 9, 2025
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
300 changes: 300 additions & 0 deletions protocol-designer/src/organisms/EditInstrumentsModal/PipetteConfiguration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,300 @@
import { useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import styled from 'styled-components'

import {
ALIGN_CENTER,
ALIGN_STRETCH,
Box,
Btn,
Checkbox,
COLORS,
CURSOR_POINTER,
DIRECTION_COLUMN,
DISPLAY_FLEX,
DISPLAY_INLINE_BLOCK,
FLEX_MAX_CONTENT,
Flex,
OVERFLOW_AUTO,
PRODUCT,
RadioButton,
SPACING,
StyledText,
TYPOGRAPHY,
WRAP,
} from '@opentrons/components'
import {
FLEX_ROBOT_TYPE,
getAllPipetteNames,
OT2_ROBOT_TYPE,
} from '@opentrons/shared-data'

import { getLabwareDefsByURI } from '../../labware-defs/selectors'
import { getAllowAllTipracks } from '../../feature-flags/selectors'
import { setFeatureFlags } from '../../feature-flags/actions'
import { createCustomTiprackDef } from '../../labware-defs/actions'
import { getShouldShowPipetteType, getTiprackOptions } from './utils'
import { removeOpentronsPhrases } from '../../utils'
import {
PIPETTE_GENS,
PIPETTE_TYPES,
PIPETTE_VOLUMES,
} from '../../pages/CreateNewProtocolWizard/constants'

import type {
// PipetteMount,
PipetteName,
RobotType,
} from '@opentrons/shared-data'
import type { PipetteOnDeck } from '../../step-forms'
import type {
Gen,
PipetteInfoByGen,
PipetteInfoByType,
PipetteType,
} from '../../pages/CreateNewProtocolWizard/types'
import type { ThunkDispatch } from '../../types'
import type { PipetteConfig } from './usePipetteConfig'

interface PipetteConfigurationProps {
has96Channel: boolean
robotType: RobotType
selectedPipette: string
pipetteConfig: PipetteConfig
leftPipette?: PipetteOnDeck
rightPipette?: PipetteOnDeck
}

export function PipetteConfiguration({
has96Channel,
robotType,
selectedPipette,
pipetteConfig,
leftPipette,
rightPipette,
}: PipetteConfigurationProps): JSX.Element {
const { t } = useTranslation(['create_new_protocol', 'shared'])
const dispatch = useDispatch<ThunkDispatch<any>>()
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
flexDirection="column"
overflowY={OVERFLOW_AUTO}
gridGap={SPACING.spacing24}
>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
<StyledText desktopStyle="bodyLargeSemiBold">
{t('pipette_type')}
</StyledText>
<Flex gridGap={SPACING.spacing4}>
{PIPETTE_TYPES[robotType].map(type => {
return getShouldShowPipetteType(
type.value as PipetteType,
has96Channel,
leftPipette,
rightPipette,
mount
) ? (
<RadioButton
key={`${type.label}_${type.value}`}
onChange={() => {
setPipetteType(type.value)
setPipetteGen('flex')
setPipetteVolume(null)
setSelectedTips([])
}}
buttonLabel={t(`shared:${type.label}`)}
buttonValue="single"
isSelected={pipetteType === type.value}
/>
) : null
})}
</Flex>
</Flex>
{pipetteType != null && robotType === OT2_ROBOT_TYPE ? (
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
<StyledText desktopStyle="bodyLargeSemiBold">
{t('pipette_gen')}
</StyledText>
<Flex gridGap={SPACING.spacing4}>
{PIPETTE_GENS.map(gen => (
<RadioButton
key={gen}
onChange={() => {
setPipetteGen(gen)
setPipetteVolume(null)
setSelectedTips([])
}}
buttonLabel={gen}
buttonValue={gen}
isSelected={pipetteGen === gen}
/>
))}
</Flex>
</Flex>
) : null}
{(pipetteType != null && robotType === FLEX_ROBOT_TYPE) ||
(pipetteGen !== 'flex' &&
pipetteType != null &&
robotType === OT2_ROBOT_TYPE) ? (
<Flex
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing8}
id="volume"
>
<StyledText desktopStyle="bodyLargeSemiBold">
{t('pipette_vol')}
</StyledText>
<Flex gridGap={SPACING.spacing4}>
{PIPETTE_VOLUMES[robotType]?.map(volume => {
if (robotType === FLEX_ROBOT_TYPE && pipetteType != null) {
const flexVolume = volume as PipetteInfoByType
const flexPipetteInfo = flexVolume[pipetteType]

return flexPipetteInfo?.map(type => (
<RadioButton
key={`${type.value}_${pipetteType}`}
onChange={() => {
setPipetteVolume(type.value)
setSelectedTips([])
}}
buttonLabel={t('vol_label', { volume: type.label })}
buttonValue={type.value}
isSelected={pipetteVolume === type.value}
/>
))
} else {
const ot2Volume = volume as PipetteInfoByGen
const gen = pipetteGen as Gen

return ot2Volume[gen].map(info => {
return info[pipetteType]?.map(type => (
<RadioButton
key={`${type.value}_${pipetteGen}_${pipetteType}`}
onChange={() => {
setPipetteVolume(type.value)
}}
buttonLabel={t('vol_label', {
volume: type.label,
})}
buttonValue={type.value}
isSelected={pipetteVolume === type.value}
/>
))
})
}
})}
</Flex>
</Flex>
) : 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)
}}
/>
))}
<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' &&
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>
)
})()
: null}
</Flex>
)
}

const StyledBox = styled(Box)`
gap: ${SPACING.spacing4};
display: ${DISPLAY_FLEX};
flex-wrap: ${WRAP};
align-items: ${ALIGN_CENTER};
align-content: ${ALIGN_CENTER};
align-self: ${ALIGN_STRETCH};
`

const StyledLabel = styled.label`
text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
font-size: ${PRODUCT.TYPOGRAPHY.fontSizeBodyDefaultSemiBold};
display: ${DISPLAY_INLINE_BLOCK};
cursor: ${CURSOR_POINTER};
input[type='file'] {
display: none;
}
&:hover {
color: ${COLORS.blue50};
}
`
Loading
Loading