feat(app, components): add stacking to non-module stacks (#15937)

Add stack icon, highlight, and click handling to non-module stacks (example: slot + adapter + labware)
Opentrons · Aug 9, 2024 · a9fc050 · a9fc050
1 parent 1b0afad
commit a9fc050
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 16 deletions.
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx
@@ -29,6 +29,7 @@ import {
   getModuleType,
   TC_MODULE_LOCATION_OT2,
   TC_MODULE_LOCATION_OT3,
+  THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
 import tiprackAdapter from '../../../../assets/images/labware/opentrons_flex_96_tiprack_adapter.png'
 
@@ -72,7 +73,7 @@ export const LabwareStackModal = (
   const isModuleThermocycler =
     moduleModel == null
       ? false
-      : getModuleType(moduleModel) === 'thermocyclerModuleType'
+      : getModuleType(moduleModel) === THERMOCYCLER_MODULE_TYPE
   const thermocyclerLocation =
     robotType === FLEX_ROBOT_TYPE
       ? TC_MODULE_LOCATION_OT3
@@ -210,14 +211,21 @@ export const LabwareStackModal = (
                 justifyContent={JUSTIFY_SPACE_BETWEEN}
               >
                 <LabwareStackLabel text={adapterName ?? ''} />
-                <LabwareStackRender
-                  definitionTop={topDefinition}
-                  definitionBottom={adapterDef}
-                  highlightBottom={true}
-                  highlightTop={false}
-                />
+                {adapterDef.parameters.loadName ===
+                'opentrons_flex_96_tiprack_adapter' ? (
+                  tiprackAdapterImg
+                ) : (
+                  <LabwareStackRender
+                    definitionTop={topDefinition}
+                    definitionBottom={adapterDef}
+                    highlightBottom={true}
+                    highlightTop={false}
+                  />
+                )}
               </Flex>
-              <Divider marginY={SPACING.spacing16} />
+              {moduleModel != null ? (
+                <Divider marginY={SPACING.spacing16} />
+              ) : null}
             </>
           ) : null}
           {moduleModel != null ? (

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx
@@ -137,20 +137,43 @@ export function SetupLabwareMap({
       const topLabwareId = labwareInAdapter?.result?.labwareId ?? labwareId
       const topLabwareDisplayName =
         labwareInAdapter?.params.displayName ?? displayName
+      const isLabwareInStack =
+        topLabwareDefinition != null &&
+        topLabwareId != null &&
+        labwareInAdapter != null
 
       return {
         labwareLocation: { slotName },
         definition: topLabwareDefinition,
         topLabwareId,
         topLabwareDisplayName,
+        highlight: isLabwareInStack && hoverLabwareId === topLabwareId,
         labwareChildren: (
-          <LabwareInfoOverlay
-            definition={topLabwareDefinition}
-            labwareId={topLabwareId}
-            displayName={topLabwareDisplayName}
-            runId={runId}
-          />
+          <g
+            cursor={isLabwareInStack ? 'pointer' : ''}
+            onClick={() => {
+              if (isLabwareInStack) {
+                setLabwareStackDetailsLabwareId(topLabwareId)
+              }
+            }}
+            onMouseEnter={() => {
+              if (topLabwareDefinition != null && topLabwareId != null) {
+                setHoverLabwareId(() => topLabwareId)
+              }
+            }}
+            onMouseLeave={() => {
+              setHoverLabwareId(null)
+            }}
+          >
+            <LabwareInfoOverlay
+              definition={topLabwareDefinition}
+              labwareId={topLabwareId}
+              displayName={topLabwareDisplayName}
+              runId={runId}
+            />
+          </g>
         ),
+        stacked: isLabwareInStack,
       }
     }
   )

diff --git a/app/src/organisms/Devices/ProtocolRun/utils/__tests__/getLocationInfoNames.test.ts b/app/src/organisms/Devices/ProtocolRun/utils/__tests__/getLocationInfoNames.test.ts
@@ -6,6 +6,7 @@ import type { ModuleModel } from '@opentrons/shared-data'
 const ADAPTER_DISPLAY_NAME = 'Opentrons 96 Flat Bottom Adapter'
 const LABWARE_DISPLAY_NAME = 'Corning 24 Well Plate 3.4 mL Flat'
 const SLOT = '5'
+const SLOT_EXTENSION = 'C4'
 const MOCK_MODEL = 'heaterShakerModuleV1' as ModuleModel
 const ADAPTER_ID =
   'd9a85adf-d272-4edd-9aae-426ef5756fef:opentrons/opentrons_96_flat_bottom_adapter/1'
@@ -119,6 +120,34 @@ const MOCK_ADAPTER_COMMANDS = [
     },
   },
 ]
+const MOCK_ADAPTER_EXTENSION_COMMANDS = [
+  {
+    commandType: 'loadLabware',
+    params: {
+      location: {
+        addressableAreaName: SLOT_EXTENSION,
+      },
+    },
+    result: {
+      labwareId: ADAPTER_ID,
+      definition: {
+        metadata: { displayName: ADAPTER_DISPLAY_NAME },
+      },
+    },
+  },
+  {
+    commandType: 'loadLabware',
+    params: {
+      location: {
+        labwareId: ADAPTER_ID,
+      },
+    },
+    result: {
+      labwareId: LABWARE_ID,
+      definition: {},
+    },
+  },
+]
 
 vi.mock('@opentrons/shared-data')
 
@@ -168,4 +197,15 @@ describe('getLocationInfoNames', () => {
       getLocationInfoNames(LABWARE_ID, MOCK_ADAPTER_COMMANDS as any)
     ).toEqual(expected)
   })
+  it('returns the adapter, slot number if the labware is on an adapter on the deck extension slot', () => {
+    const expected = {
+      slotName: SLOT_EXTENSION,
+      labwareName: LABWARE_DISPLAY_NAME,
+      adapterName: ADAPTER_DISPLAY_NAME,
+      adapterId: ADAPTER_ID,
+    }
+    expect(
+      getLocationInfoNames(LABWARE_ID, MOCK_ADAPTER_EXTENSION_COMMANDS as any)
+    ).toEqual(expected)
+  })
 })
