@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

package/src/organisms/CommandText/index.tsx

@@ -0,0 +1,280 @@
+import pick from 'lodash/pick'
+import { css } from 'styled-components'
+
+import { LegacyStyledText, StyledText } from '../../atoms'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER, DIRECTION_COLUMN } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import { useCommandTextString } from './useCommandTextString'
+
+import type { ComponentProps } from 'react'
+import type {
+  LabwareDefinition2,
+  RobotType,
+  RunTimeCommand,
+} from '@opentrons/shared-data'
+import type { StyleProps } from '../../primitives'
+import type { CommandTextData } from '../ProtocolTimelineScrubber/types'
+import type {
+  GetTCRunExtendedProfileCommandTextResult,
+  GetTCRunProfileCommandTextResult,
+} from './useCommandTextString'
+
+export * from './useCommandTextString'
+interface LegacySTProps {
+  as?: ComponentProps<typeof LegacyStyledText>['as']
+  modernStyledTextDefaults?: false
+}
+
+interface ModernSTProps {
+  desktopStyle?: ComponentProps<typeof StyledText>['desktopStyle']
+  oddStyle?: ComponentProps<typeof StyledText>['oddStyle']
+  modernStyledTextDefaults: true
+}
+
+type STProps = LegacySTProps | ModernSTProps
+
+interface BaseProps extends StyleProps {
+  command: RunTimeCommand
+  allRunDefs: LabwareDefinition2[]
+  commandTextData: CommandTextData
+  robotType: RobotType
+  isOnDevice?: boolean
+  propagateCenter?: boolean
+  propagateTextLimit?: boolean
+}
+export function CommandText(props: BaseProps & STProps): JSX.Element | null {
+  const commandText = useCommandTextString({
+    ...props,
+  })
+
+  switch (commandText.kind) {
+    case 'thermocycler/runProfile': {
+      return (
+        <ThermocyclerRunProfile
+          {...props}
+          commandText={commandText.commandText}
+          stepTexts={commandText.stepTexts}
+        />
+      )
+    }
+    case 'thermocycler/runExtendedProfile': {
+      return (
+        <ThermocyclerRunExtendedProfile
+          {...props}
+          commandText={commandText.commandText}
+          profileElementTexts={commandText.profileElementTexts}
+        />
+      )
+    }
+    default: {
+      return (
+        <CommandStyledText {...props}>
+          {commandText.commandText}
+        </CommandStyledText>
+      )
+    }
+  }
+}
+
+const forwardSTProps = (props: STProps): STProps =>
+  pick(props, ['as', 'oddStyle', 'desktopStyle', 'modernStyledTextDefaults'])
+
+const isModernSTProps = (props: STProps): props is ModernSTProps =>
+  props.hasOwnProperty('desktopStyle') ||
+  props.hasOwnProperty('oddStyle') ||
+  !!props.modernStyledTextDefaults
+
+function CommandStyledText(
+  props: STProps & {
+    children: JSX.Element[] | JSX.Element | string
+  } & StyleProps
+): JSX.Element {
+  if (isModernSTProps(props)) {
+    return (
+      <StyledText
+        desktopStyle={props.desktopStyle ?? 'bodyDefaultRegular'}
+        oddStyle={props.oddStyle ?? 'bodyTextRegular'}
+        {...props}
+      >
+        {props.children}
+      </StyledText>
+    )
+  } else {
+    return (
+      <LegacyStyledText as={props.as ?? 'p'} {...props}>
+        {props.children}
+      </LegacyStyledText>
+    )
+  }
+}
+
+const shouldPropagateCenter = (
+  propagateCenter: boolean,
+  isOnDevice?: boolean
+): boolean => isOnDevice === true || propagateCenter
+const shouldPropagateTextLimit = (
+  propagateTextLimit: boolean,
+  isOnDevice?: boolean
+): boolean => isOnDevice === true || propagateTextLimit
+
+type ThermocyclerRunProfileProps = BaseProps &
+  STProps &
+  Omit<GetTCRunProfileCommandTextResult, 'kind'>
+
+function ThermocyclerRunProfile(
+  props: ThermocyclerRunProfileProps
+): JSX.Element {
+  const {
+    isOnDevice,
+    propagateCenter = false,
+    propagateTextLimit = false,
+    commandText,
+    stepTexts,
+    ...styleProps
+  } = props
+
+  // TODO(sfoster): Command sometimes wraps this in a cascaded display: -webkit-box
+  // to achieve multiline text clipping with an automatically inserted ellipsis, which works
+  // everywhere except for here where it overrides this property in the flex since this is
+  // the only place where CommandText uses a flex.
+  // The right way to handle this is probably to take the css that's in Command and make it
+  // live here instead, but that should be done in a followup since it would touch everything.
+  // See also the margin-left on the <li>s, which is needed to prevent their bullets from
+  // clipping if a container set overflow: hidden.
+  return (
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      {...styleProps}
+      alignItems={
+        shouldPropagateCenter(propagateCenter, isOnDevice)
+          ? ALIGN_CENTER
+          : undefined
+      }
+      css={`
+        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          display: flex !important;
+        } ;
+      `}
+    >
+      <CommandStyledText
+        {...forwardSTProps(props)}
+        marginBottom={SPACING.spacing4}
+        {...styleProps}
+      >
+        {commandText}
+      </CommandStyledText>
+      <CommandStyledText
+        {...forwardSTProps(props)}
+        marginLeft={SPACING.spacing16}
+      >
+        <ul>
+          {shouldPropagateTextLimit(propagateTextLimit, isOnDevice) ? (
+            <li css={LIST_STYLE}>{stepTexts[0]}</li>
+          ) : (
+            stepTexts.map((step: string, index: number) => (
+              <li css={LIST_STYLE} key={index}>
+                {' '}
+                {step}
+              </li>
+            ))
+          )}
+        </ul>
+      </CommandStyledText>
+    </Flex>
+  )
+}
+
+type ThermocyclerRunExtendedProfileProps = BaseProps &
+  STProps &
+  Omit<GetTCRunExtendedProfileCommandTextResult, 'kind'>
+
+function ThermocyclerRunExtendedProfile(
+  props: ThermocyclerRunExtendedProfileProps
+): JSX.Element {
+  const {
+    isOnDevice,
+    propagateCenter = false,
+    propagateTextLimit = false,
+    commandText,
+    profileElementTexts,
+    ...styleProps
+  } = props
+
+  // TODO(sfoster): Command sometimes wraps this in a cascaded display: -webkit-box
+  // to achieve multiline text clipping with an automatically inserted ellipsis, which works
+  // everywhere except for here where it overrides this property in the flex since this is
+  // the only place where CommandText uses a flex.
+  // The right way to handle this is probably to take the css that's in Command and make it
+  // live here instead, but that should be done in a followup since it would touch everything.
+  // See also the margin-left on the <li>s, which is needed to prevent their bullets from
+  // clipping if a container set overflow: hidden.
+  return (
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      {...styleProps}
+      alignItems={
+        shouldPropagateCenter(propagateCenter, isOnDevice)
+          ? ALIGN_CENTER
+          : undefined
+      }
+      css={`
+        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          display: flex !important;
+        } ;
+      `}
+    >
+      <CommandStyledText
+        {...forwardSTProps(props)}
+        marginBottom={SPACING.spacing4}
+        {...styleProps}
+      >
+        {commandText}
+      </CommandStyledText>
+      <CommandStyledText
+        {...forwardSTProps(props)}
+        marginLeft={SPACING.spacing16}
+      >
+        <ul>
+          {shouldPropagateTextLimit(propagateTextLimit, isOnDevice) ? (
+            <li css={LIST_STYLE}>
+              {profileElementTexts[0].kind === 'step'
+                ? profileElementTexts[0].stepText
+                : profileElementTexts[0].cycleText}
+            </li>
+          ) : (
+            profileElementTexts.map((element, index: number) =>
+              element.kind === 'step' ? (
+                <li css={LIST_STYLE} key={`tc-outer-step-${index}`}>
+                  {' '}
+                  {element.stepText}
+                </li>
+              ) : (
+                <li css={LIST_STYLE} key={`tc-outer-step-${index}`}>
+                  {element.cycleText}
+                  <ul>
+                    {element.stepTexts.map(
+                      ({ stepText }, stepIndex: number) => (
+                        <li
+                          css={LIST_STYLE}
+                          key={`tc-inner-step-${index}.${stepIndex}`}
+                        >
+                          {' '}
+                          {stepText}
+                        </li>
+                      )
+                    )}
+                  </ul>
+                </li>
+              )
+            )
+          )}
+        </ul>
+      </CommandStyledText>
+    </Flex>
+  )
+}
+
+const LIST_STYLE = css`
+  margin-left: ${SPACING.spacing4};
+`

