feat(protocol-designer): update StepSummary render logic and copy (#1…

…6512) This PR updates when StepSummaries show and updates copy to reflect final decisions. The intended behavior is to only show StepSummary when a step is hovered or selected, but not when the step form is open. Hovered StepSummaries take precedence over those of selected steps. I also add an optional second element to StepSummary that will display the step's notes if they exists. Closes AUTH-886
Opentrons · Oct 21, 2024 · 3002d0b · 3002d0b
1 parent d9f7d2a
commit 3002d0b
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 23 deletions.
diff --git a/protocol-designer/src/assets/localization/en/protocol_steps.json b/protocol-designer/src/assets/localization/en/protocol_steps.json
@@ -27,6 +27,7 @@
   "from": "from",
   "heater_shaker": {
     "active": {
+      "ambient": "ambient",
       "latch": "<text>Latch</text><tag/>",
       "shake": "<text>Shaking at</text><tag/>",
       "temperature": "<semiBoldText>{{module}}</semiBoldText><text>set to</text><tag/>",
@@ -49,17 +50,17 @@
   "mix_times": "Mix repititions",
   "mix_volume": "Mix volume",
   "mix": "Mix",
-  "mix_step": "<text>Mixing</text><tag/><text>{{times}} times in</text><semiBoldText>{{labware}}</semiBoldText>",
+  "mix_step": "<text>Mixing</text><tag/><text>{{times}} times in</text><semiBoldText>{{wells}} of {{labware}}</semiBoldText>",
   "mix_repetitions": "Mix repetitions",
   "module": "Module",
   "move_labware": {
     "gripper": "<text>Move</text><semiBoldText>{{labware}}</semiBoldText><text>to</text><tag/><text>using gripper</text>",
     "no_gripper": "<text>Move</text><semiBoldText>{{labware}}</semiBoldText><text>to</text><tag/>"
   },
   "move_liquid": {
-    "consolidate": "<text>Consolidating</text><tag/><text>from</text><semiBoldText>{{source}}</semiBoldText><text>to</text><semiBoldText>{{destination}}</semiBoldText>",
-    "distribute": "<text>Distributing</text><tag/><text>from</text><semiBoldText>{{source}}</semiBoldText><text>to</text><semiBoldText>{{destination}}</semiBoldText>",
-    "transfer": "<text>Transferring</text><tag/><text>from</text><semiBoldText>{{source}}</semiBoldText><text>to</text><semiBoldText>{{destination}}</semiBoldText>"
+    "consolidate": "<text>Consolidating</text><tag/><text>from</text><semiBoldText>{{sourceWells}} of {{source}}</semiBoldText><text>to</text><semiBoldText>{{destinationWells}} of {{destination}}</semiBoldText>",
+    "distribute": "<text>Distributing</text><tag/><text>from</text><semiBoldText>{{sourceWells}} of {{source}}</semiBoldText><text>to</text><semiBoldText>{{destinationWells}} of {{destination}}</semiBoldText>",
+    "transfer": "<text>Transferring</text><tag/><text>from</text><semiBoldText>{{sourceWells}} of {{source}}</semiBoldText><text>to</text><semiBoldText>{{destinationWells}} of {{destination}}</semiBoldText>"
   },
   "multi_dispense_options": "Distribute options",
   "multiAspirate": "Consolidate path",

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
@@ -1,6 +1,8 @@
 import { useSelector } from 'react-redux'
 import { Trans, useTranslation } from 'react-i18next'
-
+import first from 'lodash/first'
+import flatten from 'lodash/flatten'
+import last from 'lodash/last'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -14,7 +16,10 @@ import {
 } from '@opentrons/components'
 import { getModuleDisplayName } from '@opentrons/shared-data'
 
-import { getModuleEntities } from '../../../step-forms/selectors'
+import {
+  getLabwareEntities,
+  getModuleEntities,
+} from '../../../step-forms/selectors'
 import { getLabwareNicknamesById } from '../../../ui/labware/selectors'
 
 import type { FormData } from '../../../form-types'
@@ -43,16 +48,35 @@ function StyledTrans(props: StyledTransProps): JSX.Element {
   )
 }
 
+const getWellsForStepSummary = (
+  targetWells: string[],
+  labwareWells: string[]
+): string => {
+  if (targetWells.length === 1) {
+    return targetWells[0]
+  }
+  const firstElementIndexOffset = labwareWells.indexOf(targetWells[0])
+  const isInOrder = targetWells.every(
+    (targetWell, i) =>
+      labwareWells.indexOf(targetWell) === firstElementIndexOffset + i
+  )
+  return isInOrder
+    ? `${first(targetWells)}-${last(targetWells)}`
+    : `${targetWells.length} wells`
+}
+
 interface StepSummaryProps {
   currentStep: FormData | null
+  stepDetails?: string
 }
 
 export function StepSummary(props: StepSummaryProps): JSX.Element | null {
-  const { currentStep } = props
+  const { currentStep, stepDetails } = props
   const { t } = useTranslation(['protocol_steps', 'application'])
 
   const labwareNicknamesById = useSelector(getLabwareNicknamesById)
 
+  const labwareEntities = useSelector(getLabwareEntities)
   const modules = useSelector(getModuleEntities)
   if (currentStep?.stepType == null) {
     return null
@@ -62,13 +86,28 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
   let stepSummaryContent: JSX.Element | null = null
   switch (stepType) {
     case 'mix':
-      const { labware: mixLabwareId, volume: mixVolume, times } = currentStep
+      const {
+        labware: mixLabwareId,
+        volume: mixVolume,
+        times,
+        wells: mix_wells,
+        labware: mixLabware,
+      } = currentStep
       const mixLabwareDisplayName = labwareNicknamesById[mixLabwareId]
+      const mixWellsDisplay = getWellsForStepSummary(
+        mix_wells as string[],
+        flatten(labwareEntities[mixLabware].def.ordering)
+      )
+
       stepSummaryContent = (
         <StyledTrans
           i18nKey="protocol_steps:mix_step"
           tagText={`${mixVolume} ${t('application:units.microliter')}`}
-          values={{ labware: mixLabwareDisplayName, times }}
+          values={{
+            labware: mixLabwareDisplayName,
+            times,
+            wells: mixWellsDisplay,
+          }}
         />
       )
       break
@@ -254,13 +293,29 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
       } else {
         moveLiquidType = 'transfer'
       }
-      const { aspirate_labware, dispense_labware, volume } = currentStep
+      const {
+        aspirate_labware,
+        aspirate_wells,
+        dispense_wells,
+        dispense_labware,
+        volume,
+      } = currentStep
       const sourceLabwareName = labwareNicknamesById[aspirate_labware]
       const destinationLabwareName = labwareNicknamesById[dispense_labware]
+      const aspirateWellsDisplay = getWellsForStepSummary(
+        aspirate_wells as string[],
+        flatten(labwareEntities[aspirate_labware].def.ordering)
+      )
+      const dispenseWellsDisplay = getWellsForStepSummary(
+        dispense_wells as string[],
+        flatten(labwareEntities[dispense_labware].def.ordering)
+      )
       stepSummaryContent = (
         <StyledTrans
           i18nKey={`protocol_steps:move_liquid.${moveLiquidType}`}
           values={{
+            sourceWells: aspirateWellsDisplay,
+            destinationWells: dispenseWellsDisplay,
             source: sourceLabwareName,
             destination: destinationLabwareName,
           }}
@@ -287,9 +342,13 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
             <StyledTrans
               i18nKey="protocol_steps:heater_shaker.active.temperature"
               values={{ module: moduleDisplayName }}
-              tagText={`${targetHeaterShakerTemperature ?? '-'}${t(
-                'application:units.degrees'
-              )}`}
+              tagText={
+                targetHeaterShakerTemperature != null
+                  ? `${targetHeaterShakerTemperature}${t(
+                      'application:units.degrees'
+                    )}`
+                  : t('protocol_steps:heater_shaker.active.ambient')
+              }
             />
             {targetSpeed != null ? (
               <StyledTrans
@@ -322,15 +381,33 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
       stepSummaryContent = null
   }
 
-  return stepSummaryContent != null ? (
+  return stepSummaryContent != null || stepDetails != null ? (
     <Flex
-      backgroundColor={COLORS.grey30}
-      padding={SPACING.spacing12}
-      borderRadius={BORDERS.borderRadius4}
-      width={FLEX_MAX_CONTENT}
-      minWidth="100%"
+      flexDirection={DIRECTION_COLUMN}
+      gridGap={SPACING.spacing4}
+      width="100%"
     >
-      {stepSummaryContent}
+      {stepSummaryContent != null ? (
+        <Flex
+          backgroundColor={COLORS.grey30}
+          padding={SPACING.spacing12}
+          borderRadius={BORDERS.borderRadius4}
+          width={FLEX_MAX_CONTENT}
+          minWidth="100%"
+        >
+          {stepSummaryContent}
+        </Flex>
+      ) : null}
+      {stepDetails != null && stepDetails !== '' ? (
+        <StyledText
+          backgroundColor={COLORS.grey30}
+          padding={SPACING.spacing12}
+          borderRadius={BORDERS.borderRadius4}
+          desktopStyle="bodyDefaultRegular"
+        >
+          {stepDetails}
+        </StyledText>
+      ) : null}
     </Flex>
   ) : null
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -63,10 +63,10 @@ export function ProtocolSteps(): JSX.Element {
       ? savedStepForms[currentstepIdForStepSummary]
       : null
 
+  const stepDetails = currentStep?.stepDetails ?? null
   return (
     <Flex
       backgroundColor={COLORS.grey10}
-      // alignItems={ALIGN_CENTER}
       width="100%"
       gridGap={SPACING.spacing16}
       height="calc(100vh - 4rem)"
@@ -99,14 +99,21 @@ export function ProtocolSteps(): JSX.Element {
               />
             </Flex>
           ) : null}
-          <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
+          <Flex
+            flexDirection={DIRECTION_COLUMN}
+            gridGap={SPACING.spacing16}
+            maxWidth="46.9375rem"
+          >
             {deckView === leftString ? (
               <DeckSetupContainer tab="protocolSteps" />
             ) : (
               <OffDeck tab="protocolSteps" />
             )}
             {formData == null ? (
-              <StepSummary currentStep={currentStep} />
+              <StepSummary
+                currentStep={currentStep}
+                stepDetails={stepDetails}
+              />
             ) : null}
           </Flex>
         </Flex>