feature(protocol-designer): Add stacker step form skeleton #20277
Conversation
TamarZanzouri
requested review from
jerader and
ncdiehl11
and removed request for
a team
| @@ -39,6 +61,7 @@ | |||
| "camera": { | |||
| "capture_image": "Capture image of the deck" | |||
| }, | |||
| "flexStacker": "Flex Stacker", | |||
There was a problem hiding this comment.
yes! this is the step map! i left a comment about this. not sure how we want to deal with this
...ocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/FlexStackerTools/index.tsx
Outdated
Show resolved
Hide resolved
...ocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/FlexStackerTools/index.tsx
Outdated
Show resolved
Hide resolved
...ocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/FlexStackerTools/index.tsx
Outdated
Show resolved
Hide resolved
...ocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/FlexStackerTools/index.tsx
Outdated
Show resolved
Hide resolved
...ocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/FlexStackerTools/index.tsx
Outdated
Show resolved
Hide resolved
protocol-designer/src/step-forms/utils/createPresavedStepForm.ts
Outdated
Show resolved
Hide resolved
| {/* TODO: how can we use json key names instead of stepType?*/} | ||
| {t(`protocol_steps:${formData.stepType}`)} |
There was a problem hiding this comment.
i led you astray here, sorry!!!! we need to be displaying the stepName because that's what the step rename selector is displaying. So for now, can you actually keep using capitalizeFirstLetter() and add a case for flex stacker? we can go back and refactor the function later.
Screen.Recording.2025-12-03.at.06.50.32.mov
jerader
left a comment
jerader
left a comment
There was a problem hiding this comment.
nice! a bunch of stuff needs to be adding to css modules 😭 and left a few other comments.
ncdiehl11
left a comment
ncdiehl11
left a comment
There was a problem hiding this comment.
first pass of feedback!
components/src/organisms/LabwareDetailsWithCount/LabwareDetailsWithCount.module.css
Outdated
Show resolved
Hide resolved
protocol-designer/src/assets/localization/en/protocol_steps.json
Outdated
Show resolved
Hide resolved
...ocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/FlexStackerTools/index.tsx
Outdated
Show resolved
Hide resolved
...ocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/FlexStackerTools/index.tsx
Outdated
Show resolved
Hide resolved
| <RadioButton | ||
| buttonValue="retrieve" | ||
| disabled={labwareInHopperCount === 0 || labwareOnShuttle != null} | ||
| buttonLabel={ | ||
| <StyledText desktopStyle="bodyDefaultRegular">Retrieve</StyledText> | ||
| } | ||
| buttonSubLabel={{ | ||
| align: 'vertical', | ||
| label: t( | ||
| 'protocol_steps:flex_stacker.module_controls.retrieve_sublabel' | ||
| ), | ||
| }} | ||
| onChange={() => {}} | ||
| largeDesktopBorderRadius | ||
| /> |
There was a problem hiding this comment.
This button has to be dynamic depending on if there's labware on the shuttle or not right? Maybe we should move the radio button logic to a hook that will take the robot state and return the radio button options
| @@ -251,6 +251,14 @@ export function getDefaultsForStepType( | |||
| referenceWavelengthActive: false, | |||
| wavelengths: [Object.keys(ABSORBANCE_READER_COLOR_BY_WAVELENGTH)[0]], // default to first known wavelength | |||
| } | |||
| case 'flexStacker': | |||
| return { | |||
There was a problem hiding this comment.
i forgot where we landed on this but didn't we discuss having something like flexStackerFormType akin to the absorbance reader form type?
There was a problem hiding this comment.
was planning on implementing this as part of the command implementation
There was a problem hiding this comment.
left a comment about not being fully flushed
| @@ -498,6 +501,12 @@ export interface HydratedAbsorbanceReaderFormData extends AnnotationFields { | |||
| wavelengths: string[] | |||
| } | |||
|
|
|||
| export interface HydratedFlexStackerFormData extends AnnotationFields { | |||
There was a problem hiding this comment.
I think we're missing fields here. This should include the types of all the properties in protocol-designer/src/steplist/formLevel/getDefaultsForStepType.ts
There was a problem hiding this comment.
left a comment about not being fully flushed
| @@ -112,6 +112,7 @@ export interface FlexStackerModuleState { | |||
| type: typeof FLEX_STACKER_MODULE_TYPE | |||
| maxPoolCount: number | |||
| storedLabwareDetails: FlexStackerSetStoredLabwareParams | null | |||
| // labware in hopper is the bottom up | |||
Co-authored-by: Jethary Alcid <66035149+jerader@users.noreply.github.com>
ncdiehl11
left a comment
ncdiehl11
left a comment
There was a problem hiding this comment.
i left a couple of cleanup comments, but once those are addressed and checks pass, I think this is good to merge!! 🚀
components/src/assets/localization/en/protocol_command_text.json
Outdated
Show resolved
Hide resolved
| justify-content: space-between; | ||
| } | ||
|
|
||
| div.container { |
There was a problem hiding this comment.
do we need div here since we're adding these styles to a div in the component?
There was a problem hiding this comment.
so I added the div bc the I wanted to make sure that this class is being appended to a div but its also a local css file so its not really a MUST
| gap: var(--spacing-8); | ||
| } | ||
|
|
||
| div.container.padding_x { |
| {/* TODO: use module object from form.json instead */} | ||
| {formData.stepType === 'flexStacker' | ||
| ? t(`protocol_steps:${formData.stepType}`) | ||
| : capitalizeFirstLetter(String(formData.stepName))} |
There was a problem hiding this comment.
sorry why do we need to special case the stacker? it could be right I am just not following
There was a problem hiding this comment.
we want to move away from capitalizeFirstLetter and use the step type as the key in a translation file. so instead of special casing this in capitalizeFirstLetter I special cased it here.
TamarZanzouri
deleted the
EXEC-1445-add-a-stacker-step-to-the-protocol
branch
Overview
part of https://opentrons.atlassian.net/browse/EXEC-1445 to unblock stacker form work.
Test Plan and Hands on Testing
Changelog
labawreDetailsWithQuantityto shared componentsReview requests
Risk assessment
low. adding a new step form for flex stacker.