diff --git a/app/src/organisms/Devices/ProtocolRun/utils/getLocationInfoNames.ts b/app/src/organisms/Devices/ProtocolRun/utils/getLocationInfoNames.ts
@@ -87,6 +87,18 @@ export function getLocationInfoNames(
           loadedAdapterCommand?.result?.definition.metadata.displayName,
         adapterId: loadedAdapterCommand?.result?.labwareId,
       }
+    } else if (
+      loadedAdapterCommand?.params.location !== 'offDeck' &&
+      'addressableAreaName' in loadedAdapterCommand?.params.location
+    ) {
+      return {
+        slotName: loadedAdapterCommand?.params.location.addressableAreaName,
+        labwareName,
+        labwareNickname,
+        adapterName:
+          loadedAdapterCommand?.result?.definition.metadata.displayName,
+        adapterId: loadedAdapterCommand?.result?.labwareId,
+      }
     } else if (
       loadedAdapterCommand?.params.location !== 'offDeck' &&
       'moduleId' in loadedAdapterCommand?.params.location

diff --git a/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx b/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx
@@ -85,6 +85,10 @@ export function LabwareMapView(props: LabwareMapViewProps): JSX.Element {
       const topLabwareDefinition =
         labwareInAdapter?.result?.definition ?? labwareDef
       const topLabwareId = labwareInAdapter?.result?.labwareId ?? labwareId
+      const isLabwareInStack =
+        topLabwareDefinition != null &&
+        topLabwareId != null &&
+        labwareInAdapter != null
 
       return {
         labwareLocation: { slotName },
@@ -95,6 +99,7 @@ export function LabwareMapView(props: LabwareMapViewProps): JSX.Element {
         },
         labwareChildren: null,
         highlight: true,
+        stacked: isLabwareInStack,
       }
     }
   )

diff --git a/components/src/hardware-sim/Labware/LabwareAdapter/index.tsx b/components/src/hardware-sim/Labware/LabwareAdapter/index.tsx
@@ -4,6 +4,9 @@ import { Opentrons96FlatBottomAdapter } from './Opentrons96FlatBottomAdapter'
 import { OpentronsUniversalFlatAdapter } from './OpentronsUniversalFlatAdapter'
 import { OpentronsAluminumFlatBottomPlate } from './OpentronsAluminumFlatBottomPlate'
 import { OpentronsFlex96TiprackAdapter } from './OpentronsFlex96TiprackAdapter'
+import { COLORS } from '../../../helix-design-system'
+import { LabwareOutline } from '../labwareInternals'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 const LABWARE_ADAPTER_LOADNAME_PATHS = {
   opentrons_96_deep_well_adapter: Opentrons96DeepWellAdapter,
@@ -20,13 +23,28 @@ export const labwareAdapterLoadNames = Object.keys(
 
 export interface LabwareAdapterProps {
   labwareLoadName: LabwareAdapterLoadName
+  definition?: LabwareDefinition2
+  highlight?: boolean
 }
 
 export const LabwareAdapter = (
   props: LabwareAdapterProps
 ): JSX.Element | null => {
-  const { labwareLoadName } = props
+  const { labwareLoadName, definition, highlight = false } = props
+  const highlightOutline =
+    highlight && definition != null ? (
+      <LabwareOutline
+        definition={definition}
+        highlight={highlight}
+        fill={COLORS.transparent}
+      />
+    ) : null
   const SVGElement = LABWARE_ADAPTER_LOADNAME_PATHS[labwareLoadName]
 
-  return <SVGElement />
+  return (
+    <g>
+      <SVGElement />
+      {highlightOutline}
+    </g>
+  )
 }
diff --git a/components/src/hardware-sim/Labware/LabwareRender.tsx b/components/src/hardware-sim/Labware/LabwareRender.tsx
@@ -88,6 +88,8 @@ export const LabwareRender = (props: LabwareRenderProps): JSX.Element => {
         >
           <LabwareAdapter
             labwareLoadName={labwareLoadName as LabwareAdapterLoadName}
+            definition={definition}
+            highlight={props.highlight}
           />
         </g>
       </g>

diff --git a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
@@ -65,6 +65,7 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
             rx="8"
             ry="8"
             showRadius={showRadius}
+            fill={backgroundFill}
           />
           <LabwareBorder
             borderThickness={2.2 * OUTLINE_THICKNESS_MM}