diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx index ae8f3bbea02..9a3c04fdc5f 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx @@ -43,6 +43,9 @@ export function SetupLabwareMap({ labwareStackDetailsLabwareId, setLabwareStackDetailsLabwareId, ] = React.useState(null) + const [hoverLabwareId, setHoverLabwareId] = React.useState( + null + ) if (protocolAnalysis == null) return null @@ -81,14 +84,27 @@ export function SetupLabwareMap({ : {}, nestedLabwareDef: topLabwareDefinition, + highlightLabware: + topLabwareDefinition != null && + topLabwareId != null && + hoverLabwareId === topLabwareId, + stacked: topLabwareDefinition != null && topLabwareId != null, moduleChildren: ( // open modal { - if (topLabwareDefinition != null) { + if (topLabwareDefinition != null && topLabwareId != null) { setLabwareStackDetailsLabwareId(topLabwareId) } }} + onMouseEnter={() => { + if (topLabwareDefinition != null && topLabwareId != null) { + setHoverLabwareId(topLabwareId) + } + }} + onMouseLeave={() => { + setHoverLabwareId(null) + }} cursor="pointer" > {topLabwareDefinition != null && topLabwareId != null ? ( diff --git a/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx b/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx index e74d478ce70..1e00d266008 100644 --- a/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx +++ b/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx @@ -72,6 +72,7 @@ export function LabwareMapView(props: LabwareMapViewProps): JSX.Element { : undefined, highlightLabware: true, moduleChildren: null, + stacked: topLabwareDefinition != null && topLabwareId != null, } }) diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx index 50791c42b3c..5dc076b1781 100644 --- a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx +++ b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx @@ -19,11 +19,13 @@ import { STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE, } from '@opentrons/shared-data' +import { DeckInfoLabel } from '../../molecules/DeckInfoLabel' import { RobotCoordinateSpace } from '../RobotCoordinateSpace' import { Module } from '../Module' import { LabwareRender } from '../Labware' import { FlexTrash } from '../Deck/FlexTrash' import { DeckFromLayers } from '../Deck/DeckFromLayers' +import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject' import { SlotLabels } from '../Deck' import { COLORS } from '../../helix-design-system' @@ -55,6 +57,7 @@ export interface LabwareOnDeck { labwareChildren?: React.ReactNode onLabwareClick?: () => void highlight?: boolean + stacked?: boolean } export interface ModuleOnDeck { @@ -67,6 +70,7 @@ export interface ModuleOnDeck { moduleChildren?: React.ReactNode onLabwareClick?: () => void highlightLabware?: boolean + stacked?: boolean } interface BaseDeckProps { deckConfig: DeckConfiguration @@ -243,6 +247,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element { moduleChildren, onLabwareClick, highlightLabware, + stacked = false, }) => { const slotPosition = getPositionFromSlotId( moduleLocation.slotName, @@ -273,6 +278,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element { /> ) : null} {moduleChildren} + {stacked ? : null} ) : null } @@ -286,6 +292,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element { missingTips, onLabwareClick, highlight, + stacked = false, }) => { if ( labwareLocation === 'offDeck' || @@ -316,6 +323,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element { highlight={highlight} /> {labwareChildren} + {stacked ? : null} ) : null } @@ -325,3 +333,16 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element { ) } + +function StackedBadge(): JSX.Element { + return ( + + + + ) +} diff --git a/components/src/molecules/DeckInfoLabel/index.tsx b/components/src/molecules/DeckInfoLabel/index.tsx index 86666c3263f..3888029a55b 100644 --- a/components/src/molecules/DeckInfoLabel/index.tsx +++ b/components/src/molecules/DeckInfoLabel/index.tsx @@ -26,6 +26,7 @@ interface HardwareIconProps extends StyleProps { // type union requires one of deckLabel or iconName, but not both export type DeckInfoLabelProps = (DeckLabelProps | HardwareIconProps) & { highlight?: boolean + svgSize?: string | number } export const DeckInfoLabel = styled(DeckInfoLabelComponent)` @@ -42,8 +43,8 @@ export const DeckInfoLabel = styled(DeckInfoLabelComponent)` props.height ?? SPACING.spacing20}; // prevents the icon from being squished > svg { - height: 0.875rem; - width: 0.875rem; + height: ${props => props.svgSize ?? '0.875rem'}; + width: ${props => props.svgSize ?? '0.875rem'}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { @@ -53,8 +54,8 @@ export const DeckInfoLabel = styled(DeckInfoLabelComponent)` ${props => props.deckLabel != null ? SPACING.spacing8 : SPACING.spacing6}; > svg { - height: 1.25rem; - width: 1.25rem; + height: ${props => props.svgSize ?? '1.25rem'}; + width: ${props => props.svgSize ?? '1.25rem'}; } } `