feat(app): update labware containers

app/src/organisms/Desktop/ProtocolVisualization/DestinationLabwareContainer.tsx

@@ -1,36 +1,119 @@
 import { useTranslation } from 'react-i18next'
 
-import { RobotInfoLabel, StyledText, Tag } from '@opentrons/components'
+import {
+  COLORS,
+  LabwareRender,
+  RobotInfoLabel,
+  RobotWorkSpace,
+  StyledText,
+  Tag,
+} from '@opentrons/components'
+import { getLabwareViewBox } from '@opentrons/shared-data'
+
+// eslint-disable-next-line opentrons/no-imports-up-the-tree-of-life
+import {
+  getAllWellContentsAtFrame,
+  getMissingTips,
+} from '/app/pages/Desktop/Protocols/ProtocolVisualization/utils'
 
 import styles from './destinationlabwarecontainer.module.css'
+import { getWellFillFromWellContents } from './utils/getWellFillFromWellContents'
+
+import type { Liquid } from '@opentrons/shared-data'
+import type {
+  ContentsByWell,
+  InvariantContext,
+  RobotState,
+} from '@opentrons/step-generation'
 
 interface DestinationLabwareContainerProps {
-  protocolKey: string // the interface will be updated soon
+  slotId: string | null
+  displayName: string | null
+  labwareId: string | null
+  robotState: RobotState
+  liquids: Liquid[]
+  invariantContext: InvariantContext
 }
 export function DestinationLabwareContainer({
-  protocolKey,
+  slotId,
+  displayName,
+  labwareId,
+  robotState,
+  liquids,
+  invariantContext,
 }: DestinationLabwareContainerProps): JSX.Element {
   const { t } = useTranslation('protocol_visualization')
+
+  const labwareDef =
+    labwareId != null
+      ? invariantContext.labwareEntities[labwareId]?.def
+      : undefined
+
+  const renderableLabware =
+    labwareId != null && labwareDef != null ? (
+      <>
+        {((): JSX.Element => {
+          const labwareViewBox = getLabwareViewBox(labwareDef)
+          const liquidDisplayColors = Object.fromEntries(
+            liquids.map(liquid => [
+              liquid.id,
+              liquid.displayColor ?? COLORS.grey40,
+            ])
+          )
+          const allWellContentsForActiveItem = getAllWellContentsAtFrame(
+            robotState.liquidState,
+            labwareDef
+          )
+          const wellContents = allWellContentsForActiveItem?.[labwareId] ?? null
+          const wellFill = getWellFillFromWellContents(
+            wellContents as ContentsByWell,
+            liquidDisplayColors
+          )
+          const missingTips = getMissingTips(robotState.tipState, labwareId)
+
+          return (
+            <RobotWorkSpace
+              key={labwareId}
+              width="100%"
+              viewBox={`${labwareViewBox.minX} ${labwareViewBox.minY} ${labwareViewBox.xDimension} ${labwareViewBox.yDimension}`}
+            >
+              {() => (
+                <g>
+                  <LabwareRender
+                    definition={labwareDef}
+                    positioningMode="passThrough"
+                    wellFill={wellFill}
+                    missingTips={missingTips}
+                  />
+                </g>
+              )}
+            </RobotWorkSpace>
+          )
+        })()}
+      </>
+    ) : null
+
   return (
     <div className={styles.container}>
       <div className={styles.header}>
         <Tag text={t('destination_labware')} type="default" shrinkToContent />
-        <RobotInfoLabel deckLabel="slot" />
+        <RobotInfoLabel deckLabel={slotId ?? ''} />
         {/* todo need to support module icons */}
       </div>
       <div className={styles.subheader}>
         <StyledText desktopStyle="captionSemiBold">
-          {'destination labware name'}
+          {displayName ?? 'destination labware name'}
         </StyledText>
       </div>
       <div className={styles.subheader}>
+        {/* todo need to update quantity part */}
         <Tag
           text={t('quantity', { quantity: 10 })}
           type="default"
           shrinkToContent
         />
       </div>
-      <div className={styles.main_content}></div>
+      <div className={styles.main_content}>{renderableLabware}</div>
     </div>
   )
 }

