fix(app,pd): Truncate long labware names (#3644)

Closes #3617, closes #2444

api/tests/opentrons/data/calibration-validation.py

@@ -8,27 +8,20 @@
     'source': 'Opentrons Repository'
 }
 
-tiprack_s1 = containers.load('tiprack-200ul', '6', label='s1')
-tiprack_s2 = containers.load('tiprack-200ul', '3', label='s2')
-
-tiprack_m1 = containers.load('tiprack-200ul', '4', label='m1')
-tiprack_m2 = containers.load('tiprack-200ul', '1', label='m2')
-
-trough = containers.load('trough-12row', '8')
-plate = containers.load('96-PCR-flat', '5')
-
-multi = instruments.Pipette(
-    name="p200",
-    tip_racks=[tiprack_m2, tiprack_m1],
-    mount="left",
-    channels=8
-)
-
-single = instruments.Pipette(
-    name="p200s",
-    tip_racks=[tiprack_s2, tiprack_s1],
-    mount="right"
-)
+tiprack_s1 = containers.load('opentrons_96_tiprack_300ul', '10', label='s1')
+tiprack_s2 = containers.load('opentrons_96_tiprack_300ul', '3', label='s2')
+
+tiprack_m1 = containers.load('opentrons_96_tiprack_300ul', '4', label='m1')
+tiprack_m2 = containers.load('opentrons_96_tiprack_300ul', '1', label='m2')
+
+trough = containers.load('usascientific_12_reservoir_22ml', '11')
+plate = containers.load('biorad_96_wellplate_200ul_pcr', '5')
+
+multi = instruments.P300_Multi(
+    tip_racks=[tiprack_m2, tiprack_m1], mount='left')
+
+single = instruments.P300_Single(
+    tip_racks=[tiprack_s2, tiprack_s1], mount='right')
 
 single.pick_up_tip(tiprack_s1[0])
 single.aspirate(25, trough[0])

app/src/__mocks__/getLabware.js

@@ -0,0 +1,11 @@
+// @flow
+// TODO(mc, 2019-06-27): replace this mock with one in shared-data based on
+// jest.fn and glob
+
+export function getLegacyLabwareDef(loadName: ?string): null {
+  return null
+}
+
+export function getLatestLabwareDef(loadName: ?string): null {
+  return null
+}

app/src/components/CalibrateLabware/ConfirmModal.js

@@ -5,6 +5,7 @@ import cx from 'classnames'
 
 import type { Labware } from '../../robot'
 
+import { getLabwareDisplayName } from '@opentrons/shared-data'
 import { ModalPage } from '@opentrons/components'
 import ConfirmModalContents from './ConfirmModalContents'
 import styles from './styles.css'
