Skip to content

Commit

Permalink
fix(protocol-designer): fix 96-channel display issue in select pipettes
Browse files Browse the repository at this point in the history 
modify the button display condition to solve 96-channel button display issue

close RQA-3203
  • Loading branch information
@koji
koji committed Sep 18, 2024
1 parent 7600ef2 commit 0c71f09
Showing 1 changed file with 79 additions and 71 deletions.
150 changes: 79 additions & 71 deletions protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
const robotType = fields.robotType
const defaultMount = mount ?? 'left'
const has96Channel = pipettesByMount.left.pipetteName === 'p1000_96'
const selectedPip =
const selectedPipetteName =
pipetteType === '96' || pipetteGen === 'GEN1'
? `${pipetteVolume}_${pipetteType}`
: `${pipetteVolume}_${pipetteType}_${pipetteGen.toLowerCase()}`
Expand All @@ -89,9 +89,12 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
// initialize pipette name once all fields are filled out
React.useEffect(() => {
if (pipetteType != null && pipetteVolume != null) {
setValue(`pipettesByMount.${defaultMount}.pipetteName`, selectedPip)
setValue(
`pipettesByMount.${defaultMount}.pipetteName`,
selectedPipetteName
)
}
}, [pipetteType, pipetteGen, pipetteVolume, selectedPip])
}, [pipetteType, pipetteVolume, selectedPipetteName])

const isDisabled =
page === 'add' && pipettesByMount[defaultMount].tiprackDefURI == null
Expand Down Expand Up @@ -137,24 +140,24 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
>
{page === 'add' ? (
<Flex
flexDirection="column"
flexDirection={DIRECTION_COLUMN}
height="41.5vh"
overflowY={OVERFLOW_AUTO}
marginBottom={SPACING.spacing16}
marginTop={SPACING.spacing60}
>
<>
<StyledText
desktopStyle="headingSmallBold"
marginBottom={SPACING.spacing16}
>
<Flex
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing16}
>
<StyledText desktopStyle="headingSmallBold">
{t('pip_type')}
</StyledText>
<Flex gridGap={SPACING.spacing4}>
{PIPETTE_TYPES[robotType].map(type => {
return type.value === '96' &&
(pipettesByMount.left.pipetteName != null ||
pipettesByMount.right.pipetteName != null) ? null : (
pipettesByMount.left.pipetteName != null &&
pipettesByMount.right.pipetteName != null ? null : (
<RadioButton
key={`${type.label}_${type.value}`}
onChange={() => {
Expand All @@ -177,31 +180,34 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
)
})}
</Flex>
</>
</Flex>

{pipetteType != null && robotType === OT2_ROBOT_TYPE ? (
<Flex
flexDirection={DIRECTION_COLUMN}
marginTop={SPACING.spacing32}
>
<StyledText
desktopStyle="headingSmallBold"
marginBottom={SPACING.spacing16}
<Flex
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing16}
>
{t('pip_gen')}
</StyledText>
<Flex gridGap={SPACING.spacing4}>
{PIPETTE_GENS.map(gen => (
<RadioButton
key={gen}
onChange={() => {
setPipetteGen(gen)
setPipetteVolume(null)
}}
buttonLabel={gen}
buttonValue={gen}
isSelected={pipetteGen === gen}
/>
))}
<StyledText desktopStyle="headingSmallBold">
{t('pip_gen')}
</StyledText>
<Flex gridGap={SPACING.spacing4}>
{PIPETTE_GENS.map(gen => (
<RadioButton
key={gen}
onChange={() => {
setPipetteGen(gen)
setPipetteVolume(null)
}}
buttonLabel={gen}
buttonValue={gen}
isSelected={pipetteGen === gen}
/>
))}
</Flex>
</Flex>
</Flex>
) : null}
Expand Down Expand Up @@ -264,57 +270,59 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
</Flex>
</Flex>
) : null}
{allPipetteOptions.includes(selectedPip as PipetteName)
{allPipetteOptions.includes(selectedPipetteName as PipetteName)
? (() => {
const tiprackOptions = getTiprackOptions({
allLabware: allLabware,
allowAllTipracks: allowAllTipracks,
selectedPipetteName: selectedPip,
allLabware,
allowAllTipracks,
selectedPipetteName,
})
return (
<Flex
flexDirection={DIRECTION_COLUMN}
marginTop={SPACING.spacing32}
>
<StyledText
desktopStyle="headingSmallBold"
marginBottom={SPACING.spacing16}
>
{t('pip_tips')}
</StyledText>
<Box
css={css`
gap: ${SPACING.spacing4};
display: ${DISPLAY_FLEX};
flex-wrap: ${WRAP};
`}
<Flex
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing16}
>
{Object.entries(tiprackOptions).map(
([value, name]) => (
<Checkbox
key={value}
isChecked={selectedValues.includes(value)}
labelText={name}
onClick={() => {
const updatedValues = selectedValues.includes(
value
)
? selectedValues.filter(v => v !== value)
: [...selectedValues, value]
setValue(
`pipettesByMount.${defaultMount}.tiprackDefURI`,
updatedValues.slice(0, 3)
)
if (selectedValues.length === 3) {
makeSnackbar(
t('up_to_3_tipracks') as string
<StyledText desktopStyle="headingSmallBold">
{t('pip_tips')}
</StyledText>
<Box
css={css`
gap: ${SPACING.spacing4};
display: ${DISPLAY_FLEX};
flex-wrap: ${WRAP};
`}
>
{Object.entries(tiprackOptions).map(
([value, name]) => (
<Checkbox
key={value}
isChecked={selectedValues.includes(value)}
labelText={name}
onClick={() => {
const updatedValues = selectedValues.includes(
value
)
}
}}
/>
)
)}
</Box>
? selectedValues.filter(v => v !== value)
: [...selectedValues, value]
setValue(
`pipettesByMount.${defaultMount}.tiprackDefURI`,
updatedValues.slice(0, 3)
)
if (selectedValues.length === 3) {
makeSnackbar(
t('up_to_3_tipracks') as string
)
}
}}
/>
)
)}
</Box>
</Flex>
<Flex
gridGap={SPACING.spacing8}
marginTop={SPACING.spacing4}
Expand Down

0 comments on commit 0c71f09

Please sign in to comment.