fix(app): fix dqa ODD protocol setup deck config

fix ODD protocol setup deck config close RAUT-834
Opentrons · Dec 11, 2023 · 479b280 · 479b280
1 parent 6b8f9b3
commit 479b280
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 8 deletions.
diff --git a/...rganisms/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx b/...rganisms/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx
@@ -2,13 +2,22 @@ import * as React from 'react'
 import { when, resetAllWhenMocks } from 'jest-when'
 
 import { renderWithProviders, BaseDeck } from '@opentrons/components'
-import { useUpdateDeckConfigurationMutation } from '@opentrons/react-api-client'
+import {
+  useDeckConfigurationQuery,
+  useUpdateDeckConfigurationMutation,
+} from '@opentrons/react-api-client'
+import { STAGING_AREA_RIGHT_SLOT_FIXTURE } from '@opentrons/shared-data'
 
 import { i18n } from '../../../i18n'
 import { useMostRecentCompletedAnalysis } from '../../LabwarePositionCheck/useMostRecentCompletedAnalysis'
 import { ProtocolSetupDeckConfiguration } from '..'
 
-import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
+import type { UseQueryResult } from 'react-query'
+import type {
+  CompletedProtocolAnalysis,
+  CutoutConfig,
+  DeckConfiguration,
+} from '@opentrons/shared-data'
 
 jest.mock('@opentrons/components/src/hardware-sim/BaseDeck/index')
 jest.mock('@opentrons/react-api-client')
@@ -26,13 +35,21 @@ const PROTOCOL_DETAILS = {
   robotType: 'OT-3 Standard' as const,
 }
 
+const mockCutoutConfig: CutoutConfig = {
+  cutoutId: 'cutoutD1',
+  cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+}
+
 const mockUseMostRecentCompletedAnalysis = useMostRecentCompletedAnalysis as jest.MockedFunction<
   typeof useMostRecentCompletedAnalysis
 >
 const mockUseUpdateDeckConfigurationMutation = useUpdateDeckConfigurationMutation as jest.MockedFunction<
   typeof useUpdateDeckConfigurationMutation
 >
 const mockBaseDeck = BaseDeck as jest.MockedFunction<typeof BaseDeck>
+const mockUseDeckConfigurationQuery = useDeckConfigurationQuery as jest.MockedFunction<
+  typeof useDeckConfigurationQuery
+>
 
 const render = (
   props: React.ComponentProps<typeof ProtocolSetupDeckConfiguration>
@@ -59,6 +76,9 @@ describe('ProtocolSetupDeckConfiguration', () => {
     mockUseUpdateDeckConfigurationMutation.mockReturnValue({
       updateDeckConfiguration: mockUpdateDeckConfiguration,
     } as any)
+    mockUseDeckConfigurationQuery.mockReturnValue(({
+      data: [],
+    } as unknown) as UseQueryResult<DeckConfiguration>)
   })
 
   afterEach(() => {

diff --git a/app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx b/app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx
@@ -12,7 +12,10 @@ import {
   FLEX_ROBOT_TYPE,
   getSimplestDeckConfigForProtocol,
 } from '@opentrons/shared-data'
-import { useUpdateDeckConfigurationMutation } from '@opentrons/react-api-client'
+import {
+  useDeckConfigurationQuery,
+  useUpdateDeckConfigurationMutation,
+} from '@opentrons/react-api-client'
 
 import { ChildNavigation } from '../ChildNavigation'
 import { AddFixtureModal } from '../DeviceDetailsDeckConfiguration/AddFixtureModal'
@@ -52,15 +55,26 @@ export function ProtocolSetupDeckConfiguration({
   ] = React.useState<boolean>(false)
 
   const mostRecentAnalysis = useMostRecentCompletedAnalysis(runId)
+  const { data: deckConfig = [] } = useDeckConfigurationQuery()
 
   const simplestDeckConfig = getSimplestDeckConfigForProtocol(
     mostRecentAnalysis
   ).map(({ cutoutId, cutoutFixtureId }) => ({ cutoutId, cutoutFixtureId }))
 
+  const targetDeckConfig = simplestDeckConfig.find(
+    deck => deck.cutoutId === cutoutId
+  )
+
+  const mergedDeckConfig = deckConfig.map(config =>
+    targetDeckConfig != null && config.cutoutId === targetDeckConfig.cutoutId
+      ? targetDeckConfig
+      : config
+  )
+
   const [
     currentDeckConfig,
     setCurrentDeckConfig,
-  ] = React.useState<DeckConfiguration>(simplestDeckConfig)
+  ] = React.useState<DeckConfiguration>(mergedDeckConfig)
 
   const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation()
   const handleClickConfirm = (): void => {
@@ -94,13 +108,14 @@ export function ProtocolSetupDeckConfiguration({
           onClickButton={handleClickConfirm}
         />
         <Flex
-          marginTop="7.75rem"
+          marginTop="4rem"
           paddingX={SPACING.spacing40}
           justifyContent={JUSTIFY_CENTER}
         >
           <BaseDeck
-            deckConfig={simplestDeckConfig}
+            deckConfig={currentDeckConfig}
             robotType={FLEX_ROBOT_TYPE}
+            height="455px"
           />
         </Flex>
       </Flex>

diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx
@@ -100,7 +100,7 @@ export function FixtureTable({
           if (!isCurrentFixtureCompatible) {
             const isConflictingFixtureConfigured =
               cutoutFixtureId != null &&
-              !SINGLE_SLOT_FIXTURES.includes(cutoutFixtureId)
+              SINGLE_SLOT_FIXTURES.includes(cutoutFixtureId)
             chipLabel = (
               <>
                 <Chip

diff --git a/app/src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx b/app/src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx
@@ -748,7 +748,7 @@ export function ProtocolSetup(): JSX.Element {
         padding={
           setupScreen === 'prepare to run'
             ? `0 ${SPACING.spacing32} ${SPACING.spacing40}`
-            : `${SPACING.spacing32} ${SPACING.spacing40}`
+            : `${SPACING.spacing32} ${SPACING.spacing40} ${SPACING.spacing40}`
         }
       >
         {setupComponentByScreen[setupScreen]}

diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
@@ -78,6 +78,7 @@ interface BaseDeckProps {
   animatedSVG?: boolean
   /** extra props to pass to svg tag */
   svgProps?: React.ComponentProps<typeof Svg>
+  height?: string
 }
 
 export function BaseDeck(props: BaseDeckProps): JSX.Element {
@@ -94,6 +95,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
     showSlotLabels = true,
     animatedSVG = false,
     svgProps = {},
+    height = '100%',
   } = props
   const deckDef = getDeckDefFromRobotType(robotType)
 
@@ -126,6 +128,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
       viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
       animated={animatedSVG}
       {...svgProps}
+      height={height}
     >
       {robotType === OT2_ROBOT_TYPE ? (
         <DeckFromLayers