fixes after merge master

mll-lab · Apr 22, 2024 · 60e61ed · 60e61ed
1 parent cd94541
commit 60e61ed
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 52 deletions.
diff --git a/src/Plate/EmptyWell.tsx b/src/Plate/EmptyWell.tsx
@@ -3,17 +3,19 @@ import React from 'react';
 
 import { PALETTE } from '../theme';
 
-import { PLATE_FLOW } from './constants';
-import { columnForPosition, rowForPosition } from './utils';
+import { CoordinateSystem } from './coordinateSystem';
 import { GENERAL_WELL_STYLE } from './wellUtils';
 
-export function EmptyWell(props: { position: number }) {
+export function EmptyWell(props: {
+  position: number;
+  coordinateSystem: CoordinateSystem;
+}) {
   const { setNodeRef, isOver } = useDroppable({
     id: props.position,
     data: {
       coordinates: {
-        row: rowForPosition(props.position, PLATE_FLOW),
-        column: columnForPosition(props.position, PLATE_FLOW),
+        row: props.coordinateSystem.rowForRowFlowPosition(props.position),
+        column: props.coordinateSystem.columnForRowFlowPosition(props.position),
       },
     },
   });
@@ -31,8 +33,8 @@ export function EmptyWell(props: { position: number }) {
       }}
     >
       <small>
-        {rowForPosition(props.position, PLATE_FLOW) +
-          columnForPosition(props.position, PLATE_FLOW)}
+        {props.coordinateSystem.rowForRowFlowPosition(props.position) +
+          props.coordinateSystem.columnForRowFlowPosition(props.position)}
       </small>
     </div>
   );

diff --git a/src/Plate/FilledWell.tsx b/src/Plate/FilledWell.tsx
@@ -4,20 +4,20 @@ import React from 'react';
 
 import { PALETTE } from '../theme';
 
-import { PLATE_FLOW } from './constants';
+import { CoordinateSystem } from './coordinateSystem';
 import { PlateWell } from './types';
