Skip to content

Commit

Permalink
clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerader
jerader committed Sep 30, 2024
1 parent 8565666 commit 96b0d0b
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 66 deletions.
2 changes: 2 additions & 0 deletions protocol-designer/src/assets/localization/en/protocol_steps.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
"default_tip_option": "Default - get next tip",
"delete": "Delete step",
"dispensed": "Dispensed",
"in": "in",
"duplicate": "Duplicate step",
"final_deck_state": "Final deck state",
"from": "from",
"heater_shaker_settings": "Heater-shaker settings",
"mix": "Mix",
"module": "Module",
"multiAspirate": "Consolidate path",
"multiDispense": "Distribute path",
Expand Down
3 changes: 0 additions & 3 deletions protocol-designer/src/components/DeckSetup/LabwareOnDeck.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import * as highlightSelectors from '../../top-selectors/substep-highlight'
import * as tipContentsSelectors from '../../top-selectors/tip-contents'
import { wellFillFromWellContents } from '../labware/utils'
import type { LabwareOnDeck as LabwareOnDeckType } from '../../step-forms'
import { LabwareHighlight } from './LabwareOverlays/LabwareHighlight'

interface LabwareOnDeckProps {
className?: string
Expand Down Expand Up @@ -38,8 +37,6 @@ export function LabwareOnDeck(props: LabwareOnDeckProps): JSX.Element {

return (
<g transform={`translate(${x}, ${y})`} className={className}>
<LabwareHighlight labwareOnDeck={labwareOnDeck} />

<LabwareRender
definition={labwareOnDeck.def}
wellFill={wellFillFromWellContents(wellContents, liquidDisplayColors)}
Expand Down
4 changes: 3 additions & 1 deletion protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ export const LabwareControls = (props: LabwareControlsProps): JSX.Element => {
<RobotCoordsForeignDiv
{...{ x, y, width, height }}
innerDivProps={{
className: cx(styles.labware_controls),
className: cx(styles.labware_controls, {
[styles.can_edit]: canEdit,
}),
}}
>
<LabwareHighlight labwareOnDeck={labwareOnDeck} />
Expand Down
6 changes: 3 additions & 3 deletions protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareHighlight.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@ export const LabwareHighlight = (
[styles.highlight_fill]: isTcProfile,
})}
>
{/* {isTcProfile && ( */}
<Icon className={styles.thermocycler_icon} name={'ot-thermocycler'} />
{/* )} */}
{isTcProfile && (
<Icon className={styles.thermocycler_icon} name={'ot-thermocycler'} />
)}
</div>
)
}
Expand Down
160 changes: 101 additions & 59 deletions protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/Substep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,9 @@ function SubstepComponent(props: SubstepRowProps): JSX.Element {
type="default"
/>
)

const isMix = source?.well === dest?.well

