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

package/src/organisms/ProtocolTimelineScrubber/PipetteVisuals.tsx

@@ -1,213 +0,0 @@
-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].hasTip}
-          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"
-      />
-    </>
-  )
-}

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,
-  LabwareDefinition,
-  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: LabwareDefinition): 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: LabwareDefinition
-): 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 }
-}