anonymize instruments in protocol setup and details pages

Opentrons · Apr 25, 2024 · 8fd67bf · 8fd67bf
1 parent 211b8d1
commit 8fd67bf
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 52 deletions.
diff --git a/app/src/organisms/InstrumentMountItem/ProtocolInstrumentMountItem.tsx b/app/src/organisms/InstrumentMountItem/ProtocolInstrumentMountItem.tsx
@@ -14,15 +14,17 @@ import {
   JUSTIFY_FLEX_START,
 } from '@opentrons/components'
 import {
-  getGripperDisplayName,
-  getPipetteNameSpecs,
   NINETY_SIX_CHANNEL,
   PipetteName,
   SINGLE_MOUNT_PIPETTES,
   LoadedPipette,
 } from '@opentrons/shared-data'
 
 import { SmallButton } from '../../atoms/buttons'
+import {
+  useGripperDisplayName,
+  usePipetteNameSpecs,
+} from '../../resources/instruments/hooks'
 import { FLOWS } from '../PipetteWizardFlows/constants'
 import { PipetteWizardFlows } from '../PipetteWizardFlows'
 import { GripperWizardFlows } from '../GripperWizardFlows'
@@ -97,6 +99,11 @@ export function ProtocolInstrumentMountItem(
     attachedInstrument != null &&
     attachedInstrument.ok &&
     attachedInstrument?.data?.calibratedOffset?.last_modified != null
+
+  const gripperDisplayName = useGripperDisplayName(speccedName as GripperModel)
+  const pipetteDisplayName = usePipetteNameSpecs(speccedName as PipetteName)
+    ?.displayName
+
   return (
     <>
       <MountItem isReady={isAttachedWithCal}>
@@ -117,9 +124,7 @@ export function ProtocolInstrumentMountItem(
               )}
             </MountLabel>
             <SpeccedInstrumentName>
-              {mount === 'extension'
-                ? getGripperDisplayName(speccedName as GripperModel)
-                : getPipetteNameSpecs(speccedName as PipetteName)?.displayName}
+              {mount === 'extension' ? gripperDisplayName : pipetteDisplayName}
             </SpeccedInstrumentName>
           </Flex>
 

diff --git a/app/src/pages/ProtocolDetails/Hardware.tsx b/app/src/pages/ProtocolDetails/Hardware.tsx
@@ -14,18 +14,21 @@ import {
   WRAP,
 } from '@opentrons/components'
 import {
-  GRIPPER_V1,
   getCutoutDisplayName,
-  getGripperDisplayName,
   getModuleDisplayName,
   getModuleType,
-  getPipetteNameSpecs,
   getFixtureDisplayName,
+  GRIPPER_V1_2,
 } from '@opentrons/shared-data'
+
+import {
+  useGripperDisplayName,
+  usePipetteNameSpecs,
+} from '../../resources/instruments/hooks'
 import { useRequiredProtocolHardware } from '../Protocols/hooks'
 import { EmptySection } from './EmptySection'
 
-import type { ProtocolHardware } from '../Protocols/hooks'
+import type { ProtocolHardware, ProtocolPipette } from '../Protocols/hooks'
 import type { TFunction } from 'i18next'
 
 const Table = styled('table')`
@@ -75,18 +78,74 @@ const getHardwareLocation = (
   }
 }
 
-const getHardwareName = (protocolHardware: ProtocolHardware): string => {
+// convert to anon
+
+const useHardwareName = (protocolHardware: ProtocolHardware): string => {
+  const gripperDisplayName = useGripperDisplayName(GRIPPER_V1_2)
+
+  const pipetteDisplayName =
+    usePipetteNameSpecs((protocolHardware as ProtocolPipette).pipetteName)
+      ?.displayName ?? ''
+
   if (protocolHardware.hardwareType === 'gripper') {
-    return getGripperDisplayName(GRIPPER_V1)
+    return gripperDisplayName
   } else if (protocolHardware.hardwareType === 'pipette') {
-    return getPipetteNameSpecs(protocolHardware.pipetteName)?.displayName ?? ''
+    return pipetteDisplayName
   } else if (protocolHardware.hardwareType === 'module') {
     return getModuleDisplayName(protocolHardware.moduleModel)
   } else {
     return getFixtureDisplayName(protocolHardware.cutoutFixtureId)
   }
 }
 
+function HardwareItem({
+  hardware,
+}: {
+  hardware: ProtocolHardware
+}): JSX.Element {
+  const { t, i18n } = useTranslation('protocol_details')
+
+  const hardwareName = useHardwareName(hardware)
+
+  let location: JSX.Element = (
+    <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
+      {i18n.format(getHardwareLocation(hardware, t), 'titleCase')}
+    </StyledText>
+  )
+  if (hardware.hardwareType === 'module') {
+    location = <LocationIcon slotName={hardware.slot} />
+  } else if (hardware.hardwareType === 'fixture') {
+    location = (
+      <LocationIcon slotName={getCutoutDisplayName(hardware.location.cutout)} />
+    )
+  }
+  return (
+    <TableRow>
+      <TableDatum>
+        <Flex paddingLeft={SPACING.spacing24}>{location}</Flex>
+      </TableDatum>
+      <TableDatum>
+        <Flex paddingLeft={SPACING.spacing24}>
+          {hardware.hardwareType === 'module' && (
+            <Flex
+              alignItems={ALIGN_CENTER}
+              height="2rem"
+              paddingBottom={SPACING.spacing4}
+              paddingRight={SPACING.spacing8}
+            >
+              <ModuleIcon
+                moduleType={getModuleType(hardware.moduleModel)}
+                size="1.75rem"
+              />
+            </Flex>
+          )}
+          <StyledText as="p">{hardwareName}</StyledText>
+        </Flex>
+      </TableDatum>
+    </TableRow>
+  )
+}
+
 export const Hardware = (props: { protocolId: string }): JSX.Element => {
   const { requiredProtocolHardware } = useRequiredProtocolHardware(
     props.protocolId
@@ -123,45 +182,7 @@ export const Hardware = (props: { protocolId: string }): JSX.Element => {
       </thead>
       <tbody>
         {requiredProtocolHardware.map((hardware, id) => {
-          let location: JSX.Element = (
-            <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
-              {i18n.format(getHardwareLocation(hardware, t), 'titleCase')}
-            </StyledText>
-          )
-          if (hardware.hardwareType === 'module') {
-            location = <LocationIcon slotName={hardware.slot} />
-          } else if (hardware.hardwareType === 'fixture') {
-            location = (
-              <LocationIcon
-                slotName={getCutoutDisplayName(hardware.location.cutout)}
-              />
-            )
-          }
-          return (
-            <TableRow key={id}>
-              <TableDatum>
-                <Flex paddingLeft={SPACING.spacing24}>{location}</Flex>
-              </TableDatum>
-              <TableDatum>
-                <Flex paddingLeft={SPACING.spacing24}>
-                  {hardware.hardwareType === 'module' && (
-                    <Flex
-                      alignItems={ALIGN_CENTER}
-                      height="2rem"
-                      paddingBottom={SPACING.spacing4}
-                      paddingRight={SPACING.spacing8}
-                    >
-                      <ModuleIcon
-                        moduleType={getModuleType(hardware.moduleModel)}
-                        size="1.75rem"
-                      />
-                    </Flex>
-                  )}
-                  <StyledText as="p">{getHardwareName(hardware)}</StyledText>
-                </Flex>
-              </TableDatum>
-            </TableRow>
-          )
+          return <HardwareItem key={id} hardware={hardware} />
         })}
       </tbody>
     </Table>

diff --git a/app/src/pages/Protocols/hooks/index.ts b/app/src/pages/Protocols/hooks/index.ts
@@ -31,7 +31,7 @@ import type {
 } from '@opentrons/shared-data'
 import type { LabwareSetupItem } from '../utils'
 
-interface ProtocolPipette {
+export interface ProtocolPipette {
   hardwareType: 'pipette'
   pipetteName: PipetteName
   mount: 'left' | 'right'