return (
<Flex
onMouseEnter={() => {
Expand All @@ -89,80 +92,119 @@ function SubstepComponent(props: SubstepRowProps): JSX.Element {
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing4}
>
<ListItem type="noActive">
<Flex
gridGap={SPACING.spacing4}
padding={SPACING.spacing12}
justifyContent={JUSTIFY_SPACE_BETWEEN}
width="100%"
alignItems={ALIGN_CENTER}
>
{ingredIds.length > 0 ? (
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
<LiquidIcon color={color} size="medium" />
{isMix ? (
<ListItem type="noActive">
<Flex
gridGap={SPACING.spacing4}
padding={SPACING.spacing12}
justifyContent={JUSTIFY_SPACE_BETWEEN}
width="100%"
alignItems={ALIGN_CENTER}
>
{ingredIds.length > 0 ? (
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
<LiquidIcon color={color} size="medium" />

<StyledText desktopStyle="bodyDefaultRegular">
{ingredIds.map(groupId => ingredNames[groupId]).join(',')}
</StyledText>
</Flex>
) : null}

<StyledText desktopStyle="bodyDefaultRegular">
{ingredIds.map(groupId => ingredNames[groupId]).join(',')}
</StyledText>
</Flex>
) : null}
{source != null ? (
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
<StyledText desktopStyle="bodyDefaultRegular">
{t('protocol_steps:aspirated')}
{t('protocol_steps:mix')}
</StyledText>
{volumeTag}
<StyledText desktopStyle="bodyDefaultRegular">
{t('protocol_steps:from')}
{t('protocol_steps:in')}
</StyledText>
<DeckInfoLabel
deckLabel={t('protocol_steps:well_name', {
wellName: source.well,
wellName: source?.well ?? '',
})}
/>
</Flex>
) : null}
</Flex>
</ListItem>
<ListItem type="noActive">
<Flex
gridGap={SPACING.spacing4}
padding={SPACING.spacing12}
justifyContent={JUSTIFY_SPACE_BETWEEN}
width="100%"
alignItems={ALIGN_CENTER}
>
{ingredIds.length > 0 ? (
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
<LiquidIcon color={color} size="medium" />
<StyledText desktopStyle="bodyDefaultRegular">
{ingredIds.map(groupId => ingredNames[groupId]).join(',')}
</StyledText>
</Flex>
</ListItem>
) : (
<>
<ListItem type="noActive">
<Flex
gridGap={SPACING.spacing4}
padding={SPACING.spacing12}
justifyContent={JUSTIFY_SPACE_BETWEEN}
width="100%"
alignItems={ALIGN_CENTER}
>
{ingredIds.length > 0 ? (
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
<LiquidIcon color={color} size="medium" />

<StyledText desktopStyle="bodyDefaultRegular">
{ingredIds.map(groupId => ingredNames[groupId]).join(',')}
</StyledText>
</Flex>
) : null}
{source != null ? (
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
<StyledText desktopStyle="bodyDefaultRegular">
{t('protocol_steps:aspirated')}
</StyledText>
{volumeTag}
<StyledText desktopStyle="bodyDefaultRegular">
{t('protocol_steps:from')}
</StyledText>
<DeckInfoLabel
deckLabel={t('protocol_steps:well_name', {
wellName: source.well,
})}
/>
</Flex>
) : null}
</Flex>
) : null}
{dest != null || trashName != null ? (
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
<StyledText desktopStyle="bodyDefaultRegular">
{t('protocol_steps:dispensed')}
</StyledText>
{volumeTag}
<StyledText desktopStyle="bodyDefaultRegular">
{t('protocol_steps:into')}
</StyledText>
</ListItem>
<ListItem type="noActive">
<Flex
gridGap={SPACING.spacing4}
padding={SPACING.spacing12}
justifyContent={JUSTIFY_SPACE_BETWEEN}
width="100%"
alignItems={ALIGN_CENTER}
>
{ingredIds.length > 0 ? (
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
<LiquidIcon color={color} size="medium" />
<StyledText desktopStyle="bodyDefaultRegular">
{ingredIds.map(groupId => ingredNames[groupId]).join(',')}
</StyledText>
</Flex>
) : null}
{dest != null || trashName != null ? (
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
<StyledText desktopStyle="bodyDefaultRegular">
{t('protocol_steps:dispensed')}
</StyledText>
{volumeTag}
<StyledText desktopStyle="bodyDefaultRegular">
{t('protocol_steps:into')}
</StyledText>

<DeckInfoLabel
deckLabel={
dest?.well != null
? t('protocol_steps:well_name', {
wellName: dest.well,
})
: t(`shared:${trashName}`)
}
/>
<DeckInfoLabel
deckLabel={
dest?.well != null
? t('protocol_steps:well_name', {
wellName: dest.well,
})
: t(`shared:${trashName}`)
}
/>
</Flex>
) : null}
</Flex>
) : null}
</Flex>
</ListItem>
</ListItem>
</>
)}
</Flex>
)
}
Expand Down

0 comments on commit 96b0d0b

Please sign in to comment.