Interactive Protein Sequence Alignment Visualization Tool, available at algbio.github.io/emerald-ui
Emerald UI provides advanced visualization of optimal and suboptimal protein sequence alignments, enabling researchers to explore conserved / robust regions between these alignments. These conserved regions are the alignment-safe windows introduced by the EMERALD algorithm.
EMERALD goes beyond traditional pairwise sequence alignment by identifying not just the optimal alignment, but also suboptimal alignments and regions (safety windows) where alignments are consistently reliable across different scoring schemes. This has been described in Andreas Grigorjew, Artur Gynter, Fernando H.C. Dias, Benjamin Buchfink, Hajk-Georg Drost, Alexandru I. Tomescu, Sensitive inference of alignment-safe intervals from biodiverse protein sequence clusters using EMERALD, Genome Biology 24, 168 (2023), https://doi.org/10.1186/s13059-023-03008-6.
- 🔍 Interactive Alignment Visualization: Explore the optimal and suboptimal alignment space between two sequences
- 🛡️ Safety Window Analysis: Identify regions where alignments are conserved / robust
- 📁 Multiple Input Methods: Upload FASTA files, search UniProt database, or paste sequences directly
- ⚙️ Customizable Parameters: Fine-tune the suboptimal alignment space by adjusting the suboptimality threshold (δ delta), and fine-tune the robustness measure by adjusting the safety parameter (α alpha)
- 🧬 3D Structure Integration: Overlay protein structure information when available
- 📊 Export & Sharing: Generate publication-ready images and shareable URLs
This application is built with:
- Frontend: React 18 + TypeScript + Vite
- Algorithm: WebAssembly (WASM) implementation of EMERALD
- Visualization: Custom Canvas-based interactive plotting
- Styling: CSS with CSS custom properties for theming
- Data Sources: UniProt REST API integration
Please cite the following reference when using EMERALD for your research:
Grigorjew, A., Gynter, A., Dias, F.H. et al. Sensitive inference of alignment-safe intervals from biodiverse protein sequence clusters using EMERALD. Genome Biol 24, 168 (2023). https://doi.org/10.1186/s13059-023-03008-6
- Node.js 18.0 or higher
- npm or yarn package manager
- Clone the repository:
git clone https://github.com/algbio/emerald-ui.git
cd emerald-ui- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
src/
├── components/ # React components
│ ├── alignment/ # Alignment visualization components
│ ├── sequence/ # Sequence input components
│ ├── structure/ # 3D structure components
│ ├── share/ # Export and sharing components
│ └── ui/ # UI feedback components
├── context/ # React context for state management
├── hooks/ # Custom React hooks
├── utils/ # Utility functions
│ ├── api/ # API integration utilities
│ ├── canvas/ # Canvas drawing utilities
│ └── export/ # Export utilities
└── emerald-wasm/ # WebAssembly EMERALD implementation
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details. ...reactDom.configs.recommended.rules, }, })
### Breaking example:
ROS1_ARATH and ROS1A_ORYSJ
## Quick notes
* Leave the charactesr out when too zoomed out
* Load as A instead of Load A
* Actions -> Other actions
* Visualization -> Settings
* Gap analysis -> Unsafe windows
* Unsafe window highlihgting lag is too much
* Add explanation of the blue line
* Crash report should tell the user to refresh the page
* Examples should give better sequences to test
* Try example should have a link
* Folding getting started
* no result found when search hasnt been pressed
* Ready to generate suboptimal alignment graph message when both sequences loaded
* Change example sequences
* Remove "Step 3"