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

package/src/organisms/ProtocolTimelineScrubber/index.tsx

@@ -1,312 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import ViewportList from 'react-viewport-list'
-import map from 'lodash/map'
-import reduce from 'lodash/reduce'
-
-import {
-  FLEX_ROBOT_TYPE,
-  getSimplestDeckConfigForProtocol,
-  THERMOCYCLER_MODULE_TYPE,
-} from '@opentrons/shared-data'
-import {
-  constructInvariantContextFromRunCommands,
-  getResultingTimelineFrameFromRunCommands,
-  getSlotInLocationStack,
-  getTopmostLabwareOnModuleFromStackRobotState,
-} from '@opentrons/step-generation'
-
-import {
-  ALIGN_CENTER,
-  ALIGN_STRETCH,
-  BaseDeck,
-  COLORS,
-  DIRECTION_COLUMN,
-  Flex,
-  JUSTIFY_SPACE_BETWEEN,
-  LegacyStyledText,
-  OVERFLOW_SCROLL,
-  PrimaryButton,
-  SPACING,
-} from '../..'
-import { getLabwareDefinitionsFromCommands } from '../CommandText/useCommandTextString/utils/getLabwareDefinitionsFromCommands'
-import { CommandItem } from './CommandItem'
-import { PipetteMountViz } from './PipetteVisuals'
-import {
-  getAllWellContentsForActiveItem,
-  wellFillFromWellContents,
-} from './utils'
-
-import type { ComponentProps } from 'react'
-import type { ViewportListRef } from 'react-viewport-list'
-import type {
-  CompletedProtocolAnalysis,
-  LabwareLocation,
-  ProtocolAnalysisOutput,
-} from '@opentrons/shared-data'
-import type { ModuleTemporalProperties } from '@opentrons/step-generation'
-import type { LabwareOnDeck, Module } from '../..'
-
-export * from './types'
-export * from './utils'
-
-const SEC_PER_FRAME = 1000
-export const COMMAND_WIDTH_PX = 240
-
-interface ProtocolTimelineScrubberProps {
-  analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
-  height?: string
-}
-
-export const DECK_LAYER_BLOCKLIST = [
-  'calibrationMarkings',
-  'fixedBase',
-  'doorStops',
-  'metalFrame',
-  'removalHandle',
-  'removableDeckOutline',
-  'screwHoles',
-]
-
-export function ProtocolTimelineScrubber(
-  props: ProtocolTimelineScrubberProps
-): JSX.Element {
-  const { analysis, height } = props
-  const { commands, robotType, liquids } = analysis
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const commandListRef = useRef<ViewportListRef>(null)
-  const [currentCommandIndex, setCurrentCommandIndex] = useState<number>(0)
-  const [isPlaying, setIsPlaying] = useState<boolean>(true)
-
-  const currentCommandsSlice = commands.slice(0, currentCommandIndex + 1)
-  const invariantContextFromRunCommands = constructInvariantContextFromRunCommands(
-    commands
-  )
-  const { frame, invariantContext } = getResultingTimelineFrameFromRunCommands(
-    currentCommandsSlice,
-    invariantContextFromRunCommands
-  )
-  const handlePlayPause = (): void => {
-    setIsPlaying(!isPlaying)
-  }
-
-  useEffect(() => {
-    if (isPlaying) {
-      const intervalId = setInterval(() => {
-        setCurrentCommandIndex(prev => {
-          const nextIndex = prev < commands.length - 1 ? prev + 1 : 0
-          commandListRef.current?.scrollToIndex(nextIndex)
-          return nextIndex
-        })
-      }, SEC_PER_FRAME)
-
-      return () => {
-        clearInterval(intervalId)
-      }
-    }
-  }, [isPlaying, commands])
-
-  const { robotState } = frame
-
-  const [leftPipetteId] = Object.entries(robotState.pipettes).find(
-    ([_pipetteId, pipette]) => pipette?.mount === 'left'
-  ) ?? [null]
-  const leftPipetteEntity =
-    leftPipetteId != null
-      ? invariantContext.pipetteEntities[leftPipetteId]
-      : null
-
-  const [rightPipetteId] = Object.entries(robotState.pipettes).find(
-    ([_pipetteId, pipette]) => pipette?.mount === 'right'
-  ) ?? [null]
-  const rightPipetteEntity =
-    rightPipetteId != null
-      ? invariantContext.pipetteEntities[rightPipetteId]
-      : null
-
-  const allWellContentsForActiveItem = getAllWellContentsForActiveItem(
-    invariantContext.labwareEntities,
-    robotState
-  )
-  const liquidDisplayColors = liquids.map(
-    ({ displayColor }) => displayColor ?? COLORS.blue50
-  )
-
-  const isValidRobotSideAnalysis = analysis != null
-  const allRunDefs = useMemo(
-    () => getLabwareDefinitionsFromCommands(commands),
-    [isValidRobotSideAnalysis]
-  )
-
-  return (
-    <Flex
-      height="auto"
-      flexDirection={DIRECTION_COLUMN}
-      gridGap={SPACING.spacing8}
-    >
-      <Flex gridGap={SPACING.spacing8} flex="1 1 0">
-        <Flex height={height ?? '60vh'}>
-          <BaseDeck
-            robotType={robotType ?? FLEX_ROBOT_TYPE}
-            deckConfig={getSimplestDeckConfigForProtocol(analysis)}
-            modulesOnDeck={map(robotState.modules, (module, moduleId) => {
-              const topLabwareId = getTopmostLabwareOnModuleFromStackRobotState(
-                moduleId,
-                robotState.labware
-              )
-              const topLabwareEntity =
-                invariantContext.labwareEntities[topLabwareId]
-              const getModuleInnerProps = (
-                moduleState: ModuleTemporalProperties['moduleState']
-              ): ComponentProps<typeof Module>['innerProps'] => {
-                if (moduleState.type === THERMOCYCLER_MODULE_TYPE) {
-                  let lidMotorState = 'unknown'
-                  if (moduleState.lidOpen === true) {
-                    lidMotorState = 'open'
-                  } else if (moduleState.lidOpen === false) {
-                    lidMotorState = 'closed'
-                  }
-                  return {
-                    lidMotorState,
-                    blockTargetTemp: moduleState.blockTargetTemp,
-                  }
-                } else if (
-                  'targetTemperature' in moduleState &&
-                  moduleState.type === 'temperatureModuleType'
-                ) {
-                  return {
-                    targetTemperature: moduleState.targetTemperature,
-                  }
-                } else if ('targetTemp' in moduleState) {
-                  return {
-                    targetTemp: moduleState.targetTemp,
-                  }
-                }
-              }
-
-              const wellContents =
-                allWellContentsForActiveItem && topLabwareEntity != null
-                  ? allWellContentsForActiveItem[topLabwareEntity.id]
-                  : null
-              const nestedFill = wellFillFromWellContents(
-                wellContents,
-                liquidDisplayColors
-              )
-
-              return {
-                moduleModel: invariantContext.moduleEntities[moduleId].model,
-                moduleLocation: { slotName: module.slot },
-                nestedLabwareDef: topLabwareEntity?.def,
-                nestedLabwareWellFill: nestedFill,
-                innerProps: getModuleInnerProps(module.moduleState),
-              }
-            })}
-            labwareOnDeck={map(robotState.labware, (labware, labwareId) => {
-              const definition = invariantContext.labwareEntities[labwareId].def
-
-              const missingTips = definition.parameters.isTiprack
-                ? reduce(
-                    robotState.tipState.tipracks[labwareId],
-                    (acc, hasTip, wellName) => {
-                      if (!hasTip) return { ...acc, [wellName]: null }
-                      return acc
-                    },
-                    {}
-                  )
-                : {}
-              const labwareLocation: LabwareLocation = {
-                slotName: getSlotInLocationStack(labware.stack),
-              }
-              const wellContents =
-                allWellContentsForActiveItem && labwareId != null
-                  ? allWellContentsForActiveItem[labwareId]
-                  : null
-              const wellFill = wellFillFromWellContents(
-                wellContents,
-                liquidDisplayColors
-              )
-              const labwareOnDeck: LabwareOnDeck = {
-                labwareLocation,
-                definition,
-                wellFill,
-                missingTips,
-              }
-
-              return labwareOnDeck
-            }).filter((i): i is LabwareOnDeck => i != null)}
-          />
-        </Flex>
-        <PipetteMountViz
-          mount="left"
-          pipetteId={leftPipetteId}
-          pipetteEntity={leftPipetteEntity}
-          timelineFrame={robotState}
-          analysis={analysis}
-        />
-        <PipetteMountViz
-          mount="right"
-          pipetteId={rightPipetteId}
-          pipetteEntity={rightPipetteEntity}
-          timelineFrame={robotState}
-          analysis={analysis}
-        />
-      </Flex>
-      <Flex
-        ref={wrapperRef}
-        alignSelf={ALIGN_STRETCH}
-        overflowY={OVERFLOW_SCROLL}
-        width="100%"
-      >
-        <ViewportList
-          viewportRef={wrapperRef}
-          ref={commandListRef}
-          items={commands}
-          axis="x"
-        >
-          {(command, index) => (
-            <CommandItem
-              index={index}
-              command={command}
-              currentCommandIndex={currentCommandIndex}
-              setCurrentCommandIndex={setCurrentCommandIndex}
-              analysis={analysis}
-              robotType={robotType ?? FLEX_ROBOT_TYPE}
-              allRunDefs={allRunDefs}
-            />
-          )}
-        </ViewportList>
-      </Flex>
-      <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER}>
-        <LegacyStyledText as="label" marginY={SPACING.spacing8}>
-          Jump to command
-        </LegacyStyledText>
-        <PrimaryButton onClick={handlePlayPause} width="max-content">
-          {isPlaying ? 'Pause' : 'Play'}
-        </PrimaryButton>
-      </Flex>
-      <input
-        type="range"
-        min={1}
-        max={commands.length}
-        value={currentCommandIndex + 1}
-        onChange={e => {
-          const nextIndex = Number(e.target.value) - 1
-          setCurrentCommandIndex(nextIndex)
-          commandListRef.current?.scrollToIndex(nextIndex)
-        }}
-      />
-      <Flex alignSelf={ALIGN_STRETCH} justifyContent={JUSTIFY_SPACE_BETWEEN}>
-        <LegacyStyledText as="p">1</LegacyStyledText>
-        <LegacyStyledText as="p">{commands.length}</LegacyStyledText>
-      </Flex>
-      {currentCommandIndex !== 0 &&
-      currentCommandIndex !== commands.length - 1 ? (
-        <LegacyStyledText
-          as="p"
-          marginLeft={(currentCommandIndex / (commands.length - 1)) * 886}
-        >
-          {currentCommandIndex + 1}
-        </LegacyStyledText>
-      ) : null}
-    </Flex>
-  )
-}

