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

And either add it to your tailwind config

const colors = require("tailwindcss/colors");
export default {
  darkMode: "class",
  content: [
	...
    "./node_modules/@nitro-bio/platemap/dist/nitro-platemap.es.js",
  ],
  theme: {
	...
    extend: {
	  ...
      colors: {
	    ...
        brand: colors.emerald,
        noir: colors.zinc,
      },
    },
  },
  plugins: [],
};

or import the css file

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