-
Notifications
You must be signed in to change notification settings - Fork 179
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(protocol-designer): add tooltip for labware name/type on steplist (
#2497) Because of the cramped space on the step list, it is often the case that the labware name is truncated. For enhanced context, this adds a tooltip that launches on hover of the labware name and displays the full name and labware type. Also create interface for tooltips to render into a given portal. Closes #2421
- Loading branch information
Showing
15 changed files
with
192 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 29 additions & 9 deletions
38
protocol-designer/src/components/steplist/AspirateDispenseHeader.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
protocol-designer/src/components/steplist/LabwareTooltipContents.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| // @flow | ||
| import * as React from 'react' | ||
| import type {Labware} from '../../labware-ingred/types' | ||
| import {labwareToDisplayName} from '../../labware-ingred/utils' | ||
| import styles from './StepItem.css' | ||
|
|
||
| type LabwareTooltipContentsProps = {labware: ?Labware} | ||
| const LabwareTooltipContents = ({labware}: LabwareTooltipContentsProps) => { | ||
| const displayName = labware && labwareToDisplayName(labware) | ||
| return ( | ||
| <div className={styles.labware_tooltip_contents}> | ||
| <p className={styles.labware_name}>{displayName}</p> | ||
| {labware && labware.type !== displayName && | ||
| <React.Fragment> | ||
| <div className={styles.labware_spacer} /> | ||
| <p>{labware && labware.type}</p> | ||
| </React.Fragment> | ||
| } | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default LabwareTooltipContents |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,34 @@ | ||
| // @flow | ||
| import * as React from 'react' | ||
| import cx from 'classnames' | ||
| import {HoverTooltip} from '@opentrons/components' | ||
| import {PDListItem} from '../lists' | ||
| import styles from './StepItem.css' | ||
| import type {Labware} from '../../labware-ingred/types' | ||
| import LabwareTooltipContents from './LabwareTooltipContents' | ||
| import {Portal} from './TooltipPortal' | ||
|
|
||
| type Props = { | ||
| volume: ?string, | ||
| times: ?string, | ||
| labwareName: ?string, | ||
| labware: ?Labware, | ||
| } | ||
|
|
||
| export default function MixHeader (props: Props) { | ||
| const {volume, times, labwareName} = props | ||
| return <PDListItem className={styles.step_subitem}> | ||
| <span className={styles.emphasized_cell}>{labwareName}</span> | ||
| <span>{volume} uL</span> | ||
| <span>{times}x</span> | ||
| </PDListItem> | ||
| const {volume, times, labware} = props | ||
| return ( | ||
| <PDListItem className={styles.step_subitem}> | ||
| <HoverTooltip | ||
| portal={Portal} | ||
| tooltipComponent={<LabwareTooltipContents labware={labware} />}> | ||
| {(hoverTooltipHandlers) => ( | ||
| <span {...hoverTooltipHandlers} className={cx(styles.emphasized_cell, styles.labware_display_name)}> | ||
| {labware && labware.name} | ||
| </span> | ||
| )} | ||
| </HoverTooltip> | ||
| <span>{volume} uL</span> | ||
| <span>{times}x</span> | ||
| </PDListItem> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
protocol-designer/src/components/steplist/TooltipPortal.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| // @flow | ||
| import * as React from 'react' | ||
| import ReactDom from 'react-dom' | ||
|
|
||
| type Props = {children: React.Node} | ||
|
|
||
| type State = {hasRoot: boolean} | ||
|
|
||
| const PORTAL_ROOT_ID = 'steplist-tooltip-portal-root' | ||
| const getPortalRoot = () => global.document.getElementById(PORTAL_ROOT_ID) | ||
|
|
||
| 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 Portal extends React.Component<Props, State> { | ||
| $root: ?Element | ||
|
|
||
| constructor (props: Props) { | ||
| super(props) | ||
| this.$root = getPortalRoot() | ||
| this.state = {hasRoot: !!this.$root} | ||
| } | ||
|
|
||
| // on first launch, $portalRoot isn't in DOM; double check once we're mounted | ||
| // TODO(mc, 2018-10-08): prerender UI instead | ||
| componentDidMount () { | ||
| if (!this.$root) { | ||
| this.$root = getPortalRoot() | ||
| this.setState({hasRoot: !!this.$root}) | ||
| } | ||
| } | ||
|
|
||
| render () { | ||
| if (!this.$root) return null | ||
| return ReactDom.createPortal(this.props.children, this.$root) | ||
| } | ||
| } |
Oops, something went wrong.