Plate Selection Improvements

[ninjha01]

Plate Selection improvements

Right now our plate component takes the following props

const PlateSelectionSchema = z.object({
  wells: z.array(z.number()),
  className: z.string().optional(),
});
export type PlateSelection = z.infer<typeof PlateSelectionSchema>;

export const Plate = ({
  wells,
  className,
  selection,
  setSelection,
  selectionTolerance = 20,
}: {
  wells: 24 | 96 | 48 | 384;
  selection: PlateSelection | null;
  setSelection: (selection: PlateSelection | null) => void;
  className?: string;
  selectionTolerance?: number;
}) => {

We want to support multiple selections. so we need to change the selection prop to be a map of PlateSelection objects.

export const Plate = ({
  ...
  selections,
   updateSelection,
  ...
}: {
    ...
  selections: Record<string, PlateSelection>;
  updateSelection: (selectionId: string, selection: PlateSelection) => void;
    ...

}) => {

This will allow us to have multiple selections on the plate. We can also add a selectionId prop to the PlateSelection object to identify the selection for convenience.

const PlateSelectionSchema = z.object({
  wells: z.array(z.number()),
  className: z.string().optional(),
  selectionId: z.string(),
});

We will need to update the rendering logic to support multiple selections. We can use the selectionId to identify the selection. We will need a dropdown to change the current selection. Finally, we will need to update the PlateSelection component to correctly update the selection.

After opening a PR, create a new story in the Plate.stories.tsx file to demonstrate the new functionality. Then, add the new functionality to the Plate component.