Merge branch 'edge' into hide_absorbance_reader_result

Opentrons · Sep 26, 2024 · 4dab2ce · 4dab2ce
2 parents 4786d6d + 7100b00
commit 4dab2ce
Show file tree

Hide file tree

Showing 50 changed files with 2,222 additions and 98 deletions.
diff --git a/api/src/opentrons/protocol_engine/commands/absorbance_reader/close_lid.py b/api/src/opentrons/protocol_engine/commands/absorbance_reader/close_lid.py
@@ -133,12 +133,12 @@ async def execute(
                 labware_location=new_location,
             )
 
-            state_update = StateUpdate()
-            state_update.set_labware_location(
-                labware_id=loaded_lid.id,
-                new_location=new_location,
-                new_offset_id=new_offset_id,
-            )
+        state_update = StateUpdate()
+        state_update.set_labware_location(
+            labware_id=loaded_lid.id,
+            new_location=new_location,
+            new_offset_id=new_offset_id,
+        )
 
         return SuccessData(
             public=CloseLidResult(),

diff --git a/app/src/atoms/structure/Divider.tsx b/app/src/atoms/structure/Divider.tsx
@@ -4,10 +4,11 @@ import { Box, COLORS, SPACING } from '@opentrons/components'
 type Props = React.ComponentProps<typeof Box>
 
 export function Divider(props: Props): JSX.Element {
+  const { marginY } = props
   return (
     <Box
       borderBottom={`1px solid ${String(COLORS.grey30)}`}
-      marginY={SPACING.spacing4}
+      marginY={marginY ?? SPACING.spacing4}
       {...props}
       data-testid="divider"
     />

diff --git a/components/src/atoms/Checkbox/index.tsx b/components/src/atoms/Checkbox/index.tsx
@@ -98,11 +98,13 @@ export function Checkbox(props: CheckboxProps): JSX.Element {
 
 interface CheckProps {
   isChecked: boolean
+  color?: string
 }
-function Check(props: CheckProps): JSX.Element {
-  return props.isChecked ? (
+export function Check(props: CheckProps): JSX.Element {
+  const { isChecked, color = COLORS.white } = props
+  return isChecked ? (
     <Flex css={CHECK_STYLE}>
-      <Icon name="ot-checkbox" color={COLORS.white} />
+      <Icon name="ot-checkbox" color={color} />
     </Flex>
   ) : (
     <Flex

diff --git a/components/src/atoms/buttons/RadioButton.tsx b/components/src/atoms/buttons/RadioButton.tsx
@@ -32,6 +32,8 @@ interface RadioButtonProps extends StyleProps {
   //  used for mouseEnter and mouseLeave
   setNoHover?: () => void
   setHovered?: () => void
+  // TODO wire up the error state for the radio button
+  error?: string | null
 }
 
 //  used for ODD and helix
@@ -130,7 +132,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
   return (
     <Flex
       css={css`
-        width: auto;
+        width: ${props.width ?? 'auto'};
 
         @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
           width: 100%;

diff --git a/components/src/icons/icon-data.ts b/components/src/icons/icon-data.ts
@@ -309,6 +309,11 @@ export const ICON_DATA_BY_NAME = {
       'M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z',
     viewBox: '0 0 24 24',
   },
+  mix: {
+    path:
+      'M6.66732 10.836V4.85683L4.52148 7.00267L3.33398 5.836L7.50065 1.66933L11.6673 5.836L10.4798 7.00267L8.33398 4.85683V10.836H6.66732ZM12.5007 18.336L8.33398 14.1693L9.52148 13.0027L11.6673 15.1485V9.16933H13.334V15.1485L15.4798 13.0027L16.6673 14.1693L12.5007 18.336Z',
+    viewBox: '0 0 20 20',
+  },
   more: {
     path:
       'M31.075 23.675L19.075 35.675L16.925 33.525L26.825 23.675L16.975 13.8251L19.125 11.675L31.075 23.675Z',
@@ -409,6 +414,11 @@ export const ICON_DATA_BY_NAME = {
       'M15.5 16v-2.9l8.5 5-8.5 4.9v-3c-1.3 0-2.4-.3-3.4-.7-1.1-.4-2.1-1-2.9-1.6-1.7-1.2-3-2.3-4.8-3.1-1.2-.5-2.5-.8-4.4-.8V9.3c1.9 0 3.2-.3 4.4-.8 1.7-.7 3.1-1.9 4.8-3.1.8-.6 1.8-1.2 2.9-1.6 1-.4 2.2-.7 3.4-.7V.4l8.5 5-8.5 4.9V7.1c-1.1.1-1.9.3-2.7.7-.7.3-1.4.8-2.1 1.4-1 .7-2.1 1.6-3.5 2.3 1.4.8 2.5 1.6 3.5 2.3.8.6 1.4 1 2.1 1.4.8.5 1.6.7 2.7.8z',
     viewBox: '0 0 24 24',
   },
+  'ot-end': {
+    path:
+      'M18.334 15V5H16.6673V15H18.334ZM6.66732 15L7.85482 13.8333L4.85482 10.8333H15.0007V9.16667H4.85482L7.83399 6.16667L6.66732 5L1.66732 10L6.66732 15Z',
+    viewBox: '0 0 20 20',
+  },
   'ot-file': {
     path:
       'M20.907 0H3.803C3.334.044 3 .356 3 .822c0 1.822.022 3.645.022 5.467v11.355c0 1.823-.022 3.645-.022 5.467 0 .467.334.8.803.822H7.37c2.051 0 3.88.023 6.199 0 .736 0 1.383-.289 1.918-.777.535-.49 1.048-.956 1.538-1.49a201.554 201.554 0 0 0 2.989-3.177c.379-.4.713-.822 1.025-1.267a3.17 3.17 0 0 0 .58-1.844c.045-4.867.045-9.711.067-14.578.022-.444-.312-.778-.78-.8zm-2.074 16.444c-1.115.312-2.275.312-3.434.334-.424 0-.647.155-.736.555-.045.2-.023.867-.023 1.09-.066 1-.044 1.6-.178 2.6-.134.866-.624 1.51-1.762 1.488-2.586-.022-8.005 0-8.161 0V1.556h15.61v13.222c.022 1-.536 1.466-1.316 1.666z',
@@ -448,11 +458,21 @@ export const ICON_DATA_BY_NAME = {
       'M7.8 2.4v10.3H3.4V2.4h4.4zM5.6 21.5L.4 12.7h10.3l-5.1 8.8zm10.5.1V11.2h4.4v10.4h-4.4zm2.3-19.2l5.2 8.8H13.2l5.2-8.8z',
     viewBox: '0 0 24 24',
   },
+  'ot-move': {
+    path:
+      'M10.303 19.7735L7.19432 16.6648L8.01273 15.8464L9.72551 17.5591L9.72551 12.3572H10.8829L10.8829 17.5567L12.5933 15.8464L13.4117 16.6648L10.303 19.7735Z M8.02171 9.49601L2.82221 9.49601L4.53256 7.78566L3.71415 6.96725L0.605469 10.0759L3.71415 13.1846L4.53256 12.3662L2.81978 10.6534L8.02171 10.6534V9.49601Z M9.66329 7.92348L9.66329 2.65493L7.88357 4.43465L7.06516 3.61624L10.1738 0.507561L13.2825 3.61624L12.4641 4.43465L10.6818 2.65236L10.6818 7.92348L9.66329 7.92348Z M12.4561 10.7853L17.6556 10.7853L15.9449 12.496L16.7633 13.3144L19.872 10.2057L16.7633 7.09706L15.9449 7.91547L17.6574 9.62792H12.4561V10.7853Z',
+    viewBox: '0 0 20 20',
+  },
   'ot-run': {
     path:
       'M18.83 11.58V1.89a.6.6 0 0 0-.61-.62H5a.64.64 0 0 0-.62.64v17.34a.62.62 0 0 0 .62.64h5.45a6.06 6.06 0 1 0 8.41-8.31zm-9.36 5.09a6 6 0 0 0 .4 2.1H5.54V2.48h12.14V11a6 6 0 0 0-8.2 5.66zm4.61 2.81v-5.64l3.72 2.76z',
     viewBox: '0 0 24 24',
   },
+  'ot-start': {
+    path:
+      'M1.66602 15V5H3.33268V15H1.66602ZM13.3327 15L12.1452 13.8333L15.1452 10.8333H4.99935V9.16667H15.1452L12.166 6.16667L13.3327 5L18.3327 10L13.3327 15Z',
+    viewBox: '0 0 20 20',
+  },
   'ot-spinner': {
     path:
       'M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z',
@@ -687,6 +707,11 @@ export const ICON_DATA_BY_NAME = {
       'M10.8307 8.3335L1.66406 31.6668H4.78906L7.16406 25.4168H17.8307L20.2057 31.6668H23.3307L14.1641 8.3335H10.8307ZM16.8307 22.7502H8.16406L12.4141 11.4585H12.5807L16.8307 22.7502ZM30.1577 16.6668L24.1641 31.6668H26.2073L27.7602 27.649H34.7346L36.2875 31.6668H38.3307L32.3371 16.6668H30.1577ZM34.0807 25.9347H28.4141L31.1929 18.6758H31.3019L34.0807 25.9347Z',
     viewBox: '0 0 40 40',
   },
+  transfer: {
+    path:
+      'M3.33333 12.1673C3.33333 10.5423 3.89931 9.16384 5.03125 8.0319C6.16319 6.89996 7.54167 6.33398 9.16667 6.33398C10.6528 6.33398 11.9479 6.82357 13.0521 7.80273C14.1562 8.7819 14.7917 10.0076 14.9583 11.4798L16.3333 10.1673L17.5 11.334L14.1667 14.6673L10.8333 11.334L12.0208 10.1673L13.25 11.3965C13.0556 10.4104 12.5764 9.59787 11.8125 8.95898C11.0486 8.3201 10.1667 8.00065 9.16667 8.00065C8.01389 8.00065 7.03125 8.4069 6.21875 9.2194C5.40625 10.0319 5 11.0145 5 12.1673L5 14.6673L3.33333 14.6673L3.33333 12.1673Z',
+    viewBox: '0 0 20 20',
+  },
   trash: {
     path:
       'M13.7708 41.3181C12.9404 41.3181 12.2346 41.0264 11.6533 40.4431C11.0721 39.8598 10.7815 39.1514 10.7815 38.3181V9.81812H8.73877V6.81812H18.1052V5.31812H31.2582V6.81812H40.6246V9.81812H38.5819V38.3181C38.5819 39.1181 38.283 39.8181 37.6852 40.4181C37.0873 41.0181 36.3898 41.3181 35.5926 41.3181H13.7708ZM35.5926 9.81812H13.7708V38.3181H35.5926V9.81812ZM19.0519 34.0181H22.0412V14.0681H19.0519V34.0181ZM27.3223 34.0181H30.3116V14.0681H27.3223V34.0181ZM13.7708 9.81812V38.3181V9.81812Z',

diff --git a/components/src/modals/Modal.tsx b/components/src/modals/Modal.tsx
@@ -20,6 +20,7 @@ export interface ModalProps extends StyleProps {
   childrenPadding?: string | number
   children?: React.ReactNode
   footer?: React.ReactNode
+  zIndexOverlay?: number
 }
 
 /**
@@ -36,6 +37,7 @@ export const Modal = (props: ModalProps): JSX.Element => {
     footer,
     titleElement1,
     titleElement2,
+    zIndexOverlay,
     ...styleProps
   } = props
 
@@ -73,6 +75,7 @@ export const Modal = (props: ModalProps): JSX.Element => {
 
   return (
     <ModalShell
+      zIndexOverlay={zIndexOverlay}
       width={styleProps.width ?? '31.25rem'}
       header={modalHeader}
       onOutsideClick={closeOnOutsideClick ?? false ? onClose : undefined}

diff --git a/components/src/modals/ModalShell.tsx b/components/src/modals/ModalShell.tsx
@@ -26,6 +26,8 @@ export interface ModalShellProps extends StyleProps {
   footer?: React.ReactNode
   /** Optional full page takeover */
   fullPage?: boolean
+  /** Optional zIndex for the overlay */
+  zIndexOverlay?: number
 }
 
 /**
@@ -46,11 +48,13 @@ export function ModalShell(props: ModalShellProps): JSX.Element {
     footer,
     fullPage = false,
     children,
+    zIndexOverlay = 1,
     ...styleProps
   } = props
 
   return (
     <Overlay
+      zIndex={zIndexOverlay}
       aria-label="BackgroundOverlay_ModalShell"
       onClick={(e: React.MouseEvent) => {
         e.stopPropagation()
@@ -74,17 +78,17 @@ export function ModalShell(props: ModalShellProps): JSX.Element {
     </Overlay>
   )
 }
-
-const Overlay = styled.div`
+const Overlay = styled.div<{ zIndex: string | number }>`
   position: ${POSITION_ABSOLUTE};
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
-  z-index: 1;
+  z-index: ${({ zIndex }) => zIndex};
   background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
   cursor: ${CURSOR_DEFAULT};
 `
+
 const ContentArea = styled.div<{ zIndex: string | number }>`
   display: flex;
   position: ${POSITION_ABSOLUTE};

diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import * as React from 'react'
 import { css } from 'styled-components'
 
 import { BORDERS, COLORS } from '../../helix-design-system'
@@ -38,6 +38,7 @@ export interface DropdownOption {
   /** optional dropdown option for adding the liquid color icon */
   liquidColor?: string
   disabled?: boolean
+  tooltipText?: string
 }
 
 export type DropdownBorder = 'rounded' | 'neutral'
@@ -81,18 +82,21 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     error,
   } = props
   const [targetProps, tooltipProps] = useHoverTooltip()
-  const [showDropdownMenu, setShowDropdownMenu] = useState<boolean>(false)
+  const [showDropdownMenu, setShowDropdownMenu] = React.useState<boolean>(false)
+  const [optionTargetProps, optionTooltipProps] = useHoverTooltip({
+    placement: 'top-end',
+  })
 
-  const [dropdownPosition, setDropdownPosition] = useState<'top' | 'bottom'>(
-    'bottom'
-  )
+  const [dropdownPosition, setDropdownPosition] = React.useState<
+    'top' | 'bottom'
+  >('bottom')
   const dropDownMenuWrapperRef = useOnClickOutside<HTMLDivElement>({
     onClickOutside: () => {
       setShowDropdownMenu(false)
     },
   })
 
-  useEffect(() => {
+  React.useEffect(() => {
     const handlePositionCalculation = (): void => {
       const dropdownRect = dropDownMenuWrapperRef.current?.getBoundingClientRect()
       if (dropdownRect != null) {
@@ -262,22 +266,34 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
             maxHeight="20rem" // Set the maximum display number to 10.
           >
             {filterOptions.map((option, index) => (
-              <MenuItem
-                zIndex={3}
-                key={`${option.name}-${index}`}
-                onClick={() => {
-                  onClick(option.value)
-                  setShowDropdownMenu(false)
-                }}
-                border="none"
-              >
-                <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
-                  {option.liquidColor != null ? (
-                    <LiquidIcon color={option.liquidColor} />
-                  ) : null}
-                  {option.name}
-                </Flex>
-              </MenuItem>
+              <React.Fragment key={`${option.name}-${index}`}>
+                <MenuItem
+                  disabled={option.disabled}
+                  zIndex={3}
+                  key={`${option.name}-${index}`}
+                  onClick={() => {
+                    onClick(option.value)
+                    setShowDropdownMenu(false)
+                  }}
+                  border="none"
+                >
+                  <Flex
+                    gridGap={SPACING.spacing8}
+                    alignItems={ALIGN_CENTER}
+                    {...optionTargetProps}
+                  >
+                    {option.liquidColor != null ? (
+                      <LiquidIcon color={option.liquidColor} />
+                    ) : null}
+                    {option.name}
+                  </Flex>
+                </MenuItem>
+                {option.tooltipText != null ? (
+                  <Tooltip tooltipProps={optionTooltipProps}>
+                    {option.tooltipText}
+                  </Tooltip>
+                ) : null}
+              </React.Fragment>
             ))}
           </Flex>
         )}

diff --git a/components/src/organisms/Toolbox/index.tsx b/components/src/organisms/Toolbox/index.tsx
@@ -26,6 +26,7 @@ export interface ToolboxProps {
   side?: 'left' | 'right'
   horizontalSide?: 'top' | 'bottom'
   childrenPadding?: string
+  subHeader?: JSX.Element | null
 }
 
 export function Toolbox(props: ToolboxProps): JSX.Element {
@@ -43,6 +44,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
     side = 'right',
     horizontalSide = 'bottom',
     childrenPadding = SPACING.spacing16,
+    subHeader,
   } = props
 
   const slideOutRef = React.useRef<HTMLDivElement>(null)
@@ -88,26 +90,31 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
         justifyContent={JUSTIFY_SPACE_BETWEEN}
       >
         <Flex
-          justifyContent={JUSTIFY_SPACE_BETWEEN}
-          alignItems={ALIGN_CENTER}
           padding={`${SPACING.spacing20} ${SPACING.spacing16}`}
-          borderBottom={`1px solid ${COLORS.grey30}`}
-          gridGap={SPACING.spacing12}
+          flexDirection={DIRECTION_COLUMN}
         >
-          {title}
-          {onCloseClick != null && closeButtonText != null ? (
-            <Btn
-              onClick={onCloseClick}
-              textDecoration={textDecorationUnderline}
-              data-testid={`Toolbox_${closeButtonText}`}
-              whiteSpace={NO_WRAP}
-              disable={disableCloseButton}
-            >
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {closeButtonText}
-              </StyledText>
-            </Btn>
-          ) : null}
+          {subHeader != null ? subHeader : null}
+          <Flex
+            justifyContent={JUSTIFY_SPACE_BETWEEN}
+            alignItems={ALIGN_CENTER}
+            borderBottom={`1px solid ${COLORS.grey30}`}
+            gridGap={SPACING.spacing12}
+          >
+            {title}
+            {onCloseClick != null && closeButtonText != null ? (
+              <Btn
+                onClick={onCloseClick}
+                textDecoration={textDecorationUnderline}
+                data-testid={`Toolbox_${closeButtonText}`}
+                whiteSpace={NO_WRAP}
+                disable={disableCloseButton}
+              >
+                <StyledText desktopStyle="bodyDefaultRegular">
+                  {closeButtonText}
+                </StyledText>
+              </Btn>
+            ) : null}
+          </Flex>
         </Flex>
         <Box
           padding={childrenPadding}

diff --git a/protocol-designer/src/assets/localization/en/form.json b/protocol-designer/src/assets/localization/en/form.json
@@ -47,7 +47,13 @@
     "multiDispenseOptionsLabel": "multi-dispense options",
     "tipRack": "tip rack",
     "wellSelectionLabel": {
+      "columns_aspirate_wells": "Select source columns",
+      "columns_dispense_wells": "Select destination columns",
+      "columns_mix_wells": "Select columns",
       "columns": "columns",
+      "wells_aspirate_wells": "Select source wells",
+      "wells_dispense_wells": "Select destination wells",
+      "wells_mix_wells": "Select wells",
       "wells": "wells"
     },
     "field": {
@@ -63,7 +69,7 @@
       "location": {
         "label": "location",
         "pickUp": "pick up tip",
-        "dropTip": "drop tip"
+        "dropTip": "drop tip location"
       },
       "change_tip": {
         "label": "change tip",