package/src/organisms/CommandText/useCommandTextString/index.ts

@@ -0,0 +1,338 @@
+import { useTranslation } from 'react-i18next'
+
+import * as utils from './utils'
+
+import type { TFunction } from 'i18next'
+import type {
+  LabwareDefinition2,
+  RobotType,
+  RunTimeCommand,
+} from '@opentrons/shared-data'
+import type { CommandTextData } from '../../ProtocolTimelineScrubber/types'
+import type {
+  GetDirectTranslationCommandText,
+  TCProfileCycleText,
+  TCProfileStepText,
+} from './utils'
+
+export * from './utils'
+
+export interface UseCommandTextStringParams {
+  command: RunTimeCommand | null
+  allRunDefs: LabwareDefinition2[]
+  commandTextData: CommandTextData | null
+  robotType: RobotType
+}
+
+export type GetCommandText = UseCommandTextStringParams & { t: TFunction }
+export interface GetGenericCommandTextResult {
+  kind: 'generic'
+  /* The actual command text. Ex "Homing all gantry, pipette, and plunger axes" */
+  commandText: string
+}
+export interface GetTCRunProfileCommandTextResult {
+  kind: 'thermocycler/runProfile'
+  commandText: string
+  /* The TC run profile steps.  */
+  stepTexts: string[]
+}
+export interface GetTCRunExtendedProfileCommandTextResult {
+  kind: 'thermocycler/runExtendedProfile'
+  commandText: string
+  profileElementTexts: Array<TCProfileStepText | TCProfileCycleText>
+}
+export type GetCommandTextResult =
+  | GetGenericCommandTextResult
+  | GetTCRunProfileCommandTextResult
+  | GetTCRunExtendedProfileCommandTextResult
+
+// TODO(jh, 07-18-24): Move the testing that covers this from CommandText to a new file, and verify that all commands are
+// properly tested.
+
+// Get the full user-facing command text string from a given command.
+export function useCommandTextString(
+  params: UseCommandTextStringParams
+): GetCommandTextResult {
+  const { command } = params
+  const { t } = useTranslation(['protocol_command_text', 'branded'])
+
+  const fullParams = { ...params, t }
+
+  switch (command?.commandType) {
+    case 'touchTip':
+    case 'home':
+    case 'savePosition':
+    case 'magneticModule/engage':
+    case 'magneticModule/disengage':
+    case 'temperatureModule/deactivate':
+    case 'thermocycler/waitForBlockTemperature':
+    case 'thermocycler/waitForLidTemperature':
+    case 'thermocycler/openLid':
+    case 'thermocycler/closeLid':
+    case 'thermocycler/deactivateBlock':
+    case 'thermocycler/deactivateLid':
+    case 'thermocycler/awaitProfileComplete':
+    case 'heaterShaker/deactivateHeater':
+    case 'heaterShaker/openLabwareLatch':
+    case 'heaterShaker/closeLabwareLatch':
+    case 'heaterShaker/deactivateShaker':
+    case 'heaterShaker/waitForTemperature':
+      return {
+        kind: 'generic',
+        commandText: utils.getDirectTranslationCommandText(
+          fullParams as GetDirectTranslationCommandText
+        ),
+      }
+
+    case 'aspirate':
+    case 'aspirateInPlace':
+    case 'dispense':
+    case 'dispenseInPlace':
+    case 'blowout':
+    case 'blowOutInPlace':
+    case 'dropTip':
+    case 'dropTipInPlace':
+    case 'pickUpTip':
+    case 'airGapInPlace':
+    case 'sealPipetteToTip':
+    case 'unsealPipetteFromTip':
+    case 'pressureDispense':
+      return {
+        kind: 'generic',
+        commandText: utils.getPipettingCommandText(fullParams),
+      }
+
+    case 'loadLabware':
+    case 'reloadLabware':
+    case 'loadLid':
+    case 'loadLidStack':
+    case 'loadPipette':
+    case 'loadModule':
+    case 'loadLiquid':
+    case 'loadLiquidClass':
+      return {
+        kind: 'generic',
+        commandText: utils.getLoadCommandText(fullParams),
+      }
+
+    case 'liquidProbe':
+    case 'tryLiquidProbe':
+      return {
+        kind: 'generic',
+        commandText: utils.getLiquidProbeCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+
+    case 'temperatureModule/setTargetTemperature':
+    case 'temperatureModule/waitForTemperature':
+    case 'thermocycler/setTargetBlockTemperature':
+    case 'thermocycler/setTargetLidTemperature':
+    case 'heaterShaker/setTargetTemperature':
+      return {
+        kind: 'generic',
+        commandText: utils.getTemperatureCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+    case 'absorbanceReader/openLid':
+    case 'absorbanceReader/closeLid':
+    case 'absorbanceReader/initialize':
+    case 'absorbanceReader/read':
+      return {
+        kind: 'generic',
+        commandText: utils.getAbsorbanceReaderCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+    case 'flexStacker/retrieve':
+    case 'flexStacker/store':
+    case 'flexStacker/setStoredLabware':
+    case 'flexStacker/empty':
+    case 'flexStacker/fill':
+      return {
+        kind: 'generic',
+        commandText: utils.getFlexStackerCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+    case 'thermocycler/runProfile':
+      return utils.getTCRunProfileCommandText({ ...fullParams, command })
+
+    case 'thermocycler/runExtendedProfile':
+      return utils.getTCRunExtendedProfileCommandText({
+        ...fullParams,
+        command,
+      })
+
+    case 'heaterShaker/setAndWaitForShakeSpeed':
+      return {
+        kind: 'generic',
+        commandText: utils.getHSShakeSpeedCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+
+    case 'moveToSlot':
+      return {
+        kind: 'generic',
+        commandText: utils.getMoveToSlotCommandText({ ...fullParams, command }),
+      }
+
+    case 'moveRelative':
+      return {
+        kind: 'generic',
+        commandText: utils.getMoveRelativeCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+
+    case 'moveToCoordinates':
+      return {
+        kind: 'generic',
+        commandText: utils.getMoveToCoordinatesCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+
+    case 'moveToWell':
+      return {
+        kind: 'generic',
+        commandText: utils.getMoveToWellCommandText({ ...fullParams, command }),
+      }
+
+    case 'moveLabware':
+      return {
+        kind: 'generic',
+        commandText: utils.getMoveLabwareCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+
+    case 'configureForVolume':
+      return {
+        kind: 'generic',
+        commandText: utils.getConfigureForVolumeCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+
+    case 'configureNozzleLayout':
+      return {
+        kind: 'generic',
+        commandText: utils.getConfigureNozzleLayoutCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+
+    case 'prepareToAspirate':
+      return {
+        kind: 'generic',
+        commandText: utils.getPrepareToAspirateCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+
+    case 'getNextTip':
+      return {
+        kind: 'generic',
+        commandText: t('get_next_tip'),
+      }
+
+    case 'moveToAddressableArea':
+      return {
+        kind: 'generic',
+        commandText: utils.getMoveToAddressableAreaCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+
+    case 'moveToAddressableAreaForDropTip':
+      return {
+        kind: 'generic',
+        commandText: utils.getMoveToAddressableAreaForDropTipCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+
+    case 'waitForDuration':
+      return {
+        kind: 'generic',
+        commandText: utils.getWaitForDurationCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+
+    case 'pause': // legacy pause command
+    case 'waitForResume':
+      return {
+        kind: 'generic',
+        commandText: utils.getWaitForResumeCommandText({
+          ...fullParams,
+          command,
+        }),
+      }
+
+    case 'delay':
+      return {
+        kind: 'generic',
+        commandText: utils.getDelayCommandText({ ...fullParams, command }),
+      }
+
+    case 'comment':
+      return {
+        kind: 'generic',
+        commandText: utils.getCommentCommandText({ ...fullParams, command }),
+      }
+
+    case 'custom':
+      return {
+        kind: 'generic',
+        commandText: utils.getCustomCommandText({ ...fullParams, command }),
+      }
+
+    case 'setRailLights':
+      return {
+        kind: 'generic',
+        commandText: utils.getRailLightsCommandText({ ...fullParams, command }),
+      }
+
+    case 'robot/moveTo':
+    case 'robot/moveAxesTo':
+    case 'robot/moveAxesRelative':
+    case 'robot/openGripperJaw':
+    case 'robot/closeGripperJaw':
+      return {
+        kind: 'generic',
+        commandText: utils.getRobotCommandText({ ...fullParams, command }),
+      }
+
+    case undefined:
+    case null:
+      return { kind: 'generic', commandText: '' }
+
+    default:
+      console.warn(
+        'CommandText encountered a command with an unrecognized commandType: ',
+        command
+      )
+      return {
+        kind: 'generic',
+        commandText: utils.getUnknownCommandText({ ...fullParams, command }),
+      }
+  }
+}

package/src/organisms/CommandText/useCommandTextString/utils/__tests__/formatDuration.test.tsx

@@ -0,0 +1,93 @@
+import { describe, expect, it } from 'vitest'
+
+import { formatDuration, formatDurationLabeled } from '../formatDuration'
+
+describe('formatDuration', () => {
+  it('should format a duration', () => {
+    const duration = {
+      hours: 2,
+      minutes: 40,
+      seconds: 2,
+    }
+
+    const expected = '02:40:02'
+
+    expect(formatDuration(duration)).toEqual(expected)
+  })
+
+  it('should format a short duration with plenty of zeroes', () => {
+    const duration = {
+      seconds: 2,
+    }
+
+    const expected = '00:00:02'
+
+    expect(formatDuration(duration)).toEqual(expected)
+  })
+
+  it('should format a longer duration', () => {
+    const duration = {
+      days: 3,
+      hours: 2,
+      minutes: 40,
+      seconds: 2,
+    }
+
+    const expected = '74:40:02'
+
+    expect(formatDuration(duration)).toEqual(expected)
+  })
+
+  it('should format a non-normalized duration', () => {
+    const duration = {
+      seconds: 360002,
+    }
+    const expected = '100:00:02'
+    expect(formatDuration(duration)).toEqual(expected)
+  })
+})
+
+describe('formatDurationLabeled', () => {
+  it('should format a duration', () => {
+    const duration = {
+      hours: 2,
+      minutes: 40,
+      seconds: 2,
+    }
+
+    const expected = '2h 40m 02s'
+
+    expect(formatDurationLabeled(duration)).toEqual(expected)
+  })
+
+  it('should format a short duration with plenty of zeroes', () => {
+    const duration = {
+      seconds: 2,
+    }
+
+    const expected = '0h 00m 02s'
+
+    expect(formatDurationLabeled(duration)).toEqual(expected)
+  })
+
+  it('should format a longer duration', () => {
+    const duration = {
+      days: 3,
+      hours: 2,
+      minutes: 40,
+      seconds: 2,
+    }
+
+    const expected = '74h 40m 02s'
+
+    expect(formatDurationLabeled(duration)).toEqual(expected)
+  })
+
+  it('should format a non-normalized duration', () => {
+    const duration = {
+      seconds: 360002,
+    }
+    const expected = '100h 00m 02s'
+    expect(formatDurationLabeled(duration)).toEqual(expected)
+  })
+})