address feedback

components/src/hardware-sim/Deck/OT2Layers.tsx

@@ -1,4 +1,4 @@
-import { blue50 } from '../../helix-design-system/colors'
+import { COLORS } from '../../helix-design-system'
 
 export function FixedBase(): JSX.Element {
   return (
@@ -27,7 +27,7 @@ export function FixedTrash(props: FixedTrashProps): JSX.Element {
         d="M441.107,289.57v135.86c0,8.368-6.808,15.176-15.176,15.176H283.07c-8.368,0-15.176-6.808-15.176-15.176V289.57c0-8.368,6.808-15.177,15.176-15.177h142.86C434.298,274.394,441.107,281.202,441.107,289.57z M425.053,434H283.947c-1.24,0-2.484-0.034-3.702-0.287c-2-0.416-3.81-1.446-4.884-3.227c-1.152-1.91-1.289-4.185-1.289-6.359v-88.629c0-2.683,0.259-5.609,2.263-7.612c2.004-2.003,4.928-2.263,7.612-2.263h25.939c1.693,0.006,3.545-0.167,4.807-1.429c1.262-1.262,1.435-3.115,1.429-4.807v-28.94c0-2.124,0.129-4.338,1.209-6.225c1.059-1.851,2.904-2.933,4.954-3.36c1.222-0.255,2.468-0.289,3.712-0.289h99.056c2.124,0,4.339,0.129,6.226,1.209c1.851,1.06,2.933,2.904,3.36,4.954c0.255,1.222,0.289,2.468,0.289,3.712v133.68c0,2.684-0.259,5.607-2.263,7.611C430.661,433.741,427.737,434,425.053,434z"
         style={{
           fill: highlight ? 'none' : 'rgb(237, 237, 237)',
-          stroke: highlight ? blue50 : 'none',
+          stroke: highlight ? COLORS.blue50 : 'none',
           fillRule: 'evenodd',
           strokeWidth: 2,
         }}

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

@@ -12,7 +12,7 @@
   "information": "Information",
   "labware": "labware",
   "last_exported": "Last Exported",
-  "location": "location",
+  "location": "Location",
   "magnet_height_caption": "Must be between {{low}} to {{high}}.",
   "magnet_recommended": "The recommended height is {{default}}",
   "manually": "Manually",

protocol-designer/src/molecules/DropdownStepFormField/index.tsx

@@ -42,18 +42,19 @@ export function DropdownStepFormField(
     onFieldBlur,
     name: fieldName,
   } = props
-  const { t, i18n } = useTranslation(['tooltip', 'application'])
+  const { t } = useTranslation(['tooltip', 'application'])
   const dispatch = useDispatch()
   const availableOptionId = options.find(opt => opt.value === value)
   const handleSelection = (value: string): void => {
     let text = t('application:selected')
     if (fieldName === 'newLocation') {
-      text = i18n.format(t('application:location'), 'capitalize')
+      text = t('application:location')
     } else if (fieldName === 'aspirate_labware') {
       text = t('application:source')
     } else if (fieldName === 'dispense_labware') {
       text = t('application:dest')
     }
+
     const selection = {
       id: value,
       text,

protocol-designer/src/pages/Designer/DeckSetup/DeckItemHighlight.tsx

@@ -29,7 +29,7 @@ export function DeckItemHighlight(
   props: DeckItemHighlightProps
 ): JSX.Element | null {
   const { tab, slotBoundingBox, itemId, slotPosition } = props
-  const { t, i18n } = useTranslation('application')
+  const { t } = useTranslation('application')
   const hoveredDropdownSelection = useSelector(getHoveredDropdownItem)
   const selectedDropdownLocation = useSelector(getSelectedDropdownItem)
 
@@ -41,9 +41,15 @@ export function DeckItemHighlight(
     selected => selected.id === itemId && selected.field === '2'
   )
 
-  if (tab === 'startingDeck' || slotPosition === null) return null
+  if (
+    tab === 'startingDeck' ||
+    slotPosition === null ||
+    (!isHovered && !isSelected)
+  ) {
+    return null
+  }
 
-  return isHovered || isSelected ? (
+  return (
     <>
       <RobotCoordsForeignDiv
         x={slotPosition[0]}
@@ -72,7 +78,7 @@ export function DeckItemHighlight(
       <DeckLabelSet
         deckLabels={[
           {
-            text: i18n.format(t('location'), 'capitalize'),
+            text: t('location'),
             isLast: true,
             isSelected: isSelected,
             isZoomed: false,
@@ -84,5 +90,5 @@ export function DeckItemHighlight(
         height={slotBoundingBox.yDimension}
       />
     </>
-  ) : null
+  )
 }

protocol-designer/src/pages/Designer/DeckSetup/HighlightItems.tsx

@@ -47,7 +47,7 @@ const SLOTS = [
 
 export function HighlightItems(props: HighlightItemsProps): JSX.Element | null {
   const { robotType, deckDef } = props
-  const { t, i18n } = useTranslation('application')
+  const { t } = useTranslation('application')
   const tab = useSelector(getDesignerTab)
   const { labware, modules, additionalEquipmentOnDeck } = useSelector(
     getDeckSetupForActiveItem
@@ -106,9 +106,10 @@ export function HighlightItems(props: HighlightItemsProps): JSX.Element | null {
         .map(item => (item?.id != null ? labware[item.id] : null))
         .filter(Boolean)
 
-      const labwaresToRender = hoveredItemLabware
-        ? [hoveredItemLabware]
-        : selectedLabwaresOnDeck
+      const labwaresToRender =
+        hoveredItemLabware != null
+          ? [hoveredItemLabware]
+          : selectedLabwaresOnDeck
 
       labwaresToRender.forEach((labwareOnDeck, index) => {
         if (!labwareOnDeck) {
@@ -120,7 +121,7 @@ export function HighlightItems(props: HighlightItemsProps): JSX.Element | null {
 
         let labwareSlot = labwareOnDeck.slot
         const hasTC = Object.values(modules).some(
-          mod => mod.type === THERMOCYCLER_MODULE_TYPE
+          module => module.type === THERMOCYCLER_MODULE_TYPE
         )
 
         if (modules[labwareSlot]) {
@@ -131,7 +132,7 @@ export function HighlightItems(props: HighlightItemsProps): JSX.Element | null {
         }
 
         const position = getPositionFromSlotId(labwareSlot, deckDef)
-        if (position) {
+        if (position != null) {
           items.push(
             <LabwareLabel
               key={`${labwareOnDeck.id}_${index}`}
@@ -175,7 +176,7 @@ export function HighlightItems(props: HighlightItemsProps): JSX.Element | null {
       }
 
       const position = getPositionFromSlotId(moduleOnDeck.slot, deckDef)
-      if (position) {
+      if (position != null) {
         items.push(
           <ModuleLabel
             key={`module_${moduleOnDeck.id}`}
@@ -215,7 +216,7 @@ export function HighlightItems(props: HighlightItemsProps): JSX.Element | null {
         return []
       }
 
-      if (hoveredItemTrash) {
+      if (hoveredItemTrash != null) {
         items.push(
           <FixtureRender
             key={`${hoveredItemTrash.id}_hovered`}
@@ -236,7 +237,7 @@ export function HighlightItems(props: HighlightItemsProps): JSX.Element | null {
         )
       }
 
-      if (selectedTrashOnDeck && selectedItemTrash) {
+      if (selectedTrashOnDeck != null && selectedItemTrash != null) {
         items.push(
           <FixtureRender
             key={`${selectedTrashOnDeck.id}_selected`}
@@ -278,7 +279,7 @@ export function HighlightItems(props: HighlightItemsProps): JSX.Element | null {
             showHighlight={true}
             tagInfo={[
               {
-                text: i18n.format(t('location'), 'capitalize'),
+                text: t('location'),
                 isSelected: true,
                 isLast: true,
                 isZoomed: false,

protocol-designer/src/pages/Designer/DeckSetup/ModuleLabel.tsx

@@ -49,20 +49,25 @@ export const ModuleLabel = (props: ModuleLabelProps): JSX.Element => {
     def?.dimensions.labwareInterfaceXDimension != null
       ? def.dimensions.xDimension - def?.dimensions.labwareInterfaceXDimension
       : 0
-  //  TODO(ja 9/6/24): definitely need to refine these overhang values
   let leftOverhang = overhang
-  if (def?.moduleType === TEMPERATURE_MODULE_TYPE) {
-    leftOverhang = overhang * 2
-  } else if (def?.moduleType === HEATERSHAKER_MODULE_TYPE) {
-    leftOverhang = overhang + 14
-  } else if (def?.moduleType === MAGNETIC_MODULE_TYPE) {
-    leftOverhang = overhang + 8
-  } else if (
-    def?.moduleType === THERMOCYCLER_MODULE_TYPE &&
-    !isZoomed &&
-    robotType === FLEX_ROBOT_TYPE
-  ) {
-    leftOverhang = overhang + 20
+
+  switch (def?.moduleType) {
+    case TEMPERATURE_MODULE_TYPE:
+      leftOverhang = overhang * 2
+      break
+    case HEATERSHAKER_MODULE_TYPE:
+      leftOverhang = overhang + 14
+      break
+    case MAGNETIC_MODULE_TYPE:
+      leftOverhang = overhang + 8
+      break
+    case THERMOCYCLER_MODULE_TYPE:
+      if (!isZoomed && robotType === FLEX_ROBOT_TYPE) {
+        leftOverhang = overhang + 20
+      }
+      break
+    default:
+      break
   }
 
   return (

protocol-designer/src/pages/Designer/Offdeck/HighlightOffdeckSlot.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { DeckLabelSet, Flex } from '@opentrons/components'
+import { DeckLabelSet, Flex, POSITION_RELATIVE } from '@opentrons/components'
 import {
   getHoveredDropdownItem,
   getSelectedDropdownItem,
@@ -17,7 +17,7 @@ export function HighlightOffdeckSlot(
   props: HighlightOffdeckSlotProps
 ): JSX.Element | null {
   const { labwareOnDeck, position } = props
-  const { t, i18n } = useTranslation('application')
+  const { t } = useTranslation('application')
   const hoveredDropdownItem = useSelector(getHoveredDropdownItem)
   const selectedDropdownSelection = useSelector(getSelectedDropdownItem)
 
@@ -28,7 +28,7 @@ export function HighlightOffdeckSlot(
     const highlighted = hoveredDropdownItem.id === labwareOnDeck?.id
     if (highlighted ?? isLabwareSelectionSelected) {
       return (
-        <Flex marginTop="-6.3rem">
+        <Flex position={POSITION_RELATIVE} top="-6.3rem">
           <DeckLabelSet
             deckLabels={[
               {
@@ -57,7 +57,7 @@ export function HighlightOffdeckSlot(
         <DeckLabelSet
           deckLabels={[
             {
-              text: i18n.format(t('location'), 'capitalize'),
+              text: t('location'),
               isSelected: selected,
               isLast: true,
               isZoomed: false,

protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx

@@ -23,17 +23,17 @@ import { DeckItemHover } from '../DeckSetup/DeckItemHover'
 import { SlotDetailsContainer } from '../../../organisms'
 import { wellFillFromWellContents } from '../../../organisms/LabwareOnDeck/utils'
 import { getRobotType } from '../../../file-data/selectors'
-import { SlotOverflowMenu } from '../DeckSetup/SlotOverflowMenu'
-import { HighlightOffdeckSlot } from './HighlightOffdeckSlot'
-import type { DeckSlotId } from '@opentrons/shared-data'
-import type { DeckSetupTabType } from '../types'
 import {
   getHoveredDropdownItem,
   getSelectedDropdownItem,
 } from '../../../ui/steps/selectors'
+import { SlotOverflowMenu } from '../DeckSetup/SlotOverflowMenu'
+import { HighlightOffdeckSlot } from './HighlightOffdeckSlot'
+import type { CoordinateTuple, DeckSlotId } from '@opentrons/shared-data'
+import type { DeckSetupTabType } from '../types'
 
 const OFFDECK_MAP_WIDTH = '41.625rem'
-
+const ZERO_SLOT_POSITION: CoordinateTuple = [0, 0, 0]
 interface OffDeckDetailsProps extends DeckSetupTabType {
   addLabware: () => void
 }
@@ -154,14 +154,17 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
                         menuListId={menuListId}
                         setHover={setHoverSlot}
                         slotBoundingBox={xyzDimensions}
-                        slotPosition={[0, 0, 0]}
+                        slotPosition={ZERO_SLOT_POSITION}
                         itemId={lw.id}
                         tab={tab}
                       />
                     </>
                   )}
                 </RobotWorkSpace>
-                <HighlightOffdeckSlot labwareOnDeck={lw} position={[0, 0, 0]} />
+                <HighlightOffdeckSlot
+                  labwareOnDeck={lw}
+                  position={ZERO_SLOT_POSITION}
+                />
                 {menuListId === lw.id ? (
                   <Flex
                     marginTop={`-${SPACING.spacing32}`}
@@ -174,7 +177,7 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
                       setShowMenuList={() => {
                         setShowMenuListForId(null)
                       }}
-                      menuListSlotPosition={[0, 0, 0]}
+                      menuListSlotPosition={ZERO_SLOT_POSITION}
                       invertY
                     />
                   </Flex>
@@ -183,7 +186,7 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
             )
           })}
 
-          <HighlightOffdeckSlot position={[0, 0, 0]} />
+          <HighlightOffdeckSlot position={ZERO_SLOT_POSITION} />
 
           {tab === 'startingDeck' ? (
             <Flex width="9.5625rem" height="6.375rem">

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/LabwareLocationField.tsx

@@ -19,7 +19,7 @@ interface LabwareLocationFieldProps extends FieldProps {
 export function LabwareLocationField(
   props: LabwareLocationFieldProps
 ): JSX.Element {
-  const { t, i18n } = useTranslation(['form', 'protocol_steps'])
+  const { t } = useTranslation(['form', 'protocol_steps'])
   const { labware, useGripper } = props
   const additionalEquipmentEntities = useSelector(
     getAdditionalEquipmentEntities
@@ -54,7 +54,7 @@ export function LabwareLocationField(
         dispatch(
           hoverSelection({
             id,
-            text: i18n.format(t('application:location'), 'capitalize'),
+            text: t('application:location'),
           })
         )
       }}

protocol-designer/src/ui/steps/actions/__tests__/addAndSelectStep.test.ts

@@ -6,8 +6,8 @@ import { addHint } from '../../../../tutorial/actions'
 import { selectors as labwareIngredSelectors } from '../../../../labware-ingred/selectors'
 import * as fileDataSelectors from '../../../../file-data/selectors'
 import { getInitialDeckSetup } from '../../../../step-forms/selectors'
-import type { StepType } from '../../../../form-types'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { StepType } from '../../../../form-types'
 
 vi.mock('../../../../tutorial/actions')
 vi.mock('../../../../ui/modules/selectors')