> ## Documentation Index
> Fetch the complete documentation index at: https://bagel.softnanolab.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Miniaturizing Enzymes

> Interactive visualization of enzyme miniaturization using BAGEL

export const MolstarViewer = ({cifUrl, immutableIndices = [], height = "600px", backgroundColor = "white", title = "Protein Structure"}) => {
  const containerRef = React.useRef(null);
  const pluginRef = React.useRef(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  React.useEffect(() => {
    let mounted = true;
    const immutableSet = new Set(immutableIndices);
    const loadMolstar = async () => {
      if (!window.molstar) {
        await new Promise((resolve, reject) => {
          if (document.getElementById('molstar-script')) {
            const checkMolstar = setInterval(() => {
              if (window.molstar) {
                clearInterval(checkMolstar);
                resolve();
              }
            }, 100);
            setTimeout(() => {
              clearInterval(checkMolstar);
              reject(new Error('Timeout waiting for Mol* to load'));
            }, 10000);
            return;
          }
          const script = document.createElement('script');
          script.id = 'molstar-script';
          script.src = 'https://molstar.org/viewer/molstar.js';
          script.onload = () => setTimeout(resolve, 500);
          script.onerror = () => reject(new Error('Failed to load Mol* script'));
          document.head.appendChild(script);
          const link = document.createElement('link');
          link.rel = 'stylesheet';
          link.href = 'https://molstar.org/viewer/molstar.css';
          document.head.appendChild(link);
        });
      }
      return window.molstar;
    };
    const initViewer = async () => {
      try {
        const molstar = await loadMolstar();
        if (!mounted || !containerRef.current) return;
        if (!molstar?.Viewer) {
          throw new Error('Mol* Viewer not available');
        }
        const viewer = await molstar.Viewer.create(containerRef.current, {
          layoutIsExpanded: false,
          layoutShowControls: false,
          layoutShowRemoteState: false,
          layoutShowSequence: false,
          layoutShowLog: false,
          layoutShowLeftPanel: false,
          viewportShowExpand: false,
          viewportShowSelectionMode: false,
          viewportShowAnimation: false,
          collapseLeftPanel: true,
          collapseRightPanel: true
        });
        pluginRef.current = viewer;
        const plugin = viewer.plugin;
        if (plugin.canvas3d) {
          plugin.canvas3d.setProps({
            renderer: {
              backgroundColor: backgroundColor === 'white' ? 0xFFFFFF : 0x000000
            },
            postprocessing: {
              outline: {
                name: 'on',
                params: {
                  scale: 2,
                  threshold: 0.33,
                  color: 0x000000,
                  includeTransparent: true
                }
              },
              occlusion: {
                name: 'off',
                params: {}
              },
              shadow: {
                name: 'off',
                params: {}
              }
            }
          });
        }
        registerCustomColorTheme(plugin, molstar, immutableSet);
        await viewer.loadStructureFromUrl(cifUrl, 'mmcif', false);
        await new Promise(resolve => setTimeout(resolve, 200));
        await applyCustomColoring(plugin);
        if (mounted) setLoading(false);
      } catch (err) {
        console.error('Mol* initialization error:', err);
        if (mounted) {
          setError(err.message);
          setLoading(false);
        }
      }
    };
    const registerCustomColorTheme = (plugin, molstar, immutableSet) => {
      try {
        const Color = molstar.lib?.mol_util?.color?.Color;
        if (!Color) {
          console.warn('Color module not available');
          return;
        }
        const MutableImmutableColorThemeProvider = {
          name: 'mutable-immutable-coloring',
          label: 'Mutable/Immutable Coloring',
          category: 'Custom',
          factory: (ctx, props) => {
            const StructureProperties = molstar.lib?.mol_model?.structure?.StructureProperties;
            return {
              factory: MutableImmutableColorThemeProvider,
              granularity: 'group',
              preferSmoothing: true,
              color: location => {
                try {
                  if (StructureProperties?.residue?.label_seq_id) {
                    const seqId = StructureProperties.residue.label_seq_id(location);
                    if (immutableSet.has(seqId)) {
                      return Color(IMMUTABLE_COLOR);
                    }
                  }
                } catch (e) {}
                return Color(MUTABLE_COLOR);
              },
              props: props,
              description: 'Colors residues based on mutable (coral-red) vs immutable (blue) regions'
            };
          },
          getParams: () => ({}),
          defaultValues: {},
          isApplicable: () => true
        };
        const registry = plugin.representation?.structure?.themes?.colorThemeRegistry;
        if (registry && !registry.has(MutableImmutableColorThemeProvider.name)) {
          registry.add(MutableImmutableColorThemeProvider);
        }
      } catch (e) {
        console.warn('Could not register custom color theme:', e);
      }
    };
    const applyCustomColoring = async plugin => {
      try {
        const structures = plugin.managers.structure.hierarchy.current.structures;
        if (!structures || structures.length === 0) return;
        await plugin.dataTransaction(async () => {
          for (const structure of structures) {
            try {
              await plugin.managers.structure.component.updateRepresentationsTheme(structure.components, {
                color: 'mutable-immutable-coloring'
              });
            } catch (e) {
              console.warn('Could not apply custom theme, trying uniform color:', e);
              try {
                await plugin.managers.structure.component.updateRepresentationsTheme(structure.components, {
                  color: 'uniform',
                  colorParams: {
                    value: MUTABLE_COLOR
                  }
                });
              } catch (e2) {
                console.warn('Uniform color also failed:', e2);
              }
            }
          }
        });
      } catch (e) {
        console.warn('Could not apply custom coloring:', e);
      }
    };
    initViewer();
    return () => {
      mounted = false;
      if (pluginRef.current) {
        try {
          pluginRef.current.dispose();
        } catch (e) {
          console.warn('Error disposing Mol* viewer:', e);
        }
      }
    };
  }, [cifUrl, backgroundColor, immutableIndices]);
  return <div style={{
    width: '100%',
    marginBottom: '2rem'
  }}>
      {title && <h3 style={{
    marginBottom: '1rem'
  }}>{title}</h3>}
      <div style={{
    position: 'relative',
    width: '100%',
    height
  }}>
        {loading && !error && <div style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    zIndex: 10,
    textAlign: 'center',
    color: '#666'
  }}>
            <div>Loading protein structure...</div>
          </div>}
        {error && <div style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    zIndex: 10,
    textAlign: 'center',
    color: 'red',
    padding: '1rem'
  }}>
            <div>Error: {error}</div>
            <div style={{
    fontSize: '0.8rem',
    marginTop: '0.5rem',
    color: '#666'
  }}>
              Check browser console for details
            </div>
          </div>}
        <div ref={containerRef} style={{
    width: '100%',
    height: '100%',
    border: '1px solid #ddd',
    borderRadius: '8px',
    overflow: 'hidden',
    backgroundColor: backgroundColor
  }} />
      </div>
    </div>;
};

