feat: introduce TecanDeckView component for visualizing labware layout (#315)

Author: simbig

.github/workflows/release.yml

@@ -4,6 +4,7 @@ on:
     branches:
       - master
       - alpha
+      - beta
 
 jobs:
   # https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/ci-configurations/github-actions.md#githubworkflowsreleaseyml-configuration-for-node-projects

src/Plate/constants.ts

@@ -2,3 +2,15 @@ import { FlowDirection } from './types';
 
 /** Used internally when rendering the Plate component. */
 export const PLATE_FLOW = 'row' as const satisfies FlowDirection;
+
+/** Width of the row label column (scales with font size) */
+export const ROW_LABEL_WIDTH = '3ch';
+
+/** Well column width in uniform mode (proportional spacing) */
+export const WELL_COLUMN_WIDTH_UNIFORM = '4fr';
+
+/** Well column width in compact mode (fits content) */
+export const WELL_COLUMN_WIDTH_COMPACT = 'auto';
+
+/** Gap between grid cells */
+export const GRID_GAP = '3px';

src/Plate/coordinateSystem6x4.ts

@@ -0,0 +1,8 @@
+import { CoordinateSystem } from './types';
+
+export const COORDINATE_SYSTEM_6X4 = {
+  rows: ['A', 'B', 'C', 'D'],
+  columns: [1, 2, 3, 4, 5, 6],
+} as const satisfies CoordinateSystem;
+
+export type CoordinateSystem6x4 = typeof COORDINATE_SYSTEM_6X4;

src/Plate/index.stories.tsx

@@ -1,6 +1,6 @@
 import { StoryFn } from '@storybook/react-webpack5';
 import React from 'react';
-import { action } from 'storybook/test';
+import { action } from 'storybook/actions';
 
 import { PALETTE } from '../theme';
 
@@ -18,6 +18,15 @@ export default {
   args: {
     isDraggable: false,
     loading: false,
+    wellSizing: 'uniform',
+  },
+  argTypes: {
+    wellSizing: {
+      control: { type: 'select' },
+      options: ['uniform', 'compact'],
+      description:
+        "Controls well sizing. Row labels always use 3ch. 'uniform' gives equal proportional width (spacious), 'compact' fits content (minimal width).",
+    },
   },
 };
 

src/Plate/index.tsx

@@ -7,7 +7,13 @@ import { MllSpinnerIcon } from '../Spinner';
 import { ColumnLabel } from './ColumnLabel';
 import { RowLabel } from './RowLabel';
 import { Well } from './Well';
-import { PLATE_FLOW } from './constants';
+import {
+  GRID_GAP,
+  PLATE_FLOW,
+  ROW_LABEL_WIDTH,
+  WELL_COLUMN_WIDTH_COMPACT,
+  WELL_COLUMN_WIDTH_UNIFORM,
+} from './constants';
 import { CoordinateSystem, PlateProps } from './types';
 import {
   allCoordinateSystemPositions,
@@ -20,6 +26,7 @@ import {
 export * from './constants';
 export * from './coordinateSystem12x8';
 export * from './coordinateSystem2x16';
+export * from './coordinateSystem6x4';
 export * from './types';
 export * from './utils';
 export { GENERAL_WELL_STYLE } from './wellUtils';
@@ -30,6 +37,7 @@ export function Plate<TCoordinateSystem extends CoordinateSystem>({
   dndContextProps,
   isDraggable,
   loading,
+  wellSizing = 'uniform',
 }: PlateProps<TCoordinateSystem>) {
   if (data) {
     assertUniquePositions(data);
@@ -50,10 +58,14 @@ export function Plate<TCoordinateSystem extends CoordinateSystem>({
         <div
           style={{
             display: 'grid',
-            gridTemplateColumns: `1fr${' 4fr'.repeat(
-              coordinateSystem.columns.length,
-            )}`,
-            gridGap: '3px',
+            gridTemplateColumns: `${ROW_LABEL_WIDTH} repeat(${
+              coordinateSystem.columns.length
+            }, ${
+              wellSizing === 'compact'
+                ? WELL_COLUMN_WIDTH_COMPACT
+                : WELL_COLUMN_WIDTH_UNIFORM
+            })`,
+            gridGap: GRID_GAP,
           }}
         >
           {/* takes up the space in the upper left corner between A and 1 */}

src/Plate/types.ts

@@ -28,4 +28,11 @@ export type PlateProps<TCoordinateSystem extends CoordinateSystem> = {
   isDraggable?: Maybe<boolean>;
   /** Do not add props.dndContextProps conditionally, as it leads to problems. Use props.isDraggable instead. */
   dndContextProps?: Maybe<Props>;
+  /**
+   * Controls the sizing behavior for well columns.
+   * Row label column always uses ROW_LABEL_WIDTH (scales with font size).
+   * - 'uniform': Wells have equal proportional width (spacious layout) - default
+   * - 'compact': Wells fit their content (minimal width)
+   */
+  wellSizing?: 'uniform' | 'compact';
 };

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/EmptyLabware.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { PALETTE } from '../theme';
+
+export function EmptyLabware({ shortLabel }: { shortLabel: string }) {
+  return (
+    <div
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: `1px dashed ${PALETTE.gray3}`,
+        borderRadius: '2px',
+        padding: '8px 4px',
+        backgroundColor: PALETTE.gray1,
+        opacity: 0.7,
+        fontSize: '9px',
+        fontWeight: 500,
+        color: PALETTE.gray6,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {shortLabel}
+    </div>
+  );
+}

src/TecanDeckView/LabwareDetailItem.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import { PALETTE } from '../theme';
+
+/* eslint-disable-next-line @mll-lab/no-color-literals -- Hardware-specific color must match physical label appearance */
+const LABEL_BACKGROUND_COLOR = '#e0e559';
+
+const LABEL_STYLE = {
+  backgroundColor: LABEL_BACKGROUND_COLOR,
+  padding: '2px 6px',
+  fontSize: '11px',
+  fontWeight: 600,
+  color: PALETTE.black,
+  whiteSpace: 'nowrap',
+  alignSelf: 'flex-start',
+} as const;
+
+const CONTAINER_STYLE = {
+  display: 'inline-flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  borderRadius: '4px',
+  padding: '4px',
+} as const;
+
+export function LabwareDetailItem({
+  backgroundColor = PALETTE.white,
+  content,
+  shortLabel,
+}: {
+  shortLabel: string;
+  content: React.ReactElement;
+  backgroundColor?: string;
+}) {
+  return (
+    <div
+      style={{
+        ...CONTAINER_STYLE,
+        backgroundColor,
+        border: `1px solid ${PALETTE.gray4}`,
+        boxShadow: `0 2px 4px ${PALETTE.black}1a`,
+      }}
+    >
+      {content}
+      <div style={LABEL_STYLE}>{shortLabel}</div>
+    </div>
+  );
+}