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 Sensitive inference of alignment-safe intervals from biodiverse protein sequence clusters using EMERALD, Genome Biology 2023.
- 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: Load 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
- Local-First with API Integrations: Alignment computation runs locally in your browser (WASM). External APIs are used for optional sequence/structure retrieval (UniProt, AlphaFold/RCSB), and an optional aggregate run counter is updated when analyses are run.
This application is built with:
- Frontend: React 19 + 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, AlphaFold API, and RCSB PDB
@emotion/styled^11.14.0@mui/material^7.1.2canvas2svg^1.0.16d3^7.9.0jspdf^4.2.1molstar^5.8.0react^19.1.0react-dom^19.1.0react-icons^5.5.0svg2pdf.js^2.7.0
@eslint/js^9.25.0@types/d3^7.4.3@types/react^19.1.2@types/react-dom^19.1.2@vitejs/plugin-react^4.4.1eslint^9.25.0eslint-plugin-react-hooks^5.2.0eslint-plugin-react-refresh^0.4.19gh-pages^6.3.0globals^16.0.0sass^1.89.2typescript~5.8.3typescript-eslint^8.30.1vite^6.3.5
EMERALD-UI gratefully builds on two open-source visualization ecosystems:
- Mol* for interactive macromolecular 3D structure rendering and analysis. Project: https://molstar.org/ | Repository: https://github.com/molstar/molstar
- D3.js for visualization primitives used in our alignment plots. Project: https://d3js.org/ | Repository: https://github.com/d3/d3
Please cite the following reference when using EMERALD-UI for your research:
- Andrei Preoteasa, Andreas Grigorjew, Alexandru I. Tomescu, Hajk-Georg Drost, EMERALD-UI: An interactive web application to unveil novel protein biology hidden in the suboptimal-alignment space arXiv (2026) https://doi.org/10.48550/arXiv.2602.12730
- 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
If your analysis includes protein structures, you may consider also citing the Mol* viewer used by EMERALD-UI:
- David Sehnal, Sebastian Bittrich, Mandar Deshpande, Radka Svobodová, Karel Berka, Václav Bazgier, Sameer Velankar, Stephen K. Burley, Jaroslav Koča, Alexander S. Rose. Mol Viewer: modern web app for 3D visualization and analysis of large biomolecular structures*. Nucleic Acids Research 49(W1):W431-W437 (2021). https://doi.org/10.1093/nar/gkab314
- 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 -
New changes to the
mainbranch are automatically published to github pages and visible at https://algbio.github.io/emerald-ui via the github workflowdeploy-pages.yml. If you prefer to do this manually, you can also publish from the local installation by running:
npm run deploy.
├── docs/ # Documentation and design assets
├── public/ # Static assets served by Vite
├── src/
│ ├── assets/ # App bundled assets
│ ├── components/
│ │ ├── alignment/ # Alignment graphs and parameter panels
│ │ ├── information/ # Informational content components
│ │ ├── sequence/ # Sequence input and listing UI
│ │ ├── share/ # URL sharing and export UI
│ │ ├── shared/ # Reusable shared components
│ │ ├── structure/ # 3D structure visualization/superposition
│ │ └── ui/ # Generic UI primitives and feedback
│ ├── context/ # React context providers
│ ├── emerald-wasm/ # WASM wrapper and type declarations
│ ├── hooks/ # Custom hooks
│ ├── temp/ # Temporary/debug data
│ ├── types/ # Project-level type declarations
│ ├── utils/
│ │ ├── api/ # External API helpers
│ │ ├── canvas/ # Canvas rendering and plotting logic
│ │ ├── export/ # Export helpers (PNG/SVG/PDF)
│ │ ├── sequence/ # Sequence processing helpers
│ │ └── structure/ # Structure parsing/processing helpers
│ ├── App.tsx
│ └── main.tsx
├── index.html
├── package.json
└── vite.config.ts
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 Report a Problem or a submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.