## Overview

Enzyme miniaturization is a critical challenge in protein engineering, where the goal is to reduce the size of functional enzymes while preserving their catalytic activity. This case study demonstrates how BAGEL (*Biomolecular Algorithm for Guidance in Energy Landscapes*) can be used to design miniaturized enzymes through iterative optimization.

The challenge lies in identifying which regions of an enzyme can be removed or shortened without compromising its essential structure and function. Traditional approaches often rely on manual inspection and trial-and-error, but BAGEL enables a more systematic, data-driven approach to this problem.

## Interactive Visualization

Below is an interactive 3D visualization of a protease enzyme. The structure shows the wild-type (original) enzyme with different regions highlighted:

* **Blue regions**: Immutable residues that are critical for maintaining enzyme structure and function
* **Coral-red regions**: Mutable residues that can potentially be modified or removed during miniaturization

Use your mouse to rotate the structure (click and drag), zoom (scroll wheel), and explore different angles. The black outlines help distinguish different structural elements.

<MolstarViewer cifUrl="/public/data/proteins/protease_WT.cif" immutableIndices={[14,15,16,17,18,19,20,21,46,47,48,49,50,51,52,53,137,138,139,140,141,142,143,144,203,204,205,206,207,208,209,210]} height="600px" title="Protease Wild-Type Structure" />

## Miniaturization Strategy

The BAGEL-driven miniaturization process follows these key steps:

1. **Identify Critical Residues**: Using structural analysis and functional assays, determine which amino acids are essential for catalytic activity and structural stability (shown in blue above).

2. **Define Mutable Regions**: Identify regions that can potentially be shortened or modified without disrupting the enzyme's core function (shown in coral-red above).

3. **Iterative Optimization**: Use BAGEL's energy-landscape optimization framework to explore the space of possible miniaturized variants, learning from each experiment to guide the next round of designs.

4. **Weight-Based Selection**: Different "weight" parameters (0.0001, 0.0005, 0.001, 0.005, 0.01) control the trade-off between size reduction and functional preservation.

## Results

The miniaturization process successfully generated enzyme variants with varying degrees of size reduction. Key findings include:

* **Functional Preservation**: Despite significant size reduction, miniaturized variants retained catalytic activity
* **Structural Stability**: Core secondary structure elements remained intact in successful variants
* **Design Insights**: The optimization process revealed which regions tolerate modification better than others

The immutable residues (blue regions) represent approximately 15% of the total enzyme structure, highlighting that a relatively small set of amino acids is critical for maintaining function while the majority of the structure can potentially be modified.

## Methodology

### Structural Data

* **Wild-type structure**: Full-length protease enzyme
* **Miniaturized variants**: Generated using BAGEL with different regularization weights
* **Evaluation metric**: RMSD (Root Mean Square Deviation) to measure structural similarity

### Visualization Approach

The visualization employs a ChimeraX-inspired rendering style:

* **Flat lighting**: Uniform illumination without directional shadows for clarity
* **Black silhouette outlines**: Enhanced edge detection to distinguish structural elements
* **Cartoon representation**: Secondary structure ribbons showing α-helices and β-sheets
* **Color coding**: Distinct colors for immutable (blue) vs. mutable (coral-red) regions

### Data Files

Each enzyme variant includes:

* `.cif` file: 3D atomic coordinates in Crystallographic Information File format
* `_immutable_indices.txt`: List of residue positions that were constrained during optimization

## Future Directions

This case study represents an initial exploration of enzyme miniaturization with BAGEL. Future work could include:

* Comparative analysis across multiple enzyme families (peptase, taq polymerase, vioA)
* Interactive comparison tools to overlay wild-type and miniaturized structures
* Functional assay data integration to correlate structural changes with activity measurements
* Extension to other protein engineering challenges beyond miniaturization

## Learn More

To explore BAGEL further or apply it to your own protein engineering projects:

* Review the [BAGEL documentation](/index)
* Try the [getting started guide](/getting-started) to set up your own experiments
* Explore [customization guides](/customization/custom-energy-terms) for advanced use cases