fix(protocol-designer): Fix deck view size issues in pd (#16616)

* fix(protocol-designer): Fix deck view size issues in pd
Opentrons · Oct 31, 2024 · ce8265c · ce8265c
1 parent 81ae31d
commit ce8265c
Show file tree

Hide file tree

Showing 15 changed files with 181 additions and 57 deletions.
diff --git a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
@@ -1,5 +1,7 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { Svg } from '../../primitives'
+
+import type { ReactNode } from 'react'
 import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
 
 export interface RobotCoordinateSpaceWithRefRenderProps {
@@ -10,14 +12,15 @@ interface RobotCoordinateSpaceWithRefProps
   extends React.ComponentProps<typeof Svg> {
   viewBox?: string | null
   deckDef?: DeckDefinition
-  children?: (props: RobotCoordinateSpaceWithRefRenderProps) => React.ReactNode
+  zoomed?: boolean
+  children?: (props: RobotCoordinateSpaceWithRefRenderProps) => ReactNode
 }
 
 export function RobotCoordinateSpaceWithRef(
   props: RobotCoordinateSpaceWithRefProps
 ): JSX.Element | null {
-  const { children, deckDef, viewBox, ...restProps } = props
-  const wrapperRef = React.useRef<SVGSVGElement>(null)
+  const { children, deckDef, viewBox, zoomed = false, ...restProps } = props
+  const wrapperRef = useRef<SVGSVGElement>(null)
 
   if (deckDef == null && viewBox == null) return null
 
@@ -31,13 +34,26 @@ export function RobotCoordinateSpaceWithRef(
       (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }),
       {}
     )
-    wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
+
+    if (deckDef.otId === 'ot2_standard') {
+      const PADDING = 5
+      wholeDeckViewBox = `${viewBoxOriginX - PADDING} ${
+        viewBoxOriginY + PADDING * 5
+      } ${deckXDimension + PADDING * 2} ${deckYDimension - PADDING * 10}`
+    } else {
+      const PADDING = 20
+      wholeDeckViewBox = `${viewBoxOriginX - PADDING} ${
+        viewBoxOriginY + PADDING
+      } ${deckXDimension + PADDING * 2} ${deckYDimension + PADDING * 2}`
+    }
   }
   return (
     <Svg
-      viewBox={viewBox || wholeDeckViewBox}
+      viewBox={zoomed ? viewBox : wholeDeckViewBox}
       ref={wrapperRef}
       transform="scale(1, -1)"
+      width="100%"
+      height="100%"
       {...restProps}
     >
       {children?.({ deckSlotsById })}

diff --git a/protocol-designer/src/atoms/constants.ts b/protocol-designer/src/atoms/constants.ts
@@ -18,4 +18,5 @@ export const LINE_CLAMP_TEXT_STYLE = (
   text-overflow: ellipsis;
   word-wrap: break-word;
   -webkit-line-clamp: ${lineClamp};
+  word-break: break-all; // for a non word case like aaaaaaaa
 `
diff --git a/protocol-designer/src/organisms/AssignLiquidsModal/LiquidCard.tsx b/protocol-designer/src/organisms/AssignLiquidsModal/LiquidCard.tsx
@@ -18,6 +18,7 @@ import {
 import { selectors as labwareIngredSelectors } from '../../labware-ingred/selectors'
 import { getLabwareEntities } from '../../step-forms/selectors'
 import * as wellContentsSelectors from '../../top-selectors/well-contents'
+import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 
 import type { LiquidInfo } from './LiquidToolbox'
 
@@ -80,8 +81,16 @@ export function LiquidCard(props: LiquidCardProps): JSX.Element {
       >
         <LiquidIcon color={color ?? ''} size="medium" />
         <Flex flexDirection={DIRECTION_COLUMN} width="12.375rem">
-          <StyledText desktopStyle="bodyDefaultSemiBold">{name}</StyledText>
-          <StyledText desktopStyle="bodyDefaultRegular">
+          <StyledText
+            desktopStyle="bodyDefaultSemiBold"
+            css={LINE_CLAMP_TEXT_STYLE(3)}
+          >
+            {name}
+          </StyledText>
+          <StyledText
+            desktopStyle="bodyDefaultRegular"
+            css={LINE_CLAMP_TEXT_STYLE(3)}
+          >
             {info.liquidIndex != null
               ? liquidsWithDescriptions[info.liquidIndex].description
               : null}

diff --git a/protocol-designer/src/organisms/DefineLiquidsModal/__tests__/utils.test.ts b/protocol-designer/src/organisms/DefineLiquidsModal/__tests__/utils.test.ts
@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest'
+import { checkColor } from '../utils'
+
+describe('checkColor', () => {
+  it('should return true for very dark colors', () => {
+    expect(checkColor('#000000')).toBe(true)
+    expect(checkColor('#0a0a0a')).toBe(true)
+  })
+
+  it('should return true for very light colors', () => {
+    expect(checkColor('#ffffff')).toBe(true)
+    expect(checkColor('#f5f5f5')).toBe(true)
+  })
+
+  it('should return false for colors with medium luminance', () => {
+    expect(checkColor('#808080')).toBe(false)
+    expect(checkColor('#ff0000')).toBe(false)
+    expect(checkColor('#00ff00')).toBe(false)
+    expect(checkColor('#0000ff')).toBe(false)
+  })
+})
diff --git a/protocol-designer/src/organisms/DefineLiquidsModal/index.tsx b/protocol-designer/src/organisms/DefineLiquidsModal/index.tsx
@@ -34,6 +34,7 @@ import { selectors as labwareIngredSelectors } from '../../labware-ingred/select
 import { swatchColors } from '../../components/swatchColors'
 import { checkColor } from './utils'
 import { HandleEnter } from '../../atoms/HandleEnter'
+import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 
 import type { ColorResult, RGBColor } from 'react-color'
 import type { ThunkDispatch } from 'redux-thunk'
@@ -173,7 +174,10 @@ export function DefineLiquidsModal(
           selectedIngredFields != null ? (
             <Flex gridGap={SPACING.spacing8}>
               <LiquidIcon color={initialValues.displayColor} />
-              <StyledText desktopStyle="bodyLargeSemiBold">
+              <StyledText
+                desktopStyle="bodyLargeSemiBold"
+                css={LINE_CLAMP_TEXT_STYLE(1)}
+              >
                 {initialValues.name}
               </StyledText>
             </Flex>

diff --git a/protocol-designer/src/organisms/SlotDetailsContainer/__tests__/utils.test.ts b/protocol-designer/src/organisms/SlotDetailsContainer/__tests__/utils.test.ts
@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
+import { getXPosition } from '../utils'
+
+describe('getXPosition', () => {
+  it('should return the right position 600 for FLEX robot type and slot 3', () => {
+    expect(getXPosition('3', FLEX_ROBOT_TYPE, false)).toBe('600')
+  })
+
+  it('should return the right position 700 for FLEX robot type and slot 4', () => {
+    expect(getXPosition('4', FLEX_ROBOT_TYPE, true)).toBe('700')
+  })
+
+  it('should return the left position for FLEX robot type and slot 1', () => {
+    expect(getXPosition('1', FLEX_ROBOT_TYPE, false)).toBe('-400')
+  })
+
+  it('should return the right position for OT2 robot type and slot 6', () => {
+    expect(getXPosition('6', OT2_ROBOT_TYPE, false)).toBe('420')
+  })
+
+  it('should return the left position for OT2 robot type and slot 2', () => {
+    expect(getXPosition('2', OT2_ROBOT_TYPE, false)).toBe('-300')
+  })
+})
diff --git a/protocol-designer/src/organisms/SlotDetailsContainer/index.tsx b/protocol-designer/src/organisms/SlotDetailsContainer/index.tsx
@@ -4,15 +4,17 @@ import { useTranslation } from 'react-i18next'
 import { getModuleDisplayName } from '@opentrons/shared-data'
 import { RobotCoordsForeignObject } from '@opentrons/components'
 import * as wellContentsSelectors from '../../top-selectors/well-contents'
+import { getAdditionalEquipmentEntities } from '../../step-forms/selectors'
 import { selectors } from '../../labware-ingred/selectors'
 import { selectors as uiLabwareSelectors } from '../../ui/labware'
 import { getDeckSetupForActiveItem } from '../../top-selectors/labware-locations'
 import { SlotInformation } from '../../organisms/SlotInformation'
-import { getYPosition } from './utils'
+import { getXPosition } from './utils'
 
 import type { DeckSlotId, RobotType } from '@opentrons/shared-data'
 import type { ContentsByWell } from '../../labware-ingred/types'
 
+const SLOT_DETAIL_Y_POSITION = '-10'
 interface SlotDetailContainerProps {
   robotType: RobotType
   slot: DeckSlotId | null
@@ -31,6 +33,10 @@ export function SlotDetailsContainer(
   )
   const nickNames = useSelector(uiLabwareSelectors.getLabwareNicknamesById)
   const allIngredNamesIds = useSelector(selectors.allIngredientNamesIds)
+  const additionalEquipment = useSelector(getAdditionalEquipmentEntities)
+  const hasStagingArea = Object.values(additionalEquipment).some(
+    item => item.name === 'stagingArea'
+  )
 
   if (slot == null || (slot === 'offDeck' && offDeckLabwareId == null)) {
     return null
@@ -106,8 +112,8 @@ export function SlotDetailsContainer(
     <RobotCoordsForeignObject
       width="15.8125rem"
       height="26.75rem"
-      x="-400"
-      y={getYPosition({ robotType, slot })}
+      x={getXPosition(slot, robotType, hasStagingArea)}
+      y={SLOT_DETAIL_Y_POSITION}
     >
       <SlotInformation
         location={slot}

diff --git a/protocol-designer/src/organisms/SlotDetailsContainer/utils.ts b/protocol-designer/src/organisms/SlotDetailsContainer/utils.ts
@@ -52,3 +52,31 @@ export const getYPosition = ({ robotType, slot }: YPositionProps): string => {
     }
   }
 }
+
+export const getXPosition = (
+  slot: string,
+  robotType: RobotType,
+  hasStagingArea: boolean
+): string => {
+  const POSITION_MAP = {
+    FLEX: {
+      right: (slot: string) => (hasStagingArea ? '700' : '600'),
+      left: '-400',
+      regex: /[34]/,
+    },
+    OT2: {
+      right: '420',
+      left: '-300',
+      regex: /[369]/,
+    },
+  }
+
+  const { right, left, regex } =
+    robotType === FLEX_ROBOT_TYPE ? POSITION_MAP.FLEX : POSITION_MAP.OT2
+
+  return regex.test(slot)
+    ? typeof right === 'function'
+      ? right(slot)
+      : right
+    : left
+}
diff --git a/protocol-designer/src/organisms/SlotInformation/index.tsx b/protocol-designer/src/organisms/SlotInformation/index.tsx
@@ -12,6 +12,8 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
+import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
+
 import type { FC } from 'react'
 import type { RobotType } from '@opentrons/shared-data'
 
@@ -53,7 +55,15 @@ export const SlotInformation: FC<SlotInformationProps> = ({
           <ListItem type="noActive" width="max-content">
             <ListItemDescriptor
               type="default"
-              content={<StyledText>{liquids.join(', ')}</StyledText>}
+              content={
+                <StyledText
+                  desktopStyle="bodyDefaultRegular"
+                  textAlign={TYPOGRAPHY.textAlignRight}
+                  css={LINE_CLAMP_TEXT_STYLE(2)}
+                >
+                  {liquids.join(', ')}
+                </StyledText>
+              }
               description={t('liquid')}
             />
           </ListItem>

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
@@ -176,7 +176,7 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
         backgroundColor={COLORS.white}
         borderRadius={BORDERS.borderRadius12}
         width="100%"
-        height={zoomIn.slot != null ? '75vh' : '65vh'}
+        height={zoomIn.slot != null ? '75vh' : '70vh'}
         flexDirection={DIRECTION_COLUMN}
         padding={SPACING.spacing40}
       >
@@ -187,11 +187,12 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
           justifyContent={JUSTIFY_CENTER}
         >
           <RobotCoordinateSpaceWithRef
-            height={zoomIn.slot != null ? '100%' : '80%'}
+            height={zoomIn.slot != null ? '100%' : '95%'}
             width="100%"
             deckDef={deckDef}
             viewBox={viewBox}
             outline="auto"
+            zoomed={zoomIn.slot != null}
           >
             {() => (
               <>