Skip to content

Commit

Permalink
refactor to put highlights in 1 component
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerader
jerader committed Dec 17, 2024
1 parent a4f82e8 commit 86b1612
Show file tree
Hide file tree
Showing 11 changed files with 358 additions and 209 deletions.
2 changes: 2 additions & 0 deletions components/src/hardware-sim/Deck/DeckFromLayers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import { ALL_OT2_DECK_LAYERS } from './constants'

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

export * from './OT2Layers'

export interface DeckFromLayersProps {
robotType: RobotType
layerBlocklist: string[]
Expand Down
13 changes: 10 additions & 3 deletions components/src/hardware-sim/Deck/OT2Layers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { blue50 } from '../../helix-design-system/colors'

export function FixedBase(): JSX.Element {
return (
<g id="fixedBase">
Expand All @@ -14,15 +16,20 @@ export function FixedBase(): JSX.Element {
)
}

export function FixedTrash(): JSX.Element {
interface FixedTrashProps {
highlight?: boolean
}
export function FixedTrash(props: FixedTrashProps): JSX.Element {
const { highlight = false } = props
return (
<g id="fixedTrash">
<path
d="M441.107,289.57v135.86c0,8.368-6.808,15.176-15.176,15.176H283.07c-8.368,0-15.176-6.808-15.176-15.176V289.57c0-8.368,6.808-15.177,15.176-15.177h142.86C434.298,274.394,441.107,281.202,441.107,289.57z M425.053,434H283.947c-1.24,0-2.484-0.034-3.702-0.287c-2-0.416-3.81-1.446-4.884-3.227c-1.152-1.91-1.289-4.185-1.289-6.359v-88.629c0-2.683,0.259-5.609,2.263-7.612c2.004-2.003,4.928-2.263,7.612-2.263h25.939c1.693,0.006,3.545-0.167,4.807-1.429c1.262-1.262,1.435-3.115,1.429-4.807v-28.94c0-2.124,0.129-4.338,1.209-6.225c1.059-1.851,2.904-2.933,4.954-3.36c1.222-0.255,2.468-0.289,3.712-0.289h99.056c2.124,0,4.339,0.129,6.226,1.209c1.851,1.06,2.933,2.904,3.36,4.954c0.255,1.222,0.289,2.468,0.289,3.712v133.68c0,2.684-0.259,5.607-2.263,7.611C430.661,433.741,427.737,434,425.053,434z"
style={{
fill: 'rgb(237, 237, 237)',
stroke: 'none',
fill: highlight ? 'none' : 'rgb(237, 237, 237)',
stroke: highlight ? blue50 : 'none',
fillRule: 'evenodd',
strokeWidth: 2,
}}
></path>
</g>
Expand Down
72 changes: 0 additions & 72 deletions protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useMemo, useState, Fragment } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useTranslation } from 'react-i18next'
import round from 'lodash/round'
import {
ALIGN_CENTER,
Expand Down Expand Up @@ -36,10 +35,6 @@ import { getHasGen1MultiChannelPipette } from '../../../step-forms'
import { SlotDetailsContainer } from '../../../organisms'
import { selectZoomedIntoSlot } from '../../../labware-ingred/actions'
import { selectors } from '../../../labware-ingred/selectors'
import {
getHoveredDropdownItem,
getSelectedDropdownItem,
} from '../../../ui/steps/selectors'
import { DeckSetupDetails } from './DeckSetupDetails'
import { DECK_SETUP_TOOLS_WIDTH_REM, DeckSetupTools } from './DeckSetupTools'
import {
Expand Down Expand Up @@ -97,15 +92,12 @@ const LEFT_SLOTS = [

export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
const { tab } = props
const { t } = useTranslation('application')
const activeDeckSetup = useSelector(getDeckSetupForActiveItem)
const dispatch = useDispatch<any>()
const breakPointSize = useDeckSetupWindowBreakPoint()
const zoomIn = useSelector(selectors.getZoomedInSlot)
const _disableCollisionWarnings = useSelector(getDisableModuleRestrictions)
const robotType = useSelector(getRobotType)
const selectedTrashDropdownSelection = useSelector(getSelectedDropdownItem)
const hoveredTrashDropdownSelection = useSelector(getHoveredDropdownItem)
const deckDef = useMemo(() => getDeckDefFromRobotType(robotType), [robotType])
const [hoverSlot, setHoverSlot] = useState<DeckSlot | null>(null)
const trash = Object.values(activeDeckSetup.additionalEquipmentOnDeck).find(
Expand Down Expand Up @@ -221,19 +213,6 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
aa => isAddressableAreaStandardSlot(aa.id, deckDef)
)

const isTrashBinHovered =
hoveredTrashDropdownSelection?.id != null &&
hoveredTrashDropdownSelection.id.includes('trashBin')
const isTrashBinSelected = selectedTrashDropdownSelection.some(selected =>
selected.id?.includes('trashBin')
)
const isWasteChuteHovered =
hoveredTrashDropdownSelection?.id != null &&
hoveredTrashDropdownSelection.id.includes('wasteChute')
const isWasteChuteSelected = selectedTrashDropdownSelection.some(selected =>
selected.id?.includes('wasteChute')
)

return (
<Flex height="100%">
<Flex
Expand Down Expand Up @@ -330,23 +309,6 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
trashIconColor={lightFill}
trashCutoutId={cutoutId as TrashCutoutId}
backgroundColor={COLORS.grey50}
showHighlight={
isTrashBinHovered || isTrashBinSelected
}
tagInfo={
isTrashBinHovered || isTrashBinSelected
? [
{
text: isTrashBinSelected
? t('selected')
: t('select'),
isSelected: isTrashBinSelected,
isLast: true,
isZoomed: false,
},
]
: []
}
/>
</Fragment>
) : null
Expand All @@ -365,23 +327,6 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
}
deckDefinition={deckDef}
fixtureBaseColor={lightFill}
showHighlight={
isWasteChuteHovered || isWasteChuteSelected
}
tagInfo={
isWasteChuteHovered || isWasteChuteSelected
? [
{
text: isWasteChuteSelected
? t('selected')
: t('select'),
isSelected: isWasteChuteSelected,
isLast: true,
isZoomed: false,
},
]
: []
}
/>
)
}
Expand All @@ -400,23 +345,6 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
deckDefinition={deckDef}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
showHighlight={
isWasteChuteHovered ?? isWasteChuteSelected
}
tagInfo={
isWasteChuteHovered ?? isWasteChuteSelected
? [
{
text: isWasteChuteSelected
? t('selected')
: t('select'),
isSelected: isWasteChuteSelected,
isLast: true,
isZoomed: false,
},
]
: []
}
/>
)
}
Expand Down
45 changes: 2 additions & 43 deletions protocol-designer/src/pages/Designer/DeckSetup/DeckSetupDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { HoveredItems } from './HoveredItems'
import { SelectedHoveredItems } from './SelectedHoveredItems'
import { getAdjacentLabware } from './utils'
import { SlotWarning } from './SlotWarning'
import { HighlightItems } from './HighlightItems'

import type { ComponentProps, Dispatch, SetStateAction } from 'react'
import type { ThermocyclerVizProps } from '@opentrons/components'
Expand All @@ -52,8 +53,6 @@ import type {
} from '../../../step-forms'
import type { DeckSetupTabType } from '../types'
import type { Fixture } from './constants'
import { HighlightModule } from '../HighlightModule'
import { DeckItemHighlight } from './DeckItemHighlight'

interface DeckSetupDetailsProps extends DeckSetupTabType {
activeDeckSetup: InitialDeckSetup
Expand Down Expand Up @@ -256,12 +255,6 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
itemId={slotId}
tab={tab}
/>
<DeckItemHighlight
tab={tab}
slotBoundingBox={controlSelectDimensions}
slotPosition={[0, 0, 0]}
itemId={slotId}
/>
</>
) : null}

