Skip to content

Commit

Permalink
refactor(app): make on device display deck configurator updates live (#…
Browse files Browse the repository at this point in the history
…15202)

Instead of the previous method of staging a batch of changes to deck
configuration before commiting
them with the confirm button, to avoid synchronization issues, make the
ODD deck configurator behave
like the desktop version. all updates immediately permeate to the
robot's source of truth

Re: https://opentrons.atlassian.net/browse/RQA-2669
  • Loading branch information
b-cooper authored May 16, 2024
1 parent 76cbb52 commit bb1f1ce
Show file tree
Hide file tree
Showing 11 changed files with 202 additions and 299 deletions.
1 change: 1 addition & 0 deletions app/src/assets/localization/en/shared.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
"robot_is_busy": "Robot is busy",
"robot_is_reachable_but_not_responding": "This robot's API server is not responding correctly to requests at IP address {{hostname}}",
"robot_was_seen_but_is_unreachable": "This robot has been seen recently, but is currently not reachable at IP address {{hostname}}",
"save": "save",
"something_went_wrong": "something went wrong",
"sort_by": "Sort by",
"stand_back_robot_is_in_motion": "Stand back, robot is in motion",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,6 @@ const Template: Story<React.ComponentProps<typeof AddFixtureModal>> = args => (
export const Default = Template.bind({})
Default.args = {
fixtureLocation: 'cutoutD3',
setShowAddFixtureModal: () => {},
closeModal: () => {},
isOnDevice: true,
}
Original file line number Diff line number Diff line change
Expand Up @@ -54,15 +54,13 @@ import type {
CutoutConfig,
CutoutId,
CutoutFixtureId,
DeckConfiguration,
} from '@opentrons/shared-data'
import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
import type { LegacyModalProps } from '../../molecules/LegacyModal'

interface AddFixtureModalProps {
cutoutId: CutoutId
setShowAddFixtureModal: (showAddFixtureModal: boolean) => void
setCurrentDeckConfig?: React.Dispatch<React.SetStateAction<CutoutConfig[]>>
closeModal: () => void
providedFixtureOptions?: CutoutFixtureId[]
isOnDevice?: boolean
}
Expand All @@ -75,8 +73,7 @@ type OptionStage =

export function AddFixtureModal({
cutoutId,
setShowAddFixtureModal,
setCurrentDeckConfig,
closeModal,
providedFixtureOptions,
isOnDevice = false,
}: AddFixtureModalProps): JSX.Element {
Expand Down Expand Up @@ -109,18 +106,14 @@ export function AddFixtureModal({
slotName: getCutoutDisplayName(cutoutId),
}),
hasExitIcon: providedFixtureOptions == null,
onClick: () => {
setShowAddFixtureModal(false)
},
onClick: closeModal,
}

const modalProps: LegacyModalProps = {
title: t('add_to_slot', {
slotName: getCutoutDisplayName(cutoutId),
}),
onClose: () => {
setShowAddFixtureModal(false)
},
onClose: closeModal,
closeOnOutsideClick: true,
childrenPadding: SPACING.spacing24,
width: '26.75rem',
Expand Down Expand Up @@ -289,22 +282,7 @@ export function AddFixtureModal({
)
}

const handleAddODD = (addedCutoutConfigs: CutoutConfig[]): void => {
if (setCurrentDeckConfig != null)
setCurrentDeckConfig(
(prevDeckConfig: DeckConfiguration): DeckConfiguration =>
prevDeckConfig.map((fixture: CutoutConfig) => {
const replacementCutoutConfig = addedCutoutConfigs.find(
c => c.cutoutId === fixture.cutoutId
)
return replacementCutoutConfig ?? fixture
})
)

setShowAddFixtureModal(false)
}

const handleAddDesktop = (addedCutoutConfigs: CutoutConfig[]): void => {
const handleAddFixture = (addedCutoutConfigs: CutoutConfig[]): void => {
const newDeckConfig = deckConfig.map(fixture => {
const replacementCutoutConfig = addedCutoutConfigs.find(
c => c.cutoutId === fixture.cutoutId
Expand All @@ -313,7 +291,7 @@ export function AddFixtureModal({
})

updateDeckConfiguration(newDeckConfig)
setShowAddFixtureModal(false)
closeModal()
}

const fixtureOptions = availableOptions.map(cutoutConfigs => (
Expand All @@ -327,9 +305,7 @@ export function AddFixtureModal({
)}
buttonText={t('add')}
onClickHandler={() => {
isOnDevice
? handleAddODD(cutoutConfigs)
: handleAddDesktop(cutoutConfigs)
handleAddFixture(cutoutConfigs)
}}
isOnDevice={isOnDevice}
/>
Expand All @@ -341,9 +317,7 @@ export function AddFixtureModal({
<Modal
header={modalHeader}
onOutsideClick={() =>
providedFixtureOptions != null
? null
: setShowAddFixtureModal(false)
providedFixtureOptions != null ? null : closeModal()
}
>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,8 @@ import type { Modules } from '@opentrons/api-client'
vi.mock('@opentrons/react-api-client')
vi.mock('../../../resources/deck_configuration')

const mockSetShowAddFixtureModal = vi.fn()
const mockCloseModal = vi.fn()
const mockUpdateDeckConfiguration = vi.fn()
const mockSetCurrentDeckConfig = vi.fn()

const render = (props: React.ComponentProps<typeof AddFixtureModal>) => {
return renderWithProviders(<AddFixtureModal {...props} />, {
Expand All @@ -39,8 +38,7 @@ describe('Touchscreen AddFixtureModal', () => {
beforeEach(() => {
props = {
cutoutId: 'cutoutD3',
setShowAddFixtureModal: mockSetShowAddFixtureModal,
setCurrentDeckConfig: mockSetCurrentDeckConfig,
closeModal: mockCloseModal,
isOnDevice: true,
}
vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({
Expand Down Expand Up @@ -69,7 +67,6 @@ describe('Touchscreen AddFixtureModal', () => {
render(props)
fireEvent.click(screen.getAllByText('Select options')[1])
fireEvent.click(screen.getAllByText('Add')[0])
expect(mockSetCurrentDeckConfig).toHaveBeenCalled()
})

it('when fixture options are provided, should only render those options', () => {
Expand All @@ -96,7 +93,7 @@ describe('Desktop AddFixtureModal', () => {
beforeEach(() => {
props = {
cutoutId: 'cutoutD3',
setShowAddFixtureModal: mockSetShowAddFixtureModal,
closeModal: mockCloseModal,
}
vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({
updateDeckConfiguration: mockUpdateDeckConfiguration,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ import { fireEvent, screen } from '@testing-library/react'
import { when } from 'vitest-when'
import { describe, it, beforeEach, vi, afterEach } from 'vitest'

import {
DeckConfiguration,
TRASH_BIN_ADAPTER_FIXTURE,
} from '@opentrons/shared-data'
import { DeckConfigurator } from '@opentrons/components'
import {
useModulesQuery,
Expand All @@ -16,8 +20,12 @@ import { DeckFixtureSetupInstructionsModal } from '../DeckFixtureSetupInstructio
import { useIsEstopNotDisengaged } from '../../../resources/devices/hooks/useIsEstopNotDisengaged'
import { DeviceDetailsDeckConfiguration } from '../'
import { useNotifyCurrentMaintenanceRun } from '../../../resources/maintenance_runs'
import { useNotifyDeckConfigurationQuery } from '../../../resources/deck_configuration'
import {
useDeckConfigurationEditingTools,
useNotifyDeckConfigurationQuery,
} from '../../../resources/deck_configuration'

import type { UseQueryResult } from 'react-query'
import type { MaintenanceRun } from '@opentrons/api-client'
import type * as OpentronsComponents from '@opentrons/components'

Expand All @@ -35,6 +43,12 @@ vi.mock('../../../resources/maintenance_runs')
vi.mock('../../../resources/devices/hooks/useIsEstopNotDisengaged')
vi.mock('../../../resources/deck_configuration')

const mockDeckConfig = [
{
cutoutId: 'cutoutC3',
cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
},
]
const ROBOT_NAME = 'otie'
const mockUpdateDeckConfiguration = vi.fn()
const RUN_STATUSES = {
Expand Down Expand Up @@ -63,9 +77,6 @@ describe('DeviceDetailsDeckConfiguration', () => {
robotName: ROBOT_NAME,
}
vi.mocked(useModulesQuery).mockReturnValue({ data: { data: [] } } as any)
vi.mocked(useNotifyDeckConfigurationQuery).mockReturnValue({
data: [],
} as any)
vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({
updateDeckConfiguration: mockUpdateDeckConfiguration,
} as any)
Expand All @@ -83,6 +94,14 @@ describe('DeviceDetailsDeckConfiguration', () => {
.calledWith(ROBOT_NAME)
.thenReturn(false)
when(vi.mocked(useIsRobotViewable)).calledWith(ROBOT_NAME).thenReturn(true)
vi.mocked(useNotifyDeckConfigurationQuery).mockReturnValue({
data: mockDeckConfig,
} as UseQueryResult<DeckConfiguration>)
vi.mocked(useDeckConfigurationEditingTools).mockReturnValue({
addFixtureToCutout: vi.fn(),
removeFixtureFromCutout: vi.fn(),
addFixtureModal: null,
})
})

afterEach(() => {
Expand Down Expand Up @@ -132,7 +151,9 @@ describe('DeviceDetailsDeckConfiguration', () => {
})

it('should render no deck fixtures, if deck configs are not set', () => {
vi.mocked(useNotifyDeckConfigurationQuery).mockReturnValue([] as any)
vi.mocked(useNotifyDeckConfigurationQuery).mockReturnValue({
data: [],
} as any)
render(props)
screen.getByText('No deck fixtures')
})
Expand Down
94 changes: 14 additions & 80 deletions app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,32 +19,26 @@ import {
StyledText,
TYPOGRAPHY,
} from '@opentrons/components'
import {
useModulesQuery,
useUpdateDeckConfigurationMutation,
} from '@opentrons/react-api-client'
import { useModulesQuery } from '@opentrons/react-api-client'
import {
getCutoutDisplayName,
getFixtureDisplayName,
SINGLE_RIGHT_CUTOUTS,
SINGLE_SLOT_FIXTURES,
SINGLE_LEFT_SLOT_FIXTURE,
SINGLE_RIGHT_SLOT_FIXTURE,
SINGLE_CENTER_SLOT_FIXTURE,
SINGLE_LEFT_CUTOUTS,
getDeckDefFromRobotType,
FLEX_ROBOT_TYPE,
} from '@opentrons/shared-data'

import { useNotifyCurrentMaintenanceRun } from '../../resources/maintenance_runs'
import { Banner } from '../../atoms/Banner'
import { DeckFixtureSetupInstructionsModal } from './DeckFixtureSetupInstructionsModal'
import { AddFixtureModal } from './AddFixtureModal'
import { useIsRobotViewable, useRunStatuses } from '../Devices/hooks'
import { useIsEstopNotDisengaged } from '../../resources/devices/hooks/useIsEstopNotDisengaged'
import { useNotifyDeckConfigurationQuery } from '../../resources/deck_configuration'
import {
useDeckConfigurationEditingTools,
useNotifyDeckConfigurationQuery,
} from '../../resources/deck_configuration'

import type { CutoutFixtureId, CutoutId } from '@opentrons/shared-data'
import type { CutoutId } from '@opentrons/shared-data'

const DECK_CONFIG_REFETCH_INTERVAL = 5000
const RUN_REFETCH_INTERVAL = 5000
Expand All @@ -65,20 +59,13 @@ export function DeviceDetailsDeckConfiguration({
showSetupInstructionsModal,
setShowSetupInstructionsModal,
] = React.useState<boolean>(false)
const [showAddFixtureModal, setShowAddFixtureModal] = React.useState<boolean>(
false
)
const [targetCutoutId, setTargetCutoutId] = React.useState<CutoutId | null>(
null
)

const { data: modulesData } = useModulesQuery()
const deckConfig =
useNotifyDeckConfigurationQuery({
refetchInterval: DECK_CONFIG_REFETCH_INTERVAL,
}).data ?? []
const deckDef = getDeckDefFromRobotType(FLEX_ROBOT_TYPE)
const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation()
const { isRunRunning } = useRunStatuses()
const { data: maintenanceRunData } = useNotifyCurrentMaintenanceRun({
refetchInterval: RUN_REFETCH_INTERVAL,
Expand All @@ -87,59 +74,11 @@ export function DeviceDetailsDeckConfiguration({
const isMaintenanceRunExisting = maintenanceRunData?.data?.id != null
const isRobotViewable = useIsRobotViewable(robotName)

const handleClickAdd = (cutoutId: CutoutId): void => {
setTargetCutoutId(cutoutId)
setShowAddFixtureModal(true)
}

const handleClickRemove = (
cutoutId: CutoutId,
cutoutFixtureId: CutoutFixtureId
): void => {
let replacementFixtureId: CutoutFixtureId = SINGLE_CENTER_SLOT_FIXTURE
if (SINGLE_RIGHT_CUTOUTS.includes(cutoutId)) {
replacementFixtureId = SINGLE_RIGHT_SLOT_FIXTURE
} else if (SINGLE_LEFT_CUTOUTS.includes(cutoutId)) {
replacementFixtureId = SINGLE_LEFT_SLOT_FIXTURE
}

const fixtureGroup =
deckDef.cutoutFixtures.find(cf => cf.id === cutoutFixtureId)
?.fixtureGroup ?? {}

let newDeckConfig = deckConfig
if (cutoutId in fixtureGroup) {
const groupMap =
fixtureGroup[cutoutId]?.find(group =>
Object.entries(group).every(([cId, cfId]) =>
deckConfig.find(
config =>
config.cutoutId === cId && config.cutoutFixtureId === cfId
)
)
) ?? {}
newDeckConfig = deckConfig.map(cutoutConfig =>
cutoutConfig.cutoutId in groupMap
? {
...cutoutConfig,
cutoutFixtureId: replacementFixtureId,
opentronsModuleSerialNumber: undefined,
}
: cutoutConfig
)
} else {
newDeckConfig = deckConfig.map(cutoutConfig =>
cutoutConfig.cutoutId === cutoutId
? {
...cutoutConfig,
cutoutFixtureId: replacementFixtureId,
opentronsModuleSerialNumber: undefined,
}
: cutoutConfig
)
}
updateDeckConfiguration(newDeckConfig)
}
const {
addFixtureToCutout,
removeFixtureFromCutout,
addFixtureModal,
} = useDeckConfigurationEditingTools(false)

// do not show standard slot in fixture display list
const { displayList: fixtureDisplayList } = deckConfig.reduce<{
Expand Down Expand Up @@ -199,12 +138,7 @@ export function DeviceDetailsDeckConfiguration({

return (
<>
{showAddFixtureModal && targetCutoutId != null ? (
<AddFixtureModal
cutoutId={targetCutoutId}
setShowAddFixtureModal={setShowAddFixtureModal}
/>
) : null}
{addFixtureModal}
{showSetupInstructionsModal ? (
<DeckFixtureSetupInstructionsModal
setShowSetupInstructionsModal={setShowSetupInstructionsModal}
Expand Down Expand Up @@ -278,8 +212,8 @@ export function DeviceDetailsDeckConfiguration({
: deckConfig.map(({ cutoutId }) => cutoutId)
}
deckConfig={deckConfig}
handleClickAdd={handleClickAdd}
handleClickRemove={handleClickRemove}
handleClickAdd={addFixtureToCutout}
handleClickRemove={removeFixtureFromCutout}
/>
</Flex>
<Flex
Expand Down
Loading

0 comments on commit bb1f1ce

Please sign in to comment.