fix(app, component): dqa device detail deck configurator

app/src/assets/localization/en/device_details.json

@@ -33,8 +33,8 @@
   "current_temp": "Current: {{temp}} °C",
   "current_version": "Current Version",
   "deck_cal_missing": "Pipette Offset calibration missing. Calibrate deck first.",
-  "deck_configuration_is_not_available_when_run_is_in_progress": "Deck configuration is not available when run is in progress",
   "deck_configuration_is_not_available_when_robot_is_busy": "Deck configuration is not available when the robot is busy",
+  "deck_configuration_is_not_available_when_run_is_in_progress": "Deck configuration is not available when run is in progress",
   "deck_configuration": "deck configuration",
   "deck_fixture_setup_instructions": "Deck fixture setup instructions",
   "deck_fixture_setup_modal_bottom_description_desktop": "For detailed instructions for different types of fixtures, scan the QR code or go to the link below.",
@@ -79,13 +79,13 @@
   "magdeck_gen1_height": "Height: {{height}}",
   "magdeck_gen2_height": "Height: {{height}} mm",
   "max_engage_height": "Max Engage Height",
+  "missing_fixture": "missing {{num}} fixture",
+  "missing_fixtures_plural": "missing {{count}} fixtures",
   "missing_hardware": "missing hardware",
-  "missing_module_plural": "missing {{count}} modules",
-  "missing_module": "missing {{num}} module",
   "missing_instrument": "missing {{num}} instrument",
   "missing_instruments_plural": "missing {{count}} instruments",
-  "missing_fixture": "missing {{num}} fixture",
-  "missing_fixtures_plural": "missing {{count}} fixtures",
+  "missing_module_plural": "missing {{count}} modules",
+  "missing_module": "missing {{num}} module",
   "module_actions_unavailable": "Module actions unavailable while protocol is running",
   "module_calibration_required_no_pipette_attached": "Module calibration required. Attach a pipette before running module calibration.",
   "module_calibration_required_update_pipette_FW": "Update pipette firmware before proceeding with required module calibration.",
@@ -98,6 +98,7 @@
   "mount": "{{side}} Mount",
   "na_speed": "Target: N/A",
   "na_temp": "Target: N/A",
+  "no_deck_fixtures": "No deck fixtures",
   "no_protocol_runs": "No protocol runs yet!",
   "no_protocols_found": "No protocols found",
   "no_recent_runs_description": "After you run some protocols, they will appear here.",

app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeviceDetailsDeckConfiguration.test.tsx

@@ -125,4 +125,12 @@ describe('DeviceDetailsDeckConfiguration', () => {
     getByText('Deck configuration is not available when the robot is busy')
     getByText('disabled mock DeckConfigurator')
   })
+
+  it('should render no deck fixtures, if deck configs are not set', () => {
+    when(mockUseDeckConfigurationQuery)
+      .calledWith()
+      .mockReturnValue([] as any)
+    const [{ getByText }] = render(props)
+    getByText('No deck fixtures')
+  })
 })

app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx

