Use Exportable

A viewer declares what it exports; the frame renders it.

Preview

About

Every serializer already existed in bio-export and the UI already existed in export-menu. What was missing was the wiring: exporting meant the consumer holding a ref to the viewer's DOM, knowing which internals to serialize, and passing both back in — so exactly one component in the registry was actually exportable. Registration inverts that. It also fixes a bug a DOM query can't: use-canvas-layers splits a figure across stacked canvases, so querySelector('canvas') returns the bottom layer alone and a Manhattan plot would export its cloud with the significance line and every highlight missing — plausible enough that nobody would notice. Registered sources composite the layers.

Usage

import { useExportable } from "@/components/ui/use-exportable"

useExportable({
  filename: `manhattan-${study}`,
  canvases: () => [base.current, marks.current],
  data: { tsv: () => toTsv(rows) },
})