fix(protocol-designer): remove flickering in timeline and fix distrib… (

#16901) …ute details closes RQA-3630 RQA-3624
Opentrons · Nov 22, 2024 · 7af746b · 7af746b
1 parent 49454f0
commit 7af746b
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 156 deletions.
diff --git a/protocol-designer/src/assets/localization/en/protocol_steps.json b/protocol-designer/src/assets/localization/en/protocol_steps.json
@@ -27,7 +27,7 @@
   "duplicate": "Duplicate step",
   "edit_step": "Edit step",
   "engage_height": "Engage height",
-  "final_deck_state": "Final deck state",
+  "ending_deck": "Ending deck",
   "flow_type_title": "{{type}} flow rate",
   "from": "from",
   "heater_shaker": {
@@ -104,7 +104,7 @@
   "shake": "Shake",
   "single": "Single path",
   "speed": "Speed",
-  "starting_deck_state": "Starting deck state",
+  "starting_deck": "Starting deck",
   "step_substeps": "{{stepType}} details",
   "temperature": "Temperature",
   "temperature_module": {
@@ -120,8 +120,8 @@
     "substep_settings": "<text>Set block temperature to</text><tagTemperature/><text>for</text><tagDuration/>",
     "thermocycler_profile": {
       "end_hold": {
-        "block": "<text>End at thermocycler block</text><tag/>",
-        "lid_position": "<text>Thermocycler lid</text><tag/>"
+        "block": "<text>End with block at</text><tag/>",
+        "lid_position": "<text>and lid</text><tag/>"
       },
       "lid_temperature": "<text>and lid temperature at</text><tag/>",
       "volume": "<text>Run thermocycler profile with</text><tag/>"

diff --git a/protocol-designer/src/assets/localization/en/starting_deck_state.json b/protocol-designer/src/assets/localization/en/starting_deck_state.json
@@ -1,4 +1,7 @@
 {
+  "__end__": "Ending deck",
+  "__initial_setup__": "Starting deck",
+  "__presaved_step__": "Unsaved step",
   "adapter_compatible_lab": "Adapter compatible labware",
   "adapter": "Adapters",
   "add_fixture": "Add a fixture",

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
@@ -79,7 +79,6 @@ interface StepSummaryProps {
 export function StepSummary(props: StepSummaryProps): JSX.Element | null {
   const { currentStep, stepDetails } = props
   const { t } = useTranslation(['protocol_steps', 'application'])
-
   const labwareNicknamesById = useSelector(getLabwareNicknamesById)
   const additionalEquipmentEntities = useSelector(
     getAdditionalEquipmentEntities
@@ -91,7 +90,6 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
     return null
   }
   const { stepType } = currentStep
-
   let stepSummaryContent: JSX.Element | null = null
   switch (stepType) {
     case 'mix':
@@ -184,16 +182,20 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
           </Flex>
         ) : (
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-            <StyledTrans
-              i18nKey="protocol_steps:thermocycler_module.thermocycler_profile.volume"
-              tagText={`${profileVolume} ${t('application:units.microliter')}`}
-            />
-            <StyledTrans
-              i18nKey="protocol_steps:thermocycler_module.thermocycler_profile.lid_temperature"
-              tagText={`${profileTargetLidTemp}${t(
-                'application:units.degrees'
-              )}`}
-            />
+            <Flex gridGap={SPACING.spacing20}>
+              <StyledTrans
+                i18nKey="protocol_steps:thermocycler_module.thermocycler_profile.volume"
+                tagText={`${profileVolume} ${t(
+                  'application:units.microliter'
+                )}`}
+              />
+              <StyledTrans
+                i18nKey="protocol_steps:thermocycler_module.thermocycler_profile.lid_temperature"
+                tagText={`${profileTargetLidTemp}${t(
+                  'application:units.degrees'
+                )}`}
+              />
+            </Flex>
             <Flex gridGap={SPACING.spacing20}>
               <StyledTrans
                 i18nKey="protocol_steps:thermocycler_module.thermocycler_profile.end_hold.block"
@@ -405,7 +407,6 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
     default:
       stepSummaryContent = null
   }
-
   return stepSummaryContent != null || stepDetails != null ? (
     <Flex
       flexDirection={DIRECTION_COLUMN}
@@ -414,7 +415,9 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
     >
       {stepSummaryContent != null ? (
         <ListItem type="noActive">
-          <Flex padding={SPACING.spacing12}>{stepSummaryContent}</Flex>
+          <Flex padding={SPACING.spacing12} height="4.75rem">
+            {stepSummaryContent}
+          </Flex>
         </ListItem>
       ) : null}
       {stepDetails != null && stepDetails !== '' ? (

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/MultichannelSubstep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/MultichannelSubstep.tsx
@@ -17,13 +17,11 @@ import type { AdditionalEquipmentName } from '@opentrons/step-generation'
 import type {
   StepItemSourceDestRow,
   SubstepIdentifier,
-  WellIngredientNames,
 } from '../../../../steplist'
 
 interface MultichannelSubstepProps {
   trashName: AdditionalEquipmentName | null
   rowGroup: StepItemSourceDestRow[]
-  ingredNames: WellIngredientNames
   stepId: string
   substepIndex: number
   selectSubstep: (substepIdentifier: SubstepIdentifier) => void
@@ -39,7 +37,6 @@ export function MultichannelSubstep(
     stepId,
     selectSubstep,
     substepIndex,
-    ingredNames,
     trashName,
     isSameLabware,
   } = props
@@ -107,7 +104,6 @@ export function MultichannelSubstep(
                     trashName={trashName}
                     key={rowKey}
                     volume={row.volume}
-                    ingredNames={ingredNames}
                     source={row.source}
                     dest={row.dest}
                     stepId={stepId}

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/PipettingSubsteps.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/PipettingSubsteps.tsx
@@ -4,7 +4,6 @@ import { MultichannelSubstep } from './MultichannelSubstep'
 import type {
   SourceDestSubstepItem,
   SubstepIdentifier,
-  WellIngredientNames,
 } from '../../../../steplist'
 import { useSelector } from 'react-redux'
 import {
@@ -14,13 +13,12 @@ import {
 
 interface PipettingSubstepsProps {
   substeps: SourceDestSubstepItem
-  ingredNames: WellIngredientNames
   selectSubstep: (substepIdentifier: SubstepIdentifier) => void
   hoveredSubstep?: SubstepIdentifier | null
 }
 
 export function PipettingSubsteps(props: PipettingSubstepsProps): JSX.Element {
-  const { substeps, selectSubstep, hoveredSubstep, ingredNames } = props
+  const { substeps, selectSubstep, hoveredSubstep } = props
   const stepId = substeps.parentStepId
   const formData = useSelector(getSavedStepForms)[stepId]
   const additionalEquipment = useSelector(getAdditionalEquipment)
@@ -52,7 +50,6 @@ export function PipettingSubsteps(props: PipettingSubstepsProps): JSX.Element {
             stepId={substeps.parentStepId}
             substepIndex={groupKey}
             selectSubstep={selectSubstep}
-            ingredNames={ingredNames}
             isSameLabware={isSameLabware}
           />
         )
@@ -64,7 +61,6 @@ export function PipettingSubsteps(props: PipettingSubstepsProps): JSX.Element {
           selectSubstep={selectSubstep}
           stepId={substeps.parentStepId}
           substepIndex={substepIndex}
-          ingredNames={ingredNames}
           volume={row.volume}
           source={row.source}
           dest={row.dest}

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -45,8 +45,8 @@ import type { IconName } from '@opentrons/components'
 import type { StepIdType } from '../../../../form-types'
 import type { BaseState } from '../../../../types'
 
-const STARTING_DECK_STATE = 'Starting deck state'
-const FINAL_DECK_STATE = 'Final deck state'
+const STARTING_DECK_STATE = 'Starting deck'
+const FINAL_DECK_STATE = 'Ending deck'
 const PX_HEIGHT_TO_TOP_OF_CONTAINER = 32
 export interface StepContainerProps {
   title: string

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx
@@ -64,7 +64,9 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
   const isPipetteStep =
     savedStepFormData.stepType === 'moveLiquid' ||
     savedStepFormData.stepType === 'mix'
-  const isThermocyclerProfile = savedStepFormData.stepType === 'thermocycler'
+  const isThermocyclerProfile =
+    savedStepFormData.stepType === 'thermocycler' &&
+    savedStepFormData.thermocyclerFormType === 'thermocyclerProfile'
 
   const duplicateStep = (
     stepId: StepIdType