Skip to content

Commit

Permalink
address auth-114 by fully making parameters
Browse files Browse the repository at this point in the history
  • Loading branch information
jerader committed Mar 14, 2024
1 parent 0c19b1d commit a879479
Show file tree
Hide file tree
Showing 3 changed files with 201 additions and 34 deletions.
3 changes: 3 additions & 0 deletions app/src/assets/localization/en/protocol_details.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@
"no_summary": "no summary specified for this protocol.",
"not_connected": "not connected",
"not_in_protocol": "no {{section}} is specified for this protocol",
"off": "Off",
"on_off": "On, off",
"on": "On",
"org_or_author": "org/author",
"pipette_aspirate_count_description": "individual aspirate commands per pipette.",
"pipette_aspirate_count": "{{pipette}} aspirate count",
Expand Down
108 changes: 76 additions & 32 deletions app/src/pages/ProtocolDetails/Parameters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,30 @@ import {
} from '@opentrons/components'
import { StyledText } from '../../atoms/text'
import { useToaster } from '../../organisms/ToasterOven'
import { useRequiredProtocolHardware } from '../Protocols/hooks'
import { useRunTimeParameters } from '../Protocols/hooks'
import { EmptySection } from './EmptySection'
import type { RunTimeParameters } from '@opentrons/shared-data'

interface RangeProps {
type: RunTimeParameters['type']
max: number
min: number
}
interface DefaultProps {
default: unknown
suffix?: string
}

