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 => { )} 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 ( { }} > - {channels === 1 ? ( - + {channels === 1 || usingMetalProbe ? ( + ) : ( - + )} 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