diff --git a/protocol-designer/src/assets/localization/en/protocol_steps.json b/protocol-designer/src/assets/localization/en/protocol_steps.json index 5e3cab604229..bec8884fec2a 100644 --- a/protocol-designer/src/assets/localization/en/protocol_steps.json +++ b/protocol-designer/src/assets/localization/en/protocol_steps.json @@ -4,10 +4,12 @@ "default_tip_option": "Default - get next tip", "delete": "Delete step", "dispensed": "Dispensed", + "in": "in", "duplicate": "Duplicate step", "final_deck_state": "Final deck state", "from": "from", "heater_shaker_settings": "Heater-shaker settings", + "mix": "Mix", "module": "Module", "multiAspirate": "Consolidate path", "multiDispense": "Distribute path", diff --git a/protocol-designer/src/components/DeckSetup/LabwareOnDeck.tsx b/protocol-designer/src/components/DeckSetup/LabwareOnDeck.tsx index 8101ad20e57b..fe9b0da22b67 100644 --- a/protocol-designer/src/components/DeckSetup/LabwareOnDeck.tsx +++ b/protocol-designer/src/components/DeckSetup/LabwareOnDeck.tsx @@ -7,7 +7,6 @@ import * as highlightSelectors from '../../top-selectors/substep-highlight' import * as tipContentsSelectors from '../../top-selectors/tip-contents' import { wellFillFromWellContents } from '../labware/utils' import type { LabwareOnDeck as LabwareOnDeckType } from '../../step-forms' -import { LabwareHighlight } from './LabwareOverlays/LabwareHighlight' interface LabwareOnDeckProps { className?: string @@ -38,8 +37,6 @@ export function LabwareOnDeck(props: LabwareOnDeckProps): JSX.Element { return ( - - { diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareHighlight.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareHighlight.tsx index 60029794fa6b..78d0a8ada5c6 100644 --- a/protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareHighlight.tsx +++ b/protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareHighlight.tsx @@ -48,9 +48,9 @@ export const LabwareHighlight = ( [styles.highlight_fill]: isTcProfile, })} > - {/* {isTcProfile && ( */} - - {/* )} */} + {isTcProfile && ( + + )} ) } diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/Substep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/Substep.tsx index d27bce3c8dfb..6168ee44eb84 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/Substep.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/Substep.tsx @@ -75,6 +75,9 @@ function SubstepComponent(props: SubstepRowProps): JSX.Element { type="default" /> ) + + const isMix = source?.well === dest?.well + return ( { @@ -89,80 +92,119 @@ function SubstepComponent(props: SubstepRowProps): JSX.Element { flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4} > - - - {ingredIds.length > 0 ? ( - - + {isMix ? ( + + + {ingredIds.length > 0 ? ( + + + + + {ingredIds.map(groupId => ingredNames[groupId]).join(',')} + + + ) : null} - - {ingredIds.map(groupId => ingredNames[groupId]).join(',')} - - - ) : null} - {source != null ? ( - {t('protocol_steps:aspirated')} + {t('protocol_steps:mix')} {volumeTag} - {t('protocol_steps:from')} + {t('protocol_steps:in')} - ) : null} - - - - - {ingredIds.length > 0 ? ( - - - - {ingredIds.map(groupId => ingredNames[groupId]).join(',')} - + + + ) : ( + <> + + + {ingredIds.length > 0 ? ( + + + + + {ingredIds.map(groupId => ingredNames[groupId]).join(',')} + + + ) : null} + {source != null ? ( + + + {t('protocol_steps:aspirated')} + + {volumeTag} + + {t('protocol_steps:from')} + + + + ) : null} - ) : null} - {dest != null || trashName != null ? ( - - - {t('protocol_steps:dispensed')} - - {volumeTag} - - {t('protocol_steps:into')} - + + + + {ingredIds.length > 0 ? ( + + + + {ingredIds.map(groupId => ingredNames[groupId]).join(',')} + + + ) : null} + {dest != null || trashName != null ? ( + + + {t('protocol_steps:dispensed')} + + {volumeTag} + + {t('protocol_steps:into')} + - + + + ) : null} - ) : null} - - + + + )} ) }