3D Structure Viewer (GYDE)

WebGL Rendering

High-performance 3D rendering using Molstar's WebGL engine.

Multiple Representations

Cartoon, ball-and-stick, surface, and other molecular representations.

Residue Selection

Click to select residues, synced with sequence views in GYDE.

Custom Coloring

Color by chain, B-factor, custom data values, or mutation analysis.

Structure Prediction

Integration with AlphaFold, ABodyBuilder, and other prediction services.

Step 1: Install Dependencies

Add Molstar and MUI to your project:

npm install molstar @mui/material @emotion/react @emotion/styled

Step 2: Copy Component Files

Copy the structureView directory to your project:

• src/gyde/structureView/StructureHolder.js - Main wrapper
• src/gyde/structureView/molstar.js - Molstar configuration
• src/gyde/structureView/StructureNavBar.js - Controls UI

Step 3: Add Molstar CSS

Import Molstar's styles in your app entry point:

import 'molstar/build/viewer/molstar.css';

Step 4: Load a Structure

Use the StructureHolder component with a PDB ID or file:

import StructureHolder from './gyde/structureView/StructureHolder';

function MyApp() {
  const [selectedResidues, setSelectedResidues] = useState([]);

  return (
    <div style={{ height: '600px' }}>
      <StructureHolder
        pdbId="1IGT"
        // OR load from URL:
        // structureUrl="/structures/my-antibody.pdb"
        selection={selectedResidues}
        onSelect={setSelectedResidues}
        colorScheme="chain"
      />
    </div>
  );
}

Step 5: Custom Coloring

Apply custom colors based on data values:

// Color residues by mutation frequency
const residueColors = {
  'A:42': '#ff0000',  // Chain:ResidueNumber
  'A:56': '#00ff00',
  'B:23': '#0000ff',
};

<StructureHolder
  pdbId="1IGT"
  residueColors={residueColors}
/>

Step 6: Sync with Sequence View

Connect selection events to highlight corresponding residues in your sequence alignment viewer using the onSelect callback.