Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(app): remove redundant tip rack display name from tooltip #6770

Merged
merged 2 commits into from
Oct 15, 2020
Merged

fix(app): remove redundant tip rack display name from tooltip #6770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5589015
fix(app): remove redundant tip rack display name from tooltip
b-cooper Oct 14, 2020
beef05b
update labware list item tooltip as well
b-cooper Oct 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 44 additions & 55 deletions app/src/components/CalibratePanel/LabwareListItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,15 @@ import {
getModuleType,
THERMOCYCLER_MODULE_TYPE,
} from '@opentrons/shared-data'
import { ListItem, HoverTooltip } from '@opentrons/components'
import {
ListItem,
Flex,
Tooltip,
Text,
useHoverTooltip,
FONT_SIZE_BODY_1,
C_WHITE,
} from '@opentrons/components'
import { CalibrationData } from './CalibrationData'
import type { BaseProtocolLabware } from '../../calibration/labware/types'
import styles from './styles.css'
Expand Down Expand Up @@ -44,6 +52,8 @@ export function LabwareListItem(props: LabwareListItemProps): React.Node {
}
const moduleDisplayName = parent && getModuleDisplayName(parent)

const [targetProps, tooltipProps] = useHoverTooltip()

return (
<ListItem
url={!isDisabled ? url : undefined}
Expand All @@ -52,61 +62,40 @@ export function LabwareListItem(props: LabwareListItemProps): React.Node {
className={cx(styles.labware_item, { [styles.disabled]: isDisabled })}
activeClassName={styles.active}
>
<HoverTooltip
tooltipComponent={
<LabwareNameTooltip
name={name}
displayName={
moduleDisplayName
? `${displayName} on ${moduleDisplayName}`
: displayName
}
/>
}
>
{handlers => (
<div {...handlers} className={styles.item_info}>
<span className={styles.item_info_location}>{displaySlot}</span>
<div className={styles.slot_contents_names}>
{parent && (
<span className={styles.module_name}>{moduleDisplayName}</span>
)}
<span className={styles.labware_item_name}>
{isTiprack ? (
<span className={styles.tiprack_item_mount}>
<span className={styles.tiprack_item_mount}>
{calibratorMount
? calibratorMount.charAt(0).toUpperCase()
: ''}
</span>
{displayName}
</span>
) : (
displayName
)}
<Flex {...targetProps} className={styles.item_info}>
<span className={styles.item_info_location}>{displaySlot}</span>
<div className={styles.slot_contents_names}>
{parent && (
<span className={styles.module_name}>{moduleDisplayName}</span>
)}
<span className={styles.labware_item_name}>
{isTiprack ? (
<span className={styles.tiprack_item_mount}>
<span className={styles.tiprack_item_mount}>
{calibratorMount
? calibratorMount.charAt(0).toUpperCase()
: ''}
</span>
{displayName}
</span>
<CalibrationData
calibrationData={calibrationData}
calibratedThisSession={confirmed}
// the definitionHash will only be absent if old labware
// or robot version <= 3.19
calDataAvailable={definitionHash !== null}
/>
</div>
</div>
)}
</HoverTooltip>
) : (
displayName
)}
</span>
<CalibrationData
calibrationData={calibrationData}
calibratedThisSession={confirmed}
// the definitionHash will only be absent if old labware
// or robot version <= 3.19
calDataAvailable={definitionHash !== null}
/>
</div>
</Flex>
<Tooltip {...tooltipProps}>
<Text fontSize={FONT_SIZE_BODY_1} color={C_WHITE}>
{name}
</Text>
</Tooltip>
</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>
)
}
62 changes: 24 additions & 38 deletions app/src/components/CalibratePanel/PipetteTiprackListItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,14 @@ import { useSelector } from 'react-redux'

import {
ListItem,
HoverTooltip,
useHoverTooltip,
TOOLTIP_BOTTOM,
Tooltip,
Box,
Text,
FONT_WEIGHT_SEMIBOLD,
FONT_SIZE_BODY_1,
C_WHITE,
} from '@opentrons/components'
import styles from './styles.css'

Expand Down Expand Up @@ -52,44 +56,26 @@ export function PipetteTiprackListItem(
)
: null
)
return (
<HoverTooltip
placement="bottom"
tooltipComponent={
<TiprackNameTooltip name={name} displayName={displayName} />
}
>
{tooltipHandlers => (
<ListItem
key={name}
ref={tooltipHandlers?.ref}
onMouseEnter={tooltipHandlers?.onMouseEnter}
onMouseLeave={tooltipHandlers?.onMouseLeave}
url={calibrateUrl}
activeClassName={styles.active}
>
<Box marginLeft={MARGIN_LEFT_SIZE}>
<Text fontWeight={FONT_WEIGHT_SEMIBOLD}>{displayName}</Text>
<TipLengthCalibrationData
calibrationData={tipLengthCalibration}
// the definitionHash will only be absent if old labware
// or robot version <= 3.19
calDataAvailable={definitionHash != null}
/>
</Box>
</ListItem>
)}
</HoverTooltip>
)
}

function TiprackNameTooltip(props: {| name: string, displayName: string |}) {
const { name, displayName } = props

const [targetProps, tooltipProps] = useHoverTooltip({
placement: TOOLTIP_BOTTOM,
})
return (
<div className={styles.item_info_tooltip}>
<p>{name}</p>
<p>{displayName}</p>
</div>
<ListItem key={name} url={calibrateUrl} activeClassName={styles.active}>
<Box {...targetProps} marginLeft={MARGIN_LEFT_SIZE}>
<Text fontWeight={FONT_WEIGHT_SEMIBOLD}>{displayName}</Text>
<TipLengthCalibrationData
calibrationData={tipLengthCalibration}
// the definitionHash will only be absent if old labware
// or robot version <= 3.19
calDataAvailable={definitionHash != null}
/>
</Box>
<Tooltip {...tooltipProps}>
<Text fontSize={FONT_SIZE_BODY_1} color={C_WHITE}>
{name}
</Text>
</Tooltip>
</ListItem>
)
}
6 changes: 6 additions & 0 deletions components/src/lists/ListItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ type ListItemProps = {|
onMouseEnter?: (event: SyntheticMouseEvent<>) => mixed,
/** mouse leave handler */
onMouseLeave?: (event: SyntheticMouseEvent<>) => mixed,
/** mouse enter handler */
onPointerEnter?: (event: SyntheticPointerEvent<>) => mixed,
/** mouse leave handler */
onPointerLeave?: (event: SyntheticPointerEvent<>) => mixed,
/** if URL is specified, ListItem is wrapped in a React Router NavLink */
url?: string | null,
/** if URL is specified NavLink can receive an active class name */
Expand All @@ -26,6 +30,8 @@ type ListItemProps = {|
isDisabled?: boolean,
/** name constant of the icon to display */
iconName?: IconName,
'aria-describedby'?: string,
ref?: {| current: Element | null |} | ((current: Element | null) => mixed),
children: React.Node,
|}

Expand Down