Data formats

The data every component takes in is a betula schema: JSON shapes for sequences, alignments, trees, gene annotations, distance matrices and BLAST results, shared with picea, acacia, blastserver and iqtreeserver. Their output renders without conversion.

Component	Prop	betula schema
MultipleSequenceAlignment	msa	Alignment: { identifier, sequence } rows
PhyloTree	tree	Tree: nested { id?, name, length, children }
DistanceMatrix	labels, matrix, labelNames	DistanceMatrix: spread it, <DistanceMatrix {...matrix} />
GeneModel	gene	Annotation: a GFF3 feature tree
GenomeBrowser	genemodel track data	Annotation
BlastHitDistribution	hits	BlastResult, through blastHitsFromResult

The types are exported from react-bio-viz (Tree, Sequence, Annotation, BlastResult, …), so there is nothing else to install. Two shapes need a small step:

• A betula Alignment is either a bare array of sequences or { type: "alignment", sequences }; alignmentSequences(alignment) returns the rows either way.
• BlastHitDistribution draws one bar per HSP, so blastHitsFromResult(result) flattens a BlastResult’s hits and their HSPs into rows. Pass result.queryLen as queryLength.

import { BlastHitDistribution, blastHitsFromResult } from "react-bio-viz";

<BlastHitDistribution hits={blastHitsFromResult(result)} queryLength={result.queryLen} />;

react-bio-viz adds one optional field: an alignment row’s id, its stable identity when identifiers repeat or rows get renamed (see Editing).

Validating input

The components trust their input and don’t validate it. For JSON from outside your app, validate it with betula-schema, which rejects exactly what the schema rejects:

import { parse } from "betula-schema";

const tree = parse("Tree", await response.json()); // throws BetulaValidationError if invalid