@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

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

@@ -0,0 +1,48 @@
+import { DeckLabelSet as DeckLabelSetComponent } from '.'
+import { BORDERS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const mockDeckLabels = [
+  {
+    isZoomed: false,
+    text: 'Label',
+    isSelected: false,
+    labelBorderRadius: BORDERS.borderRadius4,
+  },
+  {
+    isZoomed: false,
+    text: 'Label',
+    isSelected: false,
+    labelBorderRadius: BORDERS.borderRadius4,
+    isLast: true,
+  },
+]
+
+const meta: Meta<typeof DeckLabelSetComponent> = {
+  title: 'Helix/Organisms/DeckLabelSet',
+  component: DeckLabelSetComponent,
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16} transform="scaleY(-1.0)">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof DeckLabelSetComponent>
+
+export const DeckLabel: Story = {
+  args: {
+    // width and height from Figma
+    deckLabels: mockDeckLabels,
+    width: 31.9375 * 16,
+    height: 5.75 * 16,
+    x: 0,
+    y: 0,
+  },
+}

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

@@ -0,0 +1,52 @@
+import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { DeckLabelSet } from '..'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { DeckLabel } from '../../../molecules/DeckLabel'
+import { renderWithProviders } from '../../../testing/utils'
+
+import type { ComponentProps } from 'react'
+
+vi.mock('../../../molecules/DeckLabel')
+
+const mockDeckLabels = [
+  {
+    text: 'Label',
+    isSelected: false,
+    labelBorderRadius: BORDERS.borderRadius4,
+    isZoomed: true,
+  },
+  {
+    text: 'Label',
+    isSelected: false,
+    labelBorderRadius: BORDERS.borderRadius4,
+    isZoomed: true,
+  },
+]
+
+const render = (props: ComponentProps<typeof DeckLabelSet>) => {
+  return renderWithProviders(<DeckLabelSet {...props} />)
+}
+describe('DeckLabelSet', () => {
+  let props: ComponentProps<typeof DeckLabelSet>
+
+  beforeEach(() => {
+    props = {
+      x: 1,
+      y: 1,
+      width: 50,
+      height: 50,
+      deckLabels: mockDeckLabels,
+    }
+    vi.mocked(DeckLabel).mockReturnValue(<div>mock DeckLabels</div>)
+  })
+
+  it('should render blue border and DeckLabel', () => {
+    render(props)
+    expect(screen.getAllByText('mock DeckLabels').length).toBe(2)
+    const deckLabelSet = screen.getByTestId('DeckLabeSet')
+    expect(deckLabelSet).toHaveStyle(`border: 1.5px solid ${COLORS.blue50}`)
+    expect(deckLabelSet).toHaveStyle(`border-radius: ${BORDERS.borderRadius4}`)
+  })
+})

package/src/organisms/DeckLabelSet/index.tsx

@@ -0,0 +1,126 @@
+import { forwardRef } from 'react'
+import styled from 'styled-components'
+
+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'
+import type { DeckLabelProps } from '../../molecules/DeckLabel'
+
+interface DeckLabelSetProps {
+  deckLabels: DeckLabelProps[]
+  x: number
+  y: number
+  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,
+    showModuleIcon = false,
+  } = props
+
+  return (
+    <RobotCoordsForeignDiv
+      x={x}
+      y={y}
+      innerDivProps={{
+        style: {
+          transform: `rotate(180deg) scaleX(-1) scaleY(${invert ? '-1' : '1'})`,
+        },
+      }}
+    >
+      <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>
+  )
+}
+
+export const DeckLabelSet = forwardRef<HTMLDivElement, DeckLabelSetProps>(
+  DeckLabelSetComponent
+)
+
+interface StyledBoxProps {
+  isZoomed: boolean
+}
+
+const StyledBox = styled(Box)<StyledBoxProps>`
+  border-radius: ${BORDERS.borderRadius4};
+  border: ${({ isZoomed }) =>
+    isZoomed ? `1.5px solid ${COLORS.blue50}` : `3px solid ${COLORS.blue50}`};
+`
+
+const LabelContainer = styled.div`
+  padding-left: ${SPACING.spacing8};
+  & > *:not(:first-child):not(:last-child) {
+    border-bottom-right-radius: ${BORDERS.borderRadius4};
+    border-top-right-radius: ${BORDERS.borderRadius4};
+  }
+
+  & > *:first-child {
+    border-bottom-right-radius: ${BORDERS.borderRadius4};
+  }
+
+  & > *:not(:first-child) {
+    border-top-right-radius: ${BORDERS.borderRadius4};
+    border-bottom-right-radius: ${BORDERS.borderRadius4};
+  }
+
+  & > *:last-child {
+    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

@@ -0,0 +1,115 @@
+import { useState } from 'react'
+
+import { LegacyStyledText } from '../../atoms'
+import { COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { ALIGN_FLEX_END, DIRECTION_COLUMN, OVERFLOW_SCROLL } from '../../styles'
+import { SPACING } from '../../ui-style-constants'
+import { CommandText } from '../CommandText'
+import { COMMAND_WIDTH_PX } from './index'
+import { getCommandTextData } from './utils'
+
+import type {
+  CompletedProtocolAnalysis,
+  LabwareDefinition2,
+  ProtocolAnalysisOutput,
+  RobotType,
+  RunTimeCommand,
+} from '@opentrons/shared-data'
+
+interface CommandItemProps {
+  command: RunTimeCommand
+  index: number
+  currentCommandIndex: number
+  setCurrentCommandIndex: (index: number) => void
+  analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
+  robotType: RobotType
+  allRunDefs: LabwareDefinition2[]
+}
+export function CommandItem({
+  index,
+  command,
+  currentCommandIndex,
+  setCurrentCommandIndex,
+  analysis,
+  robotType,
+  allRunDefs,
+}: CommandItemProps): JSX.Element {
+  const [showDetails, setShowDetails] = useState(false)
+  const params: RunTimeCommand['params'] = command.params ?? {}
+  return (
+    <Flex
+      key={index}
+      backgroundColor={
+        index === currentCommandIndex
+          ? COLORS.blue35
+          : index < currentCommandIndex
+          ? '#00002222'
+          : COLORS.white
+      }
+      border={
+        index === currentCommandIndex
+          ? `1px solid ${COLORS.blue35}`
+          : '1px solid #000'
+      }
+      padding={SPACING.spacing4}
+      flexDirection={DIRECTION_COLUMN}
+      minWidth={`${COMMAND_WIDTH_PX}px`}
+      width={`${COMMAND_WIDTH_PX}px`}
+      height="6rem"
+      overflowX="hidden"
+      overflowY={OVERFLOW_SCROLL}
+      cursor="pointer"
+      onClick={() => {
+        setCurrentCommandIndex(index)
+      }}
+    >
+      <LegacyStyledText
+        onClick={() => {
+          setShowDetails(!showDetails)
+        }}
+        as="p"
+        alignSelf={ALIGN_FLEX_END}
+      >
+        {index + 1}
+      </LegacyStyledText>
+      <CommandText
+        command={command}
+        commandTextData={getCommandTextData(analysis)}
+        robotType={robotType}
+        allRunDefs={allRunDefs}
+      />
+      {showDetails
+        ? Object.entries(params).map(([key, value]) => (
+            <Flex
+              key={key}
+              flexDirection={DIRECTION_COLUMN}
+              marginBottom={SPACING.spacing2}
+              paddingLeft={SPACING.spacing2}
+            >
+              <LegacyStyledText as="label" marginRight={SPACING.spacing2}>
+                {key}:
+              </LegacyStyledText>
+              {value != null && typeof value === 'object' ? (
+                /*  eslint-disable @typescript-eslint/no-unsafe-argument */
+                Object.entries(value).map(([innerKey, innerValue]) => (
+                  <Flex key={innerKey}>
+                    <LegacyStyledText as="label" marginRight={SPACING.spacing2}>
+                      {key}:
+                    </LegacyStyledText>
+                    <LegacyStyledText as="p" title={String(innerValue)}>
+                      {String(innerValue)}
+                    </LegacyStyledText>
+                  </Flex>
+                ))
+              ) : (
+                <LegacyStyledText as="p" title={String(value)}>
+                  {String(value)}
+                </LegacyStyledText>
+              )}
+            </Flex>
+          ))
+        : null}
+    </Flex>
+  )
+}

package/src/organisms/ProtocolTimelineScrubber/PipetteVisuals.tsx

@@ -0,0 +1,213 @@
+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 { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+
+import type {
+  CompletedProtocolAnalysis,
+  ProtocolAnalysisOutput,
+} from '@opentrons/shared-data'
+import type {
+  LocationLiquidState,
+  PipetteEntity,
+  TimelineFrame,
+} from '@opentrons/step-generation'
+
+interface PipetteMountVizProps {
+  pipetteId: string | null
+  pipetteEntity: PipetteEntity | null
+  mount: string
+  timelineFrame: TimelineFrame
+  analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
+}
+export function PipetteMountViz(
+  props: PipetteMountVizProps
+): JSX.Element | null {
+  const { mount, pipetteEntity, pipetteId, timelineFrame, analysis } = props
+  const [showPipetteDetails, setShowPipetteDetails] = useState(false)
+
+  return pipetteEntity == null ? null : (
+    <Flex
+      alignItems={ALIGN_CENTER}
+      flexDirection={DIRECTION_COLUMN}
+      maxWidth="4rem"
+    >
+      <LegacyStyledText
+        as="h1"
+        textTransform={TEXT_TRANSFORM_UPPERCASE}
+        cursor="pointer"
+        onClick={() => {
+          setShowPipetteDetails(!showPipetteDetails)
+        }}
+      >
+        {mount}
+      </LegacyStyledText>
+      {showPipetteDetails ? (
+        <LegacyStyledText
+          as="p"
+          fontSize={TYPOGRAPHY.fontSizeCaption}
+          marginY={SPACING.spacing8}
+        >
+          {pipetteEntity?.spec?.displayName ?? 'none'}
+        </LegacyStyledText>
+      ) : null}
+      {pipetteEntity != null && pipetteId != null ? (
+        <PipetteSideView
+          allNozzlesHaveTips={timelineFrame.tipState.pipettes[pipetteId]}
+          allNozzleTipContents={Object.values(
+            timelineFrame.liquidState.pipettes[pipetteId]
+          )}
+          maxVolume={
+            pipetteEntity != null
+              ? pipetteEntity.spec.liquids.default.maxVolume
+              : 0
+          }
+          analysis={analysis}
+        />
+      ) : (
+        <Box size="4rem" />
+      )}
+    </Flex>
+  )
+}
+
+interface SideViewProps {
+  allNozzleTipContents: LocationLiquidState[]
+  maxVolume: number
+  allNozzlesHaveTips: boolean
+  analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
+}
+export function PipetteSideView({
+  allNozzleTipContents,
+  maxVolume,
+  allNozzlesHaveTips,
+  analysis,
+}: SideViewProps): JSX.Element {
+  const channelCount = Math.min(Object.keys(allNozzleTipContents).length, 8)
+
+  return (
+    <svg width="4rem" height="16rem" viewBox="0 0 100 200">
+      {channelCount <= 1 ? (
+        <>
+          <rect x="30" y="0" height="80" width="40" stroke="#000" />
+          <rect x="45" y="80" height="50" width="10" stroke="#000" />
+          {allNozzlesHaveTips ? (
+            <TipSideView
+              x={45}
+              y={130}
+              tipContents={allNozzleTipContents[0]}
+              maxVolume={maxVolume}
+              analysis={analysis}
+            />
+          ) : (
+            <path
+              d="M47,130 L49,140 H51 L53,130 H47z"
+              stroke="#000"
+              fill="#000"
+            />
+          )}
+        </>
+      ) : (
+        <>
+          <rect x="30" y="0" height="40" width="40" stroke="#000" />
+          <path d="M30,40 L10,85 H90 L70,40 H30z" stroke="#000" />
+          <rect x="10" y="85" height="45" width="80" stroke="#000" />
+          {Object.values(allNozzleTipContents)
+            .slice(0, 8)
+            .map((tipContents, index) => {
+              const x = index * 10 + 10
+              return allNozzlesHaveTips ? (
+                <TipSideView
+                  x={x}
+                  y={130}
+                  key={index}
+                  tipContents={tipContents}
+                  maxVolume={maxVolume}
+                  analysis={analysis}
+                />
+              ) : (
+                <path
+                  d={`M${x + 2},130 L${x + 4},140 H${x + 6} L${x + 8},130 H${
+                    x + 2
+                  }z`}
+                  stroke="#000"
+                  fill="#000"
+                />
+              )
+            })}
+        </>
+      )}
+    </svg>
+  )
+}
+
+export interface TipSideViewProps {
+  tipContents: LocationLiquidState
+  maxVolume: number
+  x: number
+  y: number
+  analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
+}
+function TipSideView({
+  tipContents,
+  maxVolume,
+  x,
+  y,
+  analysis,
+}: TipSideViewProps): JSX.Element {
+  const emptyVolumeLeft =
+    maxVolume -
+    Object.entries(tipContents).reduce((acc, [liquidId, { volume }]) => {
+      if (liquidId === '__air__') return acc
+      return acc + volume
+    }, 0)
+  const yOfFirstLiquid = (emptyVolumeLeft / maxVolume) * 50
+
+  return (
+    <>
+      <rect
+        x={x}
+        y={y}
+        height={yOfFirstLiquid}
+        width="10"
+        fill={COLORS.white}
+      />
+      {Object.entries(tipContents).map(([liquidId, { volume }]) => {
+        if (liquidId === '__air__') return null
+        const displayColor = analysis.liquids.find(l => l.id === liquidId)
+          ?.displayColor
+        return (
+          <rect
+            key={liquidId}
+            x={x}
+            y={y + yOfFirstLiquid}
+            height={(volume / maxVolume) * 50}
+            width="10"
+            fill={displayColor ?? 'rebeccapurple'}
+          />
+        )
+      })}
+      <path
+        d={`M${x},130 V150 L${x + 2},170 L${x + 4},180 H${x + 6} L${
+          x + 8
+        },170 L${x + 10},150 V130 H${x}z`}
+        stroke="#000"
+        fill="none"
+      />
+      <path
+        d={`M${x - 1},129 V150 L${x + 2},170 L${x + 4},180 H${x + 6} L${
+          x + 8
+        },170 L${x + 10},150 V130 H${x + 11} V181 H${x - 1} V129z`}
+        fill={COLORS.white}
+        stroke="none"
+      />
+    </>
+  )
+}