const Table = styled('table')`
${TYPOGRAPHY.labelRegular}
table-layout: auto;
font-size: ${TYPOGRAPHY.fontSize22};
width: 100%;
border-spacing: 0 ${SPACING.spacing8};
margin: ${SPACING.spacing16} 0;
text-align: ${TYPOGRAPHY.textAlignLeft};
`
const TableHeader = styled('th')`
font-size: ${TYPOGRAPHY.fontSize20};
font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
padding: ${SPACING.spacing4};
color: ${COLORS.grey60};
`
Expand All @@ -40,6 +52,7 @@ const TableDatum = styled('td')`
&:first-child {
border-top-left-radius: ${BORDERS.borderRadiusSize4};

Check failure on line 53 in app/src/pages/ProtocolDetails/Parameters.tsx

View workflow job for this annotation

GitHub Actions / js checks

Property 'borderRadiusSize4' does not exist on type 'typeof import("/home/runner/work/opentrons/opentrons/components/lib/helix-design-system/borders")'. Did you mean 'borderRadius4'?

Check failure on line 53 in app/src/pages/ProtocolDetails/Parameters.tsx

View workflow job for this annotation

GitHub Actions / js checks

Property 'borderRadiusSize4' does not exist on type 'typeof import("/home/runner/work/opentrons/opentrons/components/lib/helix-design-system/borders")'. Did you mean 'borderRadius4'?
border-bottom-left-radius: ${BORDERS.borderRadiusSize4};

Check failure on line 54 in app/src/pages/ProtocolDetails/Parameters.tsx

View workflow job for this annotation

GitHub Actions / js checks

Property 'borderRadiusSize4' does not exist on type 'typeof import("/home/runner/work/opentrons/opentrons/components/lib/helix-design-system/borders")'. Did you mean 'borderRadius4'?

Check failure on line 54 in app/src/pages/ProtocolDetails/Parameters.tsx

View workflow job for this annotation

GitHub Actions / js checks

Property 'borderRadiusSize4' does not exist on type 'typeof import("/home/runner/work/opentrons/opentrons/components/lib/helix-design-system/borders")'. Did you mean 'borderRadius4'?
width: 24rem;
}
&:last-child {
border-top-right-radius: ${BORDERS.borderRadiusSize4};

Check failure on line 58 in app/src/pages/ProtocolDetails/Parameters.tsx

View workflow job for this annotation

GitHub Actions / js checks

Property 'borderRadiusSize4' does not exist on type 'typeof import("/home/runner/work/opentrons/opentrons/components/lib/helix-design-system/borders")'. Did you mean 'borderRadius4'?

Check failure on line 58 in app/src/pages/ProtocolDetails/Parameters.tsx

View workflow job for this annotation

GitHub Actions / js checks

Property 'borderRadiusSize4' does not exist on type 'typeof import("/home/runner/work/opentrons/opentrons/components/lib/helix-design-system/borders")'. Did you mean 'borderRadius4'?
Expand All @@ -48,60 +61,91 @@ const TableDatum = styled('td')`
`

export const Parameters = (props: { protocolId: string }): JSX.Element => {
// TODO(Jr, 3/14/24): replace hook with correct hook to get parameters
const { requiredProtocolHardware } = useRequiredProtocolHardware(
props.protocolId
)
const runTimeParameters = useRunTimeParameters(props.protocolId)
const { makeSnackbar } = useToaster()
const { t, i18n } = useTranslation('protocol_details')

const makeSnack = (): void => {
makeSnackbar(t('start_setup_to_customize'))
}
return requiredProtocolHardware.length === 0 ? (

const getRange = (props: RangeProps): string => {
switch (props.type) {
case 'boolean': {
return t('on_off')
}
case 'float':
case 'int': {
return `${props.min}-${props.max}`
}
case 'str': {
return ''
}
}
}

const getDefault = (props: DefaultProps): string => {
if (props.suffix != null) {
return `${props.default} ${props.suffix}`
} else if (props.default === false) {
return t('off')
} else if (props.default === true) {
return t('on')
} else {
return `${props.default}`
}
}

return runTimeParameters.length === 0 ? (
<EmptySection section="parameters" />
) : (
<Table onClick={makeSnack}>
<Table onClick={makeSnack} data-testid="Parameters_table">
<thead>
<tr>
<TableHeader>
<StyledText
css={TYPOGRAPHY.labelSemiBold}
paddingLeft={SPACING.spacing24}
>
<StyledText paddingLeft={SPACING.spacing24}>
{i18n.format(t('name'), 'capitalize')}
</StyledText>
</TableHeader>
<TableHeader>
<StyledText
css={TYPOGRAPHY.labelSemiBold}
paddingLeft={SPACING.spacing24}
>
<StyledText paddingLeft={SPACING.spacing24}>
{i18n.format(t('default_value'), 'capitalize')}
</StyledText>
</TableHeader>
<TableHeader>
<StyledText
css={TYPOGRAPHY.labelSemiBold}
paddingLeft={SPACING.spacing24}
>
<StyledText paddingLeft={SPACING.spacing24}>
{i18n.format(t('range'), 'capitalize')}
</StyledText>
</TableHeader>
</tr>
</thead>
<tbody>
<TableRow>
<TableDatum>
<Flex paddingLeft={SPACING.spacing24}>TODO</Flex>
</TableDatum>
<TableDatum>
<Flex paddingLeft={SPACING.spacing24}>TODO</Flex>
</TableDatum>
<TableDatum>
<Flex paddingLeft={SPACING.spacing24}>TODO</Flex>
</TableDatum>
</TableRow>
{runTimeParameters.map((parameter, index) => {
const min = 'min' in parameter ? parameter.min : 0
const max = 'max' in parameter ? parameter.max : 0
return (
<TableRow key={index}>
<TableDatum>
<Flex paddingLeft={SPACING.spacing24}>
{parameter.displayName}
</Flex>
</TableDatum>
<TableDatum>
<Flex paddingLeft={SPACING.spacing24} color={COLORS.grey60}>
{getDefault({
default: parameter.default,
suffix: parameter.suffix,
})}
</Flex>
</TableDatum>
<TableDatum>
<Flex paddingLeft={SPACING.spacing24} color={COLORS.grey60}>
{getRange({ type: parameter.type, max, min })}
</Flex>
</TableDatum>
</TableRow>
)
})}
</tbody>
</Table>
)
Expand Down
124 changes: 122 additions & 2 deletions app/src/pages/ProtocolDetails/__tests__/Parameters.test.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,123 @@
import { it } from 'vitest'
import * as React from 'react'
import { when } from 'vitest-when'
import { it, describe, beforeEach, vi } from 'vitest'
import { screen } from '@testing-library/react'
import { i18n } from '../../../i18n'
import { useToaster } from '../../../organisms/ToasterOven'
import { renderWithProviders } from '../../../__testing-utils__'
import { useRunTimeParameters } from '../../Protocols/hooks'
import { Parameters } from '../Parameters'
import type { RunTimeParameters } from '@opentrons/shared-data'

it.todo('renders the parameters labels and mock data')
vi.mock('../../../organisms/ToasterOven')
vi.mock('../../Protocols/hooks')

const mockRTPData: RunTimeParameters[] = [
{
displayName: 'Dry Run',
variableName: 'DRYRUN',
description: 'a dry run description',
type: 'boolean',
default: false,
},
{
displayName: 'Use Gripper',
variableName: 'USE_GRIPPER',
description: '',
type: 'boolean',
default: true,
},
{
displayName: 'Trash Tips',
variableName: 'TIP_TRASH',
description: 'throw tip in trash',
type: 'boolean',
default: true,
},
{
displayName: 'Deactivate Temperatures',
variableName: 'DEACTIVATE_TEMP',
description: 'deactivate temperature?',
type: 'boolean',
default: true,
},
{
displayName: 'Columns of Samples',
variableName: 'COLUMNS',
description: '',
suffix: 'mL',
type: 'int',
min: 1,
max: 14,
default: 4,
},
{
displayName: 'PCR Cycles',
variableName: 'PCR_CYCLES',
description: '',
type: 'int',
min: 1,
max: 10,
default: 6,
},
{
displayName: 'EtoH Volume',
variableName: 'ETOH_VOLUME',
description: '',
type: 'float',
min: 1.5,
max: 10.0,
default: 6.5,
},
{
displayName: 'Default Module Offsets',
variableName: 'DEFAULT_OFFSETS',
description: '',
type: 'str',
choices: [
{
displayName: 'no offsets',
value: 'none',
},
{
displayName: 'temp offset',
value: '1',
},
{
displayName: 'heater-shaker offset',
value: '2',
},
],
default: 'none',
},
]

const render = (props: React.ComponentProps<typeof Parameters>) => {
return renderWithProviders(<Parameters {...props} />, {
i18nInstance: i18n,
})
}
const MOCK_MAKE_SNACK_BAR = vi.fn()
describe('Parameters', () => {
let props: React.ComponentProps<typeof Parameters>

beforeEach(() => {
props = {
protocolId: 'mockId',
}
when(useToaster)
.calledWith()
.thenReturn({
makeSnackBar: MOCK_MAKE_SNACK_BAR,
} as any)
vi.mocked(useRunTimeParameters).mockReturnValue(mockRTPData)
})
it('renders the parameters labels and mock data', () => {
render(props)
screen.getByText('Name')
screen.getByText('Default value')
screen.getByText('Range')
screen.getByText('Dry Run')
screen.getByText('Use Gripper')
})
})

0 comments on commit a879479

Please sign in to comment.