diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx index 08188c00533..8af60b416ef 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx @@ -79,7 +79,12 @@ export function AddFixtureModal({ const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation() const { data: modulesData } = useModulesQuery() const deckConfig = useDeckConfigurationQuery()?.data ?? [] - const [optionStage, setOptionStage] = React.useState<'modulesOrFixtures' | 'fixtureOptions' | 'moduleOptions' | 'wasteChuteOptions'>('modulesOrFixtures') + const [optionStage, setOptionStage] = React.useState< + | 'modulesOrFixtures' + | 'fixtureOptions' + | 'moduleOptions' + | 'wasteChuteOptions' + >('modulesOrFixtures') const [showWasteChuteOptions, setShowWasteChuteOptions] = React.useState( false ) @@ -102,44 +107,79 @@ export function AddFixtureModal({ width: '26.75rem', } - const unconfiguredMods = modulesData?.data.filter(attachedMod => ( - !deckConfig.some(({ opentronsModuleSerialNumber }) => ( - attachedMod.serialNumber === opentronsModuleSerialNumber - )) - )) ?? [] + const unconfiguredMods = + modulesData?.data.filter( + attachedMod => + !deckConfig.some( + ({ opentronsModuleSerialNumber }) => + attachedMod.serialNumber === opentronsModuleSerialNumber + ) + ) ?? [] let availableFixtures: CutoutContents[] = [] if (optionStage === 'fixtureOptions') { - if (SINGLE_RIGHT_CUTOUTS.includes(cutoutId) || SINGLE_LEFT_CUTOUTS.includes(cutoutId)) { - availableFixtures = [...availableFixtures, { cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE }] + if ( + SINGLE_RIGHT_CUTOUTS.includes(cutoutId) || + SINGLE_LEFT_CUTOUTS.includes(cutoutId) + ) { + availableFixtures = [ + ...availableFixtures, + { cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE }, + ] } if (STAGING_AREA_CUTOUTS.includes(cutoutId)) { - availableFixtures = [...availableFixtures, { cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE }] + availableFixtures = [ + ...availableFixtures, + { cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE }, + ] } } else if (optionStage === 'moduleOptions') { - availableFixtures = [...availableFixtures, { cutoutFixtureId: MAGNETIC_BLOCK_V1_FIXTURE }] + availableFixtures = [ + ...availableFixtures, + { cutoutFixtureId: MAGNETIC_BLOCK_V1_FIXTURE }, + ] if (unconfiguredMods.length > 0) { if (THERMOCYCLER_MODULE_CUTOUTS.includes(cutoutId)) { - const unconfiguredTCs = unconfiguredMods.filter(mod => mod.moduleModel === THERMOCYCLER_MODULE_V2).map(mod => ( - { cutoutFixtureId: THERMOCYCLER_V2_FRONT_FIXTURE, opentronsModuleSerialNumber: mod.serialNumber } - )) + const unconfiguredTCs = unconfiguredMods + .filter(mod => mod.moduleModel === THERMOCYCLER_MODULE_V2) + .map(mod => ({ + cutoutFixtureId: THERMOCYCLER_V2_FRONT_FIXTURE, + opentronsModuleSerialNumber: mod.serialNumber, + })) availableFixtures = [...availableFixtures, ...unconfiguredTCs] } - if (HEATER_SHAKER_CUTOUTS.includes(cutoutId) && unconfiguredMods.some(m => m.moduleModel === HEATERSHAKER_MODULE_V1)) { - const unconfiguredHeaterShakers = unconfiguredMods.filter(mod => mod.moduleModel === HEATERSHAKER_MODULE_V1).map(mod => ( - { cutoutFixtureId: HEATERSHAKER_MODULE_V1_FIXTURE, opentronsModuleSerialNumber: mod.serialNumber } - )) + if ( + HEATER_SHAKER_CUTOUTS.includes(cutoutId) && + unconfiguredMods.some(m => m.moduleModel === HEATERSHAKER_MODULE_V1) + ) { + const unconfiguredHeaterShakers = unconfiguredMods + .filter(mod => mod.moduleModel === HEATERSHAKER_MODULE_V1) + .map(mod => ({ + cutoutFixtureId: HEATERSHAKER_MODULE_V1_FIXTURE, + opentronsModuleSerialNumber: mod.serialNumber, + })) availableFixtures = [...availableFixtures, ...unconfiguredHeaterShakers] } - if (TEMPERATURE_MODULE_CUTOUTS.includes(cutoutId) && unconfiguredMods.some(m => m.moduleModel === TEMPERATURE_MODULE_V2)) { - const unconfiguredTemperatureModules = unconfiguredMods.filter(mod => mod.moduleModel === TEMPERATURE_MODULE_V2).map(mod => ( - { cutoutFixtureId: TEMPERATURE_MODULE_V2_FIXTURE, opentronsModuleSerialNumber: mod.serialNumber } - )) - availableFixtures = [...availableFixtures, ...unconfiguredTemperatureModules] + if ( + TEMPERATURE_MODULE_CUTOUTS.includes(cutoutId) && + unconfiguredMods.some(m => m.moduleModel === TEMPERATURE_MODULE_V2) + ) { + const unconfiguredTemperatureModules = unconfiguredMods + .filter(mod => mod.moduleModel === TEMPERATURE_MODULE_V2) + .map(mod => ({ + cutoutFixtureId: TEMPERATURE_MODULE_V2_FIXTURE, + opentronsModuleSerialNumber: mod.serialNumber, + })) + availableFixtures = [ + ...availableFixtures, + ...unconfiguredTemperatureModules, + ] } } } else if (optionStage === 'wasteChuteOptions') { - availableFixtures = WASTE_CHUTE_FIXTURES.map(fixture => ({ cutoutFixtureId: fixture })) + availableFixtures = WASTE_CHUTE_FIXTURES.map(fixture => ({ + cutoutFixtureId: fixture, + })) } const handleAddODD = (cutoutContents: CutoutContents): void => { @@ -156,42 +196,51 @@ export function AddFixtureModal({ setShowAddFixtureModal(false) } - const fixtureOptions = providedFixtureOptions?.map(o => ({ cutoutFixtureId: o, opentronsModuleSerialNumber: undefined })) ?? availableFixtures + const fixtureOptions = + providedFixtureOptions?.map(o => ({ + cutoutFixtureId: o, + opentronsModuleSerialNumber: undefined, + })) ?? availableFixtures let nextStageOptions = null if (optionStage === 'modulesOrFixtures') { - nextStageOptions = (<> - {SINGLE_CENTER_CUTOUTS.includes(cutoutId) - ? null - : ( + nextStageOptions = ( + <> + {SINGLE_CENTER_CUTOUTS.includes(cutoutId) ? null : ( { setOptionStage('fixtureOptions') }} + onClickHandler={() => { + setOptionStage('fixtureOptions') + }} isOnDevice={isOnDevice} /> - ) - } - { setOptionStage('moduleOptions') }} - isOnDevice={isOnDevice} - /> - + )} + { + setOptionStage('moduleOptions') + }} + isOnDevice={isOnDevice} + /> + ) } else if (optionStage === 'fixtureOptions') { - nextStageOptions = (<> - { setOptionStage('wasteChuteOptions') }} - isOnDevice={isOnDevice} - /> - + nextStageOptions = ( + <> + { + setOptionStage('wasteChuteOptions') + }} + isOnDevice={isOnDevice} + /> + ) } @@ -220,17 +269,17 @@ export function AddFixtureModal({ {t('add_to_slot_description')} - {fixtureOptions.map( - (cutoutContents) => ( - handleAddODD(cutoutContents)} - isOnDevice={isOnDevice} - /> - ) - )} + {fixtureOptions.map(cutoutContents => ( + handleAddODD(cutoutContents)} + isOnDevice={isOnDevice} + /> + ))} {nextStageOptions} @@ -240,17 +289,17 @@ export function AddFixtureModal({ {t('add_fixture_description')} - {fixtureOptions.map( - (cutoutContents) => ( - handleAddDesktop(cutoutContents)} - isOnDevice={isOnDevice} - /> - ) - )} + {fixtureOptions.map(cutoutContents => ( + handleAddDesktop(cutoutContents)} + isOnDevice={isOnDevice} + /> + ))} {nextStageOptions} @@ -331,7 +380,9 @@ function FixtureOption(props: FixtureOptionProps): JSX.Element { padding={`${SPACING.spacing16} ${SPACING.spacing24}`} css={FIXTURE_BUTTON_STYLE_ODD} > - {props.optionName} + + {props.optionName} + {props.buttonText} ) : ( @@ -343,13 +394,8 @@ function FixtureOption(props: FixtureOptionProps): JSX.Element { backgroundColor={COLORS.grey20} borderRadius={BORDERS.borderRadius4} > - - {optionName} - - - {buttonText} - + {optionName} + {buttonText} ) } - diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx index 6b936eca563..21093d892d4 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx @@ -92,7 +92,11 @@ export function DeviceDetailsDeckConfiguration({ const newDeckConfig = deckConfig.map(fixture => fixture.cutoutId === cutoutId - ? { ...fixture, cutoutFixtureId: replacementFixtureId, opentronsModuleSerialNumber: undefined } + ? { + ...fixture, + cutoutFixtureId: replacementFixtureId, + opentronsModuleSerialNumber: undefined, + } : fixture ) diff --git a/app/src/pages/DeckConfiguration/index.tsx b/app/src/pages/DeckConfiguration/index.tsx index e9b470a9ffc..4aecd23e802 100644 --- a/app/src/pages/DeckConfiguration/index.tsx +++ b/app/src/pages/DeckConfiguration/index.tsx @@ -30,7 +30,11 @@ import { DeckFixtureSetupInstructionsModal } from '../../organisms/DeviceDetails import { DeckConfigurationDiscardChangesModal } from '../../organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal' import { getTopPortalEl } from '../../App/portal' -import type { CutoutFixtureId, CutoutId, DeckConfiguration } from '@opentrons/shared-data' +import type { + CutoutFixtureId, + CutoutId, + DeckConfiguration, +} from '@opentrons/shared-data' export function DeckConfigurationEditor(): JSX.Element { const { t, i18n } = useTranslation([ @@ -78,7 +82,11 @@ export function DeckConfigurationEditor(): JSX.Element { setCurrentDeckConfig(prevDeckConfig => prevDeckConfig.map(fixture => fixture.cutoutId === cutoutId - ? { ...fixture, cutoutFixtureId: replacementFixtureId, opentronsModuleSerialNumber: undefined } + ? { + ...fixture, + cutoutFixtureId: replacementFixtureId, + opentronsModuleSerialNumber: undefined, + } : fixture ) ) diff --git a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx index 4f0ee0ca0b5..d790f2e922d 100644 --- a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx @@ -44,7 +44,7 @@ export function EmptyConfigFixture( standardSlotCutout?.position ?? [] let x = xSlotPosition let width = 0 - switch(fixtureLocation) { + switch (fixtureLocation) { case 'cutoutA1': case 'cutoutB1': case 'cutoutC1': diff --git a/components/src/hardware-sim/DeckConfigurator/MagneticBlockFixture.tsx b/components/src/hardware-sim/DeckConfigurator/MagneticBlockFixture.tsx index 59c1951e91f..e97c9b84352 100644 --- a/components/src/hardware-sim/DeckConfigurator/MagneticBlockFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/MagneticBlockFixture.tsx @@ -94,7 +94,7 @@ export function MagneticBlockFixture( onClick={ handleClickRemove != null ? () => handleClickRemove(fixtureLocation) - : () => { } + : () => {} } > diff --git a/components/src/hardware-sim/DeckConfigurator/TemperatureModuleFixture.tsx b/components/src/hardware-sim/DeckConfigurator/TemperatureModuleFixture.tsx index 6919557f3a9..7d1ba429c7e 100644 --- a/components/src/hardware-sim/DeckConfigurator/TemperatureModuleFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/TemperatureModuleFixture.tsx @@ -73,7 +73,7 @@ export function TemperatureModuleFixture( onClick={ handleClickRemove != null ? () => handleClickRemove(fixtureLocation) - : () => { } + : () => {} } > diff --git a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx index 0a9e72445d9..7617cee829f 100644 --- a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx @@ -52,7 +52,9 @@ export function WasteChuteConfigFixture( return (