app/src/organisms/Desktop/ProtocolVisualization/SourceLabwareContainer.tsx

@@ -1,28 +1,111 @@
 import { useTranslation } from 'react-i18next'
 
-import { RobotInfoLabel, StyledText, Tag } from '@opentrons/components'
+import {
+  COLORS,
+  LabwareRender,
+  RobotInfoLabel,
+  RobotWorkSpace,
+  StyledText,
+  Tag,
+} from '@opentrons/components'
+import { getLabwareViewBox } from '@opentrons/shared-data'
+
+// eslint-disable-next-line opentrons/no-imports-up-the-tree-of-life
+import {
+  getAllWellContentsAtFrame,
+  getMissingTips,
+} from '/app/pages/Desktop/Protocols/ProtocolVisualization/utils'
 
 import styles from './sourcelabwarecontainer.module.css'
+import { getWellFillFromWellContents } from './utils/getWellFillFromWellContents'
+
+import type { Liquid } from '@opentrons/shared-data'
+import type {
+  ContentsByWell,
+  InvariantContext,
+  RobotState,
+} from '@opentrons/step-generation'
 
 interface SourceLabwareContainerProps {
-  protocolKey: string // the interface will be updated soon
+  slotId: string | null
+  displayName: string | null
+  labwareId: string | null
+  robotState: RobotState
+  liquids: Liquid[]
+  invariantContext: InvariantContext
 }
+
 export function SourceLabwareContainer({
-  protocolKey,
+  slotId,
+  displayName,
+  labwareId,
+  robotState,
+  liquids,
+  invariantContext,
 }: SourceLabwareContainerProps): JSX.Element {
   const { t } = useTranslation('protocol_visualization')
+
+  const labwareDef =
+    labwareId != null
+      ? invariantContext.labwareEntities[labwareId]?.def
+      : undefined
+
+  const renderableLabware =
+    labwareId != null && labwareDef != null ? (
+      <>
+        {((): JSX.Element => {
+          const labwareViewBox = getLabwareViewBox(labwareDef)
+          const liquidDisplayColors = Object.fromEntries(
+            liquids.map(liquid => [
+              liquid.id,
+              liquid.displayColor ?? COLORS.grey40,
+            ])
+          )
+          const allWellContentsForActiveItem = getAllWellContentsAtFrame(
+            robotState.liquidState,
+            labwareDef
+          )
+          const wellContents = allWellContentsForActiveItem?.[labwareId] ?? null
+          const wellFill = getWellFillFromWellContents(
+            wellContents as ContentsByWell,
+            liquidDisplayColors
+          )
+          const missingTips = getMissingTips(robotState.tipState, labwareId)
+
+          return (
+            <RobotWorkSpace
+              key={labwareId}
+              width="100%"
+              viewBox={`${labwareViewBox.minX} ${labwareViewBox.minY} ${labwareViewBox.xDimension} ${labwareViewBox.yDimension}`}
+            >
+              {() => (
+                <g>
+                  <LabwareRender
+                    definition={labwareDef}
+                    positioningMode="passThrough"
+                    wellFill={wellFill}
+                    missingTips={missingTips}
+                  />
+                </g>
+              )}
+            </RobotWorkSpace>
+          )
+        })()}
+      </>
+    ) : null
+
   return (
     <div className={styles.container}>
       <div className={styles.header}>
         <Tag text={t('source_labware')} type="default" shrinkToContent />
-        <RobotInfoLabel deckLabel="slot" />
+        <RobotInfoLabel deckLabel={slotId ?? ''} />
       </div>
       <div className={styles.subheader}>
         <StyledText desktopStyle="captionSemiBold">
-          {'source labware name'}
+          {displayName ?? ''}
         </StyledText>
       </div>
-      <div className={styles.main_content}></div>
+      <div className={styles.main_content}>{renderableLabware}</div>
     </div>
   )
 }

