diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx index 3c37d6497ca..c3f62f4dd2a 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx @@ -18,9 +18,11 @@ import { useUpdateDeckConfigurationMutation } from '@opentrons/react-api-client' import { getCutoutDisplayName, getFixtureDisplayName, - STAGING_AREA_LOAD_NAME, - TRASH_BIN_LOAD_NAME, - WASTE_CHUTE_LOAD_NAME, + STAGING_AREA_CUTOUTS, + STAGING_AREA_RIGHT_SLOT_FIXTURE, + TRASH_BIN_ADAPTER_FIXTURE, + WASTE_CHUTE_CUTOUT, + WASTE_CHUTE_FIXTURES, } from '@opentrons/shared-data' import { StyledText } from '../../atoms/text' @@ -30,25 +32,24 @@ import { Modal } from '../../molecules/Modal' import { LegacyModal } from '../../molecules/LegacyModal' import type { - Cutout, + CutoutConfig, + CutoutId, + CutoutFixtureId, DeckConfiguration, - Fixture, - FixtureLoadName, } from '@opentrons/shared-data' import type { ModalHeaderBaseProps } from '../../molecules/Modal/types' import type { LegacyModalProps } from '../../molecules/LegacyModal' -import { CutoutConfig } from '../../resources/deck_configuration/utils' interface AddFixtureModalProps { - fixtureLocation: Cutout + cutoutId: CutoutId setShowAddFixtureModal: (showAddFixtureModal: boolean) => void setCurrentDeckConfig?: React.Dispatch> - providedFixtureOptions?: FixtureLoadName[] + providedFixtureOptions?: CutoutFixtureId[] isOnDevice?: boolean } export function AddFixtureModal({ - fixtureLocation, + cutoutId, setShowAddFixtureModal, setCurrentDeckConfig, providedFixtureOptions, @@ -59,7 +60,7 @@ export function AddFixtureModal({ const modalHeader: ModalHeaderBaseProps = { title: t('add_to_slot', { - slotName: getCutoutDisplayName(fixtureLocation), + slotName: getCutoutDisplayName(cutoutId), }), hasExitIcon: true, onClick: () => setShowAddFixtureModal(false), @@ -67,7 +68,7 @@ export function AddFixtureModal({ const modalProps: LegacyModalProps = { title: t('add_to_slot', { - slotName: getCutoutDisplayName(fixtureLocation), + slotName: getCutoutDisplayName(cutoutId), }), onClose: () => setShowAddFixtureModal(false), closeOnOutsideClick: true, @@ -75,26 +76,22 @@ export function AddFixtureModal({ width: '23.125rem', } - const availableFixtures: FixtureLoadName[] = [TRASH_BIN_LOAD_NAME] - if ( - fixtureLocation === 'cutoutA3' || - fixtureLocation === 'cutoutB3' || - fixtureLocation === 'cutoutC3' - ) { - availableFixtures.push(STAGING_AREA_LOAD_NAME) + const availableFixtures: CutoutFixtureId[] = [TRASH_BIN_ADAPTER_FIXTURE] + if (STAGING_AREA_CUTOUTS.includes(cutoutId)) { + availableFixtures.push(STAGING_AREA_RIGHT_SLOT_FIXTURE) } - if (fixtureLocation === 'cutoutD3') { - availableFixtures.push(STAGING_AREA_LOAD_NAME, WASTE_CHUTE_LOAD_NAME) + if (cutoutId === WASTE_CHUTE_CUTOUT) { + availableFixtures.push(...WASTE_CHUTE_FIXTURES) } // For Touchscreen app - const handleTapAdd = (fixtureLoadName: FixtureLoadName): void => { + const handleTapAdd = (requiredFixtureId: CutoutFixtureId): void => { if (setCurrentDeckConfig != null) setCurrentDeckConfig( (prevDeckConfig: DeckConfiguration): DeckConfiguration => - prevDeckConfig.map((fixture: Fixture) => - fixture.fixtureLocation === fixtureLocation - ? { ...fixture, loadName: fixtureLoadName } + prevDeckConfig.map((fixture: CutoutConfig) => + fixture.cutoutId === cutoutId + ? { ...fixture, cutoutFixtureId: requiredFixtureId } : fixture ) ) @@ -105,10 +102,10 @@ export function AddFixtureModal({ // For Desktop app const fixtureOptions = providedFixtureOptions ?? availableFixtures - const handleClickAdd = (fixtureLoadName: FixtureLoadName): void => { + const handleClickAdd = (requiredFixtureId: CutoutFixtureId): void => { updateDeckConfiguration({ - fixtureLocation, - loadName: fixtureLoadName, + cutoutId, + cutoutFixtureId: requiredFixtureId, }) setShowAddFixtureModal(false) } @@ -123,10 +120,10 @@ export function AddFixtureModal({ {t('add_to_slot_description')} - {fixtureOptions.map(fixture => ( - + {fixtureOptions.map(cutoutFixtureId => ( + @@ -167,18 +164,18 @@ export function AddFixtureModal({ } interface AddFixtureButtonProps { - fixtureLoadName: FixtureLoadName - handleClickAdd: (fixtureLoadName: FixtureLoadName) => void + cutoutFixtureId: CutoutFixtureId + handleClickAdd: (cutoutFixtureId: CutoutFixtureId) => void } function AddFixtureButton({ - fixtureLoadName, + cutoutFixtureId, handleClickAdd, }: AddFixtureButtonProps): JSX.Element { const { t } = useTranslation('device_details') return ( handleClickAdd(fixtureLoadName)} + onClick={() => handleClickAdd(cutoutFixtureId)} display="flex" justifyContent={JUSTIFY_SPACE_BETWEEN} flexDirection={DIRECTION_ROW} @@ -187,7 +184,7 @@ function AddFixtureButton({ css={FIXTURE_BUTTON_STYLE} > - {getFixtureDisplayName(fixtureLoadName)} + {getFixtureDisplayName(cutoutFixtureId)} {t('add')} diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx index c57cef374f8..feafa3d2c2a 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx @@ -24,7 +24,10 @@ import { import { getCutoutDisplayName, getFixtureDisplayName, - STANDARD_SLOT_LOAD_NAME, + SINGLE_RIGHT_CUTOUTS, + SINGLE_SLOT_FIXTURES, + SINGLE_LEFT_SLOT_FIXTURE, + SINGLE_RIGHT_SLOT_FIXTURE, } from '@opentrons/shared-data' import { StyledText } from '../../atoms/text' @@ -33,7 +36,7 @@ import { DeckFixtureSetupInstructionsModal } from './DeckFixtureSetupInstruction import { AddFixtureModal } from './AddFixtureModal' import { useRunStatuses } from '../Devices/hooks' -import type { Cutout } from '@opentrons/shared-data' +import type { CutoutId } from '@opentrons/shared-data' const RUN_REFETCH_INTERVAL = 5000 @@ -52,10 +55,9 @@ export function DeviceDetailsDeckConfiguration({ const [showAddFixtureModal, setShowAddFixtureModal] = React.useState( false ) - const [ - targetFixtureLocation, - setTargetFixtureLocation, - ] = React.useState(null) + const [targetCutoutId, setTargetCutoutId] = React.useState( + null + ) const deckConfig = useDeckConfigurationQuery().data ?? [] const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation() @@ -65,29 +67,32 @@ export function DeviceDetailsDeckConfiguration({ }) const isMaintenanceRunExisting = maintenanceRunData?.data?.id != null - const handleClickAdd = (fixtureLocation: Cutout): void => { - setTargetFixtureLocation(fixtureLocation) + const handleClickAdd = (cutoutId: CutoutId): void => { + setTargetCutoutId(cutoutId) setShowAddFixtureModal(true) } - const handleClickRemove = (fixtureLocation: Cutout): void => { - console.log('remove fixtureLocation', fixtureLocation) + const handleClickRemove = (cutoutId: CutoutId): void => { updateDeckConfiguration({ - fixtureLocation, - loadName: STANDARD_SLOT_LOAD_NAME, + cutoutId, + cutoutFixtureId: SINGLE_RIGHT_CUTOUTS.includes(cutoutId) + ? SINGLE_RIGHT_SLOT_FIXTURE + : SINGLE_LEFT_SLOT_FIXTURE, }) } // do not show standard slot in fixture display list const fixtureDisplayList = deckConfig.filter( - fixture => fixture.loadName !== STANDARD_SLOT_LOAD_NAME + fixture => + fixture.cutoutFixtureId != null && + !SINGLE_SLOT_FIXTURES.includes(fixture.cutoutFixtureId) ) return ( <> - {showAddFixtureModal && targetFixtureLocation != null ? ( + {showAddFixtureModal && targetCutoutId != null ? ( ) : null} @@ -182,7 +187,7 @@ export function DeviceDetailsDeckConfiguration({ {fixtureDisplayList.map(fixture => { return ( - {getCutoutDisplayName(fixture.fixtureLocation)} + {getCutoutDisplayName(fixture.cutoutId)} - {getFixtureDisplayName(fixture.loadName)} + {getFixtureDisplayName(fixture.cutoutFixtureId)} ) diff --git a/app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx b/app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx index c665af4d600..2a1be5e1994 100644 --- a/app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx +++ b/app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx @@ -19,21 +19,21 @@ import { getSimplestDeckConfigForProtocolCommands } from '../../resources/deck_c import { Portal } from '../../App/portal' import type { - Cutout, + CutoutFixtureId, + CutoutId, DeckConfiguration, - FixtureLoadName, } from '@opentrons/shared-data' import type { SetupScreens } from '../../pages/OnDeviceDisplay/ProtocolSetup' interface ProtocolSetupDeckConfigurationProps { - fixtureLocation: Cutout + cutoutId: CutoutId runId: string setSetupScreen: React.Dispatch> - providedFixtureOptions: FixtureLoadName[] + providedFixtureOptions: CutoutFixtureId[] } export function ProtocolSetupDeckConfiguration({ - fixtureLocation, + cutoutId, runId, setSetupScreen, providedFixtureOptions, @@ -74,9 +74,9 @@ export function ProtocolSetupDeckConfiguration({ setShowConfirmationModal={setShowDiscardChangeModal} /> ) : null} - {showConfigurationModal && fixtureLocation != null ? ( + {showConfigurationModal && cutoutId != null ? ( (false) - const [ - targetFixtureLocation, - setTargetFixtureLocation, - ] = React.useState(null) + const [targetCutoutId, setTargetCutoutId] = React.useState( + null + ) const [ showDiscardChangeModal, setShowDiscardChangeModal, @@ -57,16 +60,21 @@ export function DeckConfigurationEditor(): JSX.Element { setCurrentDeckConfig, ] = React.useState(deckConfig) - const handleClickAdd = (fixtureLocation: Cutout): void => { - setTargetFixtureLocation(fixtureLocation) + const handleClickAdd = (cutoutId: CutoutId): void => { + setTargetCutoutId(cutoutId) setShowConfigurationModal(true) } - const handleClickRemove = (fixtureLocation: Cutout): void => { + const handleClickRemove = (cutoutId: CutoutId): void => { setCurrentDeckConfig(prevDeckConfig => prevDeckConfig.map(fixture => - fixture.fixtureLocation === fixtureLocation - ? { ...fixture, loadName: STANDARD_SLOT_LOAD_NAME } + fixture.cutoutId === cutoutId + ? { + ...fixture, + cutoutFixtureId: SINGLE_RIGHT_CUTOUTS.includes(cutoutId) + ? SINGLE_RIGHT_SLOT_FIXTURE + : SINGLE_LEFT_SLOT_FIXTURE, + } : fixture ) ) @@ -114,9 +122,9 @@ export function DeckConfigurationEditor(): JSX.Element { isOnDevice /> ) : null} - {showConfigurationModal && targetFixtureLocation != null ? ( + {showConfigurationModal && targetCutoutId != null ? ( ))} - {stagingAreaFixtures.map(({ cutoutFixtureId, cutoutId }) => ( + {stagingAreaFixtures.map(({ cutoutId }) => ( ))} - {emptyFixtures.map(({ cutoutFixtureId, cutoutId }) => ( + {emptyFixtures.map(({ cutoutId }) => ( ))} - {wasteChuteFixtures.map(({ cutoutFixtureId, cutoutId }) => ( + {wasteChuteFixtures.map(({ cutoutId }) => ( ))} - {trashBinFixtures.map(({ cutoutFixtureId, cutoutId }) => ( + {trashBinFixtures.map(({ cutoutId }) => (