feat(app): Show module name over labware on deckmaps (#1913)

Closes #1739

app/src/components/DeckMap/ConnectedSlotItem.js

@@ -12,6 +12,7 @@ import {
   type SessionModule
 } from '../../robot'
 
+import {getModulesOn} from '../../config'
 import type {LabwareComponentProps} from '@opentrons/components'
 import LabwareItem, {type LabwareItemProps} from './LabwareItem'
 import ModuleItem from './ModuleItem'
@@ -44,6 +45,7 @@ function SlotItem (props: Props) {
       {labware && (
         <LabwareItem
           labware={labware}
+          module={module}
           slot={slot}
           height={height}
           width={width}
@@ -58,11 +60,14 @@ function mapStateToProps (state: State, ownProps: OP): SP {
   const allLabware = robotSelectors.getLabware(state)
   const tipracksConfirmed = robotSelectors.getTipracksConfirmed(state)
   const labware = allLabware.find((lw) => lw.slot === slot)
-  const module = robotSelectors.getModulesBySlot(state)[slot]
   const highlighted = slot === selectedSlot
+  const modulesEnabled = getModulesOn(state)
+  const module = modulesEnabled
+    ? robotSelectors.getModulesBySlot(state)[slot]
+    : null
+
   const stateProps: SP = {}
 
-  // bail out if it's an empty slot
   if (labware) {
     const {isTiprack, confirmed, calibratorMount} = labware
 

app/src/components/DeckMap/LabwareItem.js

@@ -3,7 +3,7 @@ import * as React from 'react'
 import cx from 'classnames'
 import {Link} from 'react-router-dom'
 
-import type {Labware} from '../../robot'
+import type {Labware, SessionModule} from '../../robot'
 import type {LabwareComponentProps} from '@opentrons/components'
 
 import {
@@ -14,6 +14,7 @@ import {
 } from '@opentrons/components'
 
 import LabwareSpinner from './LabwareSpinner'
+import ModuleNameOverlay from './ModuleNameOverlay'
 import styles from './styles.css'
 
 export type LabwareItemProps = LabwareComponentProps & {
@@ -23,11 +24,12 @@ export type LabwareItemProps = LabwareComponentProps & {
     showSpinner?: boolean,
     onClick?: () => void,
     url?: string
-  }
+  },
+  module: ?SessionModule,
 }
 
 export default function LabwareItem (props: LabwareItemProps) {
-  const {width, height, labware} = props
+  const {width, height, labware, module} = props
 
   const {
     name,
@@ -47,7 +49,15 @@ export default function LabwareItem (props: LabwareItemProps) {
         <Plate containerType={type} />
 
         {!showSpinner && (
-          <ContainerNameOverlay title={humanizeLabwareType(type)} subtitle={name} />
+          <ContainerNameOverlay
+            title={humanizeLabwareType(type)}
+            subtitle={name}
+          />
+        )}
+
+        {!showSpinner && module && (
+          // TODO(mc, 2018-07-23): displayName?
+          <ModuleNameOverlay name={module.name} />
         )}
 
         {showSpinner && (

app/src/components/DeckMap/ModuleNameOverlay.js

@@ -0,0 +1,29 @@
+// @flow
+import * as React from 'react'
+
+import styles from './styles.css'
+
+type Props = {name: string}
+
+const HEIGHT = 20
+const PADDING_LEFT = 4
+
+export default function ModuleNameOverlay (props: Props) {
+  return (
+    <React.Fragment>
+      <rect
+        className={styles.module_name_overlay}
+        width='100%'
+        height={HEIGHT}
+      />
+      <text
+        className={styles.module_name_text}
+        dominantBaseline='central'
+        x={PADDING_LEFT}
+        y={HEIGHT / 2}
+      >
+        {props.name}
+      </text>
+    </React.Fragment>
+  )
+}

app/src/components/DeckMap/index.js

@@ -5,6 +5,8 @@ import {Deck} from '@opentrons/components'
 import ConnectedSlotItem from './ConnectedSlotItem'
 import ModuleItem from './ModuleItem'
 import LabwareItem from './LabwareItem'
+import ModuleNameOverlay from './ModuleNameOverlay'
+
 import styles from './styles.css'
 
 export default function DeckMap () {
@@ -17,6 +19,6 @@ export default function DeckMap () {
   )
 }
 
-export {LabwareItem, ModuleItem}
+export {LabwareItem, ModuleItem, ModuleNameOverlay}
 export type {LabwareItemProps} from './LabwareItem'
 export type {ModuleItemProps} from './ModuleItem'

app/src/components/DeckMap/styles.css

@@ -39,3 +39,16 @@
   text-transform: uppercase;
   white-space: pre;
 }
+
+.module_name_overlay {
+  color: var(--c-black);
+  opacity: 0.7;
+}
+
+.module_name_text {
+  fill: currentColor;
+  color: var(--c-white);
+  font-size: 0.5rem;
+  font-weight: var(--fw-semibold);
+  text-transform: uppercase;
+}

app/src/components/ReviewDeckModal/LabwareComponent.js

@@ -4,6 +4,7 @@ import * as React from 'react'
 import {connect} from 'react-redux'
 
 import {selectors as robotSelectors, type SessionModule} from '../../robot'
+import {getModulesOn} from '../../config'
 
 import type {LabwareComponentProps} from '@opentrons/components'
 import type {LabwareItemProps} from '../DeckMap'
@@ -22,17 +23,20 @@ type Props = OP & SP
 export default connect(mapStateToProps)(LabwareComponent)
 
 function LabwareComponent (props: Props) {
+  const {labware, module} = props
+
   return (
     <React.Fragment>
-      {props.module && (
-        <ModuleItem module={props.module} />
+      {module && (
+        <ModuleItem module={module} />
       )}
-      {props.labware && (
+      {labware && (
         <LabwareItem
           slot={props.slot}
           width={props.width}
           height={props.height}
-          labware={props.labware}
+          labware={labware}
+          module={module}
         />
       )}
     </React.Fragment>
@@ -45,6 +49,8 @@ function mapStateToProps (state, ownProps: OP): SP {
 
   return {
     labware: allLabware.find((lw) => lw.slot === slot),
-    module: robotSelectors.getModulesBySlot(state)[slot]
+    module: getModulesOn(state)
+      ? robotSelectors.getModulesBySlot(state)[slot]
+      : null
   }
 }