app/src/organisms/Desktop/ProtocolVisualization/StepDetailContainer.tsx

@@ -11,26 +11,33 @@ import { SourceWellViewContainer } from './SourceWellViewContainer'
 import styles from './stepdetailcontainer.module.css'
 import { TipDisposalContainer } from './TipDisposalContainer'
 import { TipPickupContainer } from './TipPickupContainer'
+import { getSlotIdFromCommand } from './utils/getSlotIdFromCommand'
 
-import type { RunTimeCommand } from '@opentrons/shared-data'
+import type { Liquid, RunTimeCommand } from '@opentrons/shared-data'
 import type { InvariantContext, RobotState } from '@opentrons/step-generation'
 
 interface StepDetailContainerProps {
   protocolKey: string
   commands: RunTimeCommand[]
   selectedSlot: string | null
   robotState: RobotState
+  previousRobotState: RobotState
   invariantContext: InvariantContext
   selectedRunTimeCommand?: RunTimeCommand
+  currentCommandIndex: number
+  liquids: Liquid[]
 }
 
 export function StepDetailContainer({
   protocolKey,
   commands,
   selectedSlot,
   robotState,
+  previousRobotState,
   invariantContext,
   selectedRunTimeCommand,
+  currentCommandIndex,
+  liquids,
 }: StepDetailContainerProps): JSX.Element {
   const { left: leftMountPipetteName, right: rightMountPipetteName } =
     commands.length > 0
@@ -68,6 +75,22 @@ export function StepDetailContainer({
     rightPipetteId != null &&
     robotState.pipettes[rightPipetteId].entityId != null
 
+  const isSourceActive =
+    commands[currentCommandIndex]?.commandType === 'aspirate' ||
+    commands[currentCommandIndex]?.commandType === 'aspirateInPlace'
+
+  const isDestinationActive =
+    commands[currentCommandIndex]?.commandType === 'dispense' ||
+    commands[currentCommandIndex]?.commandType === 'dispenseInPlace'
+
+  const { slotId, displayName, labwareId } = getSlotIdFromCommand(
+    commands[currentCommandIndex],
+    robotState,
+    commands,
+    currentCommandIndex,
+    invariantContext
+  )
+
   return (
     <div className={styles.container}>
       {leftMountPipetteName != null || is96Channel ? (
@@ -79,17 +102,42 @@ export function StepDetailContainer({
       ) : null}
       {rightMountPipetteName != null ? (
         <PipetteContainer
-          mount={'right_mount'}
+          mount="right_mount"
           pipetteName={rightMountPipetteName}
           selected={isRightPipetteActive}
         />
       ) : null}
+
       <TipPickupContainer protocolKey={protocolKey} />
-      <SourceWellViewContainer protocolKey={protocolKey} />
-      <SourceLabwareContainer protocolKey={protocolKey} />
-      <DestinationWellViewContainer protocolKey={protocolKey} />
-      <DestinationLabwareContainer protocolKey={protocolKey} />
+
+      {isSourceActive ? (
+        <SourceWellViewContainer protocolKey={protocolKey} />
+      ) : null}
+      {isSourceActive ? (
+        <SourceLabwareContainer
+          slotId={slotId}
+          displayName={displayName}
+          labwareId={labwareId}
+          robotState={previousRobotState}
+          liquids={liquids}
+          invariantContext={invariantContext}
+        />
+      ) : null}
+      {isDestinationActive ? (
+        <DestinationWellViewContainer protocolKey={protocolKey} />
+      ) : null}
+      {isDestinationActive ? (
+        <DestinationLabwareContainer
+          slotId={slotId}
+          displayName={displayName}
+          labwareId={labwareId}
+          robotState={robotState}
+          liquids={liquids}
+          invariantContext={invariantContext}
+        />
+      ) : null}
       <TipDisposalContainer protocolKey={protocolKey} />
+
       {moduleOnSlot != null ? (
         <ModuleSlotDetails
           moduleId={moduleOnSlot[0]}