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

package/src/organisms/ProtocolTimelineScrubber/index.tsx

@@ -0,0 +1,312 @@
+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

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

package/src/organisms/ProtocolTimelineScrubber/utils.ts

@@ -0,0 +1,160 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,149 @@
+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

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