fix(app): refactor Flex pipette card to reference /instruments not /p…

…ipettes fix RQA-2433
Opentrons · Mar 20, 2024 · 08464ae · 08464ae
1 parent 6b05f46
commit 08464ae
Show file tree

Hide file tree

Showing 11 changed files with 724 additions and 637 deletions.
diff --git a/app/src/molecules/InstrumentCard/index.tsx b/app/src/molecules/InstrumentCard/index.tsx
@@ -5,6 +5,7 @@ import {
   Flex,
   InstrumentDiagram,
   ALIGN_FLEX_START,
+  ALIGN_CENTER,
   BORDERS,
   COLORS,
   DIRECTION_COLUMN,
@@ -80,13 +81,19 @@ export function InstrumentCard(props: InstrumentCardProps): JSX.Element {
         </Flex>
       ) : null}
       {instrumentDiagramProps?.pipetteSpecs != null ? (
-        <InstrumentDiagram
-          pipetteSpecs={instrumentDiagramProps.pipetteSpecs}
-          mount={instrumentDiagramProps.mount}
-          transform="scale(0.3)"
-          size="3.125rem"
-          transformOrigin="20% -10%"
-        />
+        <Flex
+          alignItems={ALIGN_CENTER}
+          width="3.75rem"
+          height="3.375rem"
+          paddingRight={SPACING.spacing8}
+        >
+          <InstrumentDiagram
+            pipetteSpecs={instrumentDiagramProps.pipetteSpecs}
+            mount={instrumentDiagramProps.mount}
+            transform="scale(0.3)"
+            transformOrigin={'-5% 52%'}
+          />
+        </Flex>
       ) : null}
       <Flex
         alignItems={ALIGN_FLEX_START}

