Skip to content

Commit 11c6df8

Browse files
authored
Merge pull request #887 from sanger/extra-update-for-cytassist
extra UI changes for the cytassist page
2 parents beb76a9 + 6c15c99 commit 11c6df8

File tree

5 files changed

+83
-24
lines changed

5 files changed

+83
-24
lines changed

cypress/e2e/pages/cytAssist.cy.ts

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import { selectOption, selectSGPNumber, shouldDisplaySelectedValue } from '../shared/customReactSelect.cy';
2-
import { ReloadSlotCopyQuery, ReloadSlotCopyQueryVariables, SlideCosting } from '../../../src/types/sdk';
2+
import {
3+
FindFlaggedLabwareQuery,
4+
FindFlaggedLabwareQueryVariables,
5+
LabwareState,
6+
ReloadSlotCopyQuery,
7+
ReloadSlotCopyQueryVariables,
8+
SlideCosting
9+
} from '../../../src/types/sdk';
310
import { HttpResponse } from 'msw';
411
import { LabwareTypeName } from '../../../src/types/stan';
12+
import { createFlaggedLabware } from '../../../src/mocks/handlers/flagLabwareHandlers';
513

614
describe('CytAssist Page', () => {
715
before(() => {
@@ -27,6 +35,28 @@ describe('CytAssist Page', () => {
2735
});
2836
});
2937

38+
context('when scanning a non active labware', () => {
39+
before(() => {
40+
const discardedLabware = createFlaggedLabware('STAN-4100');
41+
discardedLabware.state = LabwareState.Discarded;
42+
cy.msw().then(({ worker, graphql }) => {
43+
worker.use(
44+
graphql.query<FindFlaggedLabwareQuery, FindFlaggedLabwareQueryVariables>('FindFlaggedLabware', () => {
45+
return HttpResponse.json({
46+
data: {
47+
labwareFlagged: discardedLabware
48+
}
49+
});
50+
})
51+
);
52+
});
53+
cy.get('#labwareScanInput').type('STAN-4100{enter}');
54+
});
55+
it('should display an error message', () => {
56+
cy.findByText('Labware is not active: [ STAN-4100]').should('be.visible');
57+
});
58+
});
59+
3060
context('scanned input labware are displayed within the same view', () => {
3161
before(() => {
3262
cy.get('#labwareScanInput').type('STAN-3100{enter}');
@@ -367,15 +397,15 @@ describe('CytAssist Page', () => {
367397
});
368398
});
369399
it('selects the correct output labware type', () => {
370-
shouldDisplaySelectedValue('output-labware-type', '8 Strip Tube');
400+
shouldDisplaySelectedValue('output-labware-type', 'Visium LP CytAssist 6.5');
371401
});
372402
it('displays the source labware properly', () => {
373403
cy.findByText('STAN-3100').should('be.visible');
374404
cy.findByText('STAN-3200').should('be.visible');
375405
});
376406
it('displays the output labware properly', () => {
377407
cy.findByTestId('cytassist-labware').within(() => {
378-
cy.findByText('8 Strip Tube').should('be.visible');
408+
cy.findByText('Visium LP CytAssist 6.5').should('be.visible');
379409
});
380410
});
381411
it('shows the mapped slots correctly', () => {
@@ -386,7 +416,7 @@ describe('CytAssist Page', () => {
386416
});
387417
it('shows the mapped slots correctly', () => {
388418
cy.findByTestId('cytassist-labware').within(() => {
389-
cy.findByText('C1').click();
419+
cy.findByText('D1').click();
390420
});
391421
cy.findByTestId('mapping_table').get('tbody tr').should('have.length', 1);
392422
});

src/components/labware/Labware.tsx

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -242,8 +242,22 @@ const Labware = ({
242242
onSelect?.(Array.from(selectedAddresses));
243243
}, [onSelect, selectedAddresses]);
244244

245-
const labwareClasses =
246-
'inline-block border border-sdb py-2 bg-blue-100 rounded-lg transition duration-300 ease-in-out';
245+
const isBarcodeInfoAtTheTop = barcodeInfoPosition === Position.TopLeft || barcodeInfoPosition === Position.TopRight;
246+
247+
const isBarcodeInfoAtTheBottom =
248+
barcodeInfoPosition === Position.BottomRight || barcodeInfoPosition === Position.BottomLeft;
249+
250+
const isBarcodeInfoAtTheLeft =
251+
barcodeInfoPosition === Position.TopLeft || barcodeInfoPosition === Position.BottomLeft;
252+
253+
const isBarcodeInfoAtTheLeftSide = barcodeInfoPosition === Position.Left;
254+
255+
const isBarcodeInfoAtTheRightSide = barcodeInfoPosition === Position.Right;
256+
257+
const labwareDisplayClass =
258+
isBarcodeInfoAtTheLeftSide || isBarcodeInfoAtTheRightSide ? 'flex flex row' : 'inline-block';
259+
260+
const labwareClasses = `${labwareDisplayClass} border border-sdb py-2 bg-blue-100 rounded-lg transition duration-300 ease-in-out items-center`;
247261

248262
const grid =
249263
labwareDirection && labwareDirection === LabwareDirection.Horizontal
@@ -310,14 +324,6 @@ const Labware = ({
310324
return slotColumns;
311325
}, [numColumns, slots]);
312326

313-
const isBarcodeInfoAtTheTop = barcodeInfoPosition === Position.TopLeft || barcodeInfoPosition === Position.TopRight;
314-
315-
const isBarcodeInfoAtTheBottom =
316-
barcodeInfoPosition === Position.BottomRight || barcodeInfoPosition === Position.BottomLeft;
317-
318-
const isBarcodeInfoAtTheLeft =
319-
barcodeInfoPosition === Position.TopLeft || barcodeInfoPosition === Position.BottomLeft;
320-
321327
const barcodePositionClassName = (): string => {
322328
if (barcodeInfoPosition && isBarcodeInfoAtTheLeft) return 'items-end';
323329
return 'items-start';
@@ -326,9 +332,16 @@ const Labware = ({
326332
const BarcodeInformation = () => (
327333
<div
328334
className={
329-
'flex flex-col py-2 px-3 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider ' +
335+
'flex flex-col py-2 px-3 text-xs font-medium text-gray-500 uppercase tracking-wider ' +
330336
barcodePositionClassName()
331337
}
338+
style={{
339+
writingMode: isBarcodeInfoAtTheRightSide
340+
? 'vertical-rl'
341+
: isBarcodeInfoAtTheLeftSide
342+
? 'vertical-lr'
343+
: 'initial'
344+
}}
332345
>
333346
{name && <span>{name}</span>}
334347
{barcode && !isFlagged && (
@@ -366,7 +379,7 @@ const Labware = ({
366379
<SlotColumnInfo slotColumn={slotColumns[0]} slotBuilder={slotBuilder} numRows={numRows} />
367380
)}
368381
<div onClick={() => onClick?.()} className={labwareClasses}>
369-
{barcodeInfoPosition && isBarcodeInfoAtTheTop && BarcodeInformation()}
382+
{(isBarcodeInfoAtTheLeftSide || isBarcodeInfoAtTheTop) && BarcodeInformation()}
370383
<div className={gridClasses}>
371384
{buildAddresses({ numColumns, numRows }, gridDirection).map((address, i) => (
372385
<Slot
@@ -387,7 +400,7 @@ const Labware = ({
387400
/>
388401
))}
389402
</div>
390-
{(!barcodeInfoPosition || isBarcodeInfoAtTheBottom) && BarcodeInformation()}
403+
{(!barcodeInfoPosition || isBarcodeInfoAtTheBottom || isBarcodeInfoAtTheRightSide) && BarcodeInformation()}
391404
</div>
392405
{slotColumns.length > 1 && slotBuilder && (
393406
<SlotColumnInfo slotColumn={slotColumns[1]} slotBuilder={slotBuilder} numRows={numRows} alignRight={true} />

src/components/slotMapper/MultipleLabwareSlotMapper.tsx

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
22
import Labware, { LabwareImperativeRef } from '../labware/Labware';
33
import { OutputSlotCopyData, SlotCopyMode, SlotMapperProps } from './slotMapper.types';
44
import LabwareScanner from '../labwareScanner/LabwareScanner';
5-
import { LabwareFlaggedFieldsFragment, SlotFieldsFragment, SlotPassFailFieldsFragment } from '../../types/sdk';
5+
import {
6+
LabwareFlaggedFieldsFragment,
7+
LabwareState,
8+
SlotFieldsFragment,
9+
SlotPassFailFieldsFragment
10+
} from '../../types/sdk';
611
import Heading from '../Heading';
712
import MutedText from '../MutedText';
813
import { useMachine } from '@xstate/react';
@@ -11,7 +16,7 @@ import Table, { TableBody, TableCell, TableHead, TableHeader } from '../Table';
1116
import createSlotMapperMachine from './slotMapper.machine';
1217
import RadioGroup, { RadioButtonInput } from '../forms/RadioGroup';
1318
import { isSlotFilled } from '../../lib/helpers/slotHelper';
14-
import { GridDirection, LabwareDirection } from '../../lib/helpers';
19+
import { GridDirection, LabwareDirection, Position } from '../../lib/helpers';
1520
import RemoveButton from '../buttons/RemoveButton';
1621
import Label from '../forms/Label';
1722
import CustomReactSelect, { OptionType } from '../forms/CustomReactSelect';
@@ -483,6 +488,13 @@ const MultipleLabwareSlotMapper: React.FC<SlotMapperProps> = ({
483488
[send]
484489
);
485490

491+
const isLabwareActive = useCallback(
492+
(labwares: LabwareFlaggedFieldsFragment[], foundLabware: LabwareFlaggedFieldsFragment): string[] => {
493+
return foundLabware.state !== LabwareState.Active ? [`Labware is not active: [ ${foundLabware.barcode}]`] : [];
494+
},
495+
[]
496+
);
497+
486498
/**
487499
* Callback when the copy mode changes
488500
*/
@@ -532,6 +544,7 @@ const MultipleLabwareSlotMapper: React.FC<SlotMapperProps> = ({
532544
enableFlaggedLabwareCheck
533545
checkForCleanedOutAddresses
534546
initialLabwares={inputLabware}
547+
labwareCheckFunction={isLabwareActive}
535548
>
536549
{({ removeLabware, cleanedOutAddresses }) => {
537550
if (inputLabware.length === 0) {
@@ -561,6 +574,7 @@ const MultipleLabwareSlotMapper: React.FC<SlotMapperProps> = ({
561574
current.context.cleanedOutInputAddresses?.get(labware.id) ??
562575
cleanedOutAddresses?.get(labware.id)
563576
}
577+
barcodeInfoPosition={Position.TopRight}
564578
/>
565579
<div>
566580
<RemoveButton
@@ -605,8 +619,7 @@ const MultipleLabwareSlotMapper: React.FC<SlotMapperProps> = ({
605619
options={[
606620
LabwareTypeName.VISIUM_LP_CYTASSIST,
607621
LabwareTypeName.VISIUM_LP_CYTASSIST_XL,
608-
LabwareTypeName.VISIUM_LP_CYTASSIST_HD,
609-
LabwareTypeName.STRIP_TUBE
622+
LabwareTypeName.VISIUM_LP_CYTASSIST_HD
610623
].map((key) => {
611624
return {
612625
label: key,
@@ -644,6 +657,7 @@ const MultipleLabwareSlotMapper: React.FC<SlotMapperProps> = ({
644657
cleanedOutAddresses={output.cleanedOutAddresses}
645658
gridDirection={GridDirection.LeftUp}
646659
labwareDirection={LabwareDirection.Horizontal}
660+
barcodeInfoPosition={Position.Right}
647661
/>
648662
)}
649663
</div>

src/lib/helpers.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,9 @@ export enum Position {
9393
TopRight = 'TopRight',
9494
BottomRight = 'BottomRight',
9595
TopLeft = 'TopLeft',
96-
BottomLeft = 'BottomLeft'
96+
BottomLeft = 'BottomLeft',
97+
Right = 'Right',
98+
Left = 'Left'
9799
}
98100

99101
/**

src/mocks/handlers/slotCopyHandlers.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const savedSlotCopy: SlotCopyLoad = {
1919
operationType: 'CyAssist',
2020
workNumber: 'SGP1',
2121
lpNumber: 'LP1',
22-
labwareType: LabwareTypeName.STRIP_TUBE,
22+
labwareType: LabwareTypeName.VISIUM_LP_CYTASSIST,
2323
preBarcode: 'H1-9D8VN2V',
2424
probeLotNumber: '123456',
2525
lotNumber: '7712543',
@@ -39,7 +39,7 @@ const savedSlotCopy: SlotCopyLoad = {
3939
{
4040
sourceBarcode: 'STAN-3200',
4141
sourceAddress: 'A2',
42-
destinationAddress: 'C1'
42+
destinationAddress: 'D1'
4343
}
4444
]
4545
};

0 commit comments

Comments
 (0)