BlastHitDistribution

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

<BlastHitDistribution hits={hits} queryLength={2000} width={900} />;

Each hit is { id, subjectId, queryStart, queryEnd, evalue, bitScore, percentIdentity }. Hits are stacked so none overlap and coloured by the chosen metric; click hits to select them. blastHitsFromResult turns a betula BlastResult (blastserver’s output) into these rows, one per HSP:

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

viewport (along the query), selection ({ selectedHitIds }) and metric are controllable.

SimpleBlastHitDistribution

The same view without the toolbar or the metric selector, and fully controlled — for building your own navigation around it. It keeps no state: every interaction reports through its on*Change callback and shows once you pass the value back (see Simple components).

const [viewport, setViewport] = useState<Viewport>();

<SimpleBlastHitDistribution hits={hits} queryLength={length} metric="bitScore" viewport={viewport} onViewportChange={setViewport} />

All props → · SimpleBlastHitDistribution props →