Merge branch 'tecan-deck-view' into beta

Author: simbig

src/Plate/index.stories.tsx

@@ -1,5 +1,6 @@
 import { StoryFn } from '@storybook/react-webpack5';
 import React from 'react';
+import { action } from 'storybook/actions';
 
 import { PALETTE } from '../theme';
 
@@ -91,10 +92,7 @@ const Template: StoryFn<Partial<PlateProps<CoordinateSystem12x8>>> =
         data={null}
         coordinateSystem={COORDINATE_SYSTEM_12X8}
         dndContextProps={{
-          onDragEnd: () => {
-            // Handle drag end event
-            // Access data via event parameter if needed: const sourceData = e.active.data.current; const targetData = e.over?.data.current;
-          },
+          onDragEnd: action('onDragEnd'), // dataLocation: `const sourceData = e.active.data.current; const targetData = e.over?.data.current;`
         }}
         {...args}
       />

src/Table/index.stories.tsx

@@ -1,6 +1,6 @@
 import { StoryFn } from '@storybook/react-webpack5';
 import React, { useState } from 'react';
-import { action } from 'storybook/test';
+import { action } from 'storybook/actions';
 
 import { THEME } from '../theme';
 

src/TecanDeckView/TecanDeckView.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { Plate } from '../Plate';
 import { PALETTE } from '../theme';
 
 import { EmptyLabware } from './EmptyLabware';
@@ -13,16 +14,17 @@ import {
   LABWARE_METADATA,
 } from './labwareMetadata';
 import {
+  Labware,
   LabwareConfig,
   LabwareKey,
   LabwareWithStyle,
   TecanLabwares,
 } from './types';
 
-// Scaling constants for fit-to-width behavior
 const GRID_PADDING = 8;
 const GRID_GAP = 8;
 const COLUMN_COUNT = 5;
+const ROW_COUNT = 3;
 const GRID_OVERHEAD = GRID_PADDING * 2 + GRID_GAP * (COLUMN_COUNT - 1);
 const COLUMN_OVERHEAD = 60;
 const BASE_CONTENT_WIDTH = 1400;
@@ -51,7 +53,6 @@ const LABWARE_ITEM_BASE_STYLE = {
   justifySelf: 'center',
 } as const;
 
-// Shared style for columns that span all 3 grid rows
 const SPANNING_COLUMN_BASE_STYLE = {
   display: 'grid',
   alignSelf: 'center',
@@ -68,41 +69,20 @@ const RIGHT_COLUMN_STYLE = {
   gridArea: 'rightColumn',
 } as const;
 
-// Helper functions for dynamic grid sizing
-
-/**
- * Calculates dynamic grid-template-columns based on which columns have content.
- * Empty columns get minimal width (40-60px), filled columns get proportional sizes
- * matching physical Tecan deck dimensions (column 1: 0.5fr, columns 2-3: 1fr).
- */
 function calculateGridTemplateColumns(labwares: TecanLabwares): string {
   const filledByColumn = getFilledLabwaresByColumn(labwares);
 
-  const columnSizes = [
-    (filledByColumn[0]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)', // Column 0
-    (filledByColumn[1]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)', // Column 1
-    (filledByColumn[2]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)', // Column 2
-    (filledByColumn[3]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)', // Column 3
-    (filledByColumn[4]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)', // Column 4
-  ];
-
-  return columnSizes.join(' ');
+  return Array.from({ length: COLUMN_COUNT }, (_, i) =>
+    (filledByColumn[i]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)',
+  ).join(' ');
 }
 
-/**
- * Calculates dynamic grid-template-rows based on which rows have content.
- * Empty rows get minimal height (40-60px), filled rows get auto.
- */
 function calculateGridTemplateRows(labwares: TecanLabwares): string {
   const filledByRow = getFilledLabwaresByRow(labwares);
 
-  const rowSizes = [
-    (filledByRow[0]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)', // Row 0
-    (filledByRow[1]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)', // Row 1
-    (filledByRow[2]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)', // Row 2
-  ];
-
-  return rowSizes.join(' ');
+  return Array.from({ length: ROW_COUNT }, (_, i) =>
+    (filledByRow[i]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)',
+  ).join(' ');
 }
 
 export function TecanDeckView({ labwares }: { labwares: TecanLabwares }) {
@@ -164,7 +144,7 @@ export function TecanDeckView({ labwares }: { labwares: TecanLabwares }) {
           const labware: LabwareWithStyle = {
             key,
             ...metadata,
-            content: labwares[key]?.content,
+            labware: labwares[key],
             style: {
               ...LABWARE_ITEM_BASE_STYLE,
               gridArea: key,
@@ -190,15 +170,36 @@ export function TecanDeckView({ labwares }: { labwares: TecanLabwares }) {
       );
     }, [labwares]);
 
-  const renderLabware = (labware: LabwareConfig) =>
-    labware.content ? (
+  const renderLabwareContent = (
+    labware: Labware,
+    coordinateSystem: LabwareConfig['coordinateSystem'],
+  ) => {
+    if (labware.type === 'custom') {
+      return labware.content;
+    }
+
+    return (
+      <Plate
+        coordinateSystem={coordinateSystem}
+        data={labware.data}
+        loading={labware.loading}
+        wellSizing={labware.wellSizing ?? 'compact'}
+      />
+    );
+  };
+
+  const renderLabware = (labwareConfig: LabwareConfig) =>
+    labwareConfig.labware ? (
       <LabwareDetailItem
-        shortLabel={labware.shortLabel}
-        content={labware.content}
-        backgroundColor={labware.color}
+        shortLabel={labwareConfig.shortLabel}
+        content={renderLabwareContent(
+          labwareConfig.labware,
+          labwareConfig.coordinateSystem,
+        )}
+        backgroundColor={labwareConfig.color}
       />
     ) : (
-      <EmptyLabware shortLabel={labware.shortLabel} />
+      <EmptyLabware shortLabel={labwareConfig.shortLabel} />
     );
 
   return (