package/src/organisms/ProtocolTimelineScrubber/types.ts

@@ -1,6 +0,0 @@
-import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
-
-export type CommandTextData = Pick<
-  CompletedProtocolAnalysis,
-  'pipettes' | 'labware' | 'modules' | 'liquids' | 'commands'
->

package/src/organisms/ProtocolTimelineScrubber/utils.ts

@@ -1,160 +0,0 @@
-import mapValues from 'lodash/mapValues'
-import omitBy from 'lodash/omitBy'
-import reduce from 'lodash/reduce'
-
-import { DEFAULT_LIQUID_COLORS } from '@opentrons/shared-data'
-
-import { COLORS } from '../../helix-design-system'
-
-import type {
-  CompletedProtocolAnalysis,
-  LabwareDefinition2,
-  ProtocolAnalysisOutput,
-  RunTimeCommand,
-} from '@opentrons/shared-data'
-import type {
-  LabwareEntities,
-  LocationLiquidState,
-  SingleLabwareLiquidState,
-  TimelineFrame,
-} from '@opentrons/step-generation'
-import type { WellFill } from '../../hardware-sim'
-import type { CommandTextData } from './types'
-
-//  copied from protocol-designer
-export interface WellContents {
-  groupIds: string[]
-  ingreds: LocationLiquidState
-  highlighted?: boolean
-  selected?: boolean
-  maxVolume?: number
-  wellName?: string
-}
-
-interface WellContentsByLabware {
-  [labwareId: string]: ContentsByWell
-}
-
-export type ContentsByWell = {
-  [wellName: string]: WellContents
-} | null
-
-const MIXED_WELL_COLOR = COLORS.grey50
-
-function getAllWellsForLabware(def: LabwareDefinition2): string[] {
-  return Object.keys(def.wells)
-}
-
-function _wellContentsForWell(
-  liquidVolState: LocationLiquidState,
-  well: string
-): WellContents {
-  const ingredGroupIdsWithContent = Object.keys(liquidVolState || {}).filter(
-    groupId => liquidVolState[groupId] && liquidVolState[groupId].volume > 0
-  )
-  return {
-    wellName: well,
-    groupIds: ingredGroupIdsWithContent,
-    ingreds: omitBy(
-      liquidVolState,
-      ingredData => !ingredData || ingredData.volume <= 0
-    ),
-  }
-}
-
-export function _wellContentsForLabware(
-  labwareLiquids: SingleLabwareLiquidState,
-  labwareDef: LabwareDefinition2
-): ContentsByWell {
-  const allWellsForContainer = getAllWellsForLabware(labwareDef)
-  return reduce(
-    allWellsForContainer,
-    (wellAcc, well: string): Record<string, WellContents> => {
-      const wellHasContents = labwareLiquids && labwareLiquids[well]
-      return {
-        ...wellAcc,
-        [well]: wellHasContents
-          ? _wellContentsForWell(labwareLiquids[well], well)
-          : {},
-      }
-    },
-    {}
-  )
-}
-
-const swatchColors = (ingredGroupId: string): string => {
-  const num = Number(ingredGroupId)
-
-  if (!Number.isInteger(num)) {
-    if (ingredGroupId !== '__air__') {
-      console.warn(
-        `swatchColors expected an integer or __air__, got ${ingredGroupId}`
-      )
-    }
-
-    return 'transparent'
-  }
-
-  return DEFAULT_LIQUID_COLORS[num % DEFAULT_LIQUID_COLORS.length]
-}
-
-const ingredIdsToColor = (
-  groupIds: string[],
-  displayColors: string[]
-): string | null | undefined => {
-  const filteredIngredIds = groupIds.filter(id => id !== '__air__')
-  if (filteredIngredIds.length === 0) return null
-
-  if (filteredIngredIds.length === 1) {
-    return (
-      displayColors[Number(filteredIngredIds[0])] ??
-      swatchColors(filteredIngredIds[0])
-    )
-  }
-
-  return MIXED_WELL_COLOR
-}
-
-export const wellFillFromWellContents = (
-  wellContents: ContentsByWell,
-  displayColors: string[]
-): WellFill =>
-  reduce(
-    wellContents,
-    (acc: WellFill, wellContents: WellContents, wellName: string) => {
-      const wellFill = ingredIdsToColor(wellContents.groupIds, displayColors)
-      return wellFill ? { ...acc, [wellName]: wellFill } : acc
-    },
-    {}
-  )
-
-export function getAllWellContentsForActiveItem(
-  labwareEntities: LabwareEntities,
-  robotState: TimelineFrame
-): WellContentsByLabware | null {
-  if (robotState == null) return null
-
-  const liquidState = robotState.liquidState.labware
-  const wellContentsByLabwareId = mapValues(
-    liquidState,
-    (labwareLiquids: SingleLabwareLiquidState, labwareId: string) => {
-      if (labwareEntities[labwareId] == null) return null
-      return _wellContentsForLabware(
-        labwareLiquids,
-        labwareEntities[labwareId].def
-      )
-    }
-  )
-
-  return wellContentsByLabwareId
-}
-
-export function getCommandTextData(
-  protocolData: CompletedProtocolAnalysis | ProtocolAnalysisOutput,
-  protocolCommands?: RunTimeCommand[]
-): CommandTextData {
-  const { pipettes, labware, modules, liquids } = protocolData
-  const commands =
-    'commands' in protocolData ? protocolData.commands : protocolCommands ?? []
-  return { commands, pipettes, labware, modules, liquids }
-}

