@opentrons/components 0.1.6-alpha.16 → 0.1.6-alpha.18

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

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { fixture12Trough as _fixture12Trough } from '@opentrons/shared-data'
+import { LabwareWellLabels } from '../LabwareWellLabels'
+
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+const troughFixture12 = _fixture12Trough as LabwareDefinition2
+
+describe('LabwareWellLabels', () => {
+  it('should render well labels', () => {
+    const props = {
+      definition: troughFixture12,
+    }
+    render(
+      <svg>
+        <LabwareWellLabels {...props} />
+      </svg>
+    )
+
+    screen.getByText('A')
+    new Array(12)
+      .fill(null)
+      .forEach((_, index) => screen.getByText(`${index + 1}`))
+  })
+  it('should highlight the well labels with the given color', () => {
+    expect.assertions(13) // there should be 13 highlighted well labels
+    const props = {
+      definition: troughFixture12,
+      highlightedWellLabels: {
+        wells: Object.keys(troughFixture12.wells as Record<string, unknown>),
+        color: 'blue',
+      },
+    }
+    render(
+      <svg>
+        <LabwareWellLabels {...props} />
+      </svg>
+    )
+    const letterWellLabel = screen.getByText('A')
+    expect(letterWellLabel.getAttribute('fill')).toBe('blue')
+    new Array(12).fill(null).forEach((_, index) => {
+      const numberWellLabel = screen.getByText(`${index + 1}`)
+      expect(numberWellLabel.getAttribute('fill')).toBe('blue')
+    })
+  })
+  it('should color the well labels', () => {
+    expect.assertions(13) // there should be 13 well labels
+    const props = {
+      definition: troughFixture12,
+      wellLabelColor: 'red',
+    }
+    render(
+      <svg>
+        <LabwareWellLabels {...props} />
+      </svg>
+    )
+    const letterWellLabel = screen.getByText('A')
+    expect(letterWellLabel.getAttribute('fill')).toBe('red')
+    new Array(12).fill(null).forEach((_, index) => {
+      const numberWellLabel = screen.getByText(`${index + 1}`)
+      expect(numberWellLabel.getAttribute('fill')).toBe('red')
+    })
+  })
+})

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