@@ -22,24 +23,34 @@ export default function ConfirmModal(props: Props) {
   const backClickDisabled =
     labware.isMoving || labware.calibration === 'picked-up'
 
-  // TODO (ka 2018-4-18): this is a temporary workaround for a stlye over ride for in progress screens with transparate bg
+  // TODO (ka 2018-4-18): this is a temporary workaround for a style override
+  // for in progress screens with transparent bg
   const contentsStyle = labware.calibration.match(
     /^(moving-to-slot|picking-up|dropping-tip|confirming)$/
   )
     ? cx(styles.modal_contents, styles.in_progress_contents)
     : styles.modal_contents
 
+  const labwareDisplayName = labware.definition
+    ? getLabwareDisplayName(labware.definition)
+    : labware.name
+
   const titleBar = {
-    title: 'Calibrate Deck',
-    subtitle: labware.type,
+    title: 'Calibrate Labware',
+    // subtitle is capitalized by CSS, and "µL" capitalized is "ML"
+    subtitle: labwareDisplayName.replace('µL', 'uL'),
     back: { onClick: onBackClick, disabled: backClickDisabled },
   }
 
   return (
     <ModalPage
       titleBar={titleBar}
       contentsClassName={contentsStyle}
-      heading={`Calibrate pipette to ${labware.type}`}
+      heading={
+        <span className={styles.wizard_title}>
+          Calibrate pipette to {labwareDisplayName}
+        </span>
+      }
     >
       <ConfirmModalContents
         labware={labware}

app/src/components/CalibrateLabware/InfoBox.js

@@ -10,6 +10,7 @@ import {
   actions as robotActions,
 } from '../../robot'
 
+import { getLabwareDisplayName } from '@opentrons/shared-data'
 import { PrimaryButton } from '@opentrons/components'
 import CalibrationInfoBox from '../CalibrationInfoBox'
 import CalibrationInfoContent from '../CalibrationInfoContent'
@@ -30,15 +31,15 @@ type SP = {|
 
 type DP = {| dispatch: Dispatch |}
 
-type Props = {
+type Props = {|
   ...OP,
   button: ?{
     type: LabwareType,
     isNext: boolean,
     isConfirmed: ?boolean,
     onClick: () => void,
   },
-}
+|}
 
 export default connect<Props, OP, SP, {||}, State, Dispatch>(
   mapStateToProps,
@@ -57,7 +58,9 @@ function InfoBox(props: Props) {
   if (labware) {
     const labwareType = robotSelectors.labwareType(labware)
 
-    title = labware.type
+    title = labware.definition
+      ? getLabwareDisplayName(labware.definition)
+      : labware.type
     confirmed = labware.confirmed
     description = confirmed
       ? `${capitalize(labwareType)} is calibrated`

app/src/components/CalibrateLabware/styles.css

@@ -78,3 +78,7 @@
   width: 100%;
   height: 100%;
 }
+
+.wizard_title {
+  text-transform: none;
+}

app/src/components/CalibratePanel/LabwareListItem.js

@@ -1,31 +1,34 @@
 // @flow
 import * as React from 'react'
 
-import type { Labware } from '../../robot'
-
-import { ListItem } from '@opentrons/components'
+import { getLabwareDisplayName } from '@opentrons/shared-data'
+import { ListItem, HoverTooltip } from '@opentrons/components'
 import styles from './styles.css'
 
-type LabwareItemProps = {
+import type { Labware } from '../../robot'
+
+type LabwareListItemProps = {|
+  ...$Exact<Labware>,
   isDisabled: boolean,
   onClick: () => mixed,
-}
-
-type Props = Labware & LabwareItemProps
+|}
 
-export default function LabwareListItem(props: Props) {
+export default function LabwareListItem(props: LabwareListItemProps) {
   const {
+    name,
     type,
     slot,
     calibratorMount,
     isTiprack,
     confirmed,
     isDisabled,
     onClick,
+    definition,
   } = props
 
   const url = `/calibrate/labware/${slot}`
   const iconName = confirmed ? 'check-circle' : 'checkbox-blank-circle-outline'
+  const displayName = definition ? getLabwareDisplayName(definition) : type
 
   return (
     <ListItem
@@ -36,17 +39,35 @@ export default function LabwareListItem(props: Props) {
       activeClassName={styles.active}
     >
       <div className={styles.item_info}>
-        <span>Slot {slot}</span>
+        <span className={styles.item_info_location}>Slot {slot}</span>
         {isTiprack && (
-          <span>
-            <span className={styles.tiprack_item_mount}>
-              {calibratorMount && calibratorMount.charAt(0).toUpperCase()}
-            </span>
-            Tiprack
+          <span className={styles.tiprack_item_mount}>
+            {calibratorMount && calibratorMount.charAt(0).toUpperCase()}
           </span>
         )}
-        <span>{type}</span>
+        <HoverTooltip
+          tooltipComponent={
+            <LabwareNameTooltip name={name} displayName={displayName} />
+          }
+        >
+          {handlers => (
+            <span {...handlers} className={styles.labware_item_name}>
+              {displayName}
+            </span>
+          )}
+        </HoverTooltip>
       </div>
     </ListItem>
   )
 }
+
+function LabwareNameTooltip(props: {| name: string, displayName: string |}) {
+  const { name, displayName } = props
+
+  return (
+    <div className={styles.item_info_tooltip}>
+      <p>{name}</p>
+      <p>{displayName}</p>
+    </div>
+  )
+}

app/src/components/CalibratePanel/PipetteListItem.js

@@ -23,12 +23,7 @@ export default function PipetteListItem(props: Props) {
     ? 'check-circle'
     : 'checkbox-blank-circle-outline'
 
-  const description = pipette
-    ? `${capitalize(pipette.channels === 8 ? 'multi' : 'single')}-channel`
-    : 'N/A'
-
-  const name = pipette ? pipette.name : 'N/A'
-
+  const description = pipette?.modelSpecs?.displayName || 'N/A'
   return (
     <ListItem
       isDisabled={isDisabled}
@@ -38,9 +33,8 @@ export default function PipetteListItem(props: Props) {
       activeClassName={styles.active}
     >
       <div className={styles.item_info}>
-        <span>{capitalize(mount)}</span>
+        <span className={styles.item_info_location}>{capitalize(mount)}</span>
         <span>{description}</span>
-        <span>{name}</span>
       </div>
     </ListItem>
   )

app/src/components/CalibratePanel/styles.css

@@ -6,18 +6,40 @@
   }
 }
 
-.tiprack_item_mount {
-  font-weight: var(--fw-bold);
-  padding-right: 0.75rem;
-}
-
 .item_info {
   flex: 1;
   display: flex;
-  justify-content: space-between;
+  overflow: hidden;
 }
 
 .active {
   color: var(--c-highlight);
   background-color: var(--c-bg-selected);
 }
+
+.item_info_location {
+  flex: none;
+  width: 2.5rem;
+  margin-right: 1rem;
+}
+
+.tiprack_item_mount {
+  flex: none;
+  font-weight: var(--fw-semibold);
+  margin-right: 1.5rem;
+}
+
+.labware_item_name {
+  @apply --truncate;
+
+  width: 100%;
+}
+
+.item_info_tooltip {
+  @apply --font-body-1-light;
+
+  & > p:first-child {
+    font-weight: var(--fw-semibold);
+    margin-bottom: 0.5rem;
+  }
+}

app/src/components/CalibrationInfoBox.js

@@ -4,12 +4,12 @@ import classnames from 'classnames'
 import { Icon } from '@opentrons/components'
 import styles from './calibration-info.css'
 
-type Props = {
+type Props = {|
   title: string,
   confirmed: boolean,
   className?: string,
   children: React.Node,
-}
+|}
 
 export default function CalibrationInfoBox(props: Props) {
   const { className, confirmed, title, children } = props

app/src/components/ChangePipette/index.js

@@ -42,7 +42,7 @@ type Props = {
 }
 
 const TITLE = 'Pipette Setup'
-// used to guarentee mount param in route is left or right
+// used to guarantee mount param in route is left or right
 const RE_MOUNT = '(left|right)'
 
 type OP = {|