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

package/src/organisms/CommandText/useCommandTextString/utils/commandText/getPipettingCommandText.ts

@@ -58,9 +58,12 @@ export const getPipettingCommandText = ({
         })
       : null
 
+  const volume = formatCmdParamDecimal(command, 'volume')
+  const flowRate = formatCmdParamDecimal(command, 'flowRate')
+  const pushOutVolume = formatCmdParamDecimal(command, 'pushOut')
+
   switch (command?.commandType) {
     case 'aspirate': {
-      const { volume, flowRate } = command.params
       return t('aspirate', {
         well_name: wellName,
         labware: labwareName,
@@ -70,15 +73,14 @@ export const getPipettingCommandText = ({
       })
     }
     case 'dispense': {
-      const { volume, flowRate, pushOut } = command.params
-      return pushOut != null
+      return pushOutVolume != null
         ? t('dispense_push_out', {
             well_name: wellName,
             labware: labwareName,
             labware_location: displayLocation,
             volume,
             flow_rate: flowRate,
-            push_out_volume: pushOut,
+            push_out_volume: pushOutVolume,
           })
         : t('dispense', {
             well_name: wellName,
@@ -89,7 +91,6 @@ export const getPipettingCommandText = ({
           })
     }
     case 'blowout': {
-      const { flowRate } = command.params
       return t('blowout', {
         well_name: wellName,
         labware: labwareName,
@@ -155,19 +156,15 @@ export const getPipettingCommandText = ({
       }
     }
     case 'dispenseInPlace': {
-      const { volume, flowRate } = command.params
       return t('dispense_in_place', { volume, flow_rate: flowRate })
     }
     case 'blowOutInPlace': {
-      const { flowRate } = command.params
       return t('blowout_in_place', { flow_rate: flowRate })
     }
     case 'aspirateInPlace': {
-      const { flowRate, volume } = command.params
       return t('aspirate_in_place', { volume, flow_rate: flowRate })
     }
     case 'airGapInPlace': {
-      const { volume } = command.params
       return t('air_gap_in_place', { volume })
     }
     case 'sealPipetteToTip': {
@@ -183,7 +180,6 @@ export const getPipettingCommandText = ({
       })
     }
     case 'pressureDispense': {
-      const { flowRate, volume } = command.params
       return t('pressurizing_to_dispense', { volume, flow_rate: flowRate })
     }
     default: {
@@ -195,3 +191,16 @@ export const getPipettingCommandText = ({
     }
   }
 }
+
+// Format the given command param to two decimals if it exists and can be cast as a number.
+const formatCmdParamDecimal = (
+  command: RunTimeCommand | null | undefined,
+  paramName: string
+): string | null =>
+  command?.params &&
+  paramName in command.params &&
+  command.params[paramName as keyof typeof command.params] != null
+    ? Number(command.params[paramName as keyof typeof command.params]).toFixed(
+        2
+      )
+    : null

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

@@ -1,7 +1,7 @@
 import { getLabwareDefURI } from '@opentrons/shared-data'
 
 import type {
-  LabwareDefinition2,
+  LabwareDefinition,
   LoadLabwareRunTimeCommand,
   LoadLidRunTimeCommand,
   RunTimeCommand,
@@ -10,8 +10,8 @@ import type {
 // Note: This is an O(n) operation.
 export function getLabwareDefinitionsFromCommands(
   commands: RunTimeCommand[]
-): LabwareDefinition2[] {
-  return commands.reduce<LabwareDefinition2[]>(
+): LabwareDefinition[] {
+  return commands.reduce<LabwareDefinition[]>(
     (acc, command) => [
       ...getLabwareDefinitionFromCommand(command, acc),
       ...acc,
@@ -21,11 +21,11 @@ export function getLabwareDefinitionsFromCommands(
 }
 
 function getNewLabwareDefinitions(
-  newDefinitions: Array<LabwareDefinition2 | null | undefined>,
-  knownDefinitions: LabwareDefinition2[]
-): LabwareDefinition2[] {
+  newDefinitions: Array<LabwareDefinition | null | undefined>,
+  knownDefinitions: LabwareDefinition[]
+): LabwareDefinition[] {
   return newDefinitions.filter(
-    (maybeNewDef): maybeNewDef is LabwareDefinition2 =>
+    (maybeNewDef): maybeNewDef is LabwareDefinition =>
       maybeNewDef != null &&
       !knownDefinitions.some(
         knownDef => getLabwareDefURI(knownDef) === getLabwareDefURI(maybeNewDef)
@@ -40,8 +40,8 @@ const isLoadCommand = (
 
 function getLabwareDefinitionFromCommand(
   command: RunTimeCommand,
-  known: LabwareDefinition2[]
-): LabwareDefinition2[] {
+  known: LabwareDefinition[]
+): LabwareDefinition[] {
   if (isLoadCommand(command)) {
     return getNewLabwareDefinitions([command.result?.definition], known)
   }

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

@@ -15,7 +15,7 @@ import { getModuleModel } from './getModuleModel'
 import type {
   AddressableAreaName,
   CutoutId,
-  LabwareDefinition2,
+  LabwareDefinition,
   LabwareLocation,
   LabwareLocationSequence,
   ModuleModel,
@@ -49,11 +49,11 @@ export interface SequenceSlotOnlyParams extends SequenceBaseParams {
   detailLevel: 'slot-only'
 }
 export interface LocationFullParams extends BaseParams {
-  allRunDefs: LabwareDefinition2[]
+  allRunDefs: LabwareDefinition[]
   detailLevel?: 'full'
 }
 export interface SequenceFullParams extends SequenceBaseParams {
-  allRunDefs: LabwareDefinition2[]
+  allRunDefs: LabwareDefinition[]
   detailLevel?: 'full'
 }
 

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

@@ -2,7 +2,7 @@ import { getLabwareDefURI, getLabwareDisplayName } from '@opentrons/shared-data'
 
 import { getLoadedLabware } from './getLoadedLabware'
 
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareDefinition } from '@opentrons/shared-data'
 import type { LoadedLabwares } from './types'
 
 const FIXED_TRASH_DEF_URIS = [
@@ -13,7 +13,7 @@ const FIXED_TRASH_DEF_URIS = [
 const LID_STACK_OBJECT_LOADNAME = 'protocol_engine_lid_stack_object'
 
 export interface GetLabwareNameParams {
-  allRunDefs: LabwareDefinition2[]
+  allRunDefs: LabwareDefinition[]
   loadedLabwares: LoadedLabwares
   labwareId: string
 }

package/src/organisms/DeckLabelSet/index.tsx

@@ -41,9 +41,7 @@ const DeckLabelSetComponent = (
       x={x}
       y={y}
       innerDivProps={{
-        style: {
-          transform: `rotate(180deg) scaleX(-1) scaleY(${invert ? '-1' : '1'})`,
-        },
+        transform: `rotate(180deg) scaleX(-1) scaleY(${invert ? '-1' : '1'})`,
       }}
     >
       <Box position={POSITION_RELATIVE} width="100%" height="100%">

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

@@ -18,7 +18,6 @@ describe('FixtureOption', () => {
       onClickHandler: vi.fn(),
       optionName: 'mockOption',
       buttonText: 'mockText',
-      isOnDevice: false,
     }
     render(props)
     screen.getByText('mockOption')
@@ -31,7 +30,6 @@ describe('FixtureOption', () => {
       onClickHandler: vi.fn(),
       optionName: 'mockOption',
       buttonText: 'mockText',
-      isOnDevice: true,
     }
     render(props)
     screen.getByText('mockOption')

package/src/organisms/FixtureOption/index.tsx

@@ -1,92 +1,63 @@
-import styled from 'styled-components'
-
 import { TertiaryButton } from '../../atoms/buttons'
+import { ListItem } from '../../atoms/ListItem/index'
 import { StyledText } from '../../atoms/StyledText'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Btn, Flex } from '../../primitives'
+import { Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
-  CURSOR_DEFAULT,
-  DIRECTION_ROW,
-  DISPLAY_FLEX,
+  JUSTIFY_FLEX_END,
   JUSTIFY_SPACE_BETWEEN,
 } from '../../styles'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+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, 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}
+  const {
+    onClickHandler,
+    optionName,
+    buttonText,
+    secondaryOnClickHandler,
+    secondaryButtonText,
+  } = props
+  return (
+    <ListItem
+      type="default"
+      padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
       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}
+      <StyledText
+        desktopStyle="bodyDefaultSemiBold"
+        oddStyle="bodyTextSemiBold"
       >
-        {buttonText}
-      </TertiaryButton>
-    </Flex>
+        {optionName}
+      </StyledText>
+      <Flex gridGap={SPACING.spacing4} justifyContent={JUSTIFY_FLEX_END}>
+        {secondaryOnClickHandler !== null &&
+        secondaryButtonText !== undefined ? (
+          <TertiaryButton
+            buttonType="secondary"
+            onClick={secondaryOnClickHandler}
+            data-testid={optionName}
+          >
+            {secondaryButtonText}
+          </TertiaryButton>
+        ) : null}
+        <TertiaryButton
+          buttonType="primary"
+          onClick={onClickHandler}
+          data-testid={optionName}
+        >
+          {buttonText}
+        </TertiaryButton>
+      </Flex>
+    </ListItem>
   )
 }
-
-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/ProtocolDeck/index.tsx

@@ -0,0 +1,118 @@
+import { useMemo } from 'react'
+
+import {
+  FLEX_ROBOT_TYPE,
+  getLabwareDefinitionsByURIForProtocol,
+  getLabwareInfoByLiquidId,
+  getLabwareOnDeck,
+  getSimplestDeckConfigForProtocol,
+  getStackedItemsOnStartingDeck,
+  getStacksOnModules,
+  getStandardDeckViewLayerBlockList,
+  getTopLabwareFromStack,
+  getWellFillFromLabwareId,
+} from '@opentrons/shared-data'
+
+import { BaseDeck } from '../../hardware-sim/BaseDeck'
+
+import type { ComponentProps } from 'react'
+import type {
+  CompletedProtocolAnalysis,
+  ProtocolAnalysisOutput,
+} from '@opentrons/shared-data'
+import type { LabwareOnDeck } from '../../hardware-sim/BaseDeck'
+
+interface ProtocolDeckProps {
+  protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput | null
+  /** extra props to pass through to BaseDeck component */
+  baseDeckProps?: Partial<ComponentProps<typeof BaseDeck>>
+}
+
+export function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null {
+  const { protocolAnalysis, baseDeckProps } = props
+  const startingDeck = useMemo(
+    () =>
+      getStackedItemsOnStartingDeck(
+        protocolAnalysis?.commands ?? [],
+        protocolAnalysis?.labware ?? [],
+        protocolAnalysis?.modules ?? []
+      ),
+    [protocolAnalysis]
+  )
+  const labwareDefinitionsByURI = useMemo(
+    () =>
+      getLabwareDefinitionsByURIForProtocol(protocolAnalysis?.commands ?? []),
+    [protocolAnalysis]
+  )
+  if (protocolAnalysis == null || (protocolAnalysis?.errors ?? []).length > 0)
+    return null
+
+  const robotType = protocolAnalysis.robotType ?? FLEX_ROBOT_TYPE
+  const deckConfig = getSimplestDeckConfigForProtocol(protocolAnalysis)
+  const labwareByLiquidId = getLabwareInfoByLiquidId(protocolAnalysis.commands)
+
+  const modulesOnDeck = Object.entries(getStacksOnModules(startingDeck)).map(
+    ([slotName, { allItemsInStack: stackedItems, moduleInStack: module }]) => {
+      const topLabwareInfo = getTopLabwareFromStack(stackedItems)
+      const topLabwareDefinition =
+        topLabwareInfo != null
+          ? labwareDefinitionsByURI[topLabwareInfo.definitionUri]
+          : null
+
+      return {
+        moduleModel: module.moduleModel,
+        moduleLocation: { slotName: module.moduleSlotName },
+        nestedLabwareDef: topLabwareDefinition,
+        nestedLabwareWellFill:
+          topLabwareInfo != null
+            ? getWellFillFromLabwareId(
+                topLabwareInfo.labwareId,
+                protocolAnalysis.liquids,
+                labwareByLiquidId
+              )
+            : undefined,
+      }
+    }
+  )
+
+  const labwareOnDeck: Array<LabwareOnDeck | null> = Object.entries(
+    getLabwareOnDeck(startingDeck)
+  ).map(([slotName, stackedItems]) => {
+    const topLabwareInfo = getTopLabwareFromStack(stackedItems)
+    const topLabwareDefinition =
+      topLabwareInfo != null
+        ? labwareDefinitionsByURI[topLabwareInfo.definitionUri]
+        : null
+    return topLabwareDefinition != null && topLabwareInfo != null
+      ? {
+          definition: topLabwareDefinition,
+          labwareLocation: { slotName },
+          wellFill: getWellFillFromLabwareId(
+            topLabwareInfo.labwareId,
+            protocolAnalysis.liquids,
+            labwareByLiquidId
+          ),
+        }
+      : null
+  })
+  const labwareOnDeckFiltered: LabwareOnDeck[] = labwareOnDeck.filter(
+    (labware): labware is LabwareOnDeck => labware != null
+  )
+
+  return (
+    <BaseDeck
+      deckConfig={deckConfig}
+      deckLayerBlocklist={getStandardDeckViewLayerBlockList(robotType)}
+      robotType={robotType}
+      labwareOnDeck={labwareOnDeckFiltered}
+      modulesOnDeck={modulesOnDeck}
+      {...{
+        svgProps: {
+          'aria-label': 'protocol deck map',
+          ...(baseDeckProps?.svgProps ?? {}),
+        },
+        ...baseDeckProps,
+      }}
+    />
+  )
+}

package/src/organisms/ProtocolTimelineScrubber/CommandItem.tsx

@@ -11,7 +11,7 @@ import { getCommandTextData } from './utils'
 
 import type {
   CompletedProtocolAnalysis,
-  LabwareDefinition2,
+  LabwareDefinition,
   ProtocolAnalysisOutput,
   RobotType,
   RunTimeCommand,
@@ -24,7 +24,7 @@ interface CommandItemProps {
   setCurrentCommandIndex: (index: number) => void
   analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
   robotType: RobotType
-  allRunDefs: LabwareDefinition2[]
+  allRunDefs: LabwareDefinition[]
 }
 export function CommandItem({
   index,

package/src/organisms/ProtocolTimelineScrubber/PipetteVisuals.tsx

@@ -60,7 +60,7 @@ export function PipetteMountViz(
       ) : null}
       {pipetteEntity != null && pipetteId != null ? (
         <PipetteSideView
-          allNozzlesHaveTips={timelineFrame.tipState.pipettes[pipetteId]}
+          allNozzlesHaveTips={timelineFrame.tipState.pipettes[pipetteId].hasTip}
           allNozzleTipContents={Object.values(
             timelineFrame.liquidState.pipettes[pipetteId]
           )}

package/src/organisms/ProtocolTimelineScrubber/utils.ts

@@ -8,7 +8,7 @@ import { COLORS } from '../../helix-design-system'
 
 import type {
   CompletedProtocolAnalysis,
-  LabwareDefinition2,
+  LabwareDefinition,
   ProtocolAnalysisOutput,
   RunTimeCommand,
 } from '@opentrons/shared-data'
@@ -41,7 +41,7 @@ export type ContentsByWell = {
 
 const MIXED_WELL_COLOR = COLORS.grey50
 
-function getAllWellsForLabware(def: LabwareDefinition2): string[] {
+function getAllWellsForLabware(def: LabwareDefinition): string[] {
   return Object.keys(def.wells)
 }
 
@@ -64,7 +64,7 @@ function _wellContentsForWell(
 
 export function _wellContentsForLabware(
   labwareLiquids: SingleLabwareLiquidState,
-  labwareDef: LabwareDefinition2
+  labwareDef: LabwareDefinition
 ): ContentsByWell {
   const allWellsForContainer = getAllWellsForLabware(labwareDef)
   return reduce(

package/src/organisms/index.ts

@@ -3,3 +3,4 @@ export * from './Toolbox'
 export * from './ProtocolTimelineScrubber'
 export * from './CommandText'
 export * from './FixtureOption'
+export * from './ProtocolDeck'

package/src/primitives/ForeignObject.tsx

@@ -1,69 +1,28 @@
-import styled from 'styled-components'
+import type { ReactElement, ReactNode } from 'react'
 
-import { isntStyleProp, styleProps } from './style-props'
-
-import type { ComponentProps } from 'react'
-import type { PrimitiveComponent, StyleProps } from './types'
-
-export interface ForeignObjectProps extends StyleProps {
-  /** attach a width attribute to the <svg> element */
-  svgWidth?: string | number
-  /** attach a height attribute to the <svg> element */
-  svgHeight?: string | number
-  /**
-   * internal helper prop to remap width style-prop to CSS
-   * @internal
-   */
-  _cssWidth?: string | number
-  /**
-   * internal helper prop to remap height style-prop to CSS
-   * @internal
-   */
-  _cssHeight?: string | number
+export interface ForeignObjectProps {
+  width: string | number
+  height: string | number
+  x: string | number
+  y: string | number
+  children?: ReactNode
 }
 
-const SVG_PROPS = ['x', 'y', 'svgWidth', 'svgHeight', '_cssWidth', '_cssHeight']
-
 /**
  * Foreign Object styled atomic component
- *
  * @component
  */
-export const ForeignObject: PrimitiveComponent<
-  'foreignObject',
-  ForeignObjectProps
-> = styled.foreignObject
-  .withConfig({
-    shouldForwardProp: p => {
-      return (
-        // do not forward style-props or Svg-props to the underlying <svg>
-        (isntStyleProp(p) && !SVG_PROPS.includes(p)) ||
-        // unlike other components; allow x, y, width, and height to be forwarded
-        p === 'width' ||
-        p === 'height' ||
-        p === 'x' ||
-        p === 'y'
-      )
-    },
-  })
-  .attrs(
-    (props: ForeignObjectProps): ComponentProps<PrimitiveComponent<'svg'>> => ({
-      // map the explicit svgWidth/Height props to width/height attrs
-      width: props.svgWidth,
-      height: props.svgHeight,
-      // map width and height style props to internal style props
-      _cssWidth: props.width,
-      _cssHeight: props.height,
-    })
-  )`
-  ${(props: Partial<ForeignObjectProps>) => {
-    const { width, height, ...otherProps } = props
 
-    // replace width and height attrs with internal style props
-    return styleProps({
-      ...otherProps,
-      width: otherProps._cssWidth,
-      height: otherProps._cssHeight,
-    })
-  }}
-`
+export const ForeignObject = ({
+  width,
+  height,
+  x,
+  y,
+  children,
+}: ForeignObjectProps): ReactElement => {
+  return (
+    <foreignObject x={x} y={y} width={width} height={height}>
+      {children}
+    </foreignObject>
+  )
+}

package/src/primitives/style-props.ts

@@ -64,6 +64,7 @@ const FLEXBOX_PROPS = [
 
 const GRID_PROPS = [
   'columnGap',
+  'rowGap',
   'gridGap',
   'gridTemplateAreas',
   'gridTemplateRows',

package/src/slotmap/styles.module.css

@@ -1,8 +1,8 @@
 @import '../index.module.css';
 
 .slot_rect {
-  stroke: var(--c-med-gray);
   fill: none;
+  stroke: var(--c-med-gray);
 }
 
 .slot_occupied {

package/src/structure/Pill.module.css

@@ -1,9 +1,9 @@
 @import '../index.module.css';
 
 .pill {
+  padding: 0.5em;
   border-radius: var(--bd-radius-pill);
   color: var(--c-white);
-  padding: 0.5em;
 }
 
 .pill:empty::before {

package/src/structure/Splash.module.css

@@ -10,7 +10,7 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
     max-height: 100%;
+    transform: translate(-50%, -50%);
   }
 }

package/src/structure/index.ts

@@ -1,7 +1,5 @@
 // structure components
-
-export * from './TitleBar'
-export * from './Card'
-export * from './Splash'
 export * from './LabeledValue'
 export * from './Pill'
+export * from './Splash'
+export * from './TitleBar'