From c40905b27613692654770b1c063072c22e6a9a6a Mon Sep 17 00:00:00 2001 From: Mike Cousins Date: Mon, 23 Jul 2018 16:18:20 -0400 Subject: [PATCH] feat(app): Show module name over labware on deckmaps (#1913) Closes #1739 --- .../components/DeckMap/ConnectedSlotItem.js | 9 ++++-- app/src/components/DeckMap/LabwareItem.js | 18 +++++++++--- .../components/DeckMap/ModuleNameOverlay.js | 29 +++++++++++++++++++ app/src/components/DeckMap/index.js | 4 ++- app/src/components/DeckMap/styles.css | 13 +++++++++ .../ReviewDeckModal/LabwareComponent.js | 16 ++++++---- 6 files changed, 77 insertions(+), 12 deletions(-) create mode 100644 app/src/components/DeckMap/ModuleNameOverlay.js diff --git a/app/src/components/DeckMap/ConnectedSlotItem.js b/app/src/components/DeckMap/ConnectedSlotItem.js index 413d942ec75..811bd4c9c03 100644 --- a/app/src/components/DeckMap/ConnectedSlotItem.js +++ b/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 && ( 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 diff --git a/app/src/components/DeckMap/LabwareItem.js b/app/src/components/DeckMap/LabwareItem.js index 3c79770dffe..26d9d07bfc7 100644 --- a/app/src/components/DeckMap/LabwareItem.js +++ b/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) { {!showSpinner && ( - + + )} + + {!showSpinner && module && ( + // TODO(mc, 2018-07-23): displayName? + )} {showSpinner && ( diff --git a/app/src/components/DeckMap/ModuleNameOverlay.js b/app/src/components/DeckMap/ModuleNameOverlay.js new file mode 100644 index 00000000000..4f07baa7331 --- /dev/null +++ b/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 ( + + + + {props.name} + + + ) +} diff --git a/app/src/components/DeckMap/index.js b/app/src/components/DeckMap/index.js index 10f3c35467f..af7c9429f78 100644 --- a/app/src/components/DeckMap/index.js +++ b/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' diff --git a/app/src/components/DeckMap/styles.css b/app/src/components/DeckMap/styles.css index ebd18fe5d7f..6a637d28b1b 100644 --- a/app/src/components/DeckMap/styles.css +++ b/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; +} diff --git a/app/src/components/ReviewDeckModal/LabwareComponent.js b/app/src/components/ReviewDeckModal/LabwareComponent.js index 8b0d8ffdadb..168d9b7c5ed 100644 --- a/app/src/components/ReviewDeckModal/LabwareComponent.js +++ b/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 ( - {props.module && ( - + {module && ( + )} - {props.labware && ( + {labware && ( )} @@ -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 } }