feat(protocol-designer): liquid tooltips on well selection, popper and portal

components/src/utils.js

@@ -3,10 +3,9 @@ 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/App.js

@@ -5,6 +5,7 @@ import { HashRouter, Route } from 'react-router-dom'
 import ConnectedDeckSetup from '../containers/ConnectedDeckSetup'
 import About from './About'
 import ProtocolEditor from './ProtocolEditor'
+import {PortalRoot} from './portals/TopPortal'
 
 import '../css/reset.css'
 
@@ -16,6 +17,7 @@ export default function App () {
         {/* TODO: Ian 2018-06-08 remove these unused routes & their components */}
         <Route exact path='/old-ingredient-selector' component={ConnectedDeckSetup} />
         <Route path='/about' component={About} />
+        <PortalRoot />
       </div>
     </HashRouter>
   )

protocol-designer/src/components/StepEditForm/WellSelectionInput/WellSelectionModal.js

@@ -13,11 +13,12 @@ import {selectors as pipetteSelectors} from '../../../pipettes'
 
 import * as wellContentsSelectors from '../../../top-selectors/well-contents'
 import {selectors} from '../../../labware-ingred/reducers'
+import type {Wells, ContentsByWell} from '../../../labware-ingred/types'
 import {selectors as steplistSelectors} from '../../../steplist'
+import type {WellIngredientNames} from '../../../steplist/types'
 import {changeFormInput} from '../../../steplist/actions'
 import type {StepFieldName} from '../../../steplist/fieldLevel'
 import type {PipetteData} from '../../../step-generation/types'
-import type {Wells, ContentsByWell} from '../../../labware-ingred/types'
 
 import {SelectableLabware} from '../../labware'
 import SingleLabwareWrapper from '../../SingleLabware'
@@ -38,6 +39,7 @@ type SP = {
   initialSelectedWells: Array<string>,
   wellContents: ContentsByWell,
   containerType: string,
+  ingredNames: WellIngredientNames,
 }
 type DP = {saveWellSelection: (Wells) => mixed}
 
