Skip to content

Commit

Permalink
fix labware stack svg, update tests, implement clickable stacks on OD…
Browse files Browse the repository at this point in the history 
…D and desktop
  • Loading branch information
@ncdiehl11
ncdiehl11 committed Aug 6, 2024
1 parent 8cb1a5b commit 2149918
Show file tree
Hide file tree
Showing 14 changed files with 430 additions and 270 deletions.
Binary file added app/src/assets/images/labware/opentrons_flex_96_tiprack_adapter.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 9 additions & 7 deletions app/src/atoms/buttons/FloatingActionButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import type { IconName, StyleProps } from '@opentrons/components'
interface FloatingActionButtonProps extends StyleProps {
buttonText?: React.ReactNode
disabled?: boolean
iconName?: IconName
iconName?: IconName | null
onClick: React.MouseEventHandler
}

Expand Down Expand Up @@ -78,12 +78,14 @@ export function FloatingActionButton(
flexDirection={DIRECTION_ROW}
gridGap={SPACING.spacing8}
>
<Icon
color={contentColor}
height="3rem"
name={iconName}
width="3.75rem"
/>
{iconName != null ? (
<Icon
color={contentColor}
height="3rem"
name={iconName}
width="3.75rem"
/>
) : null}
<LegacyStyledText>{buttonText}</LegacyStyledText>
</Flex>
</Btn>
Expand Down
2 changes: 1 addition & 1 deletion app/src/molecules/Modal/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { IconName, StyleProps } from '@opentrons/components'
export type ModalSize = 'small' | 'medium' | 'large'

export interface ModalHeaderBaseProps extends StyleProps {
title: string
title: string | JSX.Element
onClick?: React.MouseEventHandler
hasExitIcon?: boolean
iconName?: IconName
Expand Down
180 changes: 111 additions & 69 deletions app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
DeckInfoLabel,
DIRECTION_COLUMN,
Flex,
JUSTIFY_CENTER,
JUSTIFY_SPACE_BETWEEN,
LabwareStackRender,
SPACING,
Expand All @@ -23,6 +24,13 @@ import { getSlotLabwareDefinition } from '../utils/getSlotLabwareDefinition'
import { Divider } from '../../../../atoms/structure'
import { getModuleImage } from '../SetupModuleAndDeck/utils'
import { getModuleDisplayName } from '@opentrons/shared-data'
import tiprackAdapter from '../../../../assets/images/labware/opentrons_flex_96_tiprack_adapter.png'

const HIDE_SCROLLBAR = css`
::-webkit-scrollbar {
display: none;
}
`

interface LabwareStackModalProps {
labwareIdTop: string
Expand All @@ -49,58 +57,95 @@ export const LabwareStackModal = (
labwareName,
labwareNickname,
} = getLocationInfoNames(labwareIdTop, commands)
// working up to here

const topDefinition = getSlotLabwareDefinition(
labwareIdTop,
protocolData.commands
)
const isAdapterOnly =
adapterId == null && topDefinition.metadata.displayCategory === 'adapter'
const topDefinition = getSlotLabwareDefinition(labwareIdTop, commands)
const adapterDef = getSlotLabwareDefinition(adapterId ?? '', commands)
const moduleDisplayName =
moduleModel != null ? getModuleDisplayName(moduleModel) : null ?? ''
const tiprackAdapterImg = (
<img width="156px" height="130px" src={tiprackAdapter} />
)
const moduleImg =
moduleModel != null ? (
<img width="156px" height="140px" src={getModuleImage(moduleModel)} />
<img width="156px" height="130px" src={getModuleImage(moduleModel)} />
) : null
const HIDE_SCROLLBAR = css`
::-webkit-scrollbar {
display: none;
}
`

const adapterDef = getSlotLabwareDefinition(adapterId ?? '', commands)
return isOnDevice ? (
<Modal
modalSize="large"
onOutsideClick={closeModal}
header={{
title: labwareName,
title: (
<Flex gridGap={SPACING.spacing4}>
<DeckInfoLabel deckLabel={slotName} />
<DeckInfoLabel iconName="stacked" />
</Flex>
),
hasExitIcon: true,
onClick: closeModal,
}}
>
<Flex
flexDirection={DIRECTION_COLUMN}
height="23.70375rem"
css={HIDE_SCROLLBAR}
minWidth="10.313rem"
overflowY="scroll"
gridGap={SPACING.spacing16}
width="41.675rem"
>
{}
</Flex>
<Flex width="38.75rem">
<Flex marginLeft={SPACING.spacing32}>
<svg
viewBox="0.5 2.2 127 78"
height="100%"
width="100%"
transform="scale(1, -1)"
<>
<Flex
alignItems={ALIGN_CENTER}
height="6.875rem"
gridGap={SPACING.spacing32}
>
{}
</svg>
</Flex>
<LabwareStackLabel
isOnDevice
text={labwareName}
subText={labwareNickname}
/>
<LabwareStackRender
definitionTop={topDefinition}
definitionBottom={adapterDef}
highlightBottom={false}
highlightTop={true}
/>
</Flex>
<Divider marginY={SPACING.spacing16} />
</>
{adapterDef != null ? (
<>
<Flex
alignItems={ALIGN_CENTER}
height="6.875rem"
gridGap={SPACING.spacing32}
>
<LabwareStackLabel text={adapterName ?? ''} isOnDevice />
{adapterDef.parameters.loadName ===
'opentrons_flex_96_tiprack_adapter' ? (
tiprackAdapterImg
) : (
<LabwareStackRender
definitionTop={topDefinition}
definitionBottom={adapterDef}
highlightBottom={true}
highlightTop={false}
/>
)}
</Flex>
{moduleModel != null ? (
<Divider marginY={SPACING.spacing16} />
) : null}
</>
) : null}
{moduleModel != null ? (
<Flex
alignItems={ALIGN_CENTER}
height="6.875rem"
gridGap={SPACING.spacing32}
>
<LabwareStackLabel text={moduleDisplayName} isOnDevice />
{moduleImg}
</Flex>
) : null}
</Flex>
</Modal>
) : (
Expand All @@ -115,60 +160,41 @@ export const LabwareStackModal = (
</Flex>
}
childrenPadding={0}
width="31.25rem"
>
<Box
padding={SPACING.spacing24}
backgroundColor={COLORS.white}
height="28.125rem"
>
<Box padding={SPACING.spacing24} backgroundColor={COLORS.white}>
<Flex flexDirection={DIRECTION_COLUMN}>
<>
<Flex
alignItems={ALIGN_CENTER}
justifyContent={JUSTIFY_SPACE_BETWEEN}
height="6.875rem"
gridGap={SPACING.spacing32}
>
<LabwareStackLabel text={labwareName} subText={labwareNickname} />
<svg
viewBox="-150 -120 300 300"
transform={
isAdapterOnly ? 'scale(1.25, -1.25)' : 'scale(1.25, -0.75)'
}
>
<LabwareStackRender
definitionTop={topDefinition}
definitionBottom={adapterDef}
highlightBottom={false}
highlightTop={true}
/>
</svg>
<LabwareStackRender
definitionTop={topDefinition}
definitionBottom={adapterDef}
highlightBottom={false}
highlightTop={true}
/>
</Flex>
<Divider marginY={SPACING.spacing16} />
</>
{adapterDef != null ? (
<>
<Flex
alignItems={ALIGN_CENTER}
justifyContent={JUSTIFY_SPACE_BETWEEN}
height="6.875rem"
gridGap={SPACING.spacing32}
>
<LabwareStackLabel text={adapterName ?? ''} />
<svg
viewBox="-150 -120 300 300"
transform={'scale(1.25, -0.75)'}
>
<LabwareStackRender
definitionTop={topDefinition}
definitionBottom={adapterDef}
highlightBottom={true}
highlightTop={false}
/>
</svg>
<LabwareStackRender
definitionTop={topDefinition}
definitionBottom={adapterDef}
highlightBottom={true}
highlightTop={false}
/>
</Flex>
{moduleModel != null ? (
<Divider marginY={SPACING.spacing16} />
) : null}
<Divider marginY={SPACING.spacing16} />
</>
) : null}
{moduleModel != null ? (
Expand All @@ -190,15 +216,31 @@ export const LabwareStackModal = (
interface LabwareStackLabelProps {
text: string
subText?: string
isOnDevice?: boolean
}
function LabwareStackLabel(props: LabwareStackLabelProps): JSX.Element {
const { text, subText } = props
return (
const { text, subText, isOnDevice = false } = props
return isOnDevice ? (
<Flex
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing4}
width="28rem"
flex="0 0 auto"
justifyContent={JUSTIFY_CENTER}
>
<StyledText oddStyle="bodyTextBold">{text}</StyledText>
{subText != null ? (
<StyledText oddStyle="bodyTextRegular" color={COLORS.grey60}>
{subText}
</StyledText>
) : null}
</Flex>
) : (
<Flex
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing4}
minWidth="14.75rem"
maxWidth="14.75rem"
width="14.75rem"
flex="0 0 auto"
>
<StyledText desktopStyle="bodyLargeSemiBold">{text}</StyledText>
{subText != null ? (
Expand Down
4 changes: 2 additions & 2 deletions app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@ export function SetupLabwareMap({
protocolAnalysis,
}: SetupLabwareMapProps): JSX.Element | null {
// early return null if no protocol analysis
if (protocolAnalysis == null) return null

const [
labwareStackDetailsLabwareId,
setLabwareStackDetailsLabwareId,
] = React.useState<string | null>(null)

if (protocolAnalysis == null) return null

const commands = protocolAnalysis.commands

const robotType = protocolAnalysis.robotType ?? FLEX_ROBOT_TYPE
Expand Down
2 changes: 2 additions & 0 deletions app/src/organisms/Devices/ProtocolRun/utils/__tests__/getLocationInfoNames.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ describe('getLocationInfoNames', () => {
labwareName: LABWARE_DISPLAY_NAME,
moduleModel: MOCK_MODEL,
adapterName: ADAPTER_DISPLAY_NAME,
adapterId: ADAPTER_ID,
}
expect(
getLocationInfoNames(LABWARE_ID, MOCK_ADAPTER_MOD_COMMANDS as any)
Expand All @@ -161,6 +162,7 @@ describe('getLocationInfoNames', () => {
slotName: SLOT,
labwareName: LABWARE_DISPLAY_NAME,
adapterName: ADAPTER_DISPLAY_NAME,
adapterId: ADAPTER_ID,
}
expect(
getLocationInfoNames(LABWARE_ID, MOCK_ADAPTER_COMMANDS as any)
Expand Down
Loading

0 comments on commit 2149918

Please sign in to comment.