@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.0

package/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx

@@ -1,19 +1,12 @@
-import { SLOT_RENDER_HEIGHT, SLOT_RENDER_WIDTH } from '@opentrons/shared-data'
+import { getLabwareViewBox } from '@opentrons/shared-data'
 
 import { COLORS } from '../../../helix-design-system'
 import { getTiprackBackgroundColor } from './getTiprackBackgroundColor'
 
-import type { CSSProperties } from 'styled-components'
-import type { SVGProps } from 'react'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { CSSProperties, SVGProps } from 'react'
+import type { LabwareDefinition } from '@opentrons/shared-data'
 
-export interface LabwareOutlineProps {
-  /** Labware definition to outline */
-  definition?: LabwareDefinition2
-  /** x dimension in mm of this labware, used if definition doesn't supply dimensions, defaults to 127.76 */
-  width?: number
-  /** y dimension in mm of this labware, used if definition doesn't supply dimensions, defaults to 85.48 */
-  height?: number
+export type LabwareOutlineProps = {
   /** if this labware is a tip rack, darken background and lighten borderx dimension in mm of this labware, used if definition doesn't supply dimensions, defaults to false */
   isTiprack?: boolean
   /** adds thicker blue border with blur to labware, defaults to false */
@@ -24,6 +17,24 @@ export interface LabwareOutlineProps {
   stroke?: CSSProperties['stroke']
   fill?: CSSProperties['fill']
   showRadius?: boolean
+} & (DefinitionProps | DefinitionReplacementProps)
+
+interface DefinitionProps {
+  /** Labware definition to outline */
+  definition: LabwareDefinition
+}
+
+/** Used for rendering an outline without needing a full labware definition. */
+interface DefinitionReplacementProps {
+  definition?: undefined
+  /** x dimension in mm of the outline. */
+  width: number
+  /** y dimension in mm of the outline. */
+  height: number
+  /** minimum x-coordinate (i.e. the left side) of the outline. */
+  minX: number
+  /** minimum y-coordinate (i.e. the bottom) of the outline. */
+  minY: number
 }
 
 const OUTLINE_THICKNESS_MM = 1
@@ -31,8 +42,6 @@ const OUTLINE_THICKNESS_MM = 1
 export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
   const {
     definition,
-    width = SLOT_RENDER_WIDTH,
-    height = SLOT_RENDER_HEIGHT,
     isTiprack = false,
     highlight = false,
     highlightShadow = false,
@@ -40,10 +49,18 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
     fill,
     showRadius = true,
   } = props
-  const {
-    parameters = { isTiprack, loadName: '' },
-    dimensions = { xDimension: width, yDimension: height },
-  } = definition ?? {}
+
+  const { minX, minY, xDimension, yDimension } =
+    definition != null
+      ? getLabwareViewBox(definition)
+      : {
+          minX: props.minX,
+          minY: props.minY,
+          xDimension: props.width,
+          yDimension: props.height,
+        }
+
+  const { parameters = { isTiprack, loadName: '' } } = definition ?? {}
 
   let backgroundFill
   if (fill != null) {
@@ -86,8 +103,10 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
           </defs>
           <LabwareBorder
             borderThickness={2.2 * OUTLINE_THICKNESS_MM}
-            xDimension={dimensions.xDimension}
-            yDimension={dimensions.yDimension}
+            minX={minX}
+            minY={minY}
+            xDimension={xDimension}
+            yDimension={yDimension}
             filter={highlightShadow ? 'url(#feOffset)' : ''}
             stroke={COLORS.blue50}
             rx="8"
@@ -99,8 +118,10 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
       ) : (
         <LabwareBorder
           borderThickness={OUTLINE_THICKNESS_MM}
-          xDimension={dimensions.xDimension}
-          yDimension={dimensions.yDimension}
+          minX={minX}
+          minY={minY}
+          xDimension={xDimension}
+          yDimension={yDimension}
           stroke={stroke ?? (parameters.isTiprack ? '#979797' : COLORS.black90)}
           fill={backgroundFill}
           showRadius={showRadius}
@@ -112,6 +133,8 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
 
 interface LabwareBorderProps extends SVGProps<SVGRectElement> {
   borderThickness: number
+  minX: number
+  minY: number
   xDimension: number
   yDimension: number
   showRadius?: boolean
@@ -119,6 +142,8 @@ interface LabwareBorderProps extends SVGProps<SVGRectElement> {
 function LabwareBorder(props: LabwareBorderProps): JSX.Element {
   const {
     borderThickness,
+    minX,
+    minY,
     xDimension,
     yDimension,
     showRadius = true,
@@ -126,8 +151,8 @@ function LabwareBorder(props: LabwareBorderProps): JSX.Element {
   } = props
   return (
     <rect
-      x={borderThickness}
-      y={borderThickness}
+      x={minX + borderThickness}
+      y={minY + borderThickness}
       strokeWidth={2 * borderThickness}
       width={xDimension - 2 * borderThickness}
       height={yDimension - 2 * borderThickness}

package/src/hardware-sim/Labware/labwareInternals/LabwareWellLabels.tsx

@@ -5,7 +5,7 @@ import { TYPOGRAPHY } from '../../../ui-style-constants'
 import { RobotCoordsText } from '../../Deck'
 
 import type { MemoExoticComponent } from 'react'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareDefinition } from '@opentrons/shared-data'
 import type { HighlightedWellLabels } from './types'
 
 // magic layout numbers to make the letters close to the edges of the labware
@@ -14,13 +14,13 @@ const LETTER_COLUMN_X_ADJUSTMENT = -4
 const NUMBER_COLUMN_Y_ADJUSTMENT = 2
 
 interface LabwareWellLabelsProps {
-  definition: LabwareDefinition2
+  definition: LabwareDefinition
   highlightedWellLabels?: HighlightedWellLabels
   wellLabelColor?: string
 }
 
 const Labels = (props: {
-  definition: LabwareDefinition2
+  definition: LabwareDefinition
   wells: string[]
   isLetterColumn?: boolean
   highlightedWellLabels?: HighlightedWellLabels

package/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx

@@ -10,12 +10,12 @@ import { Well } from './Well'
 
 import type { CSSProperties } from 'styled-components'
 import type { MemoExoticComponent } from 'react'
-import type { LabwareDefinition2, LabwareWell } from '@opentrons/shared-data'
+import type { LabwareDefinition, LabwareWell } from '@opentrons/shared-data'
 import type { WellMouseEvent, WellStroke } from './types'
 
 export interface StaticLabwareProps {
   /** Labware definition to render */
-  definition: LabwareDefinition2
+  definition: LabwareDefinition
   /** Add thicker blurred blue border to labware, defaults to false */
   highlight?: boolean
   /** adds a drop shadow to the highlight border */

package/src/hardware-sim/Labware/labwareInternals/StrokedWells.tsx

@@ -6,10 +6,10 @@ import { Well } from './Well'
 
 import type { CSSProperties } from 'styled-components'
 import type { MemoExoticComponent, ReactNode } from 'react'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareDefinition } from '@opentrons/shared-data'
 
 export interface StrokedWellProps {
-  definition: LabwareDefinition2
+  definition: LabwareDefinition
   strokeByWell: Record<string, CSSProperties['stroke']>
 }
 

package/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx

@@ -4,7 +4,7 @@ import { COLORS } from '../../../helix-design-system'
 import { Well } from './Well'
 
 import type { CSSProperties, MemoExoticComponent } from 'react'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareDefinition } from '@opentrons/shared-data'
 import type { WellGroup } from './types'
 
 type WellContents =
@@ -16,7 +16,7 @@ type WellContents =
   | 'selectedWell'
 export interface StyledWellProps {
   wellContents: WellContents
-  definition: LabwareDefinition2
+  definition: LabwareDefinition
   wells: WellGroup
 }
 

package/src/hardware-sim/Labware/labwareInternals/Well.tsx

@@ -6,10 +6,9 @@ import { COLORS } from '../../../helix-design-system'
 
 import type { CSSProperties, MemoExoticComponent, MouseEvent } from 'react'
 import type { LabwareWell } from '@opentrons/shared-data'
-import type { StyleProps } from '../../../primitives'
 import type { WellMouseEvent } from './types'
 
-export interface WellProps extends StyleProps {
+export interface WellProps extends CSSProperties {
   /** Well Name (eg 'A1') */
   wellName: string
   /** well object from labware definition */

package/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx

@@ -1,12 +1,14 @@
 import { memo } from 'react'
 
+import { getSchema2Dimensions } from '@opentrons/shared-data'
+
 import { COLORS } from '../../../helix-design-system'
 import { C_BLACK, C_BLUE } from '../../../styles/colors'
 import { RobotCoordsText } from '../../Deck'
 import { WELL_LABEL_OPTIONS } from '../LabwareRender'
 
 import type { MemoExoticComponent } from 'react'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareDefinition } from '@opentrons/shared-data'
 import type { WellLabelOption } from '../LabwareRender'
 import type { HighlightedWellLabels } from './types'
 
@@ -18,14 +20,14 @@ const LETTER_COLUMN_X_OUTSIDE = -4
 const NUMBER_COLUMN_Y_FROM_TOP_OUTSIDE = -5
 
 export interface WellLabelsProps {
-  definition: LabwareDefinition2
+  definition: LabwareDefinition
   wellLabelOption: WellLabelOption
   highlightedWellLabels?: HighlightedWellLabels
   wellLabelColor?: string
 }
 
 const Labels = (props: {
-  definition: LabwareDefinition2
+  definition: LabwareDefinition
   wells: string[]
   wellLabelOption: WellLabelOption
   isLetterColumn?: boolean
@@ -61,16 +63,13 @@ const Labels = (props: {
             y={
               props.isLetterColumn === true
                 ? well.y
-                : props.definition.dimensions.yDimension -
+                : getSchema2Dimensions(props.definition).yDimension -
                   NUMBER_COLUMN_Y_FROM_TOP
             }
-            style={{
-              color: COLORS.grey50, // LEGACY --c-font-dark
-              fontSize: '0.2rem', // LEGACY --fs-micro
-              textAnchor: 'middle',
-              dominantBaseline:
-                props.isLetterColumn === true ? 'middle' : 'auto',
-            }}
+            color={COLORS.grey50} // LEGACY --c-font-dark
+            fontSize="0.2rem" // LEGACY --fs-micro
+            textAnchor="middle"
+            dominantBaseline={props.isLetterColumn === true ? 'middle' : 'auto'}
             fill={
               highlightedWellLabels?.wells.includes(wellName) ?? false
                 ? highlightColor

package/src/hardware-sim/Labware/labwareInternals/__tests__/LabwareWellLabels.test.tsx

@@ -7,9 +7,9 @@ import { fixture12Trough as _fixture12Trough } from '@opentrons/shared-data'
 
 import { LabwareWellLabels } from '../LabwareWellLabels'
 
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareDefinition } from '@opentrons/shared-data'
 
-const troughFixture12 = _fixture12Trough as LabwareDefinition2
+const troughFixture12 = _fixture12Trough as LabwareDefinition
 
 describe('LabwareWellLabels', () => {
   it('should render well labels', () => {

package/src/hardware-sim/Labware/labwareInternals/__tests__/StrokedWells.test.tsx

@@ -8,11 +8,11 @@ import { fixture12Trough } from '@opentrons/shared-data'
 import { StrokedWells } from '../StrokedWells'
 import { WellComponent as Well } from '../Well'
 
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareDefinition } from '@opentrons/shared-data'
 
 vi.mock('../Well')
 
-const troughFixture12 = fixture12Trough as LabwareDefinition2
+const troughFixture12 = fixture12Trough as LabwareDefinition
 
 describe('StrokedWells', () => {
   it('should render a series of wells with the given stroke', () => {

package/src/hardware-sim/Labware/labwareInternals/__tests__/WellLabels.test.tsx

@@ -8,9 +8,9 @@ import { fixture12Trough as _fixture12Trough } from '@opentrons/shared-data'
 import { WELL_LABEL_OPTIONS } from '../../LabwareRender'
 import { WellLabels } from '../WellLabels'
 
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareDefinition } from '@opentrons/shared-data'
 
-const troughFixture12 = _fixture12Trough as LabwareDefinition2
+const troughFixture12 = _fixture12Trough as LabwareDefinition
 
 describe('WellLabels', () => {
   it('should render well labels outside of the labware', () => {

package/src/hardware-sim/Module/Module.stories.tsx

@@ -1,6 +1,8 @@
 import {
+  ABSORBANCE_READER_V1,
   fixture96Plate,
-  getModuleDef2,
+  FLEX_STACKER_MODULE_V1,
+  getModuleDef,
   HEATERSHAKER_MODULE_V1,
   MAGNETIC_BLOCK_V1,
   MAGNETIC_MODULE_V1,
@@ -16,7 +18,7 @@ import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
 import { Module as ModuleComponent } from './'
 
 import type { Meta, Story } from '@storybook/react'
-import type { LabwareDefinition2, ModuleModel } from '@opentrons/shared-data'
+import type { LabwareDefinition, ModuleModel } from '@opentrons/shared-data'
 
 const moduleModels: ModuleModel[] = [
   TEMPERATURE_MODULE_V2,
@@ -27,8 +29,23 @@ const moduleModels: ModuleModel[] = [
   MAGNETIC_MODULE_V2,
   HEATERSHAKER_MODULE_V1,
   MAGNETIC_BLOCK_V1,
+  ABSORBANCE_READER_V1,
+  FLEX_STACKER_MODULE_V1,
 ]
 
+const moduleModelOptions = {
+  'Temperature Module V2': TEMPERATURE_MODULE_V2,
+  'Temperature Module V1': TEMPERATURE_MODULE_V1,
+  'Thermocycler Module V1': THERMOCYCLER_MODULE_V1,
+  'Thermocycler Module V2': THERMOCYCLER_MODULE_V2,
+  'Magnetic Module V1': MAGNETIC_MODULE_V1,
+  'Magnetic Module V2': MAGNETIC_MODULE_V2,
+  'Heater-Shaker Module V1': HEATERSHAKER_MODULE_V1,
+  'Magnetic Block V1': MAGNETIC_BLOCK_V1,
+  'Absorbance Reader V1': ABSORBANCE_READER_V1,
+  'Flex Stacker Module V1': FLEX_STACKER_MODULE_V1,
+}
+
 export default {
   title: 'Library/Molecules/Simulation/Module',
 } as Meta
@@ -39,53 +56,66 @@ const Template: Story<{
   hasLabware: boolean
   innerProps: {}
 }> = args => {
+  // Add null check and default to first module model if undefined
+  const moduleModel = args.model || moduleModels[0]
+
   return (
     <RobotCoordinateSpace height="100vh" width="100vw" viewBox="0 -50 200 320">
       <ModuleComponent
-        def={getModuleDef2(args.model)}
+        def={getModuleDef(moduleModel)}
         x={0}
         y={0}
         innerProps={args.innerProps}
         orientation={args.orientation}
+        targetSlotId={null}
+        targetDeckId={null}
+        childrenPositioningMode="offsetToSlot"
       >
         {args.hasLabware ? (
-          <LabwareRender definition={fixture96Plate as LabwareDefinition2} />
+          <LabwareRender
+            definition={fixture96Plate as LabwareDefinition}
+            positioningMode="passThrough"
+          />
         ) : null}
       </ModuleComponent>
     </RobotCoordinateSpace>
   )
 }
+
 export const Module = Template.bind({})
+Module.args = {
+  model: TEMPERATURE_MODULE_V2,
+  orientation: 'left',
+  hasLabware: false,
+  innerProps: {
+    lidMotorState: 'open',
+    blockTargetTemp: 90,
+    targetTemperature: 4,
+    targetTemp: 40,
+  },
+}
+
 Module.argTypes = {
   model: {
     control: {
       type: 'select',
-      options: moduleModels,
     },
-    defaultValue: moduleModels[0],
+    options: moduleModelOptions,
   },
   orientation: {
     control: {
       type: 'select',
-      options: ['left', 'right'],
     },
-    defaultValue: 'left',
+    options: ['left', 'right'],
   },
   hasLabware: {
     control: {
       type: 'boolean',
     },
-    defaultValue: false,
   },
   innerProps: {
     control: {
       type: 'object',
     },
-    defaultValue: {
-      lidMotorState: 'open',
-      blockTargetTemp: 90,
-      targetTemperature: 4,
-      targetTemp: 40,
-    },
   },
 }

package/src/hardware-sim/Module/Thermocycler/index.tsx

@@ -1,4 +1,4 @@
-import { getModuleDef2, THERMOCYCLER_MODULE_V1 } from '@opentrons/shared-data'
+import { getModuleDef, THERMOCYCLER_MODULE_V1 } from '@opentrons/shared-data'
 
 import { BORDERS, COLORS } from '../../../helix-design-system'
 import { C_MED_LIGHT_GRAY } from '../../../styles'
@@ -17,7 +17,7 @@ export interface ThermocyclerVizProps {
 
 export function Thermocycler(props: ThermocyclerVizProps): JSX.Element {
   const { lidMotorState, blockTargetTemp, model } = props
-  const def = getModuleDef2(model)
+  const def = getModuleDef(model)
   if (lidMotorState === 'unknown') {
     // just a rectangle if we don't know the state of the lid
     return (

package/src/hardware-sim/Module/index.tsx

@@ -5,7 +5,7 @@ import {
   HEATERSHAKER_MODULE_TYPE,
   MAGNETIC_BLOCK_TYPE,
   MAGNETIC_MODULE_TYPE,
-  OT2_STANDARD_DECKID,
+  multiplyMatrices,
   TEMPERATURE_MODULE_TYPE,
   THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
@@ -21,7 +21,6 @@ import {
   SPACING_1,
 } from '../../styles'
 import { RobotCoordsForeignObject } from '../Deck'
-import { multiplyMatrices } from '../utils'
 import { FlexStacker } from './FlexStacker'
 import { HeaterShaker } from './HeaterShaker'
 import { MagneticBlock } from './MagneticBlock'
@@ -35,6 +34,7 @@ import type {
   ModuleDefinition,
   ThermocyclerModuleModel,
 } from '@opentrons/shared-data'
+import type { FlexDirection } from '../Deck'
 
 export * from './Thermocycler'
 
@@ -51,9 +51,34 @@ interface Props {
     | ComponentProps<typeof Temperature>
     | {}
   statusInfo?: ReactNode // contents of small status rectangle, not displayed if absent
-  children?: ReactNode // contents to be rendered on top of the labware mating surface of the module
-  targetSlotId?: string
-  targetDeckId?: string
+
+  children?: ReactNode
+
+  /**
+   * How child components should be positioned.
+   *
+   * "offsetToSlot" - The SVG origin of a child will be at the labware mating interface of the
+   *   module, which is the front-left (-x, -y) corner of the slot on top of the module.
+   *
+   * todo(mm, 2025-07-21):
+   * 1. Add a "passThrough" mode that disables the "offsetToSlot" behavior,
+   *    to allow child components to replace it with their own SVG transform,
+   *    to support labware schema 3.
+   * 2. Migrate all existing call sites to use "passThrough".
+   * 3. Remove "offsetToSlot".
+   */
+  childrenPositioningMode: 'offsetToSlot'
+
+  /**
+   * Used for applying slot-specific positioning adjustments.
+   * If you're rendering the module on a deck, supply this for correct positioning.
+   */
+  targetSlotId: string | null
+  /**
+   * Used for applying slot-specific positioning adjustments.
+   * If you're rendering the module on a deck, supply this for correct positioning.
+   */
+  targetDeckId: string | null
 }
 
 const statusInfoWrapperProps = {
@@ -61,7 +86,7 @@ const statusInfoWrapperProps = {
   alignItems: ALIGN_CENTER,
 }
 const statusInfoFlexProps = {
-  flexDirection: DIRECTION_COLUMN,
+  flexDirection: DIRECTION_COLUMN as FlexDirection,
   justifyContent: JUSTIFY_CENTER,
   backgroundColor: C_MED_LIGHT_GRAY,
   padding: SPACING_1,
@@ -80,8 +105,9 @@ export const Module = (props: Props): JSX.Element => {
     statusInfo,
     children,
     targetSlotId,
-    targetDeckId = OT2_STANDARD_DECKID,
+    targetDeckId,
   } = props
+
   const moduleType = getModuleType(def.model)
 
   const { x: labwareOffsetX, y: labwareOffsetY } = def.labwareOffset
@@ -110,19 +136,16 @@ export const Module = (props: Props): JSX.Element => {
   let nestedLabwareOffsetY = labwareOffsetY
 
   // additional transforms to apply to vectors in certain deck/slot combinations
-  const transformsForDeckBySlot = def?.slotTransforms?.[targetDeckId]
+  const transformsForDeckBySlot =
+    (targetDeckId != null ? def?.slotTransforms?.[targetDeckId] : null) ?? {}
   const slotTransformsForDeckSlot =
-    targetSlotId != null &&
-    transformsForDeckBySlot != null &&
-    targetSlotId in transformsForDeckBySlot
-      ? transformsForDeckBySlot[targetSlotId]
-      : null
-  const deckSpecificTransforms = slotTransformsForDeckSlot ?? {}
-  if (deckSpecificTransforms?.cornerOffsetFromSlot != null) {
+    (targetSlotId != null ? transformsForDeckBySlot[targetSlotId] : null) ?? {}
+
+  if (slotTransformsForDeckSlot.cornerOffsetFromSlot != null) {
     const [
       [slotTranslateX],
       [slotTranslateY],
-    ] = multiplyMatrices(deckSpecificTransforms.cornerOffsetFromSlot, [
+    ] = multiplyMatrices(slotTransformsForDeckSlot.cornerOffsetFromSlot, [
       [translateX],
       [translateY],
       [translateZ],
@@ -130,11 +153,11 @@ export const Module = (props: Props): JSX.Element => {
     ])
     offsetTransform = `translate(${slotTranslateX}, ${slotTranslateY})`
   }
-  if (deckSpecificTransforms?.labwareOffset != null) {
+  if (slotTransformsForDeckSlot.labwareOffset != null) {
     const [
       [slotLabwareOffsetX],
       [slotLabwareOffsetY],
-    ] = multiplyMatrices(deckSpecificTransforms.labwareOffset, [
+    ] = multiplyMatrices(slotTransformsForDeckSlot.labwareOffset, [
       [labwareOffsetX],
       [labwareOffsetY],
       [1],

package/src/hardware-sim/Pipette/PipetteRender.stories.tsx

@@ -7,7 +7,7 @@ import { LabwareRender } from '../Labware'
 import { PipetteRender } from './'
 
 import type { Meta, Story } from '@storybook/react'
-import type { LabwareDefinition2, PipetteName } from '@opentrons/shared-data'
+import type { LabwareDefinition, PipetteName } from '@opentrons/shared-data'
 
 const DECK_MAP_VIEWBOX = '0 -140 230 230'
 
@@ -18,7 +18,7 @@ const axygenReservoir90ml = getAllLabwareDefs().axygen1Reservoir90MlV1
 const opentrons6TuberackNest50mlConical = getAllLabwareDefs()
   .opentrons6TuberackNest50MlConicalV1
 
-const labwareDefMap: Record<string, LabwareDefinition2> = {
+const labwareDefMap: Record<string, LabwareDefinition> = {
   [opentrons300UlTiprack.metadata.displayName]: opentrons300UlTiprack,
   [opentrons10UlTiprack.metadata.displayName]: opentrons10UlTiprack,
   [nest12Reservoir15ml.metadata.displayName]: nest12Reservoir15ml,

package/src/hardware-sim/Pipette/PipetteRender.tsx

@@ -13,10 +13,10 @@ import {
 import { EightEmanatingNozzles } from './EightEmanatingNozzles'
 import { EmanatingNozzle } from './EmanatingNozzle'
 
-import type { LabwareDefinition2, PipetteName } from '@opentrons/shared-data'
+import type { LabwareDefinition, PipetteName } from '@opentrons/shared-data'
 
 interface PipetteRenderProps {
-  labwareDef: LabwareDefinition2
+  labwareDef: LabwareDefinition
   pipetteName: PipetteName
   usingMetalProbe?: boolean
 }
@@ -63,11 +63,9 @@ export const PipetteRender = (props: PipetteRenderProps): JSX.Element => {
       y={y}
       outerProps={{ style: { overflow: 'visible' } }}
       innerDivProps={{
-        style: {
-          width: '100%',
-          height: '100%',
-          overflow: 'visible',
-        },
+        width: '100%',
+        height: '100%',
+        overflow: 'visible',
       }}
     >
       <svg overflow="visible">

package/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx

@@ -16,13 +16,13 @@ import { EmanatingNozzle } from '../EmanatingNozzle'
 import { PipetteRender } from '../PipetteRender'
 
 import type { ComponentProps } from 'react'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareDefinition } from '@opentrons/shared-data'
 
 vi.mock('../../Deck/RobotCoordsForeignDiv')
 vi.mock('../EmanatingNozzle')
 vi.mock('../EightEmanatingNozzles')
 
-const fixtureTiprack300Ul = _fixtureTiprack300ul as LabwareDefinition2
+const fixtureTiprack300Ul = _fixtureTiprack300ul as LabwareDefinition
 
 const render = (props: ComponentProps<typeof PipetteRender>) => {
   return renderWithProviders(<PipetteRender {...props} />)[0]