@@ -101,7 +103,8 @@ class WellSelectionModal extends React.Component<Props, State> {
             updateHighlightedWells={this.updateHighlightedWells}
             wellContents={this.props.wellContents}
             containerType={this.props.containerType}
-            pipetteChannels={pipette && pipette.channels} />
+            pipetteChannels={pipette && pipette.channels}
+            ingredNames={this.props.ingredNames} />
         </SingleLabwareWrapper>
 
         <WellSelectionInstructions />
@@ -123,12 +126,14 @@ function mapStateToProps (state: BaseState, ownProps: OP): SP {
   const timelineIdx = orderedSteps.findIndex(id => id === stepId)
   const allWellContentsForStep = allWellContentsForSteps[timelineIdx]
   const formData = steplistSelectors.getUnsavedForm(state)
+  const ingredNames = selectors.getIngredientNames(state)
 
   return {
     initialSelectedWells: formData ? formData[ownProps.name] : [],
     pipette: pipetteId ? pipetteSelectors.equippedPipettes(state)[pipetteId] : null,
     wellContents: labware && allWellContentsForStep ? allWellContentsForStep[labware.id] : {},
     containerType: labware ? labware.type : 'missing labware',
+    ingredNames,
   }
 }
 

protocol-designer/src/components/labware/BrowseLabwareModal.js

@@ -16,8 +16,6 @@ import {
 import type {BaseState, ThunkDispatch} from '../../types'
 import i18n from '../../localization'
 
-import type {LocationLiquidState} from '../../step-generation'
-import {PillTooltipContents} from '../steplist/SubstepRow'
 import * as wellContentsSelectors from '../../top-selectors/well-contents'
 import {selectors} from '../../labware-ingred/reducers'
 import * as labwareIngredsActions from '../../labware-ingred/actions'
@@ -28,6 +26,7 @@ import SingleLabwareWrapper from '../SingleLabware'
 
 import modalStyles from '../modals/modal.css'
 import styles from './labware.css'
+import WellTooltip from './WellTooltip'
 
 type SP = {
   wellContents: ContentsByWell,
@@ -40,44 +39,7 @@ type DP = {
 
 type Props = SP & DP
 
-type State = {
-  tooltipX: ?number,
-  tooltipY: ?number,
-  tooltipWellName: ?string,
-  tooltipWellIngreds: ?LocationLiquidState,
-}
-const initialState: State = {
-  tooltipX: null,
-  tooltipY: null,
-  tooltipWellName: null,
-  tooltipWellIngreds: null,
-}
-
-const MOUSE_TOOLTIP_OFFSET_PIXELS = 14
-
-class BrowseLabwareModal extends React.Component<Props, State> {
-  state: State = initialState
-  wrapperRef: ?any
-
-  makeHandleWellMouseOver = (wellName: string, wellIngreds: LocationLiquidState) =>
-    (e) => {
-      const {clientX, clientY} = e
-      if (Object.keys(wellIngreds).length > 0 && clientX && clientY && this.wrapperRef) {
-        const wrapperLeft = this.wrapperRef ? this.wrapperRef.getBoundingClientRect().left : 0
-        const wrapperTop = this.wrapperRef ? this.wrapperRef.getBoundingClientRect().top : 0
-        this.setState({
-          tooltipX: clientX - wrapperLeft + MOUSE_TOOLTIP_OFFSET_PIXELS,
-          tooltipY: clientY - wrapperTop + MOUSE_TOOLTIP_OFFSET_PIXELS,
-          tooltipWellName: wellName,
-          tooltipWellIngreds: wellIngreds,
-        })
-      }
-    }
-
-  handleWellMouseLeave = (e) => {
-    this.setState(initialState)
-  }
-
+class BrowseLabwareModal extends React.Component<Props> {
   handleClose = () => {
     this.props.drillUp()
   }
@@ -87,50 +49,40 @@ class BrowseLabwareModal extends React.Component<Props, State> {
 
     return (
       <Modal
-        innerRef={ref => { this.wrapperRef = ref }}
         className={modalStyles.modal}
         contentsClassName={cx(modalStyles.modal_contents, modalStyles.transparent_content)}
         onCloseClick={this.handleClose}>
-        <SingleLabwareWrapper showLabels>
-          <g>
-            <LabwareOutline />
-            {map(this.props.wellContents, (well, wellName) => {
-              const color = ingredIdsToColor(well.groupIds)
-              const mouseHandlers = color
-                ? {
-                  onMouseMove: this.makeHandleWellMouseOver(wellName, well.ingreds),
-                  onMouseLeave: this.handleWellMouseLeave,
-                }
-                : {}
-              return (
-                <Well
-                  {...mouseHandlers}
-                  key={wellName}
-                  wellName={wellName}
-                  highlighted={this.state.tooltipWellName === wellName}
-                  fillColor={color}
-                  svgOffset={{x: 1, y: -3}}
-                  wellDef={allWellDefsByName[wellName]} />
-              )
-            })}
-          </g>
-          <LabwareLabels labwareType={this.props.labwareType} inner={false} />
-        </SingleLabwareWrapper>
-        {this.state.tooltipWellName &&
-          <div
-            style={{
-              left: this.state.tooltipX,
-              top: this.state.tooltipY,
-              position: 'absolute',
-            }}>
-            <div className={styles.tooltip_box}>
-              <PillTooltipContents
-                well={this.state.tooltipWellName}
-                ingredNames={this.props.ingredNames}
-                ingreds={this.state.tooltipWellIngreds || {}} />
-            </div>
-          </div>
-        }
+        <WellTooltip ingredNames={this.props.ingredNames}>
+          {
+            ({makeHandleMouseOverWell, handleMouseLeaveWell, tooltipWellName}) => (
+              <SingleLabwareWrapper showLabels>
+                <g>
+                  <LabwareOutline />
+                  {map(this.props.wellContents, (well, wellName) => {
+                    const color = ingredIdsToColor(well.groupIds)
+                    const mouseHandlers = color
+                      ? {
+                        onMouseOver: makeHandleMouseOverWell(wellName, well.ingreds),
+                        onMouseLeave: handleMouseLeaveWell,
+                      }
+                      : {}
+                    return (
+                      <Well
+                        {...mouseHandlers}
+                        key={wellName}
+                        wellName={wellName}
+                        highlighted={tooltipWellName === wellName}
+                        fillColor={color}
+                        svgOffset={{x: 1, y: -3}}
+                        wellDef={allWellDefsByName[wellName]} />
+                    )
+                  })}
+                </g>
+                <LabwareLabels labwareType={this.props.labwareType} inner={false} />
+              </SingleLabwareWrapper>
+            )
+          }
+        </WellTooltip>
         <div className={styles.modal_instructions}>{i18n.t('modal.browse_labware.instructions')}</div>
       </Modal>
     )