Color By

The encoding picker, bound to its own scale.

Preview

About

"Colour this by cluster / by expression / by QC status" is a control four viewers already have and every multi-variable viewer wants. Each hand-wired the same three parts: a select holding a mode string, a switch turning it into a scale, and a legend rendered from a second description of the same encoding. That third part is where it goes wrong — the legend is a copy, so it drifts, which is exactly what color-legend exists to prevent one level down. Here a channel is declared once as an accessor plus how to build its scale, and the domain is derived from the data rather than supplied, because a hand-supplied domain is the other thing that drifts when the data changes.

Usage

import { ColorBy, ColorByLegend, useColorBy } from "@/components/ui/color-by"

const color = useColorBy({
  items: cells,
  channels: [
    { id: "cluster", label: "Cluster", kind: "categorical", value: (c) => c.cluster },
    { id: "cd8a", label: "CD8A", kind: "sequential", value: (c) => c.expression },
  ],
})

ctx.fillStyle = color.of(cell)