GMSA - Multiple Sequence Alignment (GYDE)

WebGL Rendering

Hardware-accelerated rendering supports thousands of sequences with smooth scrolling.

Color Schemes

Multiple amino acid coloring schemes including Clustal, hydrophobicity, and custom.

Selection & Navigation

Click to select sequences, drag to pan, with synchronized highlighting.

Column Selection

Select columns for mutation analysis and design.

Heatmap Overlay

Overlay data values like binding affinity or expression levels.

Step 1: Install Dependencies

Add the required packages to your project:

npm install react-resize-detector use-device-pixel-ratio color-name

Step 2: Copy Component Files

Copy the GMSA directory to your project:

• src/gyde/gmsa/MSView.js - Main WebGL viewer
• src/gyde/gmsa/Heatmap.js - Data overlay component
• src/gyde/gmsa/glUtils.js - WebGL utilities
• src/gyde/gmsa/HeatmapUtils.js - Color scale helpers

Step 3: Prepare Alignment Data

Format your multiple sequence alignment as an array of strings:

// Each string is one aligned sequence (same length, gaps as '-')
const sequences = [
  'EVQLVESGGGLVQPGG-SLRLSCAASGFTFS',
  'QVQLVQSGAEVKKPGA-SVKVSCKASGYTFT',
  'EVQLLESGGGLVQPGGSLRLSCAASGFTFS-',
  // ... more sequences
];

// Optional: sequence names/IDs
const sequenceNames = ['Ab001', 'Ab002', 'Ab003'];

// Optional: heatmap data (one value per sequence)
const heatmapValues = [0.95, 0.87, 0.92];

Step 4: Add the Component

Import and render the MSView component:

import MSView from './gyde/gmsa/MSView';

function MyApp() {
  const [selection, setSelection] = useState([]);

  return (
    <div style={{ height: '500px' }}>
      <MSView
        sequences={sequences}
        names={sequenceNames}
        selection={selection}
        onSelect={setSelection}
        colorScheme="clustal"
        showHeatmap={true}
        heatmapValues={heatmapValues}
      />
    </div>
  );
}

Step 5: Configure Color Schemes

Available color schemes: clustal,hydrophobicity,taylor, or custom.