Structure Surface

The 3Dmol lifecycle, owned once.

Preview

About

Three viewers each implement the same seven steps: lazy-import the module, wait until the host is on screen, create a viewer, fetch and add a model, wire hover and click to the substrate, follow the container's size, and tear it all down. Three copies is few enough to shrug at until you notice every step is a resource-lifetime question — a browser allows around sixteen live WebGL contexts, and a page of structure panels that remount on tab switches finds that limit. The parts that matter are the ones easiest to omit from the third copy: creating the context only when in view, aborting the fetch so a fast source switch can't resolve out of order, and disposing inside a try because 3Dmol throws when the context is already lost.

Usage

import { StructureSurface, useStructureSurface } from "@/components/ui/structure-surface"

const surface = useStructureSurface({
  sources: [{ afdb: "P04637" }],
  height: 380,
  applyStyle: ({ viewer, selectedRanges }) => {
    viewer.setStyle({}, { cartoon: { colorfunc: plddtColor } })
    if (selectedRanges.length) {
      viewer.setStyle({ resi: selectedRanges }, { cartoon: { color: "#16a34a" } })
    }
  },
})

<StructureSurface surface={surface} label="AlphaFold model of P53" />