Skip to content

Commit

Permalink
use DeckFromLayers for OT-2 in BaseDeck
Browse files Browse the repository at this point in the history
  • Loading branch information
@brenthagen
brenthagen committed Nov 7, 2023
1 parent 4df8020 commit d1fa782
Show file tree
Hide file tree
Showing 12 changed files with 230 additions and 165 deletions.
1 change: 1 addition & 0 deletions app/src/organisms/CalibrationPanels/DeckSetup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ export function DeckSetup(props: CalibrationPanelProps): JSX.Element {
'fixedTrash',
]}
deckDef={deckDef}
showDeckLayers
viewBox={`-46 -10 ${488} ${390}`} // TODO: put these in variables
>
{({ deckSlotsById }) =>
Expand Down
6 changes: 4 additions & 2 deletions app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,8 +196,10 @@ export function MoveLabwareInterventionContent({
movedLabwareDef={movedLabwareDef}
loadedModules={run.modules}
loadedLabware={run.labware}
// TODO(bh, 2023-07-19): read trash slot name from protocol
trashLocation={robotType === 'OT-3 Standard' ? 'A3' : undefined}
// TODO(bh, 2023-07-19): remove when StyledDeck removed from MoveLabwareOnDeck
trashLocation={
robotType === 'OT-3 Standard' ? 'cutoutA3' : undefined
}
backgroundItems={
<>
{moduleRenderInfo.map(
Expand Down
237 changes: 120 additions & 117 deletions components/src/hardware-sim/BaseDeck/BaseDeck.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
getModuleDef2,
getPositionFromSlotId,
inferModuleOrientationFromXCoordinate,
// OT2_ROBOT_TYPE,
OT2_ROBOT_TYPE,
STAGING_AREA_LOAD_NAME,
STANDARD_SLOT_LOAD_NAME,
TRASH_BIN_LOAD_NAME,
Expand All @@ -16,7 +16,7 @@ import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
import { Module } from '../Module'
import { LabwareRender } from '../Labware'
import { FlexTrash } from '../Deck/FlexTrash'
// import { DeckFromData } from '../Deck/DeckFromData'
import { DeckFromLayers } from '../Deck/DeckFromLayers'
import { SlotLabels } from '../Deck'
import { COLORS } from '../../ui-style-constants'

Expand Down Expand Up @@ -74,7 +74,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
labwareLocations,
lightFill = COLORS.light1,
darkFill = COLORS.darkGreyEnabled,
// deckLayerBlocklist = [],
deckLayerBlocklist = [],
// TODO(bh, 2023-10-09): remove deck config fixture for Flex after migration to v4
// deckConfig = EXTENDED_DECK_CONFIG_FIXTURE,
deckConfig = STANDARD_SLOT_DECK_CONFIG_FIXTURE,
Expand All @@ -83,12 +83,6 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
} = props
const deckDef = getDeckDefFromRobotType(robotType)

// TODO: shift to V4 for OT-2
// const deckDef =
// robotType === OT2_ROBOT_TYPE
// ? getDeckDefFromRobotType(robotType)
// : ((ot3DeckDefV4 as unknown) as DeckDefinitionV4)

const singleSlotFixtures = deckConfig.filter(
fixture => fixture.loadName === STANDARD_SLOT_LOAD_NAME
)
Expand All @@ -108,128 +102,137 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
<RobotCoordinateSpace
viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
>
{/* {robotType === OT2_ROBOT_TYPE && 'layers' in deckDef ? (
// TODO: migrate OT-2 to v4 deck definition
<DeckFromData def={deckDef} layerBlocklist={deckLayerBlocklist} />
) : */}
<>
{singleSlotFixtures.map(fixture => (
<SingleSlotFixture
key={fixture.fixtureId}
cutoutLocation={fixture.fixtureLocation}
deckDefinition={deckDef}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
showExpansion={showExpansion}
/>
))}
{stagingAreaFixtures.map(fixture => (
<StagingAreaFixture
key={fixture.fixtureId}
// TODO(bh, 2023-10-09): typeguard fixture location
cutoutLocation={fixture.fixtureLocation as StagingAreaLocation}
deckDefinition={deckDef}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
/>
))}
{trashBinFixtures.map(fixture => (
<React.Fragment key={fixture.fixtureId}>
{robotType === OT2_ROBOT_TYPE ? (
<DeckFromLayers
robotType={robotType}
layerBlocklist={deckLayerBlocklist}
/>
) : (
<>
{singleSlotFixtures.map(fixture => (
<SingleSlotFixture
key={fixture.fixtureId}
cutoutLocation={fixture.fixtureLocation}
deckDefinition={deckDef}
slotClipColor={COLORS.transparent}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
showExpansion={showExpansion}
/>
<FlexTrash
))}
{stagingAreaFixtures.map(fixture => (
<StagingAreaFixture
key={fixture.fixtureId}
// TODO(bh, 2023-10-09): typeguard fixture location
cutoutLocation={fixture.fixtureLocation as StagingAreaLocation}
deckDefinition={deckDef}
robotType={robotType}
trashIconColor={lightFill}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
/>
))}
{trashBinFixtures.map(fixture => (
<React.Fragment key={fixture.fixtureId}>
<SingleSlotFixture
cutoutLocation={fixture.fixtureLocation}
deckDefinition={deckDef}
slotClipColor={COLORS.transparent}
fixtureBaseColor={lightFill}
/>
<FlexTrash
robotType={robotType}
trashIconColor={lightFill}
// TODO(bh, 2023-10-09): typeguard fixture location
trashLocation={fixture.fixtureLocation as TrashLocation}
backgroundColor={darkFill}
/>
</React.Fragment>
))}
{wasteChuteFixtures.map(fixture => (
<WasteChuteFixture
key={fixture.fixtureId}
// TODO(bh, 2023-10-09): typeguard fixture location
trashLocation={fixture.fixtureLocation as TrashLocation}
backgroundColor={darkFill}
cutoutLocation={
fixture.fixtureLocation as typeof WASTE_CHUTE_CUTOUT
}
deckDefinition={deckDef}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
/>
</React.Fragment>
))}
{wasteChuteFixtures.map(fixture => (
<WasteChuteFixture
key={fixture.fixtureId}
// TODO(bh, 2023-10-09): typeguard fixture location
cutoutLocation={
fixture.fixtureLocation as typeof WASTE_CHUTE_CUTOUT
))}
</>
)}
<>
{moduleLocations.map(
({
moduleModel,
moduleLocation,
nestedLabwareDef,
innerProps,
moduleChildren,
onLabwareClick,
}) => {
const slotPosition = getPositionFromSlotId(
moduleLocation.slotName,
deckDef
)

const moduleDef = getModuleDef2(moduleModel)
return slotPosition != null ? (
<Module
key={`${moduleModel} ${moduleLocation.slotName}`}
def={moduleDef}
x={slotPosition[0]}
y={slotPosition[1]}
orientation={inferModuleOrientationFromXCoordinate(
slotPosition[0]
)}
innerProps={innerProps}
>
{nestedLabwareDef != null ? (
<LabwareRender
definition={nestedLabwareDef}
onLabwareClick={onLabwareClick}
/>
) : null}
{moduleChildren}
</Module>
) : null
}
)}
{labwareLocations.map(
({
labwareLocation,
definition,
labwareChildren,
onLabwareClick,
}) => {
if (
labwareLocation === 'offDeck' ||
!('slotName' in labwareLocation)
) {
return null
}
deckDefinition={deckDef}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
/>
))}
</>
{moduleLocations.map(
({
moduleModel,
moduleLocation,
nestedLabwareDef,
innerProps,
moduleChildren,
onLabwareClick,
}) => {
const slotPosition = getPositionFromSlotId(
moduleLocation.slotName,
deckDef
)

const moduleDef = getModuleDef2(moduleModel)
return slotPosition != null ? (
<Module
key={`${moduleModel} ${moduleLocation.slotName}`}
def={moduleDef}
x={slotPosition[0]}
y={slotPosition[1]}
orientation={inferModuleOrientationFromXCoordinate(
slotPosition[0]
)}
innerProps={innerProps}
>
{nestedLabwareDef != null ? (
const slotPosition = getPositionFromSlotId(
labwareLocation.slotName,
deckDef
)

return slotPosition != null ? (
<g
key={labwareLocation.slotName}
transform={`translate(${slotPosition[0].toString()},${slotPosition[1].toString()})`}
>
<LabwareRender
definition={nestedLabwareDef}
definition={definition}
onLabwareClick={onLabwareClick}
/>
) : null}
{moduleChildren}
</Module>
) : null
}
)}
{labwareLocations.map(
({ labwareLocation, definition, labwareChildren, onLabwareClick }) => {
if (
labwareLocation === 'offDeck' ||
!('slotName' in labwareLocation)
) {
return null
{labwareChildren}
</g>
) : null
}

const slotPosition = getPositionFromSlotId(
labwareLocation.slotName,
deckDef
)

return slotPosition != null ? (
<g
key={labwareLocation.slotName}
transform={`translate(${slotPosition[0].toString()},${slotPosition[1].toString()})`}
>
<LabwareRender
definition={definition}
onLabwareClick={onLabwareClick}
/>
{labwareChildren}
</g>
) : null
}
)}
<SlotLabels robotType={robotType} color={darkFill} />
)}
<SlotLabels robotType={robotType} color={darkFill} />
</>
{children}
</RobotCoordinateSpace>
)
Expand Down
26 changes: 20 additions & 6 deletions ...ts/src/hardware-sim/Deck/DeckFromData.tsx → .../src/hardware-sim/Deck/DeckFromLayers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,14 @@ import * as React from 'react'
import parseHtml from 'html-react-parser'
import { stringify } from 'svgson'

import ot2DeckDefV3 from '@opentrons/shared-data/deck/definitions/3/ot2_standard.json'
import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'

import type { INode } from 'svgson'
import type { DeckDefinition } from '@opentrons/shared-data'
import type { RobotType } from '@opentrons/shared-data'

export interface DeckFromDataProps {
def: DeckDefinition
export interface DeckFromLayersProps {
robotType: RobotType
layerBlocklist: string[]
}

Expand All @@ -27,10 +30,21 @@ function filterLayerGroupNodes(
}, [])
}

export function DeckFromData(props: DeckFromDataProps): JSX.Element {
const { def, layerBlocklist = [] } = props
/**
* a component that renders an OT-2 deck from the V3 deck definition layers property
* takes a robot type prop to protect against an attempted Flex render
*/
export function DeckFromLayers(props: DeckFromLayersProps): JSX.Element | null {
const { robotType, layerBlocklist = [] } = props

// early return null if not OT-2
if (robotType !== OT2_ROBOT_TYPE) return null

const layerGroupNodes = filterLayerGroupNodes(def.layers, layerBlocklist)
// get layers from OT-2 deck definition v3
const layerGroupNodes = filterLayerGroupNodes(
ot2DeckDefV3.layers,
layerBlocklist
)

const groupNodeWrapper = {
name: 'g',
Expand Down
13 changes: 9 additions & 4 deletions components/src/hardware-sim/Deck/FlexTrash.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import * as React from 'react'

import {
FLEX_ROBOT_TYPE,
getDeckDefFromRobotType,
} from '@opentrons/shared-data'

import { Icon } from '../../icons'
import { Flex, Text } from '../../primitives'
import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
Expand All @@ -8,7 +13,7 @@ import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'

import trashDef from '@opentrons/shared-data/labware/definitions/2/opentrons_1_trash_3200ml_fixed/1.json'

import type { DeckDefinition, RobotType } from '@opentrons/shared-data'
import type { RobotType } from '@opentrons/shared-data'

// only allow edge cutout locations (columns 1 and 3)
export type TrashLocation =
Expand All @@ -22,7 +27,6 @@ export type TrashLocation =
| 'cutoutD3'

interface FlexTrashProps {
deckDefinition: DeckDefinition
robotType: RobotType
trashIconColor: string
backgroundColor: string
Expand All @@ -34,14 +38,15 @@ interface FlexTrashProps {
* For use as a RobotWorkspace child component
*/
export const FlexTrash = ({
deckDefinition,
robotType,
trashIconColor,
backgroundColor,
trashLocation,
}: FlexTrashProps): JSX.Element | null => {
// be sure we don't try to render for an OT-2
if (robotType !== 'OT-3 Standard') return null
if (robotType !== FLEX_ROBOT_TYPE) return null

const deckDefinition = getDeckDefFromRobotType(robotType)

const trashSlot = deckDefinition.locations.cutouts.find(

Check warning on line 51 in components/src/hardware-sim/Deck/FlexTrash.tsx

View check run for this annotation

Codecov / codecov/patch

components/src/hardware-sim/Deck/FlexTrash.tsx#L51 

Added line #L51 was not covered by tests
slot => slot.id === trashLocation
Expand Down
Loading

0 comments on commit d1fa782

Please sign in to comment.