Export Menu
Figure and data out, in the formats the field uses.
Preview
PNG comes off the canvas at its full 2× backing resolution, flattened onto the page background; the data formats are produced lazily.
About
Every plot here is on its way to a paper, a slide, or a collaborator's inbox, and a viewer that can't be exported is a dead end — the user screenshots it at 1× and loses the resolution the canvas was already rendering at. Point it at the element holding your viewer and it finds the canvas or svg inside; supply data producers and it also offers the numbers behind the picture. PNG comes off the backing store at full resolution, flattened onto the resolved page background (a transparent PNG of a dark-theme plot loses every label on a white slide). SVG export inlines computed styles first, which is what stops class-based colors from vanishing the moment the markup leaves the page.
Usage
import { ExportMenu } from "@/components/ui/export-menu"
import { toCsv } from "@/lib/bio-export"
const plot = React.useRef<HTMLDivElement>(null)
<ExportMenu target={plot} filename="volcano" data={{ csv: () => toCsv(rows) }} />components/ui/export-menu.tsx