Merge branch 'edge' into EXEC-734-allow-the-gripper-to-be-opened-whil…

…e-the-door-is-open

api-client/src/runs/getRunCurrentState.ts

@@ -0,0 +1,17 @@
+import { GET, request } from '../request'
+
+import type { ResponsePromise } from '../request'
+import type { HostConfig } from '../types'
+import type { RunCurrentState } from './types'
+
+export function getRunCurrentState(
+  config: HostConfig,
+  runId: string
+): ResponsePromise<RunCurrentState> {
+  return request<RunCurrentState>(
+    GET,
+    `/runs/${runId}/currentState`,
+    null,
+    config
+  )
+}

api-client/src/runs/index.ts

@@ -10,6 +10,7 @@ export { getCommands } from './commands/getCommands'
 export { getCommandsAsPreSerializedList } from './commands/getCommandsAsPreSerializedList'
 export { createRunAction } from './createRunAction'
 export { getRunCommandErrors } from './commands/getRunCommandErrors'
+export { getRunCurrentState } from './getRunCurrentState'
 export * from './createLabwareOffset'
 export * from './createLabwareDefinition'
 export * from './constants'

api-client/src/runs/types.ts

@@ -87,10 +87,24 @@ export interface Run {
   data: RunData
 }
 
+export interface RunCurrentState {
+  data: RunCurrentStateData
+  links: RunCommandLink
+}
+
 export interface RunsLinks {
   current?: ResourceLink
 }
 
+export interface RunCommandLink {
+  current: CommandLinkNoMeta
+}
+
+export interface CommandLinkNoMeta {
+  id: string
+  href: string
+}
+
 export interface GetRunsParams {
   pageLength?: number // the number of items to include
 }
@@ -100,6 +114,10 @@ export interface Runs {
   links: RunsLinks
 }
 
+export interface RunCurrentStateData {
+  activeNozzleLayouts: Record<string, NozzleLayoutValues> // keyed by pipetteId
+}
+
 export const RUN_ACTION_TYPE_PLAY: 'play' = 'play'
 export const RUN_ACTION_TYPE_PAUSE: 'pause' = 'pause'
 export const RUN_ACTION_TYPE_STOP: 'stop' = 'stop'
@@ -173,3 +191,13 @@ export interface UpdateErrorRecoveryPolicyRequest {
 }
 
 export type UpdateErrorRecoveryPolicyResponse = Record<string, never>
+
+/**
+ * Current Run State Data
+ */
+export interface NozzleLayoutValues {
+  startingNozzle: string
+  activeNozzles: string[]
+  config: NozzleLayoutConfig
+}
+export type NozzleLayoutConfig = 'column' | 'row' | 'full' | 'subrect'

api/src/opentrons/protocol_engine/state/tips.py

@@ -486,6 +486,10 @@ def get_pipette_nozzle_map(self, pipette_id: str) -> NozzleMap:
         """Get the current nozzle map the given pipette's configuration."""
         return self._state.nozzle_map_by_pipette_id[pipette_id]
 
