Labels

Add and customize labels for atoms, residues, and other molecular features.

Features

Multiple Label Types

Support for various label types

Custom Styling

Flexible label appearance

Dynamic Positioning

Smart label placement

Interactive Labels

Click and hover interactions

Configuration

interface LabelConfig {
  type: 'atom' | 'residue' | 'chain' | 'custom';  // Label type
  text: string;                                   // Label text
  target: number | string;                        // Target identifier
  style?: {                                       // Style settings
    color?: string;                               // Text color
    backgroundColor?: string;                     // Background color
    fontSize?: number;                            // Font size
    fontFamily?: string;                          // Font family
    padding?: number;                             // Padding
    borderRadius?: number;                        // Border radius
  };
  position?: {                                    // Position settings
    offset?: [number, number, number];            // Offset from target
    alignment?: 'top' | 'bottom' | 'left' | 'right';
    distance?: number;                            // Distance from target
  };
  interaction?: {                                 // Interaction settings
    hover?: boolean;                              // Enable hover
    click?: boolean;                              // Enable click
    tooltip?: string;                             // Tooltip text
  };
}

Methods

addLabel

Adds a new label

addLabel(config: LabelConfig): Label

updateLabel

Updates label properties

updateLabel(id: string, options: Partial<LabelConfig>): void

removeLabel

Removes a label

removeLabel(id: string): void

clearLabels

Removes all labels

clearLabels(): void

Example

// Add atom label
const label = model.addLabel({
  type: 'atom',
  text: 'CA',
  target: 1,
  style: {
    color: '#ffffff',
    backgroundColor: '#000000',
    fontSize: 14,
    padding: 4,
    borderRadius: 4
  },
  position: {
    offset: [0, 2, 0],
    alignment: 'top',
    distance: 2
  },
  interaction: {
    hover: true,
    tooltip: 'Alpha Carbon'
  }
});

// Update label style
model.updateLabel(label.id, {
  style: {
    color: '#ff0000',
    fontSize: 16
  }
});

// Remove label
model.removeLabel(label.id);

// Clear all labels
model.clearLabels();