-import { columnForPosition, rowForPosition } from './utils';
 import { GENERAL_WELL_STYLE } from './wellUtils';
 
 export function FilledWell(props: {
+  coordinateSystem: CoordinateSystem;
   well: PlateWell;
   position: number;
   isDraggable: boolean;
 }) {
   const data = {
     coordinates: {
-      row: rowForPosition(props.position, PLATE_FLOW),
-      column: columnForPosition(props.position, PLATE_FLOW),
+      row: props.coordinateSystem.rowForRowFlowPosition(props.position),
+      column: props.coordinateSystem.columnForRowFlowPosition(props.position),
     },
   };
 

diff --git a/src/Plate/RowLabel.tsx b/src/Plate/RowLabel.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 
-import { PLATE_FLOW } from './constants';
-import { rowForPosition } from './utils';
+import { CoordinateSystem } from './coordinateSystem';
 
-export function RowLabel(props: { position: number }) {
+export function RowLabel(props: {
+  position: number;
+  coordinateSystem: CoordinateSystem;
+}) {
   return (
     <span
       style={{
@@ -12,7 +14,9 @@ export function RowLabel(props: { position: number }) {
         alignItems: 'center',
       }}
     >
-      <strong>{rowForPosition(props.position, PLATE_FLOW)}</strong>
+      <strong>
+        {props.coordinateSystem.rowForRowFlowPosition(props.position)}
+      </strong>
     </span>
   );
 }
diff --git a/src/Plate/Well.tsx b/src/Plate/Well.tsx
@@ -2,9 +2,11 @@ import React from 'react';
 
 import { EmptyWell } from './EmptyWell';
 import { FilledWell } from './FilledWell';
+import { CoordinateSystem } from './coordinateSystem';
 import { PlateWell } from './types';
 
 export function Well(props: {
+  coordinateSystem: CoordinateSystem;
   position: number;
   well?: PlateWell;
   isDraggable: boolean;
@@ -14,8 +16,12 @@ export function Well(props: {
       well={props.well}
       position={props.position}
       isDraggable={props.isDraggable}
+      coordinateSystem={props.coordinateSystem}
     />
   ) : (
-    <EmptyWell position={props.position} />
+    <EmptyWell
+      position={props.position}
+      coordinateSystem={props.coordinateSystem}
+    />
   );
 }
diff --git a/src/Plate/constants.ts b/src/Plate/constants.ts
@@ -1,6 +1,8 @@
 import { range } from 'lodash';
 
-import { Coordinates, FlowDirection } from './types';
+import { Coordinates } from '../../types';
+
+import { FlowDirection } from './types';
 
 const TUBE_COUNT = 96;
 export const WELLS = range(1, TUBE_COUNT + 1);

diff --git a/src/Plate/coordinate.ts b/src/Plate/coordinate.ts
@@ -51,7 +51,7 @@ export class Coordinate {
       new RegExp(`^(${rowsOptions})(${columnsOptions})`),
     );
 
-    if (matches === null || matches?.length === 0) {
+    if (matches === null || matches.length === 0) {
       const coordinateSystemClass = coordinateSystem.constructor.name;
       throw new Error(
         `Expected a coordinate with rows ${JSON.stringify(
@@ -94,8 +94,6 @@ export class Coordinate {
           coordinateSystem.columnForRowFlowPosition(position),
           coordinateSystem,
         );
-      default:
-        throw new Error(`Unexpected flow direction direction ${direction}`);
     }
   }
 
@@ -111,8 +109,6 @@ export class Coordinate {
         );
       case 'column':
         return columnIndex * this.coordinateSystem.rows().length + rowIndex + 1;
-      default:
-        throw new Error(`Unexpected flow direction direction ${direction}`);
     }
   }
 

diff --git a/src/Plate/index.stories.tsx b/src/Plate/index.stories.tsx
@@ -7,7 +7,6 @@ import { PALETTE } from '../theme';
 import { Coordinate } from './coordinate';
 import { CoordinateSystem12Well } from './coordinateSystem12Well';
 import { CoordinateSystem96Well } from './coordinateSystem96Well';
-import { COORDINATES_COLUMNS, COORDINATES_ROWS, WELLS } from './constants';
 import { PlateProps, PlateWell } from './types';
 
 import { Plate } from './index';
@@ -72,6 +71,7 @@ const columnFlowData: Array<PlateWell> = new CoordinateSystem96Well()
 const Template: Story<Partial<PlateProps>> = function Template(args) {
   return (
     <Plate
+      coordinateSystem={new CoordinateSystem96Well()}
       data={null}
       dndContextProps={{
         onDragEnd: action('onDragEnd'), // dataLocation: `const sourceData = e.active.data.current; const targetData = e.over?.data.current;`
@@ -81,28 +81,27 @@ const Template: Story<Partial<PlateProps>> = function Template(args) {
   );
 };
 
-const Template: Story<Partial<PlateProps>> = (args) => (
-  <Plate
-    coordinateSystem={new CoordinateSystem96Well()}
-    data={null}
-    {...args}
-  />
-);
-
-const Template12Well: Story<Partial<PlateProps>> = (args) => (
-  <Plate
-    coordinateSystem={new CoordinateSystem12Well()}
-    data={null}
-    {...args}
-  />
-);
+const Template12Well: Story<Partial<PlateProps>> = function Template12Well(
+  args,
+) {
+  return (
+    <Plate
+      coordinateSystem={new CoordinateSystem12Well()}
+      data={null}
+      dndContextProps={{
+        onDragEnd: action('onDragEnd'), // dataLocation: `const sourceData = e.active.data.current; const targetData = e.over?.data.current;`
+      }}
+      {...args}
+    />
+  );
+};
 
 export const Default = Template.bind({});
 Default.args = {
   data,
 };
 
-export const RowFlow = Template12Well.bind({});
+export const RowFlow = Template.bind({});
 RowFlow.args = {
   data: rowFlowData,
 };
@@ -111,3 +110,8 @@ export const ColumnFlow = Template.bind({});
 ColumnFlow.args = {
   data: columnFlowData,
 };
+
+export const TewelveWell = Template12Well.bind({});
+TewelveWell.args = {
+  data: null,
+};
diff --git a/src/Plate/index.tsx b/src/Plate/index.tsx
@@ -6,15 +6,10 @@ import { MllSpinnerIcon } from '../Spinner';
 
 import { RowLabel } from './RowLabel';
 import { Well } from './Well';
-import { COORDINATES_COLUMNS, PLATE_FLOW, WELLS } from './constants';
 import { PlateProps } from './types';
-import { CoordinateSystem } from './coordinateSystem';
-import { PlateProps, PlateWell } from './types';
 import {
   assertDataCoordinatesAreInCoordinateSystem,
   assertUniquePositions,
-  columnForPosition,
-  wellAtPosition,
 } from './utils';
 
 export * from './constants';
@@ -66,17 +61,22 @@ export function Plate(props: PlateProps) {
           {props.coordinateSystem.all().map((position) => (
             <Fragment key={position}>
               {props.coordinateSystem.columnForRowFlowPosition(position) ===
-              1 && (
-              <RowLabel
-                row={props.coordinateSystem.rowForRowFlowPosition(position)}
-              />
-            )}
+                1 && (
+                <RowLabel
+                  coordinateSystem={props.coordinateSystem}
+                  position={position}
+                />
+              )}
 
               <Well
+                coordinateSystem={props.coordinateSystem}
                 position={position}
                 well={
                   props.data
-                    ? props.coordinateSystem.wellAtPosition(position, props.data)
+                    ? props.coordinateSystem.wellAtPosition(
+                        position,
+                        props.data,
+                      )
                     : undefined
                 }
                 isDraggable={props.isDraggable ?? false}

diff --git a/src/Plate/utils.test.tsx b/src/Plate/utils.test.tsx
@@ -1,9 +1,14 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
 import { Coordinate } from './coordinate';
 import { CoordinateSystem12Well } from './coordinateSystem12Well';
 import { CoordinateSystem96Well } from './coordinateSystem96Well';
 import { CoordinatesXXXX } from './types';
 import { areEqualCoordinates, ensureCoordinatesInRange } from './utils';
 
+import { Plate } from './index';
+
 const data = [
   {
     rowFlowPosition: 1,
@@ -67,8 +72,8 @@ const data = [
   },
 ];
 
-describe.each(data)(`coordinateForPosition`, (dataSet) => {
-  it(`provides the Coordinate for a position depending on the flow`, () => {
+describe.each(data)('coordinateForPosition', (dataSet) => {
+  it('provides the Coordinate for a position depending on the flow', () => {
     expect(
       Coordinate.fromPosition(
         dataSet.rowFlowPosition,