package/src/organisms/Toolbox/Toolbox.stories.tsx

@@ -1,34 +0,0 @@
-import { STYLE_PROPS } from '../../primitives'
-import { Toolbox as ToolboxComponent } from './index'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof ToolboxComponent> = {
-  title: 'Helix/Organisms/Toolbox',
-  component: ToolboxComponent,
-  argTypes: {
-    // Disable all StyleProps
-    ...Object.fromEntries(
-      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
-        prop,
-        { table: { disable: true } },
-      ])
-    ),
-  },
-  decorators: [Story => <Story />],
-}
-
-export default meta
-type Story = StoryObj<typeof ToolboxComponent>
-
-export const Toolbox: Story = {
-  args: {
-    title: 'Header',
-    children: <div>Slot Component: Replace me using the component panel.</div>,
-    confirmButtonText: 'Done',
-    onCloseClick: () => {},
-    titleIconName: 'swap-horizontal',
-    closeButtonText: 'Text link',
-    onConfirmClick: () => {},
-  },
-}

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

@@ -1,37 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { Toolbox } from '../index'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof Toolbox>) => {
-  return renderWithProviders(<Toolbox {...props} />)
-}
-
-describe('Toolbox', () => {
-  let props: ComponentProps<typeof Toolbox>
-
-  it('should render text and buttons', () => {
-    props = {
-      title: <div>mock header</div>,
-      children: <div>mock children</div>,
-      confirmButtonText: 'done',
-      onCloseClick: vi.fn(),
-      closeButton: <div>exit</div>,
-      onConfirmClick: vi.fn(),
-      secondaryHeaderButton: <div>mock secondary header button</div>,
-    }
-    render(props)
-    screen.getByText('mock header')
-    screen.getByText('done')
-    fireEvent.click(screen.getByTestId('Toolbox_confirmButton'))
-    expect(props.onConfirmClick).toHaveBeenCalled()
-    screen.getByText('mock children')
-    screen.getByText('exit')
-    fireEvent.click(screen.getByTestId('Toolbox_closeButton'))
-    expect(props.onCloseClick).toHaveBeenCalled()
-    screen.getByText('mock secondary header button')
-  })
-})

