feat(protocol-designer): add tooltip for labware name/type on steplist

components/src/tooltips/HoverTooltip.js

@@ -36,6 +36,11 @@ class HoverTooltip extends React.Component<Props, State> {
     this.state = {isOpen: false}
   }
 
+  componentWillUnmount () {
+    if (this.closeTimeout) clearTimeout(this.closeTimeout)
+    if (this.openTimeout) clearTimeout(this.openTimeout)
+  }
+
   delayedOpen = () => {
     if (this.closeTimeout) clearTimeout(this.closeTimeout)
     this.openTimeout = setTimeout(() => this.setState({isOpen: true}), OPEN_DELAY_MS)

components/src/utils.js

@@ -3,9 +3,10 @@ import startCase from 'lodash/startCase'
 import {
   swatchColors,
   MIXED_WELL_COLOR,
-  AIR,
 } from '@opentrons/components'
 
+import {AIR} from './constants'
+
 export const humanizeLabwareType = startCase
 
 export const wellNameSplit = (wellName: string): [string, string] => {

protocol-designer/src/components/steplist/AspirateDispenseHeader.js

@@ -7,7 +7,7 @@ import styles from './StepItem.css'
 import LabwareTooltipContents from './LabwareTooltipContents'
 import type {Labware} from '../../labware-ingred/types'
 import {labwareToDisplayName} from '../../labware-ingred/utils'
-import {TooltipPortal} from './TooltipPortal'
+import {Portal} from './TooltipPortal'
 
 type AspirateDispenseHeaderProps = {
   sourceLabware: ?Labware,
@@ -27,7 +27,7 @@ function AspirateDispenseHeader (props: AspirateDispenseHeaderProps) {
 
       <PDListItem className={cx(styles.step_subitem_column_header, styles.emphasized_cell)}>
         <HoverTooltip
-          portal={TooltipPortal}
+          portal={Portal}
           tooltipComponent={<LabwareTooltipContents labware={sourceLabware} />}>
           {(hoverTooltipHandlers) => (
             <span {...hoverTooltipHandlers} className={styles.labware_display_name}>
@@ -38,7 +38,7 @@ function AspirateDispenseHeader (props: AspirateDispenseHeaderProps) {
         {/* This is always a "transfer icon" (arrow pointing right) for any step: */}
         <Icon name='ot-transfer' />
         <HoverTooltip
-          portal={TooltipPortal}
+          portal={Portal}
           tooltipComponent={<LabwareTooltipContents labware={destLabware} />}>
           {(hoverTooltipHandlers) => (
             <span {...hoverTooltipHandlers} className={styles.labware_display_name}>

protocol-designer/src/components/steplist/MixHeader.js

@@ -6,7 +6,7 @@ import {PDListItem} from '../lists'
 import styles from './StepItem.css'
 import type {Labware} from '../../labware-ingred/types'
 import LabwareTooltipContents from './LabwareTooltipContents'
-import {TooltipPortal} from './TooltipPortal'
+import {Portal} from './TooltipPortal'
 
 type Props = {
   volume: ?string,
@@ -19,7 +19,7 @@ export default function MixHeader (props: Props) {
   return (
     <PDListItem className={styles.step_subitem}>
       <HoverTooltip
-        portal={TooltipPortal}
+        portal={Portal}
         tooltipComponent={<LabwareTooltipContents labware={labware} />}>
         {(hoverTooltipHandlers) => (
           <span {...hoverTooltipHandlers} className={cx(styles.emphasized_cell, styles.labware_display_name)}>

protocol-designer/src/components/steplist/StepList.js

@@ -10,7 +10,7 @@ import {END_TERMINAL_TITLE} from '../../constants'
 import {END_TERMINAL_ITEM_ID} from '../../steplist'
 
 import type {StepIdType} from '../../form-types'
-import {TooltipPortalRoot} from './TooltipPortal'
+import {PortalRoot} from './TooltipPortal'
 
 type StepListProps = {
   orderedSteps: Array<StepIdType>,
@@ -30,7 +30,7 @@ export default function StepList (props: StepListProps) {
         <StepCreationButton />
         <TerminalItem id={END_TERMINAL_ITEM_ID} title={END_TERMINAL_TITLE} />
       </SidePanel>
-      <TooltipPortalRoot />
+      <PortalRoot />
     </React.Fragment>
   )
 }

protocol-designer/src/components/steplist/SubstepRow.js

@@ -11,7 +11,7 @@ import IngredPill from './IngredPill'
 import {PDListItem} from '../lists'
 import styles from './StepItem.css'
 import {formatVolume, formatPercentage} from './utils'
-import {TooltipPortal} from './TooltipPortal'
+import {Portal} from './TooltipPortal'
 
 type SubstepRowProps = {|
   volume?: ?number | ?string,
@@ -78,7 +78,7 @@ export default function SubstepRow (props: SubstepRowProps) {
       onMouseEnter={props.onMouseEnter}
       onMouseLeave={props.onMouseLeave}>
       <HoverTooltip
-        portal={TooltipPortal}
+        portal={Portal}
         tooltipComponent={(
           <PillTooltipContents
             well={props.source ? props.source.well : ''}
@@ -96,7 +96,7 @@ export default function SubstepRow (props: SubstepRowProps) {
       <span className={styles.volume_cell}>{`${formatVolume(props.volume)} μL`}</span>
       <span className={styles.emphasized_cell}>{props.dest && props.dest.well}</span>
       <HoverTooltip
-        portal={TooltipPortal}
+        portal={Portal}
         tooltipComponent={(
           <PillTooltipContents
             well={props.dest ? props.dest.well : ''}

protocol-designer/src/components/steplist/TooltipPortal.js

@@ -9,12 +9,12 @@ type State = {hasRoot: boolean}
 const PORTAL_ROOT_ID = 'steplist-tooltip-portal-root'
 const getPortalRoot = () => global.document.getElementById(PORTAL_ROOT_ID)
 
-export function TooltipPortalRoot () {
+export function PortalRoot () {
   return <div id={PORTAL_ROOT_ID} />
 }
 
 // the children of Portal are rendered into the PortalRoot if it exists in DOM
-export class TooltipPortal extends React.Component<Props, State> {
+export class Portal extends React.Component<Props, State> {
   $root: ?Element
 
   constructor (props: Props) {

protocol-designer/src/step-generation/utils.js

@@ -13,7 +13,8 @@ import type {
   LocationLiquidState,
 } from './types'
 
-export {AIR} from '@opentrons/components'
+import {AIR} from '@opentrons/components'
+export {AIR}
 
 export function repeatArray<T> (array: Array<T>, repeats: number): Array<T> {
   return flatMap(range(repeats), (i: number): Array<T> => array)