feat(components): add special case SVG for labware adapters

fix RAUT-857

components/src/hardware-sim/Labware/LabwareAdapter.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+
+const LABWARE_ADAPTER_LOADNAME_PATHS = {
+  opentrons_96_deep_well_adapter: { viewBox: '', path: '' },
+  opentrons_96_flat_bottom_adapter: { viewBox: '', path: '' },
+  opentrons_aluminum_flat_bottom_plate: {
+    viewBox: '0 0 134.1 92.1',
+    path:
+      'M 129.198 0 H 4.9067 C 2.1886 0 0 2.1886 0 4.9067 v 82.2843 c 0 2.6828 2.1886 4.9067 4.9067 4.9067 h 16.3086 h 0.8472 H 129.198 c 2.6828 0 4.9067 -2.1886 4.9067 -4.9067 V 4.9067 C 134.0694 2.1886 131.9514 0 129.198 0 z M 0.8472 4.9067 c 0 -2.2239 1.8003 -4.0595 4.0595 -4.0595 H 21.886 v 2.0827 H 5.2597 c -0.9178 0 -1.7297 0.7413 -1.7297 1.7297 v 16.6616 H 0.8472 V 4.9067 z M 21.2153 91.2152 H 4.9067 c -2.2239 0 -4.0595 -1.8003 -4.0595 -4.0595 v -16.6616 H 2.824 v 16.6263 c 0 0.9178 0.7766 1.7297 1.7297 1.7297 h 16.6616 V 91.2152 z M 133.2575 87.1557 c 0 2.2239 -1.8003 4.0595 -4.0595 4.0595 h -17.4029 v -1.9768 h 16.6263 c 0.9178 0 1.7297 -0.7413 1.7297 -1.7297 v -16.6263 h 3.1064 V 87.1557 z M 133.2575 70.0352 h -3.9536 v 17.4382 c 0 0.4589 -0.3883 0.8825 -0.8825 0.8825 h -17.4735 v 2.824 H 22.0272 l -0.0353 -3.2123 H 4.5537 c -0.4589 0 -0.8825 -0.3883 -0.8825 -0.8825 v -17.4382 h -2.824 V 22.1331 h 3.53 V 4.6243 c 0 -0.4589 0.3883 -0.8825 0.8825 -0.8825 h 17.4735 V 0.8472 h 88.8854 v 3.2829 h 17.4735 c 0.4589 0 0.8825 0.3883 0.8825 0.8825 v 17.4382 h 3.2829 V 70.0352 z M 133.2575 21.6389 h -2.4357 V 5.0126 c 0 -0.9178 -0.7413 -1.7297 -1.7297 -1.7297 h -16.6263 V 0.8472 H 129.198 c 2.2239 0 4.0595 1.8003 4.0595 4.0595 V 21.6389 z M 119.0316 9.531 H 15.0378 c -1.4473 0 -2.5769 1.1649 -2.5769 2.5769 v 68.835 c 0 1.4473 1.1649 2.5769 2.5769 2.5769 h 103.9938 c 1.4473 0 2.5769 -1.1649 2.5769 -2.5769 V 12.1432 C 121.6438 10.7312 120.4789 9.531 119.0316 9.531 z M 120.7613 80.9429 c 0 0.9531 -0.8119 1.7297 -1.7297 1.7297 H 15.0378 c -0.9531 0 -1.7297 -0.8119 -1.7297 -1.7297 V 12.1432 c 0 -0.9531 0.8119 -1.7297 1.7297 -1.7297 h 103.9938 v -0.0353 c 0.9531 0 1.7297 0.8119 1.7297 1.7297 V 80.9429 z',
+  },
+  opentrons_flex_96_tiprack_adapter: {
+    viewBox: '0 0 155.8 92.93',
+    path:
+      'M 110.7946 92.6107 H 45.5301 c -0.4581 0 -0.8105 -0.4581 -0.8105 -1.022 v -1.621 c 0 -0.5638 -1.3039 -1.022 -0.8458 -1.022 H 112.4156 c 0.4581 0 -0.8105 0.4581 -0.8105 1.022 v 1.621 C 111.6051 92.1878 111.2527 92.6107 110.7946 92.6107 z M 111.8165 3.7354 H 44.0852 c -0.4581 0 0.5991 -0.3524 0.5991 -0.8105 V 1.621 c 0 -0.4581 0.3524 -0.8105 0.8105 -0.8105 h 65.2292 c 0.4581 0 0.8105 0.3524 0.8105 0.8105 v 1.3039 C 111.6051 3.383 112.2746 3.7354 111.8165 3.7354 z M 151.391 3.7002 h -7.6118 V 33.1256 h -0.7753 c -0.7048 0 -1.2334 -0.5638 -1.2334 -1.2686 V 9.832 c 0 -3.383 -2.7487 -6.1318 -6.0965 -6.1318 h -21.8488 c -0.9515 0 -1.762 -0.7753 -1.762 -1.762 V 0.9867 c 0 -0.5286 -0.4229 -0.9867 -0.9515 -0.9867 H 45.1072 c -0.5286 0 -0.9515 0.4229 -0.9515 0.9867 v 0.3876 c 0 1.3039 -1.022 2.3258 -2.3258 2.3258 H 20.4744 c -3.383 0 -6.0965 2.7487 -6.0965 6.1318 v 21.144 c 0 1.1982 -0.9515 2.1496 -2.1496 2.1496 V 3.7002 H 4.5812 c -2.5373 0 -4.5812 2.0439 -4.5812 4.6164 v 76.3651 c 0 2.502 2.0792 4.6164 4.5812 4.6164 h 7.6118 v -29.3549 h 0.3876 c 0.9515 0 1.7268 0.7753 1.7268 1.7268 v 21.5669 c 0 3.383 2.7487 6.1318 6.0965 6.1318 h 21.4964 c 1.1629 0 2.1496 0.9867 2.1496 2.1496 v 0.4229 c 0 0.5286 0.4229 0.9867 0.9515 0.9867 h 65.8988 c 0.5286 0 0.9515 -0.4229 0.9515 -0.9867 v -0.6696 c 0 -1.0572 0.8458 -1.903 1.903 -1.903 h 21.7078 c 3.383 0 6.0965 -2.7487 6.0965 -6.1318 v -21.5316 c 0 -0.9867 0.7753 -1.762 1.762 -1.762 h 0.2819 v 29.3197 h 7.6118 c 2.5373 0 4.5812 -2.0439 4.5812 -4.6164 V 8.3166 C 155.9722 5.7441 153.8931 3.7002 151.391 3.7002 z M 11.2063 33.1256 v 0.6696 v 26.2186 v 28.2272 H 4.5812 v 0.0352 c -1.9734 0 -3.5945 -1.621 -3.5945 -3.5592 V 8.3166 C 0.9867 6.3432 2.6078 4.7574 4.5812 4.7574 h 6.6251 V 33.1256 z M 143.7087 58.886 H 143.4268 c -1.5153 -0.0352 -2.7487 1.2334 -2.7487 2.7487 v 21.5316 c 0 2.8192 -2.2906 5.0746 -5.0746 5.0746 h -21.7078 c -1.5858 0 -2.8897 1.3039 -2.8897 2.9249 v 0.6343 H 45.1424 v -0.3524 c 0 -1.762 -1.4096 -3.2068 -3.1716 -3.2068 h -21.4964 c -2.8192 0 -5.0746 -2.2554 -5.0746 -5.0746 v -21.5669 c 0 -1.5153 -1.1982 -2.784 -2.7487 -2.784 h -0.3876 V 34.1123 c 1.762 0 3.1364 -1.4448 3.1364 -3.1716 v -21.144 c 0 -2.8192 2.2906 -5.0746 5.0746 -5.0746 h 21.3554 c 1.8325 0 3.3126 -1.5153 3.3126 -3.3478 V 1.0572 h 65.7931 v 0.9515 c 0 1.5506 1.2334 2.8192 2.784 2.8192 h 21.8488 c 2.8192 0 5.0746 2.2554 5.0746 5.0746 v 21.9898 c 0 1.2686 1.022 2.2906 2.2906 2.2906 h 0.74 V 58.886 z M 154.9503 84.6817 c 0 1.9734 -1.5858 3.5592 -3.5945 3.5592 h -6.6251 V 59.908 v -1.022 V 34.1123 V 33.1256 V 4.7574 h 6.6251 c 1.9734 0 3.5945 1.621 3.5945 3.5592 V 84.6817 z M 149.8052 11.9816 c -2.4316 0 -4.405 1.9734 -4.405 4.4755 c 0 2.4316 1.9734 4.4755 4.405 4.4755 c 2.4316 0 4.405 -1.9734 4.405 -4.4755 C 154.2102 13.955 152.2368 11.9816 149.8052 11.9816 z M 149.8052 19.8754 c -1.903 0 -3.383 -1.5506 -3.383 -3.4183 c 0 -1.903 1.5153 -3.4183 3.383 -3.4183 c 1.903 0 3.383 1.5506 3.383 3.4183 S 151.7082 19.8754 149.8052 19.8754 z M 149.8052 72.2772 c -2.4316 0 -4.405 1.9734 -4.405 4.4755 c 0 2.4316 1.9734 4.4755 4.405 4.4755 c 2.4316 0 4.405 -1.9734 4.405 -4.4755 C 154.2102 74.2507 152.2368 72.2772 149.8052 72.2772 z M 149.8052 80.171 c -1.903 0 -3.383 -1.5506 -3.383 -3.4183 c 0 -1.8677 1.5153 -3.4183 3.383 -3.4183 c 1.903 0 3.383 1.5506 3.383 3.4183 C 153.1883 78.6204 151.7082 80.171 149.8052 80.171 z M 6.0613 72.2772 c -2.4316 0 -4.405 1.9734 -4.405 4.4755 c 0 2.4316 1.9734 4.4755 4.405 4.4755 c 2.4316 0 4.405 -1.9734 4.405 -4.4755 C 10.431 74.2507 8.4576 72.2772 6.0613 72.2772 z M 6.0613 80.171 c -1.903 0 -3.383 -1.5506 -3.383 -3.4183 c 0 -1.8677 1.5153 -3.4183 3.383 -3.4183 s 3.383 1.5506 3.383 3.4183 C 9.4443 78.6204 7.8938 80.171 6.0613 80.171 z M 1.621 16.3514 c 0 2.4316 1.9734 4.4755 4.405 4.4755 c 2.4316 0 4.405 -1.9734 4.405 -4.4755 c -0.0352 -2.4668 -2.0087 -4.4755 -4.405 -4.4755 S 1.621 13.8493 1.621 16.3514 z M 6.0613 12.9331 c 1.8677 0 3.383 1.5506 3.383 3.4183 c 0 1.8677 -1.5153 3.4183 -3.383 3.4183 c -1.903 0 -3.383 -1.5506 -3.383 -3.4183 C 2.6782 14.4484 4.1936 12.9331 6.0613 12.9331 z',
+  },
+  opentrons_universal_flat_adapter: {
+    viewBox: '0 0 127.4 75.01',
+    path:
+      'M 55.0327 34.1351 c -1.8356 0 -3.3182 1.4826 -3.3182 3.3182 c 0 1.8356 1.4826 3.3182 3.3182 3.3182 c 1.8356 0 3.3182 -1.4826 3.3182 -3.3182 C 58.3509 35.6177 56.8683 34.1351 55.0327 34.1351 z M 55.0327 39.9596 c -1.412 0 -2.5063 -1.1296 -2.5063 -2.5063 c 0 -1.412 1.1649 -2.5063 2.5063 -2.5063 c 1.412 0 2.5063 1.1296 2.5063 2.5063 C 57.539 38.83 56.4094 39.9596 55.0327 39.9596 z M 111.0538 5.7892 C 111.0538 2.5769 108.4416 0 105.2293 0 H 5.8245 C 2.6122 0 0 2.6122 0 5.8245 v 63.3635 c 0 3.2476 2.6122 5.8245 5.8245 5.8245 h 99.4048 c 3.2123 0 5.7539 -2.5416 5.8245 -5.7186 l 0 -0.6354 c 0 -0.5295 0.353 -0.9178 0.8472 -0.9178 h 1.7297 h 2.1533 h 10.3429 c 0.706 0 1.3061 -0.6707 1.3061 -1.4826 v -3.7065 c 0 -0.8119 -0.6001 -1.4826 -1.3061 -1.4826 l -14.1906 -0.0353 c -0.4942 0 -0.8825 -0.3883 -0.8825 -0.9178 v -0.6354 V 15.6379 v -0.6354 c 0 -0.5295 0.353 -0.9178 0.8472 -0.9178 h 1.7297 h 2.1533 h 10.3429 c 0.706 0 1.3061 -0.6707 1.3061 -1.4826 V 8.8603 c 0 -0.8119 -0.6001 -1.4826 -1.3061 -1.4826 l -14.1906 -0.0353 c -0.4942 0 -0.8825 -0.4236 -0.8825 -0.9178 M 120.1612 13.2728 V 8.1896 h 0.9884 v 5.0832 H 120.1612 z M 126.6564 8.8603 v 3.7065 c 0 0.353 -0.2471 0.6707 -0.5295 0.6707 h -4.1654 V 8.1896 h 4.1654 C 126.4093 8.1896 126.6564 8.5073 126.6564 8.8603 z M 119.3846 8.1896 v 5.0832 H 115.784 h -2.1533 H 111.901 c -0.3177 0 -0.6001 0.1059 -0.8472 0.2471 V 7.8719 c 0.2471 0.1765 0.5648 0.2824 0.8825 0.2824 L 119.3846 8.1896 z M 120.1612 66.9641 v -5.0832 h 0.9884 v 5.0832 H 120.1612 z M 126.6564 62.5869 v 3.7065 c 0 0.353 -0.2471 0.6707 -0.5295 0.6707 h -4.1654 v -5.0832 h 4.1654 C 126.4093 61.9162 126.6564 62.2339 126.6564 62.5869 z M 119.3846 61.9162 v 5.0832 H 115.784 h -2.1533 H 111.901 c -0.3177 0 -0.6001 0.1059 -0.8472 0.2471 v -5.6127 c 0.2471 0.1765 0.5648 0.2824 0.8825 0.2824 L 119.3846 61.9162 z M 110.2772 68.6938 v 0.5295 c 0 2.7887 -2.2945 5.0479 -5.0479 5.0479 H 5.8245 c -2.7887 0 -5.0479 -2.2945 -5.0479 -5.0479 V 5.8245 c 0 -2.7887 2.2945 -5.0479 5.0479 -5.0479 h 99.4048 c 2.7887 0 5.0479 2.2945 5.0479 5.0479 v 9.1427 v 0.6354 V 68.6938 z',
+  },
+}
+
+export type LabwareAdapterLoadName = keyof typeof LABWARE_ADAPTER_LOADNAME_PATHS
+export const labwareLoadNames = Object.keys(LABWARE_ADAPTER_LOADNAME_PATHS)
+
+export interface LabwareAdapterProps {
+  labwareLoadName: LabwareAdapterLoadName
+}
+
+export const LabwareAdapter = (
+  props: LabwareAdapterProps
+): JSX.Element | null => {
+  const { labwareLoadName } = props
+  const { path, viewBox } = LABWARE_ADAPTER_LOADNAME_PATHS[labwareLoadName]
+  return (
+    <svg viewBox={viewBox}>
+      <path d={path} />
+    </svg>
+  )
+}

