From 08752e16a39dcdae25ddf9fc8e9f8a28e6edea6c Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Tue, 16 Jan 2024 15:25:02 -0500
Subject: [PATCH] fix(app): update LPC labware and pipette render for labware
 and pipette 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.
---
 .../LabwarePositionCheck/JogToWell.tsx        |  6 ++-
 .../hardware-sim/Pipette/PipetteRender.tsx    | 44 ++++++++++++++-----
 .../src/hardware-sim/Pipette/constants.ts     |  2 +
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx
index 4e91343b85a..6843583ad7c 100644
--- 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
index 5ce150375f1..8c37a2ef761 100644
--- 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
index 700361531fe..95480b39d0c 100644
--- 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