@@ -190,8 +190,8 @@ export function DeviceDetailsDeckConfiguration({
                 <StyledText>{t('location')}</StyledText>
                 <StyledText>{t('fixture')}</StyledText>
               </Flex>
-              {fixtureDisplayList.map(fixture => {
-                return (
+              {fixtureDisplayList.length > 0 ? (
+                fixtureDisplayList.map(fixture => (
                   <Flex
                     key={fixture.cutoutId}
                     backgroundColor={COLORS.fundamentalsBackground}
@@ -207,8 +207,18 @@ export function DeviceDetailsDeckConfiguration({
                       {getFixtureDisplayName(fixture.cutoutFixtureId)}
                     </StyledText>
                   </Flex>
-                )
-              })}
+                ))
+              ) : (
+                <Flex
+                  backgroundColor={COLORS.fundamentalsBackground}
+                  gridGap={SPACING.spacing60}
+                  padding={SPACING.spacing8}
+                  width={SIZE_5}
+                  css={TYPOGRAPHY.labelRegular}
+                >
+                  <StyledText>{t('no_deck_fixtures')}</StyledText>
+                </Flex>
+              )}
             </Flex>
           </Flex>
         </Flex>

components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx

@@ -6,27 +6,10 @@ import { Btn, Flex } from '../../primitives'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import { FIXTURE_HEIGHT, SINGLE_SLOT_FIXTURE_WIDTH } from './constants'
 
 import type { Cutout, DeckDefinition } from '@opentrons/shared-data'
 
-// TODO: replace stubs with JSON definitions when available
-const standardSlotDef = {
-  schemaVersion: 1,
-  version: 1,
-  namespace: 'opentrons',
-  metadata: {
-    displayName: 'standard slot',
-  },
-  parameters: {
-    loadName: 'standard_slot',
-  },
-  boundingBox: {
-    xDimension: 246.5,
-    yDimension: 106.0,
-    zDimension: 0,
-  },
-}
-
 interface EmptyConfigFixtureProps {
   deckDefinition: DeckDefinition
   fixtureLocation: Cutout
@@ -56,12 +39,10 @@ export function EmptyConfigFixture(
   const yAdjustment = -10
   const y = ySlotPosition + yAdjustment
 
-  const { xDimension, yDimension } = standardSlotDef.boundingBox
-
   return (
     <RobotCoordsForeignObject
-      width={xDimension}
-      height={yDimension}
+      width={SINGLE_SLOT_FIXTURE_WIDTH}
+      height={FIXTURE_HEIGHT}
       x={x}
       y={y}
       flexProps={{ flex: '1' }}

components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx

@@ -6,27 +6,14 @@ import { Btn, Flex, Text } from '../../primitives'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  FIXTURE_HEIGHT,
+  STAGING_AREA_DISPLAY_NAME,
+  STAGING_AREA_FIXTURE_WIDTH,
+} from './constants'
 
 import type { Cutout, DeckDefinition } from '@opentrons/shared-data'
 
-// TODO: replace stubs with JSON definitions when available
-const stagingAreaDef = {
-  schemaVersion: 1,
-  version: 1,
-  namespace: 'opentrons',
-  metadata: {
-    displayName: 'Staging area',
-  },
-  parameters: {
-    loadName: 'extension_slot',
-  },
-  boundingBox: {
-    xDimension: 318.5,
-    yDimension: 106.0,
-    zDimension: 0,
-  },
-}
-
 interface StagingAreaConfigFixtureProps {
   deckDefinition: DeckDefinition
   fixtureLocation: Cutout
@@ -48,20 +35,18 @@ export function StagingAreaConfigFixture(
   const yAdjustment = -10
   const y = ySlotPosition + yAdjustment
 
-  const { xDimension, yDimension } = stagingAreaDef.boundingBox
-
   return (
     <RobotCoordsForeignObject
-      width={xDimension}
-      height={yDimension}
+      width={STAGING_AREA_FIXTURE_WIDTH}
+      height={FIXTURE_HEIGHT}
       x={x}
       y={y}
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
       <Flex css={STAGING_AREA_CONFIG_STYLE}>
-        <Text css={TYPOGRAPHY.bodyTextSemiBold}>
-          {stagingAreaDef.metadata.displayName}
+        <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
+          {STAGING_AREA_DISPLAY_NAME}
         </Text>
         {handleClickRemove != null ? (
           <Btn

components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx

@@ -6,27 +6,14 @@ import { Btn, Flex, Text } from '../../primitives'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  FIXTURE_HEIGHT,
+  SINGLE_SLOT_FIXTURE_WIDTH,
+  TRASH_BIN_DISPLAY_NAME,
+} from './constants'
 
 import type { Cutout, DeckDefinition } from '@opentrons/shared-data'
 
-// TODO: replace stubs with JSON definitions when available
-const trashBinDef = {
-  schemaVersion: 1,
-  version: 1,
-  namespace: 'opentrons',
-  metadata: {
-    displayName: 'Trash bin',
-  },
-  parameters: {
-    loadName: 'trash_bin',
-  },
-  boundingBox: {
-    xDimension: 246.5,
-    yDimension: 106.0,
-    zDimension: 0,
-  },
-}
-
 interface TrashBinConfigFixtureProps {
   deckDefinition: DeckDefinition
   fixtureLocation: Cutout
@@ -54,20 +41,18 @@ export function TrashBinConfigFixture(
   const yAdjustment = -10
   const y = ySlotPosition + yAdjustment
 
-  const { xDimension, yDimension } = trashBinDef.boundingBox
-
   return (
     <RobotCoordsForeignObject
-      width={xDimension}
-      height={yDimension}
+      width={SINGLE_SLOT_FIXTURE_WIDTH}
+      height={FIXTURE_HEIGHT}
       x={x}
       y={y}
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
       <Flex css={TRASH_BIN_CONFIG_STYLE}>
-        <Text css={TYPOGRAPHY.bodyTextSemiBold}>
-          {trashBinDef.metadata.displayName}
+        <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
+          {TRASH_BIN_DISPLAY_NAME}
         </Text>
         {handleClickRemove != null ? (
           <Btn

components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx

@@ -6,37 +6,31 @@
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  WASTE_CHUTE_DISPLAY_NAME,
+  FIXTURE_HEIGHT,
+  STAGING_AREA_FIXTURE_WIDTH,
+  SINGLE_SLOT_FIXTURE_WIDTH,
+} from './constants'
 
 import type { Cutout, DeckDefinition } from '@opentrons/shared-data'
 
-// TODO: replace stubs with JSON definitions when available
-const wasteChuteDef = {
-  schemaVersion: 1,
-  version: 1,
-  namespace: 'opentrons',
-  metadata: {
-    displayName: 'Waste chute',
-  },
-  parameters: {
-    loadName: 'trash_chute',
-  },
-  boundingBox: {
-    xDimension: 286.5,
-    yDimension: 106.0,
-    zDimension: 0,
-  },
-}
-
 interface WasteChuteConfigFixtureProps {
   deckDefinition: DeckDefinition
   fixtureLocation: Cutout
   handleClickRemove?: (fixtureLocation: Cutout) => void
+  hasStagingAreas?: boolean
 }
 
 export function WasteChuteConfigFixture(
   props: WasteChuteConfigFixtureProps
 ): JSX.Element {
-  const { deckDefinition, handleClickRemove, fixtureLocation } = props
+  const {
+    deckDefinition,
+    handleClickRemove,
+    fixtureLocation,
+    hasStagingAreas = false,
+  } = props
 
   const wasteChuteSlot = deckDefinition.locations.cutouts.find(
     slot => slot.id === fixtureLocation
@@ -48,20 +42,20 @@
   const yAdjustment = -10
   const y = ySlotPosition + yAdjustment
 
-  const { xDimension, yDimension } = wasteChuteDef.boundingBox
-
   return (
     <RobotCoordsForeignObject
-      width={xDimension}
-      height={yDimension}
+      width={
+        hasStagingAreas ? STAGING_AREA_FIXTURE_WIDTH : SINGLE_SLOT_FIXTURE_WIDTH
+      }
+      height={FIXTURE_HEIGHT}
       x={x}
       y={y}
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
       <Flex css={WASTE_CHUTE_CONFIG_STYLE}>
-        <Text css={TYPOGRAPHY.bodyTextSemiBold}>
-          {wasteChuteDef.metadata.displayName}
+        <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
+          {WASTE_CHUTE_DISPLAY_NAME}
         </Text>
         {handleClickRemove != null ? (
           <Btn

components/src/hardware-sim/DeckConfigurator/constants.ts

@@ -0,0 +1,6 @@
+export const FIXTURE_HEIGHT = 106.0
+export const SINGLE_SLOT_FIXTURE_WIDTH = 246.5
+export const STAGING_AREA_FIXTURE_WIDTH = 318.5
+export const STAGING_AREA_DISPLAY_NAME = 'Staging area'
+export const TRASH_BIN_DISPLAY_NAME = 'Trash bin'
+export const WASTE_CHUTE_DISPLAY_NAME = 'Waste chute'

components/src/hardware-sim/DeckConfigurator/index.tsx

@@ -6,7 +6,8 @@
   SINGLE_SLOT_FIXTURES,
   STAGING_AREA_RIGHT_SLOT_FIXTURE,
   TRASH_BIN_ADAPTER_FIXTURE,
-  WASTE_CHUTE_FIXTURES,
+  WASTE_CHUTE_ONLY_FIXTURES,
+  WASTE_CHUTE_STAGING_AREA_FIXTURES,
 } from '@opentrons/shared-data'
 
 import { COLORS } from '../../ui-style-constants'
@@ -64,7 +65,13 @@
   )
   const wasteChuteFixtures = configurableDeckConfig.filter(
     ({ cutoutFixtureId }) =>
-      cutoutFixtureId != null && WASTE_CHUTE_FIXTURES.includes(cutoutFixtureId)
+      cutoutFixtureId != null &&
+      WASTE_CHUTE_ONLY_FIXTURES.includes(cutoutFixtureId)
+  )
+  const wasteChuteStagingAreaFixtures = configurableDeckConfig.filter(
+    ({ cutoutFixtureId }) =>
+      cutoutFixtureId != null &&
+      WASTE_CHUTE_STAGING_AREA_FIXTURES.includes(cutoutFixtureId)
   )
   const emptyFixtures = readOnly
     ? []
@@ -117,6 +124,15 @@
           fixtureLocation={cutoutId}
         />
       ))}
+      {wasteChuteStagingAreaFixtures.map(({ cutoutId }) => (
+        <WasteChuteConfigFixture
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={readOnly ? undefined : handleClickRemove}
+          fixtureLocation={cutoutId}
+          hasStagingAreas
+        />
+      ))}
       {trashBinFixtures.map(({ cutoutId }) => (
         <TrashBinConfigFixture
           key={cutoutId}

components/src/ui-style-constants/typography.ts

@@ -217,6 +217,12 @@ export const smallBodyTextBold = css`
   font-weight: ${fontWeightBold};
 `
 
+export const smallBodyTextSemiBold = css`
+  font-size: ${fontSize20};
+  line-height: ${lineHeight24};
+  font-weight: ${fontWeightSemiBold};
+`
+
 export const smallBodyTextRegular = css`
   font-size: ${fontSize20};
   line-height: ${lineHeight24};
@@ -232,6 +238,7 @@ export const darkLinkH4SemiBold = css`
     color: ${COLORS.darkBlackEnabled};
   }
 `
+
 export const darkLinkLabelSemiBold = css`
   font-size: ${fontSizeLabel};
   font-weight: ${fontWeightSemiBold};