Expand All @@ -278,23 +271,9 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
itemId={slotId}
tab={tab}
/>
<DeckItemHighlight
tab={tab}
slotBoundingBox={labwareInterfaceBoundingBox}
slotPosition={[0, 0, 0]}
itemId={slotId}
/>
</>
) : null}
</Module>
<HighlightModule
moduleModel={moduleOnDeck.model}
moduleId={moduleOnDeck.id}
position={slotPosition}
orientation={inferModuleOrientationFromXCoordinate(
slotPosition[0]
)}
/>
</Fragment>
) : null
})}
Expand Down Expand Up @@ -348,15 +327,6 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
itemId={addressableArea.id}
tab={tab}
/>
<DeckItemHighlight
tab={tab}
slotBoundingBox={addressableArea.boundingBox}
slotPosition={getPositionFromSlotId(
addressableArea.id,
deckDef
)}
itemId={addressableArea.id}
/>
</Fragment>
)
})}
Expand Down Expand Up @@ -397,12 +367,6 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
itemId={labware.slot}
tab={tab}
/>
<DeckItemHighlight
tab={tab}
slotBoundingBox={slotBoundingBox}
slotPosition={slotPosition}
itemId={labware.slot}
/>
</Fragment>
) : null
})}
Expand Down Expand Up @@ -466,16 +430,11 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
itemId={slotOnDeck ?? ''}
tab={tab}
/>
<DeckItemHighlight
tab={tab}
slotBoundingBox={slotBoundingBox}
slotPosition={slotPosition}
itemId={slotOnDeck ?? ''}
/>
</Fragment>
)
})}