+    def get_pipette_nozzle_maps(self) -> Dict[str, NozzleMap]:
+        """Get current nozzle maps keyed by pipette id."""
+        return self._state.nozzle_map_by_pipette_id
+
     def has_clean_tip(self, labware_id: str, well_name: str) -> bool:
         """Get whether a well in a labware has a clean tip.
 

api/src/opentrons/protocol_runner/run_orchestrator.py

@@ -14,6 +14,7 @@
 from . import protocol_runner, RunResult, JsonRunner, PythonAndLegacyRunner
 from ..hardware_control import HardwareControlAPI
 from ..hardware_control.modules import AbstractModule as HardwareModuleAPI
+from ..hardware_control.nozzle_manager import NozzleMap
 from ..protocol_engine import (
     ProtocolEngine,
     CommandCreate,
@@ -397,6 +398,10 @@ def get_deck_type(self) -> DeckType:
         """Get engine deck type."""
         return self._protocol_engine.state_view.config.deck_type
 
+    def get_nozzle_maps(self) -> Dict[str, NozzleMap]:
+        """Get current nozzle maps keyed by pipette id."""
+        return self._protocol_engine.state_view.tips.get_pipette_nozzle_maps()
+
     def set_error_recovery_policy(self, policy: ErrorRecoveryPolicy) -> None:
         """Create error recovery policy for the run."""
         self._protocol_engine.set_error_recovery_policy(policy)

app/src/molecules/OddModal/OddModalHeader.tsx

@@ -34,7 +34,7 @@ export function OddModalHeader(props: OddModalHeaderBaseProps): JSX.Element {
       borderRadius={`${BORDERS.borderRadius12} ${BORDERS.borderRadius12} 0px 0px`}
       {...styleProps}
     >
-      <Flex flexDirection={DIRECTION_ROW}>
+      <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
         {iconName != null && iconColor != null ? (
           <Icon
             aria-label={`icon_${iconName}`}

app/src/organisms/ErrorRecoveryFlows/RecoverySplash.tsx

@@ -198,21 +198,19 @@ export function RecoverySplash(props: RecoverySplashProps): JSX.Element | null {
           gridGap={SPACING.spacing16}
         >
           <LargeButton
+            css={SHARED_BUTTON_STYLE_ODD}
             onClick={onCancelClick}
             buttonText={t('cancel_run')}
-            css={
-              isDisabled() ? BTN_STYLE_DISABLED_ODD : SHARED_BUTTON_STYLE_ODD
-            }
-            iconName={'remove'}
+            iconName="remove"
+            ariaDisabled={isDisabled()}
             buttonType="alertAlt"
           />
           <LargeButton
+            css={SHARED_BUTTON_STYLE_ODD}
             onClick={onLaunchERClick}
             buttonText={t('launch_recovery_mode')}
-            css={
-              isDisabled() ? BTN_STYLE_DISABLED_ODD : SHARED_BUTTON_STYLE_ODD
-            }
-            iconName={'recovery'}
+            iconName="recovery"
+            ariaDisabled={isDisabled()}
             buttonType="alertStroke"
           />
         </Flex>
@@ -297,30 +295,6 @@ const SHARED_BUTTON_STYLE_ODD = css`
   width: 29rem;
   height: 13.5rem;
 `
-const BTN_STYLE_DISABLED_ODD = css`
-  ${SHARED_BUTTON_STYLE_ODD}
-
-  background-color: ${COLORS.grey35};
-  color: ${COLORS.grey50};
-  border: none;
-  box-shadow: none;
-
-  #btn-icon: {
-    color: ${COLORS.grey50};
-  }
-
-  &:active,
-  &:focus,
-  &:hover {
-    background-color: ${COLORS.grey35};
-    color: ${COLORS.grey50};
-  }
-  &:active,
-  &:focus,
-  &:hover #btn-icon {
-    color: ${COLORS.grey50};
-  }
-`
 
 const PRIMARY_BTN_STYLES_DESKTOP = css`
   background-color: ${COLORS.red50};

components/src/atoms/buttons/LargeButton.tsx

@@ -1,11 +1,10 @@
 import type * as React from 'react'
 import { css } from 'styled-components'
-import { Box, Btn } from '../../primitives'
+import { Btn } from '../../primitives'
 
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { LegacyStyledText } from '../../atoms/StyledText'
-import { fontSizeBodyLargeSemiBold } from '../../helix-design-system/product/typography'
+import { StyledText } from '../StyledText'
 import {
   ALIGN_CENTER,
   ALIGN_FLEX_START,
@@ -49,6 +48,8 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     ...buttonProps
   } = props
 
+  const computedDisabled = disabled || ariaDisabled
+
   const LARGE_BUTTON_PROPS_BY_TYPE: Record<
     LargeButtonTypes,
     {
@@ -155,17 +156,37 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       ? `color: ${LARGE_BUTTON_PROPS_BY_TYPE[style].activeIconColor}`
       : ''
 
+  // In order to keep button sizes consistent and expected, all large button types need an outline.
+  // The outline color is always the same as the background color unless the background color is uniquely different
+  // from the outline.
+  const computedBorderStyle = (): string => {
+    const borderColor = (): string => {
+      if (computedDisabled) {
+        return LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor
+      } else if (buttonType === 'alertStroke') {
+        return LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor
+      } else {
+        return LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultBackgroundColor
+      }
+    }
+
+    const calculatedBorderRadius =
+      buttonType === 'stroke' ? BORDERS.borderRadius2 : BORDERS.borderRadius4
+
+    return `${calculatedBorderRadius} solid ${borderColor()}`
+  }
+
   const LARGE_BUTTON_STYLE = css`
     color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor};
     background-color: ${
       LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultBackgroundColor
     };
     cursor: ${CURSOR_POINTER};
     padding: ${SPACING.spacing16} ${SPACING.spacing24};
-    text-align: ${TYPOGRAPHY.textAlignCenter};
+    text-align: ${TYPOGRAPHY.textAlignLeft};
     border-radius: ${BORDERS.borderRadiusFull};
     align-items: ${ALIGN_CENTER};
-    border: ${buttonType === 'stroke' ? `2px solid ${COLORS.blue50}` : 'none'};
+    border: ${computedBorderStyle()};
 
     &:active {
       background-color: ${
@@ -184,7 +205,9 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       };
 
       border: ${
-        buttonType === 'stroke' ? `2px solid ${COLORS.blue55}` : 'none'
+        buttonType === 'stroke'
+          ? `2px solid ${COLORS.blue55}`
+          : `${computedBorderStyle()}`
       };
     }
 
@@ -215,33 +238,17 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       padding: ${SPACING.spacing24};
       line-height: ${TYPOGRAPHY.lineHeight20};
       gap: ${SPACING.spacing60};
-      outline: ${BORDERS.borderRadius4} solid
-        ${
-          buttonType === 'alertStroke' && !disabled
-            ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor
-            : 'none'
-        };
-
-      ${TYPOGRAPHY.pSemiBold}
-
-      #btn-icon: {
-        color: ${
-          disabled
-            ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledIconColor
-            : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].iconColor
-        };
-      }
 
       &:active {
         background-color: ${
-          disabled
+          computedDisabled
             ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor
             : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor
         };
-        ${!disabled && activeColorFor(buttonType)};
+        ${!computedDisabled && activeColorFor(buttonType)};
         outline: ${BORDERS.borderRadius4} solid
           ${
-            disabled
+            computedDisabled
               ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor
               : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor
           };
@@ -252,15 +259,15 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
 
       &:focus-visible {
         background-color: ${
-          disabled
+          computedDisabled
             ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor
             : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleBackgroundColor
         };
-        ${!disabled && activeColorFor(buttonType)};
+        ${!computedDisabled && activeColorFor(buttonType)};
         padding: calc(${SPACING.spacing24} + ${SPACING.spacing2});
-        border: ${SPACING.spacing2} solid ${COLORS.transparent};
+        border: ${computedBorderStyle()};
         outline: ${
-          disabled
+          computedDisabled
             ? 'none'
             : `3px solid
     ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleOutlineColor}`
@@ -276,6 +283,11 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
         };
       }
   `
+
+  const appliedIconColor = computedDisabled
+    ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledIconColor
+    : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].iconColor
+
   return (
     <Btn
       type={type}
@@ -286,31 +298,32 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       aria-disabled={ariaDisabled}
       {...buttonProps}
     >
-      <LegacyStyledText
+      <StyledText
+        oddStyle="level3HeaderSemiBold"
+        desktopStyle="bodyLargeSemiBold"
         css={css`
-          font-size: ${fontSizeBodyLargeSemiBold};
           padding-right: ${iconName != null ? SPACING.spacing8 : '0'};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-            ${TYPOGRAPHY.level3HeaderSemiBold}
-          }
         `}
       >
         {buttonText}
-      </LegacyStyledText>
+      </StyledText>
       {iconName ? (
-        <Box
-          css={css`
-            width: 1.5rem;
-            height: 1.5rem;
-            @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-              width: 5rem;
-              height: 5rem;
-            }
-          `}
-        >
-          <Icon name={iconName} aria-label={`${iconName} icon`} id="btn-icon" />
-        </Box>
+        <Icon
+          name={iconName}
+          aria-label={`${iconName} icon`}
+          color={appliedIconColor}
+          css={ICON_STYLE}
+        />
       ) : null}
     </Btn>
   )
 }
+
+const ICON_STYLE = css`
+  width: 1.5rem;
+  height: 1.5rem;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 5rem;
+    height: 5rem;
+  }
+`

components/src/organisms/Toolbox/index.tsx

@@ -119,6 +119,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
             </Flex>
           </Flex>
         </Flex>
+        <Box borderBottom={`1px solid ${COLORS.grey30}`} />
         <Box
           padding={childrenPadding}
           flex="1 1 auto"

protocol-designer/src/assets/localization/en/form.json

@@ -186,8 +186,9 @@
         "add_cycle_step": "Add a cycle step",
         "add_step": "Add step",
         "add_step_button": "+ Step",
+        "cycle": "cycle",
         "cycle_step": "cycle step",
-        "cycles": "Cycles {{repetitions}}",
+        "cycles": "Cycles {{repetitions}}x",
         "delete": "delete",
         "edit": "Edit Thermocycler profile steps",
         "lid_closed": "Closed",

protocol-designer/src/assets/localization/en/protocol_steps.json

@@ -6,6 +6,7 @@
   "delete": "Delete step",
   "dispensed": "Dispensed",
   "duplicate": "Duplicate step",
+  "engage_height": "Engage height",
   "edit_step": "Edit step",
   "final_deck_state": "Final deck state",
   "from": "from",