chore: clean up Plate component

Author: spawnia

src/Plate/ColumnLabel.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export function ColumnLabel({ column }: { column: number }) {
+  return (
+    <span
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        padding: 4,
+      }}
+    >
+      <strong>{column}</strong>
+    </span>
+  );
+}

src/Plate/EmptyWell.tsx

@@ -8,23 +8,18 @@ import { CoordinateSystem } from './types';
 import { columnForPosition, rowForPosition } from './utils';
 import { GENERAL_WELL_STYLE } from './wellUtils';
 
-export function EmptyWell<TCoordinateSystem extends CoordinateSystem>(props: {
+export function EmptyWell<TCoordinateSystem extends CoordinateSystem>({
+  coordinateSystem,
+  position,
+}: {
   position: number;
   coordinateSystem: TCoordinateSystem;
 }) {
-  const row = rowForPosition(
-    props.position,
-    PLATE_FLOW,
-    props.coordinateSystem,
-  );
-  const column = columnForPosition(
-    props.position,
-    PLATE_FLOW,
-    props.coordinateSystem,
-  );
+  const row = rowForPosition(position, PLATE_FLOW, coordinateSystem);
+  const column = columnForPosition(position, PLATE_FLOW, coordinateSystem);
 
   const { setNodeRef, isOver } = useDroppable({
-    id: props.position,
+    id: position,
     data: {
       coordinates: {
         row,

src/Plate/FilledWell.tsx

@@ -9,27 +9,28 @@ import { CoordinateSystem, PlateWell } from './types';
 import { columnForPosition, rowForPosition } from './utils';
 import { GENERAL_WELL_STYLE } from './wellUtils';
 
-export function FilledWell<TCoordinateSystem extends CoordinateSystem>(props: {
+export function FilledWell<TCoordinateSystem extends CoordinateSystem>({
+  isDraggable,
+  well,
+  coordinateSystem,
+  position,
+}: {
   well: PlateWell<TCoordinateSystem>;
   coordinateSystem: TCoordinateSystem;
   position: number;
   isDraggable: boolean;
 }) {
   const data = {
     coordinates: {
-      row: rowForPosition(props.position, PLATE_FLOW, props.coordinateSystem),
-      column: columnForPosition(
-        props.position,
-        PLATE_FLOW,
-        props.coordinateSystem,
-      ),
+      row: rowForPosition(position, PLATE_FLOW, coordinateSystem),
+      column: columnForPosition(position, PLATE_FLOW, coordinateSystem),
     },
   };
 
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
-    id: props.position,
+    id: position,
     data,
-    disabled: !props.isDraggable,
+    disabled: !isDraggable,
   });
 
   return (
@@ -40,10 +41,10 @@ export function FilledWell<TCoordinateSystem extends CoordinateSystem>(props: {
       style={{
         ...GENERAL_WELL_STYLE,
         transform: CSS.Translate.toString(transform),
-        backgroundColor: props.well.color ?? PALETTE.gray3,
+        backgroundColor: well.color ?? PALETTE.gray3,
       }}
     >
-      {props.well.content}
+      {well.content}
     </div>
   );
 }

src/Plate/RowLabel.tsx

@@ -1,13 +1,6 @@
 import React from 'react';
 
-import { PLATE_FLOW } from './constants';
-import { CoordinateSystem } from './types';
-import { rowForPosition } from './utils';
-
-export function RowLabel(props: {
-  position: number;
-  coordinateSystem: CoordinateSystem;
-}) {
+export function RowLabel({ row }: { row: string }) {
   return (
     <span
       style={{
@@ -16,9 +9,7 @@ export function RowLabel(props: {
         alignItems: 'center',
       }}
     >
-      <strong>
-        {rowForPosition(props.position, PLATE_FLOW, props.coordinateSystem)}
-      </strong>
+      <strong>{row}</strong>
     </span>
   );
 }

src/Plate/Well.tsx

@@ -5,23 +5,25 @@ import { EmptyWell } from './EmptyWell';
 import { FilledWell } from './FilledWell';
 import { CoordinateSystem, PlateWell } from './types';
 
-export function Well<TCoordinateSystem extends CoordinateSystem>(props: {
+export function Well<TCoordinateSystem extends CoordinateSystem>({
+  coordinateSystem,
+  isDraggable,
+  position,
+  well,
+}: {
   position: number;
   well: Maybe<PlateWell<TCoordinateSystem>>;
   coordinateSystem: TCoordinateSystem;
   isDraggable: boolean;
 }) {
-  return props.well?.content ? (
+  return well?.content ? (
     <FilledWell
-      well={props.well}
-      coordinateSystem={props.coordinateSystem}
-      position={props.position}
-      isDraggable={props.isDraggable}
+      well={well}
+      coordinateSystem={coordinateSystem}
+      position={position}
+      isDraggable={isDraggable}
     />
   ) : (
-    <EmptyWell
-      position={props.position}
-      coordinateSystem={props.coordinateSystem}
-    />
+    <EmptyWell position={position} coordinateSystem={coordinateSystem} />
   );
 }

src/Plate/index.tsx

@@ -4,6 +4,7 @@ import React, { Fragment } from 'react';
 
 import { MllSpinnerIcon } from '../Spinner';
 
+import { ColumnLabel } from './ColumnLabel';
 import { RowLabel } from './RowLabel';
 import { Well } from './Well';
 import { PLATE_FLOW } from './constants';
@@ -12,6 +13,7 @@ import {
   allCoordinateSystemPositions,
   assertUniquePositions,
   columnForPosition,
+  rowForPosition,
   wellAtPosition,
 } from './utils';
 
@@ -22,17 +24,21 @@ export * from './types';
 export * from './utils';
 export { GENERAL_WELL_STYLE } from './wellUtils';
 
-export function Plate<TCoordinateSystem extends CoordinateSystem>(
-  props: PlateProps<TCoordinateSystem>,
-) {
-  if (props.data) {
-    assertUniquePositions(props.data);
+export function Plate<TCoordinateSystem extends CoordinateSystem>({
+  coordinateSystem,
+  data,
+  dndContextProps,
+  isDraggable,
+  loading,
+}: PlateProps<TCoordinateSystem>) {
+  if (data) {
+    assertUniquePositions(data);
   }
 
   return (
-    <DndContext {...props.dndContextProps}>
+    <DndContext {...dndContextProps}>
       <Spin
-        spinning={props.loading ?? false}
+        spinning={loading ?? false}
         indicator={
           <MllSpinnerIcon
             style={{
@@ -44,59 +50,45 @@ export function Plate<TCoordinateSystem extends CoordinateSystem>(
         <div
           style={{
             display: 'grid',
-            gridTemplateColumns: `1fr ${'4fr '.repeat(
-              props.coordinateSystem.columns.length,
+            gridTemplateColumns: `1fr${' 4fr'.repeat(
+              coordinateSystem.columns.length,
             )}`,
             gridGap: '3px',
           }}
         >
+          {/* takes up the space in the upper left corner between A and 1 */}
           <span />
 
-          {props.coordinateSystem.columns.map((column) => (
-            <span
-              style={{
-                display: 'flex',
-                justifyContent: 'center',
-                padding: 4,
-              }}
-              key={column}
-            >
-              <strong>{column}</strong>
-            </span>
+          {coordinateSystem.columns.map((column) => (
+            <ColumnLabel key={column} column={column} />
           ))}
 
-          {allCoordinateSystemPositions(props.coordinateSystem).map(
-            (position) => (
-              <Fragment key={position}>
-                {columnForPosition(
-                  position,
-                  PLATE_FLOW,
-                  props.coordinateSystem,
-                ) === 1 && (
-                  <RowLabel
-                    position={position}
-                    coordinateSystem={props.coordinateSystem}
-                  />
-                )}
-
-                <Well
-                  position={position}
-                  coordinateSystem={props.coordinateSystem}
-                  well={
-                    props.data
-                      ? wellAtPosition(
-                          position,
-                          props.data,
-                          PLATE_FLOW,
-                          props.coordinateSystem,
-                        )
-                      : null
-                  }
-                  isDraggable={props.isDraggable ?? false}
+          {allCoordinateSystemPositions(coordinateSystem).map((position) => (
+            <Fragment key={position}>
+              {columnForPosition(position, PLATE_FLOW, coordinateSystem) ===
+                1 && (
+                <RowLabel
+                  row={rowForPosition(position, PLATE_FLOW, coordinateSystem)}
                 />
-              </Fragment>
-            ),
-          )}
+              )}
+
+              <Well
+                position={position}
+                coordinateSystem={coordinateSystem}
+                well={
+                  data
+                    ? wellAtPosition(
+                        position,
+                        data,
+                        PLATE_FLOW,
+                        coordinateSystem,
+                      )
+                    : null
+                }
+                isDraggable={isDraggable ?? false}
+              />
+            </Fragment>
+          ))}
         </div>
       </Spin>
     </DndContext>