<HighlightItems robotType={robotType} deckDef={deckDef} />
{/* selected hardware + labware */}
<SelectedHoveredItems
deckDef={deckDef}
Expand Down
55 changes: 36 additions & 19 deletions protocol-designer/src/pages/Designer/DeckSetup/FixtureRender.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,23 @@ import { Fragment } from 'react'
import { useSelector } from 'react-redux'
import {
COLORS,
FixedTrash,
FlexTrash,
SingleSlotFixture,
StagingAreaFixture,
WasteChuteFixture,
WasteChuteStagingAreaFixture,
} from '@opentrons/components'
import { getPositionFromSlotId } from '@opentrons/shared-data'
import { OT2_ROBOT_TYPE, getPositionFromSlotId } from '@opentrons/shared-data'
import { getInitialDeckSetup } from '../../../step-forms/selectors'
import { LabwareOnDeck as LabwareOnDeckComponent } from '../../../organisms'
import { lightFill, darkFill } from './DeckSetupContainer'
import { getAdjacentLabware } from './utils'
import type { TrashCutoutId, StagingAreaLocation } from '@opentrons/components'
import type {
TrashCutoutId,
StagingAreaLocation,
DeckLabelProps,
} from '@opentrons/components'
import type {
CutoutId,
DeckDefinition,
Expand All @@ -27,9 +32,11 @@ interface FixtureRenderProps {
cutout: CutoutId
robotType: RobotType
deckDef: DeckDefinition
showHighlight?: boolean
tagInfo?: DeckLabelProps[]
}
export const FixtureRender = (props: FixtureRenderProps): JSX.Element => {
const { fixture, cutout, deckDef, robotType } = props
const { fixture, cutout, deckDef, robotType, showHighlight, tagInfo } = props
const deckSetup = useSelector(getInitialDeckSetup)
const { labware } = deckSetup
const adjacentLabware = getAdjacentLabware(fixture, cutout, labware)
Expand Down Expand Up @@ -61,22 +68,28 @@ export const FixtureRender = (props: FixtureRenderProps): JSX.Element => {
)
}
case 'trashBin': {
return (
<Fragment key={`fixtureRender_${fixture}`}>
<SingleSlotFixture
cutoutId={cutout}
deckDefinition={deckDef}
slotClipColor={COLORS.transparent}
fixtureBaseColor={lightFill}
/>
<FlexTrash
robotType={robotType}
trashIconColor={lightFill}
trashCutoutId={cutout as TrashCutoutId}
backgroundColor={COLORS.grey50}
/>
</Fragment>
)
if (robotType === OT2_ROBOT_TYPE && showHighlight) {
return <FixedTrash highlight />
} else {
return (
<Fragment key={`fixtureRender_${fixture}`}>
<SingleSlotFixture
cutoutId={cutout}
deckDefinition={deckDef}
slotClipColor={COLORS.transparent}
fixtureBaseColor={lightFill}
/>
<FlexTrash
robotType={robotType}
trashIconColor={lightFill}
trashCutoutId={cutout as TrashCutoutId}
backgroundColor={COLORS.grey50}
showHighlight={showHighlight}
tagInfo={tagInfo}
/>
</Fragment>
)
}
}
case 'wasteChute': {
return (
Expand All @@ -85,6 +98,8 @@ export const FixtureRender = (props: FixtureRenderProps): JSX.Element => {
cutoutId={cutout as typeof WASTE_CHUTE_CUTOUT}
deckDefinition={deckDef}
fixtureBaseColor={lightFill}
showHighlight={showHighlight}
tagInfo={tagInfo}
/>
)
}
Expand All @@ -95,6 +110,8 @@ export const FixtureRender = (props: FixtureRenderProps): JSX.Element => {
cutoutId={cutout as typeof WASTE_CHUTE_CUTOUT}
deckDefinition={deckDef}
fixtureBaseColor={lightFill}
showHighlight={showHighlight}
tagInfo={tagInfo}
/>
{renderLabwareOnDeck()}
</Fragment>
Expand Down
Loading

0 comments on commit 86b1612

Please sign in to comment.