Advanced Features

NoteWork in Progress

This page is a placeholder. Advanced feature documentation will be added.

Overview

This page will cover advanced MolViewSpec features for complex molecular visualization scenarios.

Planned Content

Structural Superposition

Overview - What is superposition? - Use cases for structural alignment - Transformation matrices

Implementation

// Example will be expanded from core-features.qmd
// First structure (reference)
builder.download({ url: 'structure1.cif' })
  .parse({ format: 'mmcif' })
  .modelStructure({})
  .component({})
  .representation({})
  .color({ color: 'red' });

// Second structure with transformation
builder.download({ url: 'structure2.cif' })
  .parse({ format: 'mmcif' })
  .modelStructure({})
  .transform({
    rotation: [...],
    translation: [...]
  })
  .component({})
  .representation({})
  .color({ color: 'blue' });

Obtaining Transformation Matrices - Using PyMOL - Using Mol* - Using other structural biology tools - Manual calculation

Volume Data & Electron Density

Loading Density Maps

// X-ray electron density
builder.download({ url: 'density-map-url' })
  .parse({ format: 'bcif' })
  .volume({ channel_id: '2FO-FC' })
  .representation({ type: 'isosurface', relative_isovalue: 1.5 })
  .color({ color: 'blue' })
  .opacity({ opacity: 0.3 });

Volume Types - 2FO-FC maps (observed density) - FO-FC maps (difference density) - Cryo-EM maps - Segmentation maps

Visualization Options - Isosurface rendering - Volume rendering (if supported) - Multiple contour levels - Opacity control - Color mapping

Sources for Maps - PDBe density server - EMDB for cryo-EM - Custom map files - Calculated maps

Geometric Primitives

Available Primitives - Arrows - Directional indicators - Spheres - Point markers - Ellipses - Region markers - Lines - Connections - Text labels

Arrow Example

builder.primitives({ opacity: 0.8 })
  .arrow({
    start: [0, 0, 0],
    end: [5, 5, 5],
    radius: 0.2,
    color: 'yellow',
    tooltip: 'Direction of motion'
  });

Ellipse Example

builder.primitives()
  .ellipse({
    center: [10, 10, 10],
    major_axis: [2, 0, 0],
    minor_axis: [0, 2, 0],
    color: 'red',
    opacity: 0.5,
    tooltip: 'Important region'
  });

Use Cases - Indicating motion or direction - Highlighting regions of interest - Showing distances or measurements - Adding custom annotations - Creating diagrams

Advanced Camera Control

Manual Camera Positioning

builder.camera({
  position: [50, 50, 50],
  target: [0, 0, 0],
  up: [0, 1, 0]
});

Camera Parameters - position - Camera location [x, y, z] - target - Point camera looks at [x, y, z] - up - Up direction [x, y, z] - fov - Field of view (degrees)

Camera Snapshots - Saving camera state - Restoring views - Smooth transitions between views

Camera Animations - Path-based animations - Interpolation between positions - Timing and easing

Multiple Structures

Loading Multiple Structures

// First structure
const struct1 = builder
  .download({ url: 'structure1.cif' })
  .parse({ format: 'mmcif' })
  .modelStructure({});

// Second structure
const struct2 = builder
  .download({ url: 'structure2.cif' })
  .parse({ format: 'mmcif' })
  .modelStructure({});

// Different representations for each
struct1.component({}).representation({}).color({ color: 'blue' });
struct2.component({}).representation({}).color({ color: 'red' });

Use Cases - Comparing structures - Showing conformational changes - Protein-protein complexes - Ligand comparison

Custom Selections

Complex Selection Logic

// Select specific residues
structure.component({
  selector: {
    label_asym_id: 'A',
    label_seq_id: [50, 75, 100, 125]
  }
});

// Select by property
structure.component({
  selector: 'not water'
});

Selection Operators - AND logic (multiple properties) - OR logic (arrays of values) - NOT logic (negation) - Combining multiple selectors

Performance Optimization

Large Structures - Level of detail (LOD) strategies - Simplified representations for overview - Progressive loading (if supported) - Culling and visibility

Complex Scenes - Limiting representation count - Using appropriate representation types - Balancing quality and performance - Browser and hardware considerations

Best Practices - Start simple, add complexity - Test on target hardware - Use cartoons for large proteins - Limit surface rendering - Consider file sizes

Custom Styling

Advanced Color Schemes - Custom color gradients - Property-based coloring - Rainbow schemes - Temperature factor coloring

Representation Customization - Custom sizes and radii - Quality settings - Material properties - Transparency and blending

Integration Patterns

Reusable Code

// Define reusable functions
function loadProtein(pdbId) {
  return builder
    .download({ url: `https://www.ebi.ac.uk/pdbe/entry-files/download/${pdbId}_updated.cif` })
    .parse({ format: 'mmcif' })
    .modelStructure({});
}

// Use the function
const protein = loadProtein('1cbs');

Story-Level JavaScript - Shared functions across scenes - Constants and configuration - Helper utilities

Troubleshooting Advanced Features

Common Issues - Transformation matrices not working - Density maps not loading - Primitives not visible - Performance problems

Debugging Techniques - Console logging - Step-by-step building - Simplifying complex scenes - Checking data sources

Examples

Complex Multi-Structure Scene

// Full example will be added

Density Map with Protein

// Full example will be added

Animated Camera Path

// Full example will be added

See Also