Platemap

⚠️ This component is made available under the GNU General Public License ⚠️

If you would like to use this component in a proprietary application, we're happy to license it to you. Contact us for options.

Example: 24 Well Plate

Example: 48 Well Plate

Example: 96 Well Plate

Example: 384 Well Plate

Code: 96 Well Plate

import {
  Annotation,
  AriadneSelection,
  CircularViewer,
} from "@nitro-bio/sequence-viewers";

export const NinetySixWell = () => {
  const {
    plateState: {
      plateSize,
      wellAnnotations,
      activeWellAnnotation,
      selection,
      excludedWells,
    },
    plateActions: {
      setSelectionWithExcluded,
      setActiveWellAnnotation,
      setExcludedWells,
      setWellAnnotations,
    },
  } = usePlateReducer<AnnotationMeta>({
    initialPlateSize: 96,
  });
  return (
    <Plate
      className="mr-2 pb-8"
      plateSize={plateSize}
      excludedWells={excludedWells}
      selection={selection}
      setSelection={setSelectionWithExcluded}
      wellAnnotations={wellAnnotations}
      setWellAnnotations={setWellAnnotations}
      activeWellAnnotation={activeWellAnnotation}
      setActiveWellAnnotation={setActiveWellAnnotation}
    />
  );
};

Installation

This component requires the @nitro-bio/platemap package. Install it via:

npm i @nitro-bio/platemap@latest

Then customize the platemap colors using CSS variables in your global CSS:

@source '../../node_modules/@nitro-bio/platemap/dist/nitro-platemap.es.js';

@theme {
  --color-plate-background: var(--color-zinc-800);
  --color-plate-foreground: var(--color-zinc-100);

  --color-well-background: var(--color-zinc-800);
  --color-well-foreground: var(--color-zinc-100);

  --color-well-selected: var(--color-emerald-900);
  --color-well-excluded: var(--color-zinc-700);

  --color-header-border: var(--color-zinc-800);
  --color-header-text: var(--color-zinc-800);

  --color-header-hover-bg: var(--color-emerald-200);
  --color-header-hover-text: var(--color-zinc-800);

  --color-selection-box: var(--color-emerald-500);
  --color-selection-border: var(--color-emerald-200);
}

.selecto-selection {
  background: var(--color-selection-box) !important;
  border: 2px solid var(--color-selection-border) !important;
  opacity: 0.5 !important;
}

Alternatively, import the CSS file directly:

import "path/to/node_modules/@nitro-bio/platemap/dist/nitro-platemap.css";