components/src/hardware-sim/Labware/LabwareRender.tsx

@@ -6,7 +6,7 @@ import {
   StrokedWells,
   StaticLabware,
 } from './labwareInternals'
-
+import { LabwareAdapter, labwareLoadNames } from './LabwareAdapter'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type {
   HighlightedWellLabels,
@@ -16,7 +16,6 @@ import type {
   WellGroup,
 } from './labwareInternals/types'
 import type { CSSProperties } from 'styled-components'
-
 export const WELL_LABEL_OPTIONS = {
   SHOW_LABEL_INSIDE: 'SHOW_LABEL_INSIDE',
   SHOW_LABEL_OUTSIDE: 'SHOW_LABEL_OUTSIDE',
@@ -58,6 +57,17 @@ export interface LabwareRenderProps {
 export const LabwareRender = (props: LabwareRenderProps): JSX.Element => {
   const { gRef } = props
   const cornerOffsetFromSlot = props.definition.cornerOffsetFromSlot
+  const labwareLoadName = props.definition.parameters.loadName
+  if (labwareLoadNames.includes(labwareLoadName)) {
+    return (
+      <g
+        transform={`translate(${cornerOffsetFromSlot.x}, ${cornerOffsetFromSlot.y})`}
+        ref={gRef}
+      >
+        <LabwareAdapter labwareLoadName={labwareLoadName} />
+      </g>
+    )
+  }
 
   return (
     <g