From f642d6c6213f9c1193ac9e3e12d8959be0d90c5c Mon Sep 17 00:00:00 2001 From: smb2268 Date: Tue, 1 Apr 2025 12:57:57 -0400 Subject: [PATCH 1/4] fix(app): remove display of offset vector in labware overlay on setup map fix RQA-4025 --- .../ProtocolRun/LabwareInfoOverlay.tsx | 33 ++++--------------- .../SetupLabware/SetupLabwareMap.tsx | 4 +-- 2 files changed, 8 insertions(+), 29 deletions(-) diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx index 789baf8004a4..d40818495d08 100644 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx +++ b/app/src/organisms/Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx @@ -1,6 +1,4 @@ import { css } from 'styled-components' -import { useTranslation } from 'react-i18next' -import { getLabwareDisplayName } from '@opentrons/shared-data' import { ALIGN_FLEX_START, Box, @@ -17,13 +15,10 @@ import { LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' -import { LegacyOffsetVector } from '/app/molecules/LegacyOffsetVector' import type { LabwareDefinition2 } from '@opentrons/shared-data' -import { useLabwareOffsetForLabware } from './useLabwareOffsetForLabware' interface LabwareInfoProps { - displayName: string | null - definitionDisplayName: string + displayName: string labwareId: string runId: string labwareHasLiquid?: boolean @@ -40,9 +35,7 @@ const labwareDisplayNameStyle = css` -webkit-box-orient: vertical; ` const LabwareInfo = (props: LabwareInfoProps): JSX.Element | null => { - const { displayName, definitionDisplayName, labwareId, runId, hover } = props - const { t } = useTranslation('protocol_setup') - const vector = useLabwareOffsetForLabware(runId, labwareId)?.vector + const { displayName, labwareId, hover } = props return ( { - {displayName ?? definitionDisplayName} + {displayName} {props.labwareHasLiquid && ( )} - {vector != null && ( - <> - - {t('offset_data')} - - - - )} ) } @@ -89,15 +70,15 @@ const LabwareInfo = (props: LabwareInfoProps): JSX.Element | null => { interface LabwareInfoOverlayProps { definition: LabwareDefinition2 labwareId: string - displayName: string | null + displayName: string runId: string hover?: boolean - labwareHasLiquid?: boolean } export const LabwareInfoOverlay = ( props: LabwareInfoOverlayProps ): JSX.Element => { const { definition, labwareId, displayName, runId } = props + const width = definition.dimensions.xDimension const height = definition.dimensions.yDimension return ( @@ -113,11 +94,9 @@ export const LabwareInfoOverlay = ( > ) diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx index 8d5558d17cd6..96134c2410aa 100644 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx +++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx @@ -195,11 +195,11 @@ export function SetupLabwareMap({ setHoverLabwareId(null) }} > - {topLabwareDefinition != null ? ( + {topLabwareDisplayName != null ? ( ) : null} From ccc1f0e2b52d1b154c41ba423e65e3f2735a799b Mon Sep 17 00:00:00 2001 From: smb2268 Date: Tue, 1 Apr 2025 13:08:00 -0400 Subject: [PATCH 2/4] Test updates, remove unused util --- .../__tests__/LabwareInfoOverlay.test.tsx | 108 +----------------- .../ProtocolRun/useLabwareOffsetForLabware.ts | 48 -------- 2 files changed, 4 insertions(+), 152 deletions(-) delete mode 100644 app/src/organisms/Desktop/Devices/ProtocolRun/useLabwareOffsetForLabware.ts diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx index a47f37e11360..f8a4ee6a3b2e 100644 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx +++ b/app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/LabwareInfoOverlay.test.tsx @@ -1,38 +1,12 @@ -import { when } from 'vitest-when' import { screen } from '@testing-library/react' -import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest' -import { - getLabwareDisplayName, - fixtureTiprack300ul, -} from '@opentrons/shared-data' -import { nestedTextMatcher, renderWithProviders } from '/app/__testing-utils__' +import { describe, it, beforeEach, vi, afterEach } from 'vitest' +import { fixtureTiprack300ul } from '@opentrons/shared-data' +import { renderWithProviders } from '/app/__testing-utils__' import { i18n } from '/app/i18n' -import { useCurrentRun } from '/app/resources/runs' -import { getLabwareLocation } from '/app/transformations/commands' import { LabwareInfoOverlay } from '../LabwareInfoOverlay' -import { getLabwareDefinitionUri } from '/app/transformations/protocols' -import { useLabwareOffsetForLabware } from '../useLabwareOffsetForLabware' import type { ComponentProps } from 'react' -import type { - LabwareDefinition2, - ProtocolFile, - LoadedLabware, -} from '@opentrons/shared-data' - -vi.mock('/app/resources/runs') -vi.mock('/app/transformations/commands') -vi.mock('../../hooks') -vi.mock('/app/transformations/protocols') -vi.mock('../useLabwareOffsetForLabware') - -vi.mock('@opentrons/shared-data', async importOriginal => { - const actual = await importOriginal() - return { - ...actual, - getLabwareDisplayName: vi.fn(), - } -}) +import type { LabwareDefinition2 } from '@opentrons/shared-data' const render = (props: ComponentProps) => { return renderWithProviders( @@ -46,15 +20,10 @@ const render = (props: ComponentProps) => { } const MOCK_LABWARE_ID = 'some_labware_id' -const MOCK_LABWARE_DEFINITION_URI = 'some_labware_definition_uri' -const MOCK_SLOT_NAME = '4' -const MOCK_LABWARE_VECTOR = { x: 1, y: 2, z: 3 } const MOCK_RUN_ID = 'fake_run_id' describe('LabwareInfoOverlay', () => { let props: ComponentProps - let labware: LoadedLabware[] - let labwareDefinitions: ProtocolFile<{}>['labwareDefinitions'] beforeEach(() => { props = { definition: fixtureTiprack300ul as LabwareDefinition2, @@ -62,40 +31,6 @@ describe('LabwareInfoOverlay', () => { labwareId: MOCK_LABWARE_ID, runId: MOCK_RUN_ID, } - labware = [ - { - id: MOCK_LABWARE_ID, - definitionUri: MOCK_LABWARE_DEFINITION_URI, - } as LoadedLabware, - ] - labwareDefinitions = { - [MOCK_LABWARE_DEFINITION_URI]: fixtureTiprack300ul as LabwareDefinition2, - } - when(vi.mocked(getLabwareDisplayName)) - .calledWith(props.definition) - .thenReturn('mock definition display name') - - when(vi.mocked(useLabwareOffsetForLabware)) - .calledWith(MOCK_RUN_ID, MOCK_LABWARE_ID) - .thenReturn({ - id: 'fake_offset_id', - createdAt: 'fake_timestamp', - definitionUri: 'fake_def_uri', - location: { slotName: MOCK_SLOT_NAME }, - vector: MOCK_LABWARE_VECTOR, - }) - - when(vi.mocked(useCurrentRun)) - .calledWith() - .thenReturn({} as any) - - when(vi.mocked(getLabwareLocation)) - .calledWith(MOCK_LABWARE_ID, []) - .thenReturn({ slotName: MOCK_SLOT_NAME }) - - when(vi.mocked(getLabwareDefinitionUri)) - .calledWith(MOCK_LABWARE_ID, labware, labwareDefinitions) - .thenReturn(MOCK_LABWARE_DEFINITION_URI) }) afterEach(() => { vi.restoreAllMocks() @@ -105,39 +40,4 @@ describe('LabwareInfoOverlay', () => { render(props) screen.getByText('fresh tips') }) - - it('should render the labware def display name if no user displayName present', () => { - render({ - ...props, - displayName: null, - }) - screen.getByText('mock definition display name') - }) - - it('should render NOT render the offset data label when offset data does not exist', () => { - render(props) - expect(screen.queryByText('Labware Offsets')).toBeNull() - }) - - it('should render the offset data when offset data exists', () => { - when(vi.mocked(useCurrentRun)) - .calledWith() - .thenReturn({ - data: { - labwareOffsets: [ - { - id: '1', - definitionUri: MOCK_LABWARE_DEFINITION_URI, - location: { slotName: MOCK_SLOT_NAME }, - vector: MOCK_LABWARE_VECTOR, - }, - ], - }, - } as any) - render(props) - screen.getByText('Offset Data') - screen.getByText(nestedTextMatcher('X1.0')) - screen.getByText(nestedTextMatcher('Y2.0')) - screen.getByText(nestedTextMatcher('Z3.0')) - }) }) diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/useLabwareOffsetForLabware.ts b/app/src/organisms/Desktop/Devices/ProtocolRun/useLabwareOffsetForLabware.ts deleted file mode 100644 index 5046ddcf24c8..000000000000 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/useLabwareOffsetForLabware.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { getLoadedLabwareDefinitionsByUri } from '@opentrons/shared-data' - -import { getLabwareDefinitionUri } from '/app/transformations/protocols' -import { - getLegacyLabwareOffsetLocation, - getCurrentOffsetForLabwareInLocation, -} from '/app/transformations/analysis' -import { - useNotifyRunQuery, - useMostRecentCompletedAnalysis, -} from '/app/resources/runs' - -import type { LabwareOffset } from '@opentrons/api-client' - -export function useLabwareOffsetForLabware( - runId: string, - labwareId: string -): LabwareOffset | null { - const mostRecentAnalysis = useMostRecentCompletedAnalysis(runId) - const { data: runRecord } = useNotifyRunQuery(runId) - if (mostRecentAnalysis == null) return null - - const labwareDefinitionsByUri = getLoadedLabwareDefinitionsByUri( - mostRecentAnalysis.commands - ) - const labwareDefinitionUri = getLabwareDefinitionUri( - labwareId, - mostRecentAnalysis.labware, - labwareDefinitionsByUri - ) - - const labwareLocation = getLegacyLabwareOffsetLocation( - labwareId, - mostRecentAnalysis?.commands ?? [], - mostRecentAnalysis?.modules ?? [], - mostRecentAnalysis?.labware ?? [] - ) - if (labwareLocation == null || labwareDefinitionUri == null) return null - const labwareOffsets = runRecord?.data?.labwareOffsets ?? [] - - return ( - getCurrentOffsetForLabwareInLocation( - labwareOffsets, - labwareDefinitionUri, - labwareLocation - ) ?? null - ) -} From 7eebce5a6ebd215508aa5508a4938dce3710e759 Mon Sep 17 00:00:00 2001 From: smb2268 Date: Tue, 1 Apr 2025 13:45:30 -0400 Subject: [PATCH 3/4] Remove liquid icon per design feedback --- .../Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx index d40818495d08..e2eedfecabc0 100644 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx +++ b/app/src/organisms/Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx @@ -7,7 +7,6 @@ import { DIRECTION_ROW, DISPLAY_FLEX, Flex, - Icon, JUSTIFY_FLEX_END, JUSTIFY_SPACE_BETWEEN, RobotCoordsForeignDiv, @@ -21,7 +20,6 @@ interface LabwareInfoProps { displayName: string labwareId: string runId: string - labwareHasLiquid?: boolean hover?: boolean } @@ -59,9 +57,6 @@ const LabwareInfo = (props: LabwareInfoProps): JSX.Element | null => { > {displayName} - {props.labwareHasLiquid && ( - - )} ) From 5829711bf95d1c904011f9c7e7686f3a241e0f9f Mon Sep 17 00:00:00 2001 From: smb2268 Date: Tue, 1 Apr 2025 15:01:55 -0400 Subject: [PATCH 4/4] Scratch that, adding liquid icon back in --- .../Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx | 9 ++++++++- .../Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx | 2 ++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx index e2eedfecabc0..c03bb6ab91b3 100644 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx +++ b/app/src/organisms/Desktop/Devices/ProtocolRun/LabwareInfoOverlay.tsx @@ -7,6 +7,7 @@ import { DIRECTION_ROW, DISPLAY_FLEX, Flex, + Icon, JUSTIFY_FLEX_END, JUSTIFY_SPACE_BETWEEN, RobotCoordsForeignDiv, @@ -20,6 +21,7 @@ interface LabwareInfoProps { displayName: string labwareId: string runId: string + labwareHasLiquid?: boolean hover?: boolean } @@ -57,6 +59,9 @@ const LabwareInfo = (props: LabwareInfoProps): JSX.Element | null => { > {displayName} + {props.labwareHasLiquid && ( + + )} ) @@ -67,12 +72,13 @@ interface LabwareInfoOverlayProps { labwareId: string displayName: string runId: string + labwareHasLiquid?: boolean hover?: boolean } export const LabwareInfoOverlay = ( props: LabwareInfoOverlayProps ): JSX.Element => { - const { definition, labwareId, displayName, runId } = props + const { definition, labwareId, displayName, runId, labwareHasLiquid } = props const width = definition.dimensions.xDimension const height = definition.dimensions.yDimension @@ -92,6 +98,7 @@ export const LabwareInfoOverlay = ( labwareId={labwareId} runId={runId} hover={props.hover} + labwareHasLiquid={labwareHasLiquid} /> ) diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx index 96134c2410aa..187f28c74610 100644 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx +++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx @@ -133,6 +133,7 @@ export function SetupLabwareMap({ labwareId={topLabwareId} displayName={topLabwareDisplayName} runId={runId} + labwareHasLiquid={Object.values(wellFill).length > 0} /> ) : null} @@ -201,6 +202,7 @@ export function SetupLabwareMap({ labwareId={topLabwareId} displayName={topLabwareDisplayName} runId={runId} + labwareHasLiquid={Object.values(wellFill).length > 0} /> ) : null}