feat(shared-data, components): add OT-3 deckmap component (#11543)

* feat(shared-data, components): add OT-3 deckmap component

RCORE-250

components/src/hardware-sim/Deck/DeckFromData.tsx

@@ -1,40 +1,36 @@
 import * as React from 'react'
-import cx from 'classnames'
-import map from 'lodash/map'
-import snakeCase from 'lodash/snakeCase'
+import parseHtml from 'html-react-parser'
+import { stringify } from 'svgson'
 
-import styles from './Deck.css'
-
-import type {
-  DeckDefinition,
-  DeckLayer,
-  DeckLayerFeature,
-} from '@opentrons/shared-data'
+import type { DeckDefinition } from '@opentrons/shared-data'
 
 export interface DeckFromDataProps {
   def: DeckDefinition
   layerBlocklist: string[]
 }
 
 export function DeckFromData(props: DeckFromDataProps): JSX.Element {
-  const { def, layerBlocklist } = props
+  const { def, layerBlocklist = [] } = props
+
+  const layerGroupNodes = def.layers.filter(
+    g => !layerBlocklist.includes(g.attributes?.id)
+  )
+
+  const groupNodeWrapper = {
+    name: 'g',
+    type: 'element',
+    value: '',
+    attributes: { id: 'deckLayers' },
+    children: layerGroupNodes,
+  }
+
   return (
     <g>
-      {map(def.layers, (layer: DeckLayer, layerId: string) => {
-        if (layerBlocklist.includes(layerId)) return null
-        return (
-          <g id={layerId} key={layerId}>
-            <path
-              className={cx(
-                styles.deck_outline,
-                styles[def.otId],
-                styles[snakeCase(layerId)]
-              )}
-              d={layer.map((l: DeckLayerFeature) => l.footprint).join(' ')}
-            />
-          </g>
-        )
-      })}
+      {parseHtml(
+        stringify(groupNodeWrapper, {
+          selfClose: false,
+        })
+      )}
     </g>
   )
 }

components/src/hardware-sim/Deck/RobotWorkSpace.stories.tsx

@@ -3,11 +3,21 @@ import { RobotWorkSpace } from './RobotWorkSpace'
 import { RobotCoordsForeignDiv, Module } from '@opentrons/components'
 import { getModuleDef2 } from '@opentrons/shared-data'
 import { getDeckDefinitions } from './getDeckDefinitions'
+import type { INode } from 'svgson'
 
 import type { Story, Meta } from '@storybook/react'
 
 const allDeckDefs = getDeckDefinitions()
 
+const getLayerIds = (layers: INode[]): string[] => {
+  return layers.reduce<string[]>((acc, layer) => {
+    if (layer.attributes.id) {
+      return [...acc, layer.attributes.id]
+    }
+    return []
+  }, [])
+}
+
 export default {
   title: 'Library/Molecules/Simulation/Deck',
   argTypes: {
@@ -19,7 +29,10 @@ export default {
       defaultValue: 'ot2_standard',
     },
     deckLayerBlocklist: {
-      options: Object.keys(allDeckDefs.ot2_standard.layers),
+      options: [
+        ...getLayerIds(allDeckDefs.ot2_standard.layers),
+        ...getLayerIds(allDeckDefs.ot3_standard.layers),
+      ],
       control: {
         type: 'check',
       },

shared-data/deck/schemas/3.json

@@ -32,20 +32,30 @@
         "zDimension": { "$ref": "#/definitions/positiveNumber" }
       }
     },
-    "pathDValue": {
-      "type": "string",
-      "description": "A valid d-attribute value for an svg path. Note: uses physical coordinate system which has origin at the bottom, front, left of the robot's workspace."
-    },
-    "feature": {
+    "svgsonNode": {
       "type": "object",
-      "description": "A physical feature of the deck",
-      "required": ["footprint"],
+      "description": "An svgson node that corresponds to a single svg tag",
       "properties": {
-        "footprint": { "$ref": "#/definitions/pathDValue" },
-        "correspondingLocation": {
+        "name": {
+          "type": "string",
+          "description": "Element name, like svg, circle, line…"
+        },
+        "type": {
           "type": "string",
-          "format": "uri-reference",
-          "description": "A path to a location entry that corresponds with this feature"
+          "description": "Element type like element, text…"
+        },
+        "value": {
+          "type": "string",
+          "description": "Element value, used in text nodes."
+        },
+        "children": {
+          "type": "array",
+          "description": "List of element children",
+          "items": { "$ref": "#/definitions/svgsonNode" }
+        },
+        "attributes": {
+          "type": "object",
+          "description": "Attributes for the element"
         }
       }
     }
@@ -238,13 +248,9 @@
       }
     },
     "layers": {
-      "type": "object",
+      "type": "array",
       "description": "Layered feature groups of the deck.",
-      "additionalProperties": {
-        "type": "array",
-        "description": "Individual features within a layer",
-        "items": { "$ref": "#/definitions/feature" }
-      }
+      "items": { "$ref": "#/definitions/svgsonNode" }
     }
   }
 }

shared-data/js/types.ts

@@ -266,20 +266,14 @@ export interface DeckMetadata {
   tags: string[]
 }
 
-export interface DeckLayerFeature {
-  footprint: string
-}
-
-export type DeckLayer = DeckLayerFeature[]
-
 export interface DeckDefinition {
   otId: string
   cornerOffsetFromOrigin: CoordinateTuple
   dimensions: CoordinateTuple
   robot: DeckRobot
   locations: DeckLocations
   metadata: DeckMetadata
-  layers: Record<string, DeckLayer>
+  layers: INode[]
 }
 
 export interface ModuleDimensions {

shared-data/python/opentrons_shared_data/deck/dev_types.py

@@ -50,8 +50,13 @@ class CalibrationPoint(TypedDict):
     displayName: str
 
 
-class Feature(TypedDict):
-    footprint: str
+class INode(TypedDict):
+    name: str
+    type: str
+    value: str
+    attributes: Dict[str, str]
+    # this should be a recursive call to INode but we need to upgrade mypy
+    children: List[Dict[str, Any]]
 
 
 class FixedLabwareBySlot(TypedDict):
@@ -101,7 +106,7 @@ class DeckDefinitionV3(TypedDict):
     metadata: Metadata
     robot: Robot
     locations: LocationsV3
-    layers: Dict[str, List[Feature]]
+    layers: List[INode]
 
 
 DeckDefinition = DeckDefinitionV3