Skip to content

Commit

Permalink
Updates to styling, location column, off deck, module display
Browse files Browse the repository at this point in the history
  • Loading branch information
@smb2268
smb2268 committed Jul 19, 2024
1 parent 2d3e8ea commit 4067224
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 105 deletions.
196 changes: 120 additions & 76 deletions app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
ALIGN_CENTER,
BORDERS,
Btn,
LocationIcon,
COLORS,
DIRECTION_COLUMN,
DIRECTION_ROW,
Expand All @@ -14,10 +15,11 @@ import {
Icon,
JUSTIFY_CENTER,
JUSTIFY_SPACE_BETWEEN,
MODULE_ICON_NAME_BY_TYPE,
LabwareRender,
SIZE_AUTO,
SPACING,
LegacyStyledText,
StyledText,
TYPOGRAPHY,
WELL_LABEL_OPTIONS,
} from '@opentrons/components'
Expand All @@ -35,6 +37,7 @@ import {
} from '@opentrons/shared-data'

import { ToggleButton } from '../../../../atoms/buttons'
import { Divider } from '../../../../atoms/structure'
import { SecureLabwareModal } from './SecureLabwareModal'

import type {
Expand All @@ -58,7 +61,10 @@ const LabwareRow = styled.div`
border-width: 1px;
border-color: ${COLORS.grey30};
border-radius: ${BORDERS.borderRadius4};
padding: ${SPACING.spacing16};
padding: ${(SPACING.spacing12,
SPACING.spacing16,
SPACING.spacing12,
SPACING.spacing24)};
`

interface LabwareListItemProps extends LabwareSetupItem {
Expand Down Expand Up @@ -86,7 +92,7 @@ export function LabwareListItem(
nestedLabwareInfo,
showLabwareSVG,
} = props
const { t } = useTranslation('protocol_setup')
const { i18n, t } = useTranslation('protocol_setup')
const [
secureLabwareModalType,
setSecureLabwareModalType,
Expand All @@ -105,10 +111,14 @@ export function LabwareListItem(
'addressableAreaName' in initialLocation
) {
slotInfo = initialLocation.addressableAreaName
} else if (initialLocation === 'offDeck') {
slotInfo = i18n.format(t('off_deck'), 'upperCase')
}

let moduleDisplayName: string | null = null
let moduleType: ModuleType | null = null
let extraAttentionText: JSX.Element | null = null
let secureLabwareInstructions: JSX.Element | null = null
let isCorrectHeaterShakerAttached: boolean = false
let isHeaterShakerInProtocol: boolean = false
let latchCommand:
Expand Down Expand Up @@ -146,7 +156,7 @@ export function LabwareListItem(
moduleModel != null
) {
const moduleName = getModuleDisplayName(moduleModel)
const moduleType = getModuleType(moduleModel)
moduleType = getModuleType(moduleModel)
const moduleTypeNeedsAttention = extraAttentionModules.find(
extraAttentionModType => extraAttentionModType === moduleType
)
Expand All @@ -159,8 +169,8 @@ export function LabwareListItem(
switch (moduleTypeNeedsAttention) {
case MAGNETIC_MODULE_TYPE:
case THERMOCYCLER_MODULE_TYPE:
if (moduleModel !== THERMOCYCLER_MODULE_V2) {
extraAttentionText = (
if (moduleModel == THERMOCYCLER_MODULE_V2) {

Check failure on line 172 in app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx

View workflow job for this annotation

GitHub Actions / js checks 

Expected '===' and instead saw '=='
secureLabwareInstructions = (
<Btn
css={css`
color: ${COLORS.grey50};
Expand All @@ -173,19 +183,21 @@ export function LabwareListItem(
setSecureLabwareModalType(moduleType)
}}
>
<Flex flexDirection={DIRECTION_ROW}>
<Flex flexDirection={DIRECTION_ROW} width="15rem">
<Icon
name="information"
size="0.75rem"
marginTop={SPACING.spacing4}
color={COLORS.grey60}
/>
<LegacyStyledText
<StyledText
marginLeft={SPACING.spacing4}
as="p"
desktopStyle="bodyDefaultRegular"
textDecoration={TYPOGRAPHY.textDecorationUnderline}
color={COLORS.grey60}
>
{t('secure_labware_instructions')}
</LegacyStyledText>
</StyledText>
</Flex>
</Btn>
)
Expand All @@ -194,9 +206,9 @@ export function LabwareListItem(
case HEATERSHAKER_MODULE_TYPE:
isHeaterShakerInProtocol = true
extraAttentionText = (
<LegacyStyledText as="p" color={COLORS.grey50} maxWidth="15.25rem">
<StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
{t('heater_shaker_labware_list_view')}
</LegacyStyledText>
</StyledText>
)
const matchingHeaterShaker =
attachedModuleInfo != null &&
Expand Down Expand Up @@ -258,91 +270,123 @@ export function LabwareListItem(

return (
<LabwareRow>
<Flex alignItems={ALIGN_CENTER}>
<LegacyStyledText as="p" data-testid={`slot_info_${slotInfo}`}>
{slotInfo}
</LegacyStyledText>
<Flex alignItems={ALIGN_CENTER} width="80px" gridGap={SPACING.spacing2}>
{slotInfo != null && isFlex ? (
<LocationIcon slotName={slotInfo} />
) : (
{ slotInfo }
)}
{nestedLabwareInfo != null || moduleDisplayName != null ? (
<LocationIcon iconName="stacked" />
) : null}
</Flex>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
<Flex
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing16}
width="45.875rem"
>
<Flex>
{showLabwareSVG && <StandaloneLabware definition={definition} />}
<Flex
flexDirection={DIRECTION_COLUMN}
justifyContent={JUSTIFY_CENTER}
marginLeft={showLabwareSVG ? SPACING.spacing12 : SPACING.spacing8}
marginLeft={SPACING.spacing8}
marginRight={SPACING.spacing24}
>
<LegacyStyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
<StyledText desktopStyle="bodyDefaultSemiBold">
{labwareDisplayName}
</LegacyStyledText>
<LegacyStyledText as="p" color={COLORS.grey50}>
</StyledText>
<StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
{nickName}
</LegacyStyledText>
</StyledText>
</Flex>
</Flex>
{nestedLabwareInfo != null &&
nestedLabwareInfo?.sharedSlotId === slotInfo ? (
<Flex>
<Flex
flexDirection={DIRECTION_COLUMN}
justifyContent={JUSTIFY_CENTER}
marginLeft={SPACING.spacing8}
marginRight={SPACING.spacing24}
>
<LegacyStyledText
as="p"
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
<>
<Divider />
<Flex>
<Flex
flexDirection={DIRECTION_COLUMN}
justifyContent={JUSTIFY_CENTER}
marginLeft={SPACING.spacing8}
marginRight={SPACING.spacing24}
>
{nestedLabwareInfo.nestedLabwareDisplayName}
</LegacyStyledText>
<LegacyStyledText as="p" color={COLORS.grey50}>
{nestedLabwareInfo.nestedLabwareNickName}
</LegacyStyledText>
<StyledText desktopStyle="bodyDefaultSemiBold">
{nestedLabwareInfo.nestedLabwareDisplayName}
</StyledText>
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{nestedLabwareInfo.nestedLabwareNickName}
</StyledText>
</Flex>
</Flex>
</Flex>
</>
) : null}
</Flex>
<Flex
justifyContent={JUSTIFY_SPACE_BETWEEN}
alignItems={ALIGN_CENTER}
gridGap={SPACING.spacing8}
>
<Flex flexDirection={DIRECTION_COLUMN} justifyContent={JUSTIFY_CENTER}>
<LegacyStyledText as="p">
{moduleDisplayName != null
? moduleDisplayName
: t(initialLocation === 'offDeck' ? 'off_deck' : 'on_deck')}
</LegacyStyledText>
{extraAttentionText != null ? extraAttentionText : null}
</Flex>

{isHeaterShakerInProtocol ? (
<Flex flexDirection={DIRECTION_COLUMN}>
<LegacyStyledText as="h6" minWidth="6.2rem">
{t('labware_latch')}
</LegacyStyledText>
{moduleDisplayName != null ? (
<>
<Divider />
<Flex
flexDirection={DIRECTION_ROW}
alignItems={ALIGN_CENTER}
justifyContent={JUSTIFY_SPACE_BETWEEN}
marginTop="3px"
flexDirection={DIRECTION_ROW}
marginLeft={SPACING.spacing8}
paddingRight={SPACING.spacing24}
gridGap={SPACING.spacing8}
>
<ToggleButton
label={`heater_shaker_${
moduleLocation?.slotName ?? ''
}_latch_toggle`}
size={SIZE_AUTO}
disabled={!isCorrectHeaterShakerAttached || isLatchLoading}
toggledOn={isLatchClosed}
onClick={toggleLatch}
display={DISPLAY_FLEX}
alignItems={ALIGN_CENTER}
/>
<LegacyStyledText as="p" width="4rem">
{hsLatchText}
</LegacyStyledText>
<Flex gridGap={SPACING.spacing12} alignItems={ALIGN_CENTER}>
{moduleType != null ? (
<LocationIcon
iconName={MODULE_ICON_NAME_BY_TYPE[moduleType]}
/>
) : null}
<Flex
flexDirection={DIRECTION_COLUMN}
justifyContent={JUSTIFY_CENTER}
>
<StyledText desktopStyle="bodyDefaultSemiBold">
{moduleDisplayName}
</StyledText>
{extraAttentionText}
</Flex>
</Flex>
{secureLabwareInstructions}
{isHeaterShakerInProtocol ? (
<Flex flexDirection={DIRECTION_COLUMN} width="15rem">
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
minWidth="6.2rem"
>
{t('labware_latch')}
</StyledText>
<Flex
flexDirection={DIRECTION_ROW}
gridGap={SPACING.spacing4}
marginTop="3px"
>
<ToggleButton
label={`heater_shaker_${
moduleLocation?.slotName ?? ''
}_latch_toggle`}
size={SIZE_AUTO}
disabled={
!isCorrectHeaterShakerAttached || isLatchLoading
}
toggledOn={isLatchClosed}
onClick={toggleLatch}
display={DISPLAY_FLEX}
alignItems={ALIGN_CENTER}
/>
<StyledText desktopStyle="bodyDefaultRegular" width="4rem">
{hsLatchText}
</StyledText>
</Flex>
</Flex>
) : null}
</Flex>
</Flex>
</>
) : null}
</Flex>
{secureLabwareModalType != null && (
Expand Down
38 changes: 18 additions & 20 deletions app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ import {
DIRECTION_COLUMN,
Flex,
SPACING,
LegacyStyledText,
TYPOGRAPHY,
StyledText,
COLORS,
} from '@opentrons/components'
import { getLabwareSetupItemGroups } from '../../../../pages/Protocols/utils'
import {

Check failure on line 11 in app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareList.tsx

View workflow job for this annotation

GitHub Actions / js checks 

Import "LabwareSetupItem" is only used as types
getLabwareSetupItemGroups,
LabwareSetupItem,
} from '../../../../pages/Protocols/utils'
import { LabwareListItem } from './LabwareListItem'
import { OffDeckLabwareList } from './OffDeckLabwareList'
import { getNestedLabwareInfo } from './getNestedLabwareInfo'

import type { RunTimeCommand } from '@opentrons/shared-data'
Expand All @@ -20,8 +22,9 @@ import type { ModuleTypesThatRequireExtraAttention } from '../utils/getModuleTyp
const HeaderRow = styled.div`
display: grid;
grid-template-columns: 1fr 5.2fr 5.3fr;
grid-gap: ${SPACING.spacing8};
padding: ${SPACING.spacing8};
grid-gap: ${SPACING.spacing16};
padding-left: ${SPACING.spacing24};
padding-top: ${SPACING.spacing20};
`
interface SetupLabwareListProps {
attachedModuleInfo: { [moduleId: string]: ModuleRenderInfoForProtocol }
Expand All @@ -35,6 +38,9 @@ export function SetupLabwareList(
const { attachedModuleInfo, commands, extraAttentionModules, isFlex } = props
const { t } = useTranslation('protocol_setup')
const { offDeckItems, onDeckItems } = getLabwareSetupItemGroups(commands)
const allItems: LabwareSetupItem[] = []
allItems.push.apply(allItems, onDeckItems)
allItems.push.apply(allItems, offDeckItems)

return (
<Flex
Expand All @@ -43,18 +49,15 @@ export function SetupLabwareList(
marginBottom={SPACING.spacing16}
>
<HeaderRow>
<LegacyStyledText as="label" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
<StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
{t('location')}
</LegacyStyledText>
<LegacyStyledText as="label" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
</StyledText>
<StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
{t('labware_name')}
</LegacyStyledText>
<LegacyStyledText as="label" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
{t('placement')}
</LegacyStyledText>
</StyledText>
</HeaderRow>
{onDeckItems.map((labwareItem, index) => {
const labwareOnAdapter = onDeckItems.find(
{allItems.map((labwareItem, index) => {
const labwareOnAdapter = allItems.find(
item =>
labwareItem.initialLocation !== 'offDeck' &&
'labwareId' in labwareItem.initialLocation &&
Expand All @@ -72,11 +75,6 @@ export function SetupLabwareList(
/>
)
})}
<OffDeckLabwareList
commands={commands}
labwareItems={offDeckItems}
isFlex={isFlex}
/>
</Flex>
)
}
Loading

0 comments on commit 4067224

Please sign in to comment.