fix(app): update LPC labware and pipette render for labware and pipet…

…te combos Labware render highlighted wells and pipette render box and emanating nozzles position and number should reflect the number of pipette channels, the labware layout, and whether probe (Flex) or tip (OT-2) LPC is being utilized.
Opentrons · Jan 16, 2024 · 08752e1 · 08752e1
1 parent 77e47c2
commit 08752e1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx
@@ -97,7 +97,10 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => {
   }, [])
 
   let wellsToHighlight: string[] = []
-  if (getPipetteNameSpecs(pipetteName)?.channels === 8) {
+  if (
+    getPipetteNameSpecs(pipetteName)?.channels === 8 &&
+    !shouldUseMetalProbe
+  ) {
     wellsToHighlight = labwareDef.ordering[0]
   } else {
     wellsToHighlight = ['A1']
@@ -150,6 +153,7 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => {
                 <PipetteRender
                   labwareDef={labwareDef}
                   pipetteName={pipetteName}
+                  usingMetalProbe={shouldUseMetalProbe}
                 />
               </>
             )}

diff --git a/components/src/hardware-sim/Pipette/PipetteRender.tsx b/components/src/hardware-sim/Pipette/PipetteRender.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import classNames from 'classnames'
 import {
   getPipetteNameSpecs,
   LabwareDefinition2,
@@ -13,17 +14,20 @@ import {
   MULTI_CHANNEL_PIPETTE_HEIGHT,
   MULTI_CHANNEL_CENTER_Y_NOZZLE,
   MULTI_CHANNEL_Y_OFFSET,
+  NINETY_SIX_CHANNEL_PIPETTE_WIDTH,
 } from './constants'
 import { EmanatingNozzle } from './EmanatingNozzle'
 import { EightEmanatingNozzles } from './EightEmanatingNozzles'
+import styles from './styles.css'
 
 interface PipetteRenderProps {
   labwareDef: LabwareDefinition2
   pipetteName: PipetteName
+  usingMetalProbe?: boolean
 }
 
 export const PipetteRender = (props: PipetteRenderProps): JSX.Element => {
-  const { labwareDef, pipetteName } = props
+  const { labwareDef, pipetteName, usingMetalProbe = false } = props
   const channels = getPipetteNameSpecs(pipetteName)?.channels
   const cx =
     channels === 1
@@ -36,21 +40,33 @@ export const PipetteRender = (props: PipetteRenderProps): JSX.Element => {
   const x = labwareDef.wells.A1.x - cx
   const y = channels === 1 ? labwareDef.wells.A1.y - cy : MULTI_CHANNEL_Y_OFFSET
 
+  let boxWidth
+  let probeOffsetX = 0
+  let probeOffsetY = 0
+  if (channels === 1) {
+    boxWidth = SINGLE_CHANNEL_PIPETTE_WIDTH
+  } else if (channels === 8) {
+    boxWidth = MULTI_CHANNEL_PIPETTE_WIDTH
+    probeOffsetY = 63
+  } else {
+    boxWidth = NINETY_SIX_CHANNEL_PIPETTE_WIDTH
+    probeOffsetY = 63
+    if (Object.keys(labwareDef.wells).length === 1) {
+      probeOffsetX = 99 / 2
+    }
+  }
+
   return (
     <RobotCoordsForeignDiv
-      width={
-        channels === 1
-          ? SINGLE_CHANNEL_PIPETTE_WIDTH
-          : MULTI_CHANNEL_PIPETTE_WIDTH
-      }
+      width={boxWidth}
       height={
         channels === 1
           ? SINGLE_CHANNEL_PIPETTE_HEIGHT
           : MULTI_CHANNEL_PIPETTE_HEIGHT
       }
-      x={x}
+      x={x - probeOffsetX}
       y={y}
-      outerProps={{ style: { overflow: 'visible' } }}
+      className={classNames(styles.overflow)}
       innerDivProps={{
         style: {
           width: '100%',
@@ -64,10 +80,16 @@ export const PipetteRender = (props: PipetteRenderProps): JSX.Element => {
       }}
     >
       <svg overflow="visible">
-        {channels === 1 ? (
-          <EmanatingNozzle cx={cx} cy={cy} />
+        {channels === 1 || usingMetalProbe ? (
+          <EmanatingNozzle
+            cx={cx}
+            cy={usingMetalProbe ? cy + probeOffsetY : cy}
+          />
         ) : (
-          <EightEmanatingNozzles cx={cx} initialCy={cy} />
+          <EightEmanatingNozzles
+            cx={usingMetalProbe ? cx - probeOffsetX : cx}
+            initialCy={usingMetalProbe ? cy + probeOffsetY : cy}
+          />
         )}
       </svg>
     </RobotCoordsForeignDiv>

diff --git a/components/src/hardware-sim/Pipette/constants.ts b/components/src/hardware-sim/Pipette/constants.ts
@@ -1,8 +1,10 @@
+// These constants are used only in pipette render in LPC. The values do not necessarily reflect physical pipette dimensions.
 export const SINGLE_CHANNEL_PIPETTE_WIDTH = 18.7
 export const SINGLE_CHANNEL_PIPETTE_HEIGHT = 30.5
 
 export const MULTI_CHANNEL_PIPETTE_WIDTH = 18.7
 export const MULTI_CHANNEL_PIPETTE_HEIGHT = 90.3
+export const NINETY_SIX_CHANNEL_PIPETTE_WIDTH = 117.7
 
 export const MULTI_CHANNEL_CENTER_Y_NOZZLE = 13.3
 export const MULTI_CHANNEL_Y_OFFSET = -2.5