Interactive web visualization of the SGCE (epsilon-sarcoglycan) protein, built for understanding the molecular consequences of a DYT-SGCE mutation (c.108dup, p.Val37SerfsTer32).
This tool visualizes how a single-nucleotide duplication leads to complete loss of ε-sarcoglycan function through frameshift, nonsense-mediated decay, and genomic imprinting.
Live: e-sarcoglycan.arcivus.ca
- Real AlphaFold predicted structure (AF-O43556-F1) rendered with 3Dmol.js
- Domain coloring: extracellular (blue), transmembrane (amber), cytoplasmic (purple)
- Mutation site marker (Val37, red sphere) and N-glycosylation marker (Asn200, green)
- Wild-type vs Mutant toggle — full 437 aa structure vs truncated 68 aa fragment with STOP marker
- DGC sarcoglycan subcomplex overlay — β/γ/δ/ε-SG rendered together from AlphaFold structures
- Auto-rotate toggle and interactive zoom/rotation
- Linear amino acid track displaying all 437 residues with domain coloring
- Scrollable with mutation annotation overlay (frameshift at 37, PTC at 68, aberrant region 38-67)
- Bidirectional 3D sync — click residue in sequence → 3D viewer zooms to that position
- 7-step animated walkthrough: DNA → Imprinting → Transcription → Splicing → Translation → NMD → Result
- Codon viewer: WT/mutant reading frame comparison with frameshift and PTC markers (CDS from NM_003919.3)
- Ribosome translation: 80S ribosome scanning mRNA with peptide chain growth and frameshift visualization
- NMD pathway: 4-step animation (PTC recognition → UPF1 recruitment → phosphorylation → mRNA degradation)
- framer-motion spring animations with AnimatePresence transitions
- Adaptive autoplay with per-step durations
- Audio narration toggle (Web Speech API)
- Visual explanation of maternal silencing via CpG methylation
- Paternal vs maternal allele comparison with chromatin marks
- Why this mutation causes complete loss of function, not haploinsufficiency
- PubMed: Latest SGCE/DYT11 publications from NCBI E-utilities
- ClinicalTrials.gov: Active clinical trials for DYT-SGCE
- UniProt: Live protein annotations (O43556)
- STRING DB: Protein-protein interaction network for DGC complex
graph TD
A[main.tsx] --> B[App.tsx — 4 Tab Router]
B --> C[ProteinStructure3D]
B --> D[CentralDogma — Orchestrator]
B --> E[ImprintingPanel]
B --> R[ResearchPanel — Orchestrator]
C --> F[useProteinData Hook]
C --> DGC[useDGCProteins Hook]
F --> G[AlphaFold PDB]
C --> H[3Dmol.js Viewer]
C --> I[SequenceViewer + ResidueCell]
D --> D1[ProgressBar]
D --> D2[StepContent]
D --> D3[CodonViewer]
D --> D4[TranslationAnimation]
D --> D5[NMDAnimation]
D --> D6[AudioNarration]
R --> R1[PubMedCard]
R --> R2[TrialsCard]
R --> R3[ProteinCard]
R --> R4[InteractionsCard]
C & D & E --> J[protein-data.ts]
D --> K[codon-data.ts]
# Install dependencies
npm install
# Download AlphaFold PDB structure
npm run fetch-pdb
# Start dev server
npm run devThe app opens at http://localhost:3000.
| Command | Description |
|---|---|
npm install |
Install dependencies |
npm run fetch-pdb |
Download AlphaFold PDB (AF-O43556-F1-model_v6) |
npm run dev |
Start Vite dev server (port 3000) |
npm run build |
TypeScript check + production build |
npm run preview |
Preview production build |
npm run test |
Run all tests (Vitest) |
npm run test:watch |
Run tests in watch mode |
npm run test:coverage |
Run tests with coverage report |
npm run test:ui |
Open Vitest UI |
337 tests across 37 test files using Vitest + React Testing Library.
Coverage includes:
- Component rendering and interaction (3D viewer, sequence viewer, central dogma, research cards)
- Hook behavior (usePubMed, useClinicalTrials, useUniProt, useStringDB, useDGCProteins)
- Codon data integrity (CDS sequence, frameshift math, PTC position)
- Animation sub-components (ProgressBar, TranslationAnimation, NMDAnimation)
- Utility functions (fetchCache, hexToInt, translatePdb, getDomainForPosition)
- Autoplay with adaptive durations (fake timers)
- Audio narration (Web Speech API mocks)
npm run test # Single run
npm run test:watch # Watch mode
npm run test:coverage # With coverage| Layer | Technology |
|---|---|
| Build | Vite 6 |
| UI | React 18, TypeScript 5.6 |
| 3D Visualization | 3Dmol.js (AlphaFold PDB rendering) |
| Animation | Framer Motion 11 |
| Styling | Tailwind CSS 3.4 |
| State | Zustand 5 |
| Testing | Vitest 4, React Testing Library |
| Protein Data | AlphaFold DB (UniProt O43556) |
- Gene: SGCE (chr7q21.3, 13 exons)
- Protein: ε-Sarcoglycan — 437 aa, type I transmembrane glycoprotein
- Mutation: c.108dup → frameshift at Val37 → premature stop at position 68
- Imprinting: Maternal allele silenced → only paternal allele expressed
- Consequence: Paternal mutation + maternal silencing = zero functional protein
- Disease: DYT-SGCE (Myoclonus-Dystonia, DYT11)
All structural data from UniProt O43556 and AlphaFold.
- Real AlphaFold PDB structure with 3Dmol.js
- Domain coloring + mutation/glycosylation markers
- WT vs Mutant toggle
- Linear sequence viewer with bidirectional 3D sync
- Animated central dogma (ribosome translation, NMD pathway, codon viewer)
- Audio narration (Web Speech API)
- External data integration (PubMed, ClinicalTrials, UniProt, STRING)
- DGC sarcoglycan subcomplex 3D overlay
- PWA support + export visualizations
- Favicon, a11y polish, meta description
Hosted on Vercel with Cloudflare DNS. Auto-deploys on push to main.
- Live: e-sarcoglycan.arcivus.ca
- GitHub: cyanprot/sgce-explorer
MIT © 2026 Jongmin Lee