@opentrons/components 0.1.7-alpha.0 → 0.1.7-alpha.1

package/src/organisms/CommandText/useCommandTextString/utils/formatDuration.ts

@@ -1,5 +1,7 @@
 import padStart from 'lodash/padStart'
+
 import type { Duration } from 'date-fns'
+
 /**
  * utility to format a date-fns duration object to hh:mm:ss
  * @param duration date-fns duration object

package/src/organisms/CommandText/useCommandTextString/utils/getAddressableAreaDisplayName.ts

@@ -1,9 +1,9 @@
+import type { TFunction } from 'i18next'
 import type {
   AddressableAreaName,
   MoveToAddressableAreaParams,
   RunTimeCommand,
 } from '@opentrons/shared-data'
-import type { TFunction } from 'i18next'
 
 export function getAddressableAreaDisplayName(
   commands: RunTimeCommand[] | undefined,

package/src/organisms/CommandText/useCommandTextString/utils/getFinalAddressableAreaCmd.ts

@@ -1,5 +1,7 @@
 import { findLastAt } from './helpers'
+
 import type { RunTimeCommand } from '@opentrons/shared-data'
+
 /**
  * given a list of commands and a labwareId, calculate the resulting location
  * of the corresponding labware after all given commands are executed

package/src/organisms/CommandText/useCommandTextString/utils/getFinalLabwareLocation.ts

@@ -2,10 +2,10 @@ import { findLastAt } from './helpers'
 
 import type {
   LabwareLocation,
-  RunTimeCommand,
+  LabwareLocationSequence,
   LoadLabwareRunTimeCommand,
   MoveLabwareRunTimeCommand,
-  LabwareLocationSequence,
+  RunTimeCommand,
 } from '@opentrons/shared-data'
 
 /**

package/src/organisms/CommandText/useCommandTextString/utils/getLabwareDefinitionsFromCommands.ts

@@ -2,9 +2,9 @@ import { getLabwareDefURI } from '@opentrons/shared-data'
 
 import type {
   LabwareDefinition2,
-  RunTimeCommand,
   LoadLabwareRunTimeCommand,
   LoadLidRunTimeCommand,
+  RunTimeCommand,
 } from '@opentrons/shared-data'
 
 // Note: This is an O(n) operation.

package/src/organisms/CommandText/useCommandTextString/utils/getLabwareDisplayLocation.tsx

@@ -1,28 +1,30 @@
 import {
+  FLEX_STACKER_MODULE_V1,
   getModuleDisplayName,
   getModuleType,
   getOccludedSlotCountForModule,
+  MOVABLE_TRASH_ADDRESSABLE_AREAS,
   THERMOCYCLER_MODULE_V1,
   THERMOCYCLER_MODULE_V2,
   TRASH_BIN_FIXTURE,
   WASTE_CHUTE_ADDRESSABLE_AREAS,
-  MOVABLE_TRASH_ADDRESSABLE_AREAS,
 } from '@opentrons/shared-data'
+
 import {
   getLabwareLocation,
   getLabwareLocationFromSequence,
 } from './getLabwareLocation'
 
 import type { TFunction } from 'i18next'
-import type {
-  LocationFullParams,
-  LocationSlotOnlyParams,
-} from './getLabwareLocation'
 import type {
   AddressableAreaName,
   LabwareLocation,
   LabwareLocationSequence,
 } from '@opentrons/shared-data'
+import type {
+  LocationFullParams,
+  LocationSlotOnlyParams,
+} from './getLabwareLocation'
 
 export interface DisplayLocationSlotOnlyParams
   extends Omit<LocationSlotOnlyParams, 'location'> {
@@ -82,18 +84,35 @@ export function getLabwareDisplayLocation(
   // Module location without adapter
   else if (moduleModel != null && adapterName == null) {
     if (params.detailLevel === 'slot-only') {
-      return t('slot', { slot_name: slotName })
+      switch (moduleModel) {
+        case THERMOCYCLER_MODULE_V1:
+        case THERMOCYCLER_MODULE_V2:
+          return t('slot', { slot_name: 'A1+B1' })
+        case FLEX_STACKER_MODULE_V1:
+          return t('stacker_display_name', {
+            stacker_slot: getSlotColumn(slotName),
+          })
+        default:
+          return t('slot', { slot_name: slotName })
+      }
     } else {
-      return isOnDevice
-        ? `${getModuleDisplayName(moduleModel)}, ${slotName}`
-        : t('module_in_slot', {
-            count: getOccludedSlotCountForModule(
-              getModuleType(moduleModel),
-              params.robotType
-            ),
-            module: getModuleDisplayName(moduleModel),
-            slot_name: slotName,
+      switch (moduleModel) {
+        case FLEX_STACKER_MODULE_V1:
+          return t('stacker_column_display_name', {
+            stacker_slot: getSlotColumn(slotName),
           })
+        default:
+          return isOnDevice
+            ? `${getModuleDisplayName(moduleModel)}, ${slotName}`
+            : t('module_in_slot', {
+                count: getOccludedSlotCountForModule(
+                  getModuleType(moduleModel),
+                  params.robotType
+                ),
+                module: getModuleDisplayName(moduleModel),
+                slot_name: slotName,
+              })
+      }
     }
   }
   // Adapter locations
@@ -119,6 +138,10 @@ export function getLabwareDisplayLocation(
   }
 }
 
+function getSlotColumn(slotName: string): string {
+  return slotName.charAt(0)
+}
+
 // Sometimes we don't want to show the actual slotName, so we special case the text here.
 function handleSpecialSlotNames(
   slotName: string,

package/src/organisms/CommandText/useCommandTextString/utils/getLabwareLocation.tsx

@@ -1,23 +1,25 @@
 import {
+  FLEX_STACKER_MODULE_V1,
+  getCutoutDisplayName,
   getLabwareDefURI,
   getLabwareDisplayName,
-  getCutoutDisplayName,
-  getSlotFromAddressableAreaName,
   getModuleModelFromAddressableArea,
+  getSlotFromAddressableAreaName,
   MOVABLE_TRASH_ADDRESSABLE_AREAS,
   WASTE_CHUTE_ADDRESSABLE_AREAS,
 } from '@opentrons/shared-data'
+
 import { getModuleDisplayLocation } from './getModuleDisplayLocation'
 import { getModuleModel } from './getModuleModel'
 
 import type {
+  AddressableAreaName,
+  CutoutId,
   LabwareDefinition2,
   LabwareLocation,
+  LabwareLocationSequence,
   ModuleModel,
   RobotType,
-  LabwareLocationSequence,
-  CutoutId,
-  AddressableAreaName,
 } from '@opentrons/shared-data'
 import type { LoadedLabwares, LoadedModules } from './types'
 
@@ -72,7 +74,6 @@ export function getLabwareLocationFromSequence(
     locationSequence,
     detailLevel = 'full',
   } = params
-
   return locationSequence.reduce<LocationResult>(
     (acc, sequenceItem, index) => {
       if (sequenceItem.kind === 'notOnDeck') {
@@ -111,7 +112,10 @@ export function getLabwareLocationFromSequence(
         return {
           ...acc,
           slotName,
-          moduleModel: moduleModel ?? undefined,
+          moduleModel:
+            moduleModel === FLEX_STACKER_MODULE_V1
+              ? undefined
+              : moduleModel ?? undefined,
         }
       } else if (sequenceItem.kind === 'onModule') {
         const moduleModel = getModuleModel(loadedModules, sequenceItem.moduleId)
@@ -120,10 +124,15 @@ export function getLabwareLocationFromSequence(
         } else {
           return {
             ...acc,
-            moduleModel,
+            moduleModel:
+              moduleModel === FLEX_STACKER_MODULE_V1
+                ? undefined
+                : moduleModel ?? undefined,
           }
         }
-      } else if (detailLevel === 'full') {
+      }
+      // TODO(tz, 4-16-25): add inHopperLocation when logic is merged
+      else if (detailLevel === 'full') {
         const { allRunDefs } = params as SequenceFullParams
         if (sequenceItem.kind === 'onLabware' && acc.adapterName == null) {
           if (!Array.isArray(loadedLabwares)) {

package/src/organisms/CommandText/useCommandTextString/utils/getModuleDisplayLocation.ts

@@ -1,4 +1,5 @@
 import { getLoadedModule } from './getLoadedModule'
+
 import type { LoadedModules } from './types'
 
 export function getModuleDisplayLocation(

package/src/organisms/CommandText/useCommandTextString/utils/getModuleModel.ts

@@ -1,4 +1,5 @@
 import { getLoadedModule } from './getLoadedModule'
+
 import type { ModuleModel } from '@opentrons/shared-data'
 import type { LoadedModules } from './types'
 

package/src/organisms/CommandText/useCommandTextString/utils/getWellRange.ts

@@ -1,8 +1,9 @@
 import { getPipetteNameSpecs } from '@opentrons/shared-data'
+
 import type {
+  ConfigureNozzleLayoutRunTimeCommand,
   PipetteName,
   RunTimeCommand,
-  ConfigureNozzleLayoutRunTimeCommand,
 } from '@opentrons/shared-data'
 
 const usedChannelsFromCommand = (

package/src/organisms/DeckLabelSet/DeckLabelSet.stories.tsx

@@ -1,9 +1,8 @@
+import { DeckLabelSet as DeckLabelSetComponent } from '.'
 import { BORDERS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
 
-import { DeckLabelSet as DeckLabelSetComponent } from '.'
-
 import type { Meta, StoryObj } from '@storybook/react'
 
 const mockDeckLabels = [

package/src/organisms/DeckLabelSet/__tests__/DeckLabelSet.test.tsx

@@ -1,10 +1,10 @@
-import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
+import { DeckLabelSet } from '..'
 import { BORDERS, COLORS } from '../../../helix-design-system'
 import { DeckLabel } from '../../../molecules/DeckLabel'
-import { DeckLabelSet } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/organisms/DeckLabelSet/index.tsx

@@ -1,10 +1,12 @@
 import { forwardRef } from 'react'
 import styled from 'styled-components'
-import { Box } from '../../primitives'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { RobotCoordsForeignDiv } from '../../hardware-sim'
 
+import { RobotCoordsForeignDiv } from '../../hardware-sim'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { DeckInfoLabel } from '../../molecules'
 import { DeckLabel } from '../../molecules/DeckLabel'
+import { Box } from '../../primitives'
+import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles'
 import { SPACING } from '../../ui-style-constants'
 
 import type { ForwardedRef } from 'react'
@@ -17,13 +19,22 @@ interface DeckLabelSetProps {
   width: number
   height: number
   invert?: boolean
+  showModuleIcon?: boolean
 }
 
 const DeckLabelSetComponent = (
   props: DeckLabelSetProps,
   ref: ForwardedRef<HTMLDivElement>
 ): JSX.Element => {
-  const { deckLabels, x, y, width, height, invert = false } = props
+  const {
+    deckLabels,
+    x,
+    y,
+    width,
+    height,
+    invert = false,
+    showModuleIcon = false,
+  } = props
 
   return (
     <RobotCoordsForeignDiv
@@ -35,24 +46,35 @@ const DeckLabelSetComponent = (
         },
       }}
     >
-      <StyledBox
-        width={width}
-        height={height}
-        data-testid="DeckLabeSet"
-        isZoomed={deckLabels.length > 0 ? deckLabels[0].isZoomed : true}
-      />
-      <LabelContainer ref={ref}>
-        {deckLabels.length > 0
-          ? deckLabels.map((deckLabel, index) => (
-              <DeckLabel
-                key={`DeckLabel_${index}`}
-                maxWidth={`calc(${width}px - 8px)`}
-                {...deckLabel}
-                isLast={deckLabels.length - 1 === index}
-              />
-            ))
-          : null}
-      </LabelContainer>
+      <Box position={POSITION_RELATIVE} width="100%" height="100%">
+        <StyledBox
+          width={width}
+          height={height}
+          isZoomed={deckLabels.length > 0 ? deckLabels[0].isZoomed : true}
+          data-testid="DeckLabeSet"
+        />
+        {showModuleIcon && (
+          <IconWrapper leftPosition={width - 16}>
+            <DeckInfoLabel
+              iconName="stacked"
+              highlight
+              transform="scale(0.75)"
+            />
+          </IconWrapper>
+        )}
+        <LabelContainer ref={ref}>
+          {deckLabels.length > 0
+            ? deckLabels.map((deckLabel, index) => (
+                <DeckLabel
+                  key={`DeckLabel_${index}`}
+                  maxWidth={`calc(${width}px - 8px)`}
+                  {...deckLabel}
+                  isLast={deckLabels.length - 1 === index}
+                />
+              ))
+            : null}
+        </LabelContainer>
+      </Box>
     </RobotCoordsForeignDiv>
   )
 }
@@ -91,3 +113,14 @@ const LabelContainer = styled.div`
     border-bottom-left-radius: ${BORDERS.borderRadius4};
   }
 `
+
+interface IconWrapperProps {
+  leftPosition: number
+}
+
+const IconWrapper = styled(Box)<IconWrapperProps>`
+  position: ${POSITION_ABSOLUTE};
+  top: -${SPACING.spacing8};
+  left: ${props => `${props.leftPosition}px`};
+  z-index: 3;
+`

package/src/organisms/FixtureOption/__tests__/FixtureOption.test.tsx

@@ -0,0 +1,42 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { FixtureOption } from '../index'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof FixtureOption>) => {
+  return renderWithProviders(<FixtureOption {...props} />)
+}
+
+describe('FixtureOption', () => {
+  let props: ComponentProps<typeof FixtureOption>
+
+  it('should render text and buttons for desktop app', () => {
+    props = {
+      onClickHandler: vi.fn(),
+      optionName: 'mockOption',
+      buttonText: 'mockText',
+      isOnDevice: false,
+    }
+    render(props)
+    screen.getByText('mockOption')
+    screen.getByText('mockText')
+    fireEvent.click(screen.getByTestId('mockOption'))
+    expect(props.onClickHandler).toHaveBeenCalled()
+  })
+  it('should render text and buttons for odd', () => {
+    props = {
+      onClickHandler: vi.fn(),
+      optionName: 'mockOption',
+      buttonText: 'mockText',
+      isOnDevice: true,
+    }
+    render(props)
+    screen.getByText('mockOption')
+    screen.getByText('mockText')
+    fireEvent.click(screen.getByRole('button'))
+    expect(props.onClickHandler).toHaveBeenCalled()
+  })
+})

package/src/organisms/FixtureOption/index.tsx

@@ -0,0 +1,92 @@
+import styled from 'styled-components'
+
+import { TertiaryButton } from '../../atoms/buttons'
+import { StyledText } from '../../atoms/StyledText'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Btn, Flex } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  CURSOR_DEFAULT,
+  DIRECTION_ROW,
+  DISPLAY_FLEX,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../../styles'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+
+import type { MouseEventHandler } from 'react'
+
+interface FixtureOptionProps {
+  onClickHandler: MouseEventHandler
+  optionName: string
+  buttonText: string
+  isOnDevice: boolean
+}
+export function FixtureOption(props: FixtureOptionProps): JSX.Element {
+  const { onClickHandler, optionName, buttonText, isOnDevice } = props
+  return isOnDevice ? (
+    <FixtureButtonODD onClick={onClickHandler}>
+      <StyledText
+        oddStyle="bodyTextRegular"
+        fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+      >
+        {optionName}
+      </StyledText>
+      <StyledText oddStyle="bodyTextRegular">{buttonText}</StyledText>
+    </FixtureButtonODD>
+  ) : (
+    <Flex
+      flexDirection={DIRECTION_ROW}
+      alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      padding={`${SPACING.spacing8} ${SPACING.spacing16}`}
+      backgroundColor={COLORS.grey20}
+      borderRadius={BORDERS.borderRadius4}
+    >
+      <StyledText desktopStyle="bodyDefaultSemiBold">{optionName}</StyledText>
+      <TertiaryButton
+        buttonType="primary"
+        onClick={onClickHandler}
+        data-testid={optionName}
+      >
+        {buttonText}
+      </TertiaryButton>
+    </Flex>
+  )
+}
+
+export const FixtureButtonODD = styled(Btn)`
+  display: ${DISPLAY_FLEX};
+  background-color: ${COLORS.grey35};
+  justify-content: ${JUSTIFY_SPACE_BETWEEN};
+  flex-direction: ${DIRECTION_ROW};
+  align-items: ${ALIGN_CENTER};
+  cursor: ${CURSOR_DEFAULT};
+  border-radius: ${BORDERS.borderRadius16};
+  box-shadow: none;
+  padding: ${SPACING.spacing16} ${SPACING.spacing24};
+
+  &:focus {
+    background-color: ${COLORS.grey40};
+    box-shadow: none;
+  }
+
+  &:hover {
+    border: none;
+    box-shadow: none;
+    background-color: ${COLORS.grey35};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 ${SPACING.spacing4} ${COLORS.blue50};
+    background-color: ${COLORS.grey35};
+  }
+
+  &:active {
+    background-color: ${COLORS.grey40};
+  }
+
+  &:disabled {
+    background-color: ${COLORS.grey35};
+    color: ${COLORS.grey50};
+  }
+`

package/src/organisms/ProtocolTimelineScrubber/CommandItem.tsx

@@ -1,12 +1,14 @@
 import { useState } from 'react'
-import { Flex } from '../../primitives'
+
+import { LegacyStyledText } from '../../atoms'
 import { COLORS } from '../../helix-design-system'
-import { SPACING } from '../../ui-style-constants'
+import { Flex } from '../../primitives'
 import { ALIGN_FLEX_END, DIRECTION_COLUMN, OVERFLOW_SCROLL } from '../../styles'
-import { LegacyStyledText } from '../../atoms'
-import { COMMAND_WIDTH_PX } from './index'
+import { SPACING } from '../../ui-style-constants'
 import { CommandText } from '../CommandText'
+import { COMMAND_WIDTH_PX } from './index'
 import { getCommandTextData } from './utils'
+
 import type {
   CompletedProtocolAnalysis,
   LabwareDefinition2,

package/src/organisms/ProtocolTimelineScrubber/PipetteVisuals.tsx

@@ -1,13 +1,15 @@
 import { useState } from 'react'
+
+import { LegacyStyledText } from '../../atoms'
+import { COLORS } from '../../helix-design-system'
 import { Box, Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
   DIRECTION_COLUMN,
   TEXT_TRANSFORM_UPPERCASE,
 } from '../../styles'
-import { LegacyStyledText } from '../../atoms'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
+
 import type {
   CompletedProtocolAnalysis,
   ProtocolAnalysisOutput,

package/src/organisms/ProtocolTimelineScrubber/index.tsx

@@ -1,17 +1,20 @@
-import { useMemo, useState, useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import ViewportList from 'react-viewport-list'
 import map from 'lodash/map'
 import reduce from 'lodash/reduce'
-import ViewportList from 'react-viewport-list'
 
-import {
-  constructInvariantContextFromRunCommands,
-  getResultingTimelineFrameFromRunCommands,
-} from '@opentrons/step-generation'
 import {
   FLEX_ROBOT_TYPE,
-  THERMOCYCLER_MODULE_TYPE,
   getSimplestDeckConfigForProtocol,
+  THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
+import {
+  constructInvariantContextFromRunCommands,
+  getResultingTimelineFrameFromRunCommands,
+  getSlotInLocationStack,
+  getTopmostLabwareOnModuleFromStackRobotState,
+} from '@opentrons/step-generation'
+
 import {
   ALIGN_CENTER,
   ALIGN_STRETCH,
@@ -25,13 +28,13 @@ import {
   PrimaryButton,
   SPACING,
 } from '../..'
-import { PipetteMountViz } from './PipetteVisuals'
 import { getLabwareDefinitionsFromCommands } from '../CommandText/useCommandTextString/utils/getLabwareDefinitionsFromCommands'
+import { CommandItem } from './CommandItem'
+import { PipetteMountViz } from './PipetteVisuals'
 import {
   getAllWellContentsForActiveItem,
   wellFillFromWellContents,
 } from './utils'
-import { CommandItem } from './CommandItem'
 
 import type { ComponentProps } from 'react'
 import type { ViewportListRef } from 'react-viewport-list'
@@ -146,11 +149,12 @@ export function ProtocolTimelineScrubber(
             robotType={robotType ?? FLEX_ROBOT_TYPE}
             deckConfig={getSimplestDeckConfigForProtocol(analysis)}
             modulesOnDeck={map(robotState.modules, (module, moduleId) => {
-              const labwareInModuleId =
-                Object.entries(robotState.labware).find(
-                  ([labwareId, labware]) => labware.slot === moduleId
-                )?.[0] ?? null
-
+              const topLabwareId = getTopmostLabwareOnModuleFromStackRobotState(
+                moduleId,
+                robotState.labware
+              )
+              const topLabwareEntity =
+                invariantContext.labwareEntities[topLabwareId]
               const getModuleInnerProps = (
                 moduleState: ModuleTemporalProperties['moduleState']
               ): ComponentProps<typeof Module>['innerProps'] => {
@@ -179,36 +183,9 @@ export function ProtocolTimelineScrubber(
                 }
               }
 
-              const adapterId =
-                labwareInModuleId != null
-                  ? invariantContext.labwareEntities[labwareInModuleId].id
-                  : null
-              const labwareTempProperties =
-                adapterId != null
-                  ? Object.entries(robotState.labware).find(
-                      ([labwareId, labware]) => labware.slot === adapterId
-                    )
-                  : null
-
-              const labwareDef =
-                labwareTempProperties != null
-                  ? invariantContext.labwareEntities[labwareTempProperties[0]]
-                      .def
-                  : null
-              let nestedDef
-              let labwareId = null
-              if (labwareDef != null && labwareTempProperties != null) {
-                labwareId = labwareTempProperties[0]
-                nestedDef = labwareDef
-              } else if (labwareInModuleId != null) {
-                labwareId = labwareInModuleId
-                nestedDef =
-                  invariantContext.labwareEntities[labwareInModuleId]?.def
-              }
-
               const wellContents =
-                allWellContentsForActiveItem && labwareId != null
-                  ? allWellContentsForActiveItem[labwareId]
+                allWellContentsForActiveItem && topLabwareEntity != null
+                  ? allWellContentsForActiveItem[topLabwareEntity.id]
                   : null
               const nestedFill = wellFillFromWellContents(
                 wellContents,
@@ -218,7 +195,7 @@ export function ProtocolTimelineScrubber(
               return {
                 moduleModel: invariantContext.moduleEntities[moduleId].model,
                 moduleLocation: { slotName: module.slot },
-                nestedLabwareDef: nestedDef,
+                nestedLabwareDef: topLabwareEntity?.def,
                 nestedLabwareWellFill: nestedFill,
                 innerProps: getModuleInnerProps(module.moduleState),
               }
@@ -237,7 +214,7 @@ export function ProtocolTimelineScrubber(
                   )
                 : {}
               const labwareLocation: LabwareLocation = {
-                slotName: labware.slot,
+                slotName: getSlotInLocationStack(labware.stack),
               }
               const wellContents =
                 allWellContentsForActiveItem && labwareId != null