diff --git a/app/src/organisms/Devices/InstrumentsAndModules.tsx b/app/src/organisms/Devices/InstrumentsAndModules.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { getPipetteModelSpecs, LEFT, RIGHT } from '@opentrons/shared-data'
 import {
-  useAllPipetteOffsetCalibrationsQuery,
   useModulesQuery,
   usePipettesQuery,
   useInstrumentsQuery,
@@ -28,10 +27,10 @@ import { ModuleCard } from '../ModuleCard'
 import { useIsFlex, useIsRobotViewable, useRunStatuses } from './hooks'
 import {
   getIs96ChannelPipetteAttached,
-  getOffsetCalibrationForMount,
   getShowPipetteCalibrationWarning,
 } from './utils'
 import { PipetteCard } from './PipetteCard'
+import { FlexPipetteCard } from './PipetteCard/FlexPipetteCard'
 import { GripperCard } from '../GripperCard'
 import { useIsEstopNotDisengaged } from '../../resources/devices/hooks/useIsEstopNotDisengaged'
 
@@ -43,7 +42,6 @@ import type {
 } from '@opentrons/api-client'
 
 const EQUIPMENT_POLL_MS = 5000
-const FETCH_PIPETTE_CAL_POLL = 30000
 interface InstrumentsAndModulesProps {
   robotName: string
 }
@@ -52,20 +50,22 @@ export function InstrumentsAndModules({
   robotName,
 }: InstrumentsAndModulesProps): JSX.Element | null {
   const { t } = useTranslation(['device_details', 'shared'])
+  const isFlex = useIsFlex(robotName)
   const attachedPipettes = usePipettesQuery(
     {},
     {
       refetchInterval: EQUIPMENT_POLL_MS,
+      enabled: !isFlex,
     }
   )?.data ?? { left: undefined, right: undefined }
   const isRobotViewable = useIsRobotViewable(robotName)
   const currentRunId = useCurrentRunId()
   const { isRunTerminal, isRunRunning } = useRunStatuses()
-  const isFlex = useIsFlex(robotName)
   const isEstopNotDisengaged = useIsEstopNotDisengaged(robotName)
 
   const { data: attachedInstruments } = useInstrumentsQuery({
     refetchInterval: EQUIPMENT_POLL_MS,
+    enabled: isFlex,
   })
 
   const attachedGripper =
@@ -120,26 +120,6 @@ export function InstrumentsAndModules({
   const leftColumnModules = attachedModules?.slice(0, halfAttachedModulesSize)
   const rightColumnModules = attachedModules?.slice(halfAttachedModulesSize)
 
-  // The following pipetteOffset related code has been lifted out of the PipetteCard component
-  // to eliminate duplicated useInterval calls to `calibration/pipette_offset` coming from each card.
-  // Instead we now capture all offset calibration data here, and pass the appropriate calibration
-  // data to the associated card via props
-  const pipetteOffsetCalibrations =
-    useAllPipetteOffsetCalibrationsQuery({
-      refetchInterval: FETCH_PIPETTE_CAL_POLL,
-      enabled: !isFlex,
-    })?.data?.data ?? []
-  const leftMountOffsetCalibration = getOffsetCalibrationForMount(
-    pipetteOffsetCalibrations,
-    attachedPipettes,
-    LEFT
-  )
-  const rightMountOffsetCalibration = getOffsetCalibrationForMount(
-    pipetteOffsetCalibrations,
-    attachedPipettes,
-    RIGHT
-  )
-
   return (
     <Flex
       alignItems={ALIGN_FLEX_START}
@@ -186,37 +166,46 @@ export function InstrumentsAndModules({
               flexDirection={DIRECTION_COLUMN}
               gridGap={SPACING.spacing8}
             >
-              <PipetteCard
-                pipetteId={attachedPipettes.left?.id}
-                pipetteModelSpecs={
-                  attachedPipettes.left?.model != null
-                    ? getPipetteModelSpecs(attachedPipettes.left?.model) ?? null
-                    : null
-                }
-                isPipetteCalibrated={
-                  isFlex && attachedLeftPipette?.ok
-                    ? attachedLeftPipette?.data?.calibratedOffset
-                        ?.last_modified != null
-                    : leftMountOffsetCalibration != null
-                }
-                mount={LEFT}
-                robotName={robotName}
-                pipetteIs96Channel={is96ChannelAttached}
-                pipetteIsBad={badLeftPipette != null}
-                isRunActive={currentRunId != null && isRunRunning}
-                isEstopNotDisengaged={isEstopNotDisengaged}
-              />
-              {isFlex && (
-                <GripperCard
-                  attachedGripper={attachedGripper}
-                  isCalibrated={
-                    attachedGripper?.ok === true &&
-                    attachedGripper?.data?.calibratedOffset?.last_modified !=
-                      null
+              {!isFlex ? (
+                <PipetteCard
+                  pipetteId={attachedPipettes.left?.id}
+                  pipetteModelSpecs={
+                    attachedPipettes.left?.model != null
+                      ? getPipetteModelSpecs(attachedPipettes.left?.model) ??
+                        null
+                      : null
                   }
+                  mount={LEFT}
+                  robotName={robotName}
                   isRunActive={currentRunId != null && isRunRunning}
                   isEstopNotDisengaged={isEstopNotDisengaged}
                 />
+              ) : (
+                <>
+                  <FlexPipetteCard
+                    attachedPipette={attachedLeftPipette}
+                    pipetteModelSpecs={
+                      attachedLeftPipette?.instrumentModel != null
+                        ? getPipetteModelSpecs(
+                            attachedLeftPipette.instrumentModel
+                          ) ?? null
+                        : null
+                    }
+                    mount={LEFT}
+                    isRunActive={currentRunId != null && isRunRunning}
+                    isEstopNotDisengaged={isEstopNotDisengaged}
+                  />
+                  <GripperCard
+                    attachedGripper={attachedGripper}
+                    isCalibrated={
+                      attachedGripper?.ok === true &&
+                      attachedGripper?.data?.calibratedOffset?.last_modified !=
+                        null
+                    }
+                    isRunActive={currentRunId != null && isRunRunning}
+                    isEstopNotDisengaged={isEstopNotDisengaged}
+                  />
+                </>
               )}
               {leftColumnModules.map((module, index) => (
                 <ModuleCard
@@ -237,7 +226,7 @@ export function InstrumentsAndModules({
               flexDirection={DIRECTION_COLUMN}
               gridGap={SPACING.spacing8}
             >
-              {!Boolean(is96ChannelAttached) && (
+              {!isFlex && (
                 <PipetteCard
                   pipetteId={attachedPipettes.right?.id}
                   pipetteModelSpecs={
@@ -246,20 +235,27 @@ export function InstrumentsAndModules({
                         null
                       : null
                   }
-                  isPipetteCalibrated={
-                    isFlex && attachedRightPipette?.ok
-                      ? attachedRightPipette?.data?.calibratedOffset
-                          ?.last_modified != null
-                      : rightMountOffsetCalibration != null
-                  }
                   mount={RIGHT}
                   robotName={robotName}
-                  pipetteIs96Channel={false}
-                  pipetteIsBad={badRightPipette != null}
                   isRunActive={currentRunId != null && isRunRunning}
                   isEstopNotDisengaged={isEstopNotDisengaged}
                 />
               )}
+              {isFlex && !is96ChannelAttached ? (
+                <FlexPipetteCard
+                  attachedPipette={attachedRightPipette}
+                  pipetteModelSpecs={
+                    attachedRightPipette?.instrumentModel != null
+                      ? getPipetteModelSpecs(
+                          attachedRightPipette.instrumentModel
+                        ) ?? null
+                      : null
+                  }
+                  mount={RIGHT}
+                  isRunActive={currentRunId != null && isRunRunning}
+                  isEstopNotDisengaged={isEstopNotDisengaged}
+                />
+              ) : null}
               {rightColumnModules.map((module, index) => (
                 <ModuleCard
                   key={`moduleCard_${String(module.moduleType)}_${String(

diff --git a/app/src/organisms/Devices/PipetteCard/AboutPipetteSlideout.tsx b/app/src/organisms/Devices/PipetteCard/AboutPipetteSlideout.tsx
@@ -8,33 +8,31 @@ import {
   TYPOGRAPHY,
   COLORS,
 } from '@opentrons/components'
-import { useInstrumentsQuery } from '@opentrons/react-api-client'
 import { StyledText } from '../../../atoms/text'
 import { Slideout } from '../../../atoms/Slideout'
 
 import type { AttachedPipette } from '../../../redux/pipettes/types'
-import type { PipetteData } from '@opentrons/api-client'
-import type { PipetteModelSpecs, PipetteMount } from '@opentrons/shared-data'
+import type { PipetteModelSpecs } from '@opentrons/shared-data'
 
 interface AboutPipetteSlideoutProps {
   pipetteId: AttachedPipette['id']
   pipetteName: PipetteModelSpecs['displayName']
-  mount: PipetteMount
+  firmwareVersion?: string
   onCloseClick: () => unknown
   isExpanded: boolean
 }
 
 export const AboutPipetteSlideout = (
   props: AboutPipetteSlideoutProps
 ): JSX.Element | null => {
-  const { pipetteId, pipetteName, isExpanded, mount, onCloseClick } = props
+  const {
+    pipetteId,
+    pipetteName,
+    isExpanded,
+    firmwareVersion,
+    onCloseClick,
+  } = props
   const { i18n, t } = useTranslation(['device_details', 'shared'])
-  const { data: attachedInstruments } = useInstrumentsQuery()
-  const instrumentInfo =
-    attachedInstruments?.data?.find(
-      (i): i is PipetteData =>
-        i.instrumentType === 'pipette' && i.ok && i.mount === mount
-    ) ?? null
 
   return (
     <Slideout
@@ -52,7 +50,7 @@ export const AboutPipetteSlideout = (
       }
     >
       <Flex flexDirection={DIRECTION_COLUMN}>
-        {instrumentInfo?.firmwareVersion != null && (
+        {firmwareVersion != null && (
           <>
             <StyledText
               as="h6"
@@ -66,7 +64,7 @@ export const AboutPipetteSlideout = (
               paddingTop={SPACING.spacing4}
               paddingBottom={SPACING.spacing16}
             >
-              {instrumentInfo.firmwareVersion}
+              {firmwareVersion}
             </StyledText>
           </>
         )}