initial implementation of stacker location identify

Author: CaseyBatten

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

@@ -6,7 +6,7 @@
   "abs_reader_lid_status": "Lid status: {{status}}",
   "abs_reader_status": "Absorbance Plate Reader Status",
   "add": "Add",
-  "add_fixture_description": "Add this hardware to your deck configuration. It will be referenced during protocol analysis.",
+  "add_fixture_description": "Choose an item below to add to your deck configuration. It will be referenced during protocol analysis.",
   "add_to_slot": "Add to slot {{slotName}}",
   "add_to": "Add to {{slotName}}",
   "an_error_occurred_while_updating": "An error occurred while updating your pipette's settings.",
@@ -74,6 +74,7 @@
   "heater": "Heater",
   "height_ranges": "{{gen}} Height Ranges",
   "hot_to_the_touch": "<block>Module is <bold>hot</bold> to the touch</block>",
+  "identify": "Identify",
   "input_out_of_range": "Input out of range",
   "instrument_attached": "Instrument attached",
   "instruments_and_modules": "Instruments and Modules",

app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx

@@ -41,6 +41,10 @@ import type {
   CutoutId,
 } from '@opentrons/shared-data'
 import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types'
+import { useSendIdentifyStacker } from '../ModuleWizardFlows/hooks'
+
+const FLEX_STACKER_FIXTURE = 'flexStackerModuleV1'
+const MODULE_IDENTIFY_TIME_MS = 10000
 
 interface AddFixtureModalProps {
   cutoutId: CutoutId
@@ -161,7 +165,10 @@ export function AddFixtureModal({
     )
   }
 
-  const handleAddFixture = (addedCutoutConfigs: CutoutConfigMap[]): void => {
+  const sendIdentifyStacker = useSendIdentifyStacker()
+  const attachedModules = useModulesQuery().data?.data
+
+  const handleAddFixture = (addedCutoutConfigs: CutoutConfigMap[], fixtureSerialNumber?: string): void => {
     const addedCutoutConfigsWithCombo = replaceCutoutFixtureWithComboFixture(
       addedCutoutConfigs,
       deckConfigWithAA,
@@ -175,10 +182,32 @@ export function AddFixtureModal({
       )
     }) as CutoutConfig[] // we can do this bc we are mapping each aa to the proper fixture
 
+    if (fixtureSerialNumber){
+      const module = attachedModules?.find(
+        m => m.serialNumber === fixtureSerialNumber
+      ) ?? null
+      if ( module !== null){
+        sendIdentifyStacker(module, false)
+      }
+    }
+
     updateDeckConfiguration(newDeckConfig)
     closeModal()
   }
 
+  const handleIdentifyFixture = (fixtureSerialNumber: string): void => {
+    const module = attachedModules?.find(
+      m => m.serialNumber === fixtureSerialNumber
+    ) ?? null
+    if ( module !== null){
+      // Identify the stacker module
+      sendIdentifyStacker(module, true, 'blue')
+      //Ensure that the module reverts after a set time
+      setTimeout(() =>{sendIdentifyStacker(module, false)}, MODULE_IDENTIFY_TIME_MS)
+    }
+
+  }
+
   const fixtureOptions = availableOptions.map(cutoutConfigs => {
     const usbPort = (modulesData?.data ?? []).find(
       m => m.serialNumber === cutoutConfigs[0].opentronsModuleSerialNumber
@@ -187,21 +216,44 @@ export function AddFixtureModal({
       usbPort?.hubPort != null
         ? `${usbPort.port}.${usbPort.hubPort}`
         : usbPort?.port
-
-    return (
-      <FixtureOption
-        key={cutoutConfigs[0].cutoutFixtureId}
-        optionName={getFixtureDisplayName(
-          cutoutConfigs[0].cutoutFixtureId,
-          portDisplay
-        )}
-        buttonText={t('add')}
-        onClickHandler={() => {
-          handleAddFixture(cutoutConfigs)
-        }}
-        isOnDevice={isOnDevice}
-      />
-    )
+    
+    const fixtureSerialNumber = cutoutConfigs[0].opentronsModuleSerialNumber
+    if (fixtureSerialNumber !== undefined && cutoutConfigs[0].cutoutFixtureId.includes(FLEX_STACKER_FIXTURE)){
+      return (
+        <FixtureOption
+          key={cutoutConfigs[0].cutoutFixtureId}
+          optionName={getFixtureDisplayName(
+            cutoutConfigs[0].cutoutFixtureId,
+            portDisplay
+          )}
+          buttonText={t('add')}
+          onClickHandler={() => {
+            handleAddFixture(cutoutConfigs, fixtureSerialNumber)
+          }}
+          secondaryButtonText={t('identify')}
+          secondaryOnClickHandler={() => {
+            handleIdentifyFixture(fixtureSerialNumber)}
+          }
+          isOnDevice={isOnDevice}
+        />
+      )
+    }
+    else{
+      return (
+        <FixtureOption
+          key={cutoutConfigs[0].cutoutFixtureId}
+          optionName={getFixtureDisplayName(
+            cutoutConfigs[0].cutoutFixtureId,
+            portDisplay
+          )}
+          buttonText={t('add')}
+          onClickHandler={() => {
+            handleAddFixture(cutoutConfigs)
+          }}
+          isOnDevice={isOnDevice}
+        />
+      )
+    }
   })
 
   return (
@@ -224,6 +276,9 @@ export function AddFixtureModal({
           </Flex>
         </OddModal>
       ) : (
+        // This is the modal with the module fixtures
+        // Something that checks if this is a stacker module with a TODO to remove/update if other identifiable modules are added
+        // Call to the use identify thing that transitions back to regular after a second? 
         <Modal {...modalProps}>
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
             <StyledText desktopStyle="bodyDefaultRegular">

components/src/organisms/FixtureOption/index.tsx

@@ -1,34 +1,67 @@
 import { TertiaryButton } from '../../atoms/buttons'
 import { ListItem } from '../../atoms/ListItem/index'
 import { StyledText } from '../../atoms/StyledText'
-import { ALIGN_CENTER, JUSTIFY_SPACE_BETWEEN } from '../../styles'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER, JUSTIFY_FLEX_END, JUSTIFY_SPACE_BETWEEN } from '../../styles'
 import { SPACING } from '../../ui-style-constants'
 
 import type { MouseEventHandler } from 'react'
 
 interface FixtureOptionProps {
   onClickHandler: MouseEventHandler
+  secondaryOnClickHandler?: MouseEventHandler
   optionName: string
+  secondaryButtonText?: string
   buttonText: string
   isOnDevice: boolean
 }
 export function FixtureOption(props: FixtureOptionProps): JSX.Element {
-  const { onClickHandler, optionName, buttonText } = props
-  return (
-    <ListItem
-      type="default"
-      padding={SPACING.spacing16 + ' ' + SPACING.spacing24}
-      alignItems={ALIGN_CENTER}
-      justifyContent={JUSTIFY_SPACE_BETWEEN}
-    >
-      <StyledText desktopStyle="bodyDefaultSemiBold">{optionName}</StyledText>
-      <TertiaryButton
-        buttonType="primary"
-        onClick={onClickHandler}
-        data-testid={optionName}
+  const { onClickHandler, optionName, buttonText, secondaryOnClickHandler, secondaryButtonText } = props
+  if (secondaryOnClickHandler !== null && secondaryButtonText !== undefined){
+      return (
+      <ListItem
+        type="default"
+        padding={SPACING.spacing16 + ' ' + SPACING.spacing24}
+        alignItems={ALIGN_CENTER}
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
       >
-        {buttonText}
-      </TertiaryButton>
-    </ListItem>
-  )
+        <StyledText desktopStyle="bodyDefaultSemiBold">{optionName}</StyledText>
+        <Flex gridGap={SPACING.spacing4} width={"10rem"} justifyContent={JUSTIFY_FLEX_END}>
+        <TertiaryButton
+          buttonType="secondary"
+          onClick={secondaryOnClickHandler}
+          data-testid={optionName}
+        >
+          {secondaryButtonText}
+        </TertiaryButton>
+        <TertiaryButton
+          buttonType="primary"
+          onClick={onClickHandler}
+          data-testid={optionName}
+        >
+          {buttonText}
+        </TertiaryButton>
+        </Flex>
+      </ListItem>
+    )
+  }
+  else{
+    return (
+      <ListItem
+        type="default"
+        padding={SPACING.spacing16 + ' ' + SPACING.spacing24}
+        alignItems={ALIGN_CENTER}
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+      >
+        <StyledText desktopStyle="bodyDefaultSemiBold">{optionName}</StyledText>
+        <TertiaryButton
+          buttonType="primary"
+          onClick={onClickHandler}
+          data-testid={optionName}
+        >
+          {buttonText}
+        </TertiaryButton>
+      </ListItem>
+    )
+  }
 }