@@ -0,0 +1,31 @@
+import { describe, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { fixture12Trough } from '@opentrons/shared-data'
+import { StrokedWells } from '../StrokedWells'
+import { WellComponent as Well } from '../Well'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+vi.mock('../Well')
+
+const troughFixture12 = fixture12Trough as LabwareDefinition2
+
+describe('StrokedWells', () => {
+  it('should render a series of wells with the given stroke', () => {
+    vi.mocked(Well).mockImplementation(({ stroke, wellName }) =>
+      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+      {
+        return <div>{`well ${wellName} with stroke ${stroke}`}</div>
+      }
+    )
+
+    render(
+      <StrokedWells
+        definition={troughFixture12}
+        strokeByWell={{ A1: 'blue', A2: 'blue' }}
+      />
+    )
+    screen.getByText('well A1 with stroke blue')
+    screen.getByText('well A2 with stroke blue')
+  })
+})

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

@@ -0,0 +1,91 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { fixture12Trough as _fixture12Trough } from '@opentrons/shared-data'
+import { WellLabels } from '../WellLabels'
+import { WELL_LABEL_OPTIONS } from '../../LabwareRender'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+const troughFixture12 = _fixture12Trough as LabwareDefinition2
+
+describe('WellLabels', () => {
+  it('should render well labels outside of the labware', () => {
+    expect.assertions(14)
+    const props = {
+      definition: troughFixture12,
+      wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
+    }
+    render(
+      <svg>
+        <WellLabels {...props} />
+      </svg>
+    )
+    const wellLabels = screen.getAllByTestId('WellsLabels_show_inside')
+    expect(wellLabels.length).toBe(13) // 1 label for the single "A" row + 12 labels for the trough columns
+    expect(wellLabels[0]).toHaveTextContent('A')
+    // assertions for each of the numbered columns, skipping the first well label which has the letter row
+    new Array(12)
+      .fill(null)
+      .forEach((_, index) =>
+        expect(wellLabels[index + 1]).toHaveTextContent(`${index + 1}`)
+      )
+  })
+  it('should render well labels inside of the labware', () => {
+    expect.assertions(14)
+    const props = {
+      definition: troughFixture12,
+      wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE,
+    }
+    render(
+      <svg>
+        <WellLabels {...props} />
+      </svg>
+    )
+    const wellLabels = screen.getAllByTestId('WellsLabels_show_outside')
+    expect(wellLabels.length).toBe(13) // 1 label for the single "A" row + 12 labels for the trough columns
+    expect(wellLabels[0]).toHaveTextContent('A')
+    // assertions for each of the numbered columns, skipping the first well label which has the letter row
+    new Array(12)
+      .fill(null)
+      .forEach((_, index) =>
+        expect(wellLabels[index + 1]).toHaveTextContent(`${index + 1}`)
+      )
+  })
+  it('should highlight the well labels with the given color', () => {
+    expect.assertions(13) // there should be 13 highlighted well labels
+    const props = {
+      definition: troughFixture12,
+      wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE,
+      highlightedWellLabels: {
+        wells: Object.keys(troughFixture12.wells),
+        color: 'blue',
+      },
+    }
+    render(
+      <svg>
+        <WellLabels {...props} />
+      </svg>
+    )
+    const wellLabels = screen.getAllByTestId('WellsLabels_show_outside')
+    wellLabels.forEach(wellLabel =>
+      expect(wellLabel.getAttribute('fill')).toBe('blue')
+    )
+  })
+  it('should color the well labels', () => {
+    expect.assertions(13) // there should be 13 highlighted well labels
+    const props = {
+      definition: troughFixture12,
+      wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE,
+      wellLabelColor: 'red',
+    }
+    render(
+      <svg>
+        <WellLabels {...props} />
+      </svg>
+    )
+    const wellLabels = screen.getAllByTestId('WellsLabels_show_outside')
+    wellLabels.forEach(wellLabel =>
+      expect(wellLabel.getAttribute('fill')).toBe('red')
+    )
+  })
+})

package/src/hardware-sim/Labware/labwareInternals/index.ts

@@ -0,0 +1,8 @@
+export * from './StaticLabware'
+export * from './StyledWells'
+export * from './StrokedWells'
+export * from './WellLabels'
+export * from './FilledWells'
+export * from './LabwareOutline'
+export * from './Well'
+export * from './LabwareWellLabels'

package/src/hardware-sim/Labware/labwareInternals/types.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react'
+
+export interface WellMouseEvent {
+  wellName: string
+  event: React.MouseEvent
+}
+
+// wellName to CSS color, eg {'A1': '#123456'}
+export type WellFill = Record<string, string>
+export type WellStroke = WellFill
+
+// Use this like a Set!
+export type WellGroup = Record<string, null>
+
+export interface HighlightedWellLabels {
+  wells: string[]
+  color?: string
+}

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

@@ -0,0 +1,83 @@
+import { COLORS } from '../../helix-design-system'
+
+export interface HeaterShakerVizProps {
+  targetTemp: number | null
+}
+
+export function HeaterShaker(props: HeaterShakerVizProps): JSX.Element {
+  const { targetTemp } = props
+  let ledLightColor: string = COLORS.white
+  if (targetTemp != null) ledLightColor = COLORS.red30
+
+  return (
+    <g id="heaterShaker">
+      <g id="moduleBaseFill">
+        <path
+          d="M 28.312 87.55 c 0.882 0 1.078 -0.7 1.078 -1.4 v -3.4 c 0 -0.2 -0.196 -0.5 -0.49 -0.5 h -5.096 c -0.196 0 -0.49 -0.2 -0.49 -0.5 v -4.5 c 0 -0.2 -0.196 -0.5 -0.49 -0.5 h -5.586 c -0.98 0 -1.862 -0.8 -1.862 -1.9 V 14.55 c 0 -1 0.784 -1.9 1.862 -1.9 h 5.586 c 0.196 0 0.49 -0.2 0.49 -0.5 V 7.75 c 0 -0.2 0.196 -0.5 0.49 -0.5 H 28.9 c 0.196 0 0.49 -0.2 0.49 -0.5 V 3.45 c 0 -0.8 -0.392 -1.4 -1.078 -1.4 s -23.422 0 -23.422 0 v 85.5 C 4.89 87.55 27.43 87.55 28.312 87.55 z"
+          style={{ fill: '#E6E6E6' }}
+        ></path>
+      </g>
+      <g id="moduleOutline">
+        <path d="M 149.342 0.05 v 89.6 H 5.478 V 0.05 H 149.342 M 150.322 -1.05 H 4.4 v 91.7 h 145.922 V -1.05 L 150.322 -1.05 z"></path>
+      </g>
+      <g id="moduleBaseInnerWalls">
+        <path d="M 149.832 88.05 H 147.48 v -1.4 H 29.88 c -0.196 1.2 -1.176 1.4 -1.568 1.4 H 4.89 v -1 h 23.324 c 0.294 0 0.686 -0.1 0.686 -0.9 v -0.5 h 119.56 v 1.4 h 1.372 V 88.05 z"></path>
+        <path d="M 148.46 3.95 H 28.9 V 3.45 c 0 -0.8 -0.294 -0.9 -0.686 -0.9 H 4.89 v -1 h 23.324 c 0.392 0 1.372 0.1 1.568 1.4 h 117.6 V 1.55 h 2.352 v 1 H 148.46 V 3.95 z"></path>
+      </g>
+      <g id="statusFill">
+        <path
+          d="M 9.104 39.25 c 0 -1.1 0.882 -2 1.96 -2 s 1.96 0.9 1.96 2 v 11.2 c 0 1.1 -0.882 2 -1.96 2 s -1.96 -0.9 -1.96 -2 V 39.25 z"
+          style={{ fill: ledLightColor }}
+        ></path>
+      </g>
+      <g id="statusOutline">
+        <path d="M 11.064 52.65 H 10.966 c -1.176 0 -2.156 -1 -2.156 -2.2 V 39.15 c 0 -1.2 0.98 -2.2 2.156 -2.2 h 0.098 C 12.24 36.95 13.22 37.95 13.22 39.15 v 11.3 C 13.22 51.65 12.24 52.65 11.064 52.65 z M 10.966 37.45 c -0.882 0 -1.666 0.8 -1.666 1.7 v 11.3 c 0 1 0.784 1.7 1.666 1.7 h 0.098 c 0.98 0 1.666 -0.8 1.666 -1.7 V 39.15 c 0 -1 -0.784 -1.7 -1.666 -1.7 H 10.966 z"></path>
+      </g>
+      <g id="moduleMidFill">
+        <path
+          d="M 16.258 90.15 L 12.828 84.95 c -0.098 -0.1 -0.098 -0.2 -0.098 -0.3 V 4.95 c 0 -0.1 0 -0.2 0.098 -0.3 l 3.43 -5.2 h 131.516 l 3.43 5.2 c 0.098 0.1 0.098 0.2 0.098 0.3 v 79.7 c 0 0.1 0 0.2 -0.098 0.3 l -3.43 5.2 H 16.258"
+          style={{ fill: '#E6E6E6' }}
+        ></path>
+      </g>
+      <g id="moduleMidOutline">
+        <path d="M 147.48 0.05 l 3.234 5 v 79.7 l -3.234 5 H 16.454 l -3.234 -5 V 4.95 l 3.234 -4.9 L 147.48 0.05 M 147.97 -1.05 H 15.964 L 12.436 4.35 C 12.338 4.55 12.24 4.75 12.24 4.95 v 79.7 c 0 0.2 0.098 0.4 0.196 0.6 l 3.528 5.4 h 132.104 l 3.528 -5.4 c 0.098 -0.2 0.196 -0.4 0.196 -0.6 V 4.95 c 0 -0.2 -0.098 -0.4 -0.196 -0.6 L 147.97 -1.05 L 147.97 -1.05 z"></path>
+      </g>
+      <g id="plateBottomFill">
+        <path
+          d="M 52.518 5.45 c -0.882 0 -1.666 0.6 -1.862 1.6 c -0.392 1.7 -1.862 2.9 -3.626 2.9 s -3.234 -1.2 -3.626 -2.9 c -0.196 -1 -1.078 -1.6 -1.862 -1.6 H 28.312 c -1.568 0 -2.842 1.3 -2.842 2.9 v 72.9 c 0 1.6 1.274 2.9 2.842 2.9 h 13.132 c 0.784 0 1.568 -0.6 1.862 -1.6 c 0.392 -1.7 1.862 -2.9 3.626 -2.9 s 3.234 1.2 3.626 2.9 c 0.196 1 0.98 1.6 1.862 1.6 h 58.996 c 0.882 0 1.666 -0.6 1.862 -1.6 c 0.392 -1.7 1.862 -2.9 3.626 -2.9 c 1.764 0 3.234 1.2 3.626 2.9 c 0.196 1 1.078 1.6 1.862 1.6 H 135.72 c 1.568 0 2.842 -1.3 2.842 -2.9 V 8.35 c 0 -1.6 -1.274 -2.9 -2.842 -2.9 h -13.132 c -0.784 0 -1.568 0.6 -1.862 1.6 c -0.392 1.7 -1.862 2.9 -3.626 2.9 c -1.764 0 -3.234 -1.2 -3.626 -2.9 c -0.196 -1 -0.98 -1.6 -1.862 -1.6 L 52.518 5.45 L 52.518 5.45 z"
+          style={{ fill: COLORS.white }}
+        ></path>
+      </g>
+      <g id="plateBottomOutline">
+        <path d="M 135.72 84.45 h -13.132 c -0.98 0 -1.764 -0.7 -2.058 -1.7 c -0.392 -1.6 -1.764 -2.7 -3.43 -2.7 s -3.038 1.1 -3.43 2.7 c -0.294 1.1 -1.078 1.7 -2.058 1.7 H 52.518 c -0.98 0 -1.862 -0.7 -2.058 -1.7 c -0.392 -1.6 -1.764 -2.7 -3.43 -2.7 s -3.038 1.1 -3.43 2.7 c -0.294 1 -1.078 1.7 -2.058 1.7 H 28.312 c -1.764 0 -3.136 -1.4 -3.136 -3.2 V 8.35 c 0 -1.8 1.372 -3.2 3.136 -3.2 h 13.132 c 0.98 0 1.764 0.7 2.058 1.7 c 0.392 1.6 1.764 2.7 3.43 2.7 s 3.038 -1.1 3.43 -2.7 c 0.294 -1 0.98 -1.6 1.862 -1.7 l 0 0 h 59.192 c 0.98 0 1.862 0.7 2.058 1.7 c 0.392 1.6 1.764 2.7 3.43 2.7 s 3.038 -1.1 3.43 -2.7 c 0.294 -1 1.078 -1.7 2.058 -1.7 H 135.72 c 1.764 0 3.136 1.4 3.136 3.2 v 72.9 C 138.758 83.05 137.386 84.45 135.72 84.45 z M 117.002 79.55 c 1.862 0 3.43 1.3 3.92 3.1 c 0.196 0.8 0.882 1.4 1.568 1.4 H 135.72 c 1.47 0 2.646 -1.2 2.646 -2.7 v -73 c 0 -1.5 -1.176 -2.7 -2.646 -2.7 h -13.132 c -0.686 0 -1.372 0.6 -1.568 1.4 c -0.49 1.8 -2.058 3.1 -3.92 3.1 s -3.43 -1.3 -3.92 -3.1 c -0.196 -0.8 -0.882 -1.4 -1.666 -1.4 h -58.8 h -0.196 c -0.784 0 -1.372 0.5 -1.666 1.4 c -0.49 1.8 -2.058 3.1 -3.92 3.1 s -3.43 -1.3 -3.92 -3.1 c -0.196 -0.8 -0.882 -1.4 -1.568 -1.4 H 28.312 c -1.47 0 -2.646 1.2 -2.646 2.7 v 72.9 c 0 1.5 1.176 2.7 2.646 2.7 h 13.132 c 0.686 0 1.372 -0.6 1.568 -1.4 c 0.49 -1.8 2.058 -3.1 3.92 -3.1 s 3.43 1.3 3.92 3.1 c 0.196 0.8 0.882 1.4 1.666 1.4 h 58.996 c 0.784 0 1.372 -0.5 1.666 -1.4 C 113.572 80.75 115.14 79.55 117.002 79.55 z"></path>
+      </g>
+      <g id="plateHolder">
+        <path d="M 117.002 1.95 c -2.254 0 -4.018 1.8 -4.018 4.1 s 1.764 4.1 4.018 4.1 s 4.018 -1.8 4.018 -4.1 S 119.256 1.95 117.002 1.95 z M 113.474 6.05 c 0 -0.4 0.098 -0.8 0.196 -1.1 h 6.664 c 0.098 0.4 0.196 0.7 0.196 1.1 c 0 0.2 0 0.4 -0.098 0.6 h -6.958 C 113.572 6.45 113.474 6.25 113.474 6.05 z M 117.002 2.45 c 1.372 0 2.548 0.8 3.136 2 h -6.272 C 114.454 3.25 115.63 2.45 117.002 2.45 z M 117.002 9.65 c -1.568 0 -2.842 -1.1 -3.332 -2.5 h 6.664 C 119.942 8.55 118.57 9.65 117.002 9.65 z M 46.932 1.95 c -2.254 0 -4.018 1.8 -4.018 4.1 s 1.764 4.1 4.018 4.1 s 4.018 -1.8 4.018 -4.1 S 49.186 1.95 46.932 1.95 z M 43.404 6.05 c 0 -0.4 0.098 -0.8 0.196 -1.1 h 6.664 C 50.46 5.25 50.46 5.65 50.46 6.05 c 0 0.2 0 0.4 -0.098 0.6 h -6.958 C 43.502 6.45 43.404 6.25 43.404 6.05 z M 46.932 2.45 c 1.372 0 2.548 0.8 3.136 2 h -6.272 C 44.482 3.25 45.56 2.45 46.932 2.45 z M 46.932 9.65 c -1.568 0 -2.842 -1.1 -3.332 -2.5 h 6.664 C 49.872 8.55 48.5 9.65 46.932 9.65 z M 46.932 79.45 c -2.254 0 -4.018 1.8 -4.018 4.1 s 1.764 4.1 4.018 4.1 s 4.018 -1.8 4.018 -4.1 S 49.186 79.45 46.932 79.45 z M 46.932 79.95 c 1.568 0 2.94 1.1 3.332 2.5 H 43.6 C 44.09 81.05 45.364 79.95 46.932 79.95 z M 50.46 83.55 c 0 0.4 -0.098 0.8 -0.196 1.2 H 43.6 c -0.098 -0.4 -0.196 -0.8 -0.196 -1.2 c 0 -0.2 0 -0.4 0.098 -0.6 H 50.46 C 50.46 83.15 50.46 83.35 50.46 83.55 z M 46.932 87.15 c -1.372 0 -2.548 -0.8 -3.136 -1.9 h 6.174 C 49.48 86.35 48.304 87.15 46.932 87.15 z M 117.002 79.45 c -2.254 0 -4.018 1.8 -4.018 4.1 s 1.764 4.1 4.018 4.1 s 4.018 -1.8 4.018 -4.1 S 119.256 79.45 117.002 79.45 z M 117.002 79.95 c 1.568 0 2.94 1.1 3.332 2.5 h -6.664 C 114.16 81.05 115.434 79.95 117.002 79.95 z M 120.53 83.55 c 0 0.4 -0.098 0.8 -0.196 1.2 h -6.664 c -0.098 -0.4 -0.196 -0.8 -0.196 -1.2 c 0 -0.2 0 -0.4 0.098 -0.6 h 6.958 C 120.53 83.15 120.53 83.35 120.53 83.55 z M 117.002 87.15 c -1.372 0 -2.548 -0.8 -3.136 -1.9 h 6.174 C 119.55 86.35 118.374 87.15 117.002 87.15 z"></path>
+      </g>
+      <g id="adapterScrew">
+        <path
+          d="M 82.016 49.45 c -2.548 0 -4.606 -2.1 -4.606 -4.7 s 2.058 -4.7 4.606 -4.7 s 4.606 2.1 4.606 4.7 S 84.466 49.45 82.016 49.45 z M 82.016 40.55 c -2.254 0 -4.116 1.9 -4.116 4.2 s 1.862 4.2 4.116 4.2 c 2.254 0 4.116 -1.9 4.116 -4.2 C 86.132 42.45 84.27 40.55 82.016 40.55 z M 82.016 47.95 c -1.764 0 -3.136 -1.4 -3.136 -3.2 s 1.372 -3.2 3.136 -3.2 s 3.136 1.4 3.136 3.2 C 85.054 46.55 83.682 47.95 82.016 47.95 z M 82.016 42.15 c -1.47 0 -2.646 1.2 -2.646 2.7 s 1.176 2.7 2.646 2.7 s 2.646 -1.2 2.646 -2.7 C 84.564 43.35 83.388 42.15 82.016 42.15 z"
+          style={{ fill: '#ADADAD' }}
+        ></path>
+      </g>
+      <g id="leftLatchFill">
+        <path
+          d="M 18.218 5.55 c 0 -0.4 0.098 -0.8 0.392 -1.2 L 22.824 -1.05 h -6.86 L 12.436 4.35 C 12.338 4.55 12.24 4.75 12.24 4.95 v 79.7 c 0 0.2 0.098 0.4 0.196 0.6 l 3.528 5.4 h 6.86 l -4.214 -5.4 c -0.196 -0.4 -0.392 -0.7 -0.392 -1.2 L 18.218 5.55 L 18.218 5.55 z"
+          style={{ fill: '#E6E6E6' }}
+        ></path>
+      </g>
+      <g id="leftLatchOutline">
+        <path d="M 20.668 0.05 l -2.842 3.7 c -0.392 0.5 -0.588 1.2 -0.588 1.8 v 78.5 c 0 0.7 0.196 1.3 0.588 1.8 l 2.842 3.7 h -4.214 l -3.234 -5 V 4.95 l 3.234 -4.9 L 20.668 0.05 M 22.824 -1.05 h -6.86 L 12.436 4.35 C 12.338 4.55 12.24 4.75 12.24 4.95 v 79.7 c 0 0.2 0.098 0.4 0.196 0.6 l 3.528 5.4 h 6.86 l -4.214 -5.4 c -0.196 -0.4 -0.392 -0.7 -0.392 -1.2 V 5.55 c 0 -0.4 0.098 -0.8 0.392 -1.2 L 22.824 -1.05 L 22.824 -1.05 z"></path>
+      </g>
+      <g id="rightLatchFill">
+        <path
+          d="M 146.794 5.55 c 0 -0.4 -0.098 -0.8 -0.392 -1.2 L 142.188 -1.05 h 6.86 l 3.528 5.4 c 0.098 0.2 0.196 0.4 0.196 0.6 v 79.7 c 0 0.2 -0.098 0.4 -0.196 0.6 l -3.528 5.4 h -6.86 l 4.214 -5.4 c 0.196 -0.4 0.392 -0.7 0.392 -1.2 V 5.55 z"
+          style={{ fill: '#E6E6E6' }}
+        ></path>
+      </g>
+      <g id="rightLatchOutline">
+        <path d="M 148.558 0.05 l 3.234 5 v 79.7 l -3.234 5 h -4.214 l 2.842 -3.7 c 0.392 -0.5 0.588 -1.2 0.588 -1.8 V 5.55 c 0 -0.7 -0.196 -1.3 -0.588 -1.8 l -2.842 -3.7 L 148.558 0.05 M 149.048 -1.05 h -6.86 l 4.214 5.4 c 0.196 0.4 0.392 0.7 0.392 1.2 v 78.5 c 0 0.4 -0.098 0.8 -0.392 1.2 l -4.214 5.4 h 6.86 l 3.528 -5.4 c 0.098 -0.2 0.196 -0.4 0.196 -0.6 V 4.85 c 0 -0.2 -0.098 -0.4 -0.196 -0.6 L 149.048 -1.05 L 149.048 -1.05 z"></path>
+      </g>
+    </g>
+  )
+}

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

@@ -0,0 +1,49 @@
+import { COLORS } from '../../helix-design-system'
+
+export function MagneticBlock(): JSX.Element {
+  return (
+    <g id="magneticBlock">
+      <g id="footprint">
+        <rect
+          style={{
+            fill: '#e6e6e6',
+            stroke: COLORS.black90,
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '0.71px',
+          }}
+          x=".35"
+          y=".36"
+          width="136"
+          height="94"
+          rx="5"
+          ry="5"
+        ></rect>
+      </g>
+      <g id="slotClips">
+        <path
+          style={{
+            fill: 'none',
+            stroke: COLORS.black90,
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '0.71px',
+          }}
+          d="m17.37.36v2.6m-2-.93V.36m2,2.6c0-.52-.9-.93-2-.93m104,.93V.36m2,1.67c-1.1,0-2,.42-2,.93m2-2.6v1.67m-2,92.33v-2.6m2,.93v1.67m-2-2.6c0,.52.9.93,2,.93M5.37,2.03v1.99m.18.12c-.06-.05-.12-.08-.18-.12m.18.12c.18.14.4.22.63.22m11.19,0H6.18m11.19-1.4v1.4M5.37,2.03h10M6.18,90.35h11.19m-11.19,0c-.23,0-.45.08-.63.22m-.18.12c.06-.03.13-.07.18-.12m-.18,2.11v-1.99m10,1.99H5.37m10,0c1.1,0,2-.42,2-.93m0-1.4v1.4m-15.33-2.4h1.99m.12-.18c-.05.06-.08.12-.12.18m.12-.18c.14-.18.22-.4.22-.63m0-11.19v11.19m-1.4-11.19h1.4m-1.4,0c-.52,0-.93.9-.93,2m0,10v-10m130.33,9.19v-11.19m0,11.19c0,.23.08.45.22.63m.12.18c-.03-.06-.07-.13-.12-.18m2.11.18h-1.99m1.99-10v10m0-10c0-1.1-.42-2-.93-2m-1.4,0h1.4m-2.4,15.33v-1.99m-.18-.12c.06.05.12.08.18.12m-.18-.12c-.18-.14-.4-.22-.63-.22m-11.19,0h11.19m-11.19,1.4v-1.4m12,2.33h-10m9.19-88.33h-11.19m11.19,0c.23,0,.45-.08.63-.22m.18-.12c-.06.03-.13.07-.18.12m.18-2.11v1.99m-10-1.99h10m-12,2.33v-1.4m15.33,2.4h-1.99m-.12.18c.05-.06.08-.12.12-.18m-.12.18c-.14.18-.22.4-.22.63m0,11.19V6.18m1.4,11.19h-1.4m1.4,0c.52,0,.93-.9.93-2m0-10v10M4.37,6.18v11.19m0-11.19c0-.23-.08-.45-.22-.63m-.12-.18c.03.06.07.13.12.18m-2.11-.19h1.99m-1.99,10V5.36m0,10c0,1.1.42,2,.93,2m1.4,0h-1.4m133.4,0h-2.6m.93-2h1.67m-2.6,62h2.6m0,2h-1.67M2.97,17.37H.36m0-2h1.67m15.33,76.4v2.6m-2,0v-1.67M.36,77.35h2.6m-.93,2H.36M134.68,5.36c0-1.84-1.49-3.33-3.33-3.33m0,1.99c.81-.44,1.78.53,1.34,1.34M2.04,89.37c0,1.84,1.49,3.33,3.33,3.33M5.36,2.04c-1.84,0-3.33,1.49-3.33,3.33m129.33,87.33c1.84,0,3.33-1.49,3.33-3.33m-1.99,0c.44.81-.53,1.78-1.34,1.34m-126,0c-.81.44-1.78-.53-1.34-1.34M4.03,5.37c-.44-.81.53-1.78,1.34-1.34m112,90.34v-4m0,0h2M4.37,19.37H.36m4-2v2M.36,75.35h4m0,0v2M136.36,19.37h-4m0,0v-2m0,58h4m-4,2v-2M117.35,4.37V.36m2,4h-2M19.37.36v4m0,0h-2m2,86v4m-2-4h2"
+        ></path>
+      </g>
+      <g id="wells">
+        <path
+          style={{
+            fill: 'none',
+            stroke: COLORS.black90,
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '0.71px',
+          }}
+          d="M 41.61 51.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 41.51 51.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 59.61 42.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 59.51 42.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 68.61 42.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 68.51 42.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 104.61 42.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 104.51 42.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 32.61 33.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 32.51 33.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 50.61 33.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 50.51 33.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 77.61 33.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 77.51 33.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 59.61 24.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 59.51 24.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 95.61 24.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 95.51 24.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 14.61 24.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 14.51 24.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 86.61 24.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 86.51 24.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 59.61 33.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 59.51 33.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 14.61 33.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 14.51 33.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 23.61 33.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 23.51 33.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 104.61 33.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 104.51 33.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 86.61 33.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 86.51 33.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 113.61 33.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 113.51 33.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 32.61 24.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 32.51 24.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 77.61 24.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 77.51 24.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 68.61 24.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 68.51 24.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 14.61 42.85 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 14.51 42.85 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 23.61 42.85 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 23.51 42.85 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 32.61 42.85 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 32.51 42.85 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 95.61 42.85 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 95.51 42.85 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 95.61 33.85 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 95.51 33.85 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 23.61 24.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 23.51 24.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 50.61 24.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 50.51 24.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 41.61 33.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 41.51 33.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 86.61 42.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 86.51 42.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 113.61 42.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 113.51 42.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 41.61 24.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 41.51 24.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 68.61 33.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 68.51 33.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 113.61 24.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 113.51 24.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 14.61 15.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 14.51 15.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 23.61 15.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 23.51 15.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 41.61 15.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 41.51 15.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 104.61 78.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 104.51 78.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 50.6 15.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 50.5 15.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 68.6 15.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 68.5 15.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 86.6 15.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 86.5 15.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 113.6 15.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 113.5 15.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 59.6 15.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 59.5 15.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 77.6 15.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 77.5 15.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 95.6 15.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 95.5 15.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 104.6 24.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 104.5 24.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 104.6 15.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 104.5 15.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 32.6 15.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 32.5 15.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 50.6 42.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 50.5 42.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 41.6 42.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 41.5 42.87 c -0.08 -5.64 8.8 -5.614 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 77.6 42.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 77.5 42.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 23.6 51.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 23.5 51.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 113.6 51.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 113.5 51.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 104.6 60.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 104.5 60.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 86.6 51.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 86.5 51.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 77.6 60.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 77.5 60.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 32.6 51.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 32.5 51.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 68.6 60.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 68.5 60.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 50.6 60.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 50.5 60.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 32.6 60.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 32.5 60.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 14.6 51.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 14.5 51.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 86.6 60.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 86.5 60.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 41.6 60.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 41.5 60.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 104.6 51.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 104.5 51.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 23.6 60.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 23.5 60.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 14.6 60.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 14.5 60.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 14.6 78.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 14.5 78.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 59.6 60.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 59.5 60.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 113.6 60.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 113.5 60.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 95.6 60.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 95.5 60.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 59.6 51.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 59.5 51.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 32.6 78.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 32.5 78.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 113.6 78.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 113.5 78.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 77.6 69.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 77.5 69.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 104.59 69.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 104.49 69.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 50.59 69.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 50.49 69.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 68.59 69.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 68.49 69.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 59.59 69.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 59.49 69.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 113.59 69.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 113.49 69.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 50.59 51.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 50.49 51.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 41.59 78.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 41.49 78.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 59.59 78.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 59.49 78.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 50.59 78.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 50.49 78.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 68.59 78.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 68.49 78.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 32.59 69.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 32.49 69.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 77.59 78.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 77.49 78.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 68.59 51.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 68.49 51.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 77.59 51.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 77.49 51.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 95.59 51.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 95.49 51.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 41.59 69.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 41.49 69.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 86.59 78.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 86.49 78.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 95.59 78.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 95.49 78.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 14.59 69.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 14.49 69.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 95.59 69.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 95.49 69.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 86.59 69.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 86.49 69.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 23.59 69.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 23.49 69.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z M 23.59 78.87 c -0.08 -5.52 8.58 -5.52 8.5 0 c 0.08 5.51 -8.58 5.51 -8.5 0 Z M 23.49 78.87 c -0.08 -5.64 8.78 -5.64 8.7 0 c 0.08 5.64 -8.78 5.64 -8.7 0 Z"
+        ></path>
+      </g>
+    </g>
+  )
+}

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

@@ -0,0 +1,51 @@
+export function MagneticModule(): JSX.Element {
+  return (
+    <g id="magneticModule">
+      <g id="moduleVisualization">
+        <g id="darkFill">
+          <path
+            d="M126.4,74.2c-0.8,0-1.4,0.6-1.4,1.4v6.2c0,1.4-1.2,2.6-2.6,2.6H83.6v4.9H0.7V0.7h82.9v4.4h38.8 c1.4,0,2.6,1.2,2.6,2.6v6.2c0,0.8,0.6,1.4,1.4,1.4h8.8v58.9H126.4z M24.4,13.5h-1.9v9.8h1.9V13.5z M24.4,31.1h-1.9V41h1.9V31.1z M24.4,49h-1.9v9.8h1.9V49z M24.4,66.8h-1.9v9.8h1.9V66.8z M42.2,13.5h-1.9v9.8h1.9V13.5z M42.2,31.1h-1.9V41h1.9V31.1z M42.2,49 h-1.9v9.8h1.9V49z M42.2,66.8h-1.9v9.8h1.9V66.8z M59.9,13.5h-1.9v9.8h1.9V13.5z M59.9,31.1h-1.9V41h1.9V31.1z M59.9,49h-1.9v9.8 h1.9V49z M59.9,66.8h-1.9v9.8h1.9V66.8z M77.7,13.5h-1.9v9.8h1.9V13.5z M77.7,31.1h-1.9V41h1.9V31.1z M77.7,49h-1.9v9.8h1.9V49z M77.7,66.8h-1.9v9.8h1.9V66.8z M95.5,13.5h-1.9v9.8h1.9V13.5z M95.5,31.1h-1.9V41h1.9V31.1z M95.5,49h-1.9v9.8h1.9V49z M95.5,66.8h-1.9v9.8h1.9V66.8z M113.3,13.5h-1.9v9.8h1.9V13.5z M113.3,31.1h-1.9V41h1.9V31.1z M113.3,49h-1.9v9.8h1.9V49z M113.3,66.8h-1.9v9.8h1.9V66.8z"
+            style={{ fill: '#E6E6E6' }}
+          ></path>
+        </g>
+        <g id="magnetPlate">
+          <path d="M118,81.7c2.2,0,4-1.8,4-4V11.9c0-2.2-1.8-4-4-4H18.1c-2.2,0-4,1.8-4,4v65.8c0,2.2,1.8,4,4,4L118,81.7 M118,82.4H18.1 c-2.6,0-4.7-2.1-4.7-4.7V11.9c0-2.6,2.1-4.7,4.7-4.7H118c2.6,0,4.7,2.1,4.7,4.7v65.8C122.7,80.3,120.6,82.4,118,82.4L118,82.4z"></path>
+          <path d="M42.2,23.3v-9.8h-1.9v9.8H42.2 M42.9,24h-0.7h-1.9h-0.7v-0.7v-9.8v-0.7h0.7h1.9h0.7v0.7v9.8V24L42.9,24z"></path>
+          <path d="M42.2,41v-9.8h-1.9V41H42.2 M42.9,41.7h-0.7h-1.9h-0.7V41v-9.8v-0.7h0.7h1.9h0.7v0.7V41V41.7L42.9,41.7z"></path>
+          <path d="M42.2,58.8V49h-1.9v9.8H42.2 M42.9,59.5h-0.7h-1.9h-0.7v-0.7V49v-0.7h0.7h1.9h0.7V49v9.8V59.5L42.9,59.5z"></path>
+          <path d="M59.9,76.6v-9.8h-1.9v9.8H59.9 M60.7,77.4h-0.7h-1.9h-0.7v-0.7v-9.8v-0.7h0.7h1.9h0.7v0.7v9.8V77.4L60.7,77.4z"></path>
+          <path d="M59.9,23.3v-9.8h-1.9v9.8H59.9 M60.7,24h-0.7h-1.9h-0.7v-0.7v-9.8v-0.7h0.7h1.9h0.7v0.7v9.8V24L60.7,24z"></path>
+          <path d="M59.9,41v-9.8h-1.9V41H59.9 M60.7,41.7h-0.7h-1.9h-0.7V41v-9.8v-0.7h0.7h1.9h0.7v0.7V41V41.7L60.7,41.7z"></path>
+          <path d="M59.9,58.8V49h-1.9v9.8H59.9 M60.7,59.5h-0.7h-1.9h-0.7v-0.7V49v-0.7h0.7h1.9h0.7V49v9.8V59.5L60.7,59.5z"></path>
+          <path d="M77.7,76.6v-9.8h-1.9v9.8H77.7 M78.4,77.4h-0.7h-1.9h-0.7v-0.7v-9.8v-0.7h0.7h1.9h0.7v0.7v9.8V77.4L78.4,77.4z"></path>
+          <path d="M77.7,23.3v-9.8h-1.9v9.8H77.7 M78.4,24h-0.7h-1.9h-0.7v-0.7v-9.8v-0.7h0.7h1.9h0.7v0.7v9.8V24L78.4,24z"></path>
+          <path d="M77.7,41v-9.8h-1.9V41H77.7 M78.4,41.7h-0.7h-1.9h-0.7V41v-9.8v-0.7h0.7h1.9h0.7v0.7V41V41.7L78.4,41.7z"></path>
+          <path d="M77.7,58.8V49h-1.9v9.8H77.7 M78.4,59.5h-0.7h-1.9h-0.7v-0.7V49v-0.7h0.7h1.9h0.7V49v9.8V59.5L78.4,59.5z"></path>
+          <path d="M95.5,76.6v-9.8h-1.9v9.8H95.5 M96.2,77.4h-0.7h-1.9h-0.7v-0.7v-9.8v-0.7h0.7h1.9h0.7v0.7v9.8V77.4L96.2,77.4z"></path>
+          <path d="M95.5,23.3v-9.8h-1.9v9.8H95.5 M96.2,24h-0.7h-1.9h-0.7v-0.7v-9.8v-0.7h0.7h1.9h0.7v0.7v9.8V24L96.2,24z"></path>
+          <path d="M95.5,41v-9.8h-1.9V41H95.5 M96.2,41.7h-0.7h-1.9h-0.7V41v-9.8v-0.7h0.7h1.9h0.7v0.7V41V41.7L96.2,41.7z"></path>
+          <path d="M95.5,58.8V49h-1.9v9.8H95.5 M96.2,59.5h-0.7h-1.9h-0.7v-0.7V49v-0.7h0.7h1.9h0.7V49v9.8V59.5L96.2,59.5z"></path>
+          <path d="M113.3,76.6v-9.8h-1.9v9.8H113.3 M114,77.4h-0.7h-1.9h-0.7v-0.7v-9.8v-0.7h0.7h1.9h0.7v0.7v9.8V77.4L114,77.4z"></path>
+          <path d="M113.3,23.3v-9.8h-1.9v9.8H113.3 M114,24h-0.7h-1.9h-0.7v-0.7v-9.8v-0.7h0.7h1.9h0.7v0.7v9.8V24L114,24z"></path>
+          <path d="M113.3,41v-9.8h-1.9V41H113.3 M114,41.7h-0.7h-1.9h-0.7V41v-9.8v-0.7h0.7h1.9h0.7v0.7V41V41.7L114,41.7z"></path>
+          <path d="M113.3,58.8V49h-1.9v9.8H113.3 M114,59.5h-0.7h-1.9h-0.7v-0.7V49v-0.7h0.7h1.9h0.7V49v9.8V59.5L114,59.5z"></path>
+        </g>
+        <g id="innerWall">
+          <path d="M135.2,73.8h-8.8c-1,0-1.7,0.8-1.7,1.7v6.2c0,1.2-1,2.2-2.2,2.2H83.6v0.7h38.8c1.6,0,3-1.3,3-3v-6.2c0-0.6,0.5-1,1-1h8.8 V73.8z M122.4,4.7H83.6v0.7h38.8c1.2,0,2.2,1,2.2,2.2v6.2c0,1,0.8,1.7,1.7,1.7h8.8v-0.7h-8.8c-0.6,0-1-0.5-1-1V7.7 C125.4,6.1,124.1,4.7,122.4,4.7z"></path>
+        </g>
+        <g id="labwareBracket">
+          <path d="M84.3,0H0v90h84.4v-9H17.4c-3.4,0-6.1-2.7-6.1-6.1V14.7c0-3.4,2.7-6.1,6.1-6.1h66.9L84.3,0L84.3,0z M1.4,1.4h81.5v5.7 H17.4c-4.1,0-7.5,3.4-7.5,7.5v60.2c0,4.1,3.4,7.5,7.5,7.5h65.5v6.1H1.4V1.4z"></path>
+        </g>
+        <g id="magnetPlateOverlayFill">
+          <path
+            d="M118,81.7c2.2,0,4-1.8,4-4V11.9c0-2.2-1.8-4-4-4H18.1c-2.2,0-4,1.8-4,4v65.8c0,2.2,1.8,4,4,4L118,81.7z"
+            style={{ fill: '#FFFFFFF0' }}
+          ></path>
+        </g>
+        <g id="outline">
+          <path d="M135.9,0H0l0,90h135.9V0z M1.4,1.4h133.1v87.1H1.4V1.4z"></path>
+        </g>
+      </g>
+    </g>
+  )
+}

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

@@ -0,0 +1,90 @@
+import {
+  fixture96Plate,
+  getModuleDef2,
+  MAGNETIC_MODULE_V1,
+  MAGNETIC_MODULE_V2,
+  TEMPERATURE_MODULE_V1,
+  TEMPERATURE_MODULE_V2,
+  THERMOCYCLER_MODULE_V1,
+  THERMOCYCLER_MODULE_V2,
+  HEATERSHAKER_MODULE_V1,
+  MAGNETIC_BLOCK_V1,
+} from '@opentrons/shared-data'
+import { LabwareRender } from '../Labware'
+import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
+import { Module as ModuleComponent } from './'
+
+import type { Story, Meta } from '@storybook/react'
+import type { LabwareDefinition2, ModuleModel } from '@opentrons/shared-data'
+
+const moduleModels: ModuleModel[] = [
+  TEMPERATURE_MODULE_V2,
+  TEMPERATURE_MODULE_V1,
+  THERMOCYCLER_MODULE_V1,
+  THERMOCYCLER_MODULE_V2,
+  MAGNETIC_MODULE_V1,
+  MAGNETIC_MODULE_V2,
+  HEATERSHAKER_MODULE_V1,
+  MAGNETIC_BLOCK_V1,
+]
+
+export default {
+  title: 'Library/Molecules/Simulation/Module',
+} as Meta
+
+const Template: Story<{
+  model: ModuleModel
+  orientation: 'left' | 'right'
+  hasLabware: boolean
+  innerProps: {}
+}> = args => {
+  return (
+    <RobotCoordinateSpace height="100vh" width="100vw" viewBox="0 -50 200 320">
+      <ModuleComponent
+        def={getModuleDef2(args.model)}
+        x={0}
+        y={0}
+        innerProps={args.innerProps}
+        orientation={args.orientation}
+      >
+        {args.hasLabware ? (
+          <LabwareRender definition={fixture96Plate as LabwareDefinition2} />
+        ) : null}
+      </ModuleComponent>
+    </RobotCoordinateSpace>
+  )
+}
+export const Module = Template.bind({})
+Module.argTypes = {
+  model: {
+    control: {
+      type: 'select',
+      options: moduleModels,
+    },
+    defaultValue: moduleModels[0],
+  },
+  orientation: {
+    control: {
+      type: 'select',
+      options: ['left', 'right'],
+    },
+    defaultValue: 'left',
+  },
+  hasLabware: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  innerProps: {
+    control: {
+      type: 'object',
+    },
+    defaultValue: {
+      lidMotorState: 'open',
+      blockTargetTemp: 90,
+      targetTemperature: 4,
+      targetTemp: 40,
+    },
+  },
+}

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

@@ -0,0 +1,38 @@
+import type * as React from 'react'
+import {
+  RobotCoordsForeignDiv,
+  C_MED_LIGHT_GRAY,
+  SPACING_1,
+  JUSTIFY_CENTER,
+  ALIGN_CENTER,
+} from '../../'
+
+export interface ModuleTagProps {
+  x: number
+  y: number
+  height: number
+  width: number
+  children: React.ReactNode
+}
+
+export const ModuleTag = (props: ModuleTagProps): JSX.Element => {
+  const { x, y, height, width, children } = props
+
+  return (
+    <RobotCoordsForeignDiv
+      x={x}
+      y={y}
+      height={height}
+      width={width}
+      innerDivProps={{
+        display: 'flex',
+        justifyContent: JUSTIFY_CENTER,
+        alignItems: ALIGN_CENTER,
+        backgroundColor: C_MED_LIGHT_GRAY,
+        padding: SPACING_1,
+      }}
+    >
+      {children}
+    </RobotCoordsForeignDiv>
+  )
+}