Structure Viewer
@genomics/structure-viewer
3Dmol.js wrapper with a linked confidence strip.
Preview
Loading structure…
pLDDTVery highConfidentLowVery low
Use arrow keys to move along the sequence, Shift plus arrow to jump ten, Home and End for the ends, Enter to select, Space to add to the selection, Escape to clear.About
A 3Dmol.js wrapper: this component owns the lifecycle, a clean source API (PDB id, AlphaFold DB id, or URL), and the bridge to coordinate-link. 3Dmol's zoomTo() frames the structure and viewer.resize() keeps the canvas correct in a CSS-driven box. It loads lazily and only initializes when the viewer scrolls into view, so a page of structures never exhausts the browser's WebGL context pool. AlphaFold/PDB CIFs carry pLDDT in the B-factor column, so the cartoon is colored by confidence out of the box; pass a pLDDT array to also render the linked confidence strip. Hover/click read atom.resi and broadcast it; incoming selection tints the residue and focus zooms to it.
Usage
import { StructureViewer } from "@/components/ui/structure-viewer"
<StructureViewer source={{ afdb: "P0DTD1" }} plddt={plddt} height={360} />Registry dependencies
npm dependencies
3dmol
Source:
components/ui/structure-viewer.tsx