package/src/organisms/Toolbox/index.tsx

@@ -1,149 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-import { PrimaryButton } from '../../atoms'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Box, Btn, Flex } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  DIRECTION_COLUMN,
-  JUSTIFY_SPACE_BETWEEN,
-  NO_WRAP,
-  POSITION_RELATIVE,
-} from '../../styles'
-import { SPACING } from '../../ui-style-constants'
-import { textDecorationUnderline } from '../../ui-style-constants/typography'
-
-import type { ReactNode } from 'react'
-import type { StyleProps } from '../../primitives'
-
-export interface ToolboxProps extends StyleProps {
-  title: JSX.Element
-  children: ReactNode
-  disableCloseButton?: boolean
-  confirmButtonText?: string
-  onConfirmClick?: () => void
-  confirmButton?: JSX.Element
-  onCloseClick?: () => void
-  closeButton?: JSX.Element
-  titlePadding?: string
-  childrenPadding?: string
-  subHeader?: JSX.Element | null
-  secondaryHeaderButton?: JSX.Element
-}
-
-export function Toolbox(props: ToolboxProps): JSX.Element {
-  const {
-    title,
-    children,
-    confirmButtonText,
-    onCloseClick,
-    onConfirmClick,
-    closeButton,
-    height = '100%',
-    disableCloseButton = false,
-    width = '19.5rem',
-    confirmButton,
-    titlePadding = SPACING.spacing16,
-    childrenPadding = SPACING.spacing16,
-    subHeader,
-    secondaryHeaderButton,
-    position = POSITION_RELATIVE,
-    ...styleProps
-  } = props
-
-  const slideOutRef = useRef<HTMLDivElement>(null)
-  const [isScrolledToBottom, setIsScrolledToBottom] = useState<boolean>(false)
-  const handleScroll = (): void => {
-    if (slideOutRef.current == null) return
-    const { scrollTop, scrollHeight, clientHeight } = slideOutRef.current
-    if (scrollTop + clientHeight === scrollHeight) {
-      setIsScrolledToBottom(true)
-    } else {
-      setIsScrolledToBottom(false)
-    }
-  }
-
-  useEffect(() => {
-    handleScroll()
-  }, [slideOutRef])
-
-  return (
-    <Flex
-      cursor="auto"
-      backgroundColor={COLORS.white}
-      boxShadow="0px 3px 6px rgba(0, 0, 0, 0.23)"
-      height={height}
-      width={width}
-      position={position}
-      borderRadius={BORDERS.borderRadius8}
-      flex="0"
-      {...styleProps}
-    >
-      <Flex
-        width={width}
-        height="100%"
-        flexDirection={DIRECTION_COLUMN}
-        justifyContent={JUSTIFY_SPACE_BETWEEN}
-      >
-        <Flex
-          padding={titlePadding}
-          flexDirection={DIRECTION_COLUMN}
-          borderBottom={`1px solid ${COLORS.grey30}`}
-        >
-          {subHeader ?? null}
-          <Flex
-            justifyContent={JUSTIFY_SPACE_BETWEEN}
-            alignItems={ALIGN_CENTER}
-            gridGap={SPACING.spacing12}
-          >
-            {title}
-            <Flex gridGap={SPACING.spacing4}>
-              {secondaryHeaderButton ?? null}
-              {onCloseClick != null && closeButton != null ? (
-                <Btn
-                  disabled={disableCloseButton}
-                  onClick={onCloseClick}
-                  textDecoration={textDecorationUnderline}
-                  data-testid="Toolbox_closeButton"
-                  whiteSpace={NO_WRAP}
-                >
-                  {closeButton}
-                </Btn>
-              ) : null}
-            </Flex>
-          </Flex>
-        </Flex>
-        <Box
-          padding={childrenPadding}
-          flex="1 1 auto"
-          overflowY="auto"
-          ref={slideOutRef}
-          onScroll={handleScroll}
-        >
-          {children}
-        </Box>
-        {(onConfirmClick != null && confirmButtonText != null) ||
-        confirmButton != null ? (
-          <Box
-            padding={SPACING.spacing16}
-            boxShadow={isScrolledToBottom ? 'none' : '0px -4px 12px #0000001a'}
-            width="100%"
-            borderTop={`1px solid ${COLORS.grey30}`}
-            alignItems={ALIGN_CENTER}
-          >
-            {onConfirmClick != null && confirmButtonText != null ? (
-              <PrimaryButton
-                width="100%"
-                data-testid="Toolbox_confirmButton"
-                onClick={onConfirmClick}
-              >
-                {confirmButtonText}
-              </PrimaryButton>
-            ) : null}
-            {confirmButton ?? null}
-          </Box>
-        ) : null}
-      </Flex>
-    </Flex>
-  )
-}

package/src/organisms/index.ts

@@ -1,5 +0,0 @@
-export * from './DeckLabelSet'
-export * from './Toolbox'
-export * from './ProtocolTimelineScrubber'
-export * from './CommandText'
-export * from './FixtureOption'