Mieaz's picture
Deploy 219-Table Multi-Omics Omniverse Studio for MVA Syndrome
145341d verified
Raw History Blame Contribute Delete
34.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MVA Syndrome Multi-Dimensional Genomic Studio</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<div class="app-container">
<!-- Top Header -->
<header class="studio-header">
<div class="header-left">
<div class="logo-badge">
<div class="pulse-dot"></div>
<span class="logo-title">MVA SYNDROME</span>
<span class="logo-sub">MULTI-DIMENSIONAL GENOMIC STUDIO</span>
</div>
<div class="patient-badge">
<span class="patient-label">PROBAND:</span>
<span class="patient-id font-mono">EX2312012 (HGWCNDSX7)</span>
</div>
</div>
<div class="header-stats">
<div class="stat-pill" title="Total Whole Genome Variants">
<span class="stat-label">TOTAL WGS VARIANTS</span>
<span class="stat-val">5,012,204</span>
</div>
<div class="stat-pill" title="Candidate Variants in MVA / Cancer Panels">
<span class="stat-label">CANDIDATE VARIANTS</span>
<span id="statCandidateCount" class="stat-val font-cyan">1,576</span>
</div>
<div class="stat-pill highlight-gold" title="Putative Mosaic Somatic Mutations (5%-38% VAF)">
<span class="stat-label">MOSAIC CANDIDATES</span>
<span id="statMosaicCount" class="stat-val">84</span>
</div>
<div class="stat-pill" title="Mean WGS Sequencing Coverage">
<span class="stat-label">MEAN COVERAGE</span>
<span class="stat-val">36.2× (NovaSeq)</span>
</div>
</div>
<div class="header-right">
<div class="connection-badge" title="Hugging Face Dataset Connection Status">
<span class="badge-dot"></span>
<span class="badge-text">PRIVATE DATASET LINKED</span>
</div>
<button id="btnShortcuts" class="icon-btn">⌨ Shortcuts</button>
</div>
</header>
<!-- Navigation Tabs -->
<nav class="studio-nav">
<button class="nav-tab tab-omniverse" data-tab="tab-omniverse">
<span class="tab-icon">🏛️</span> 219-Table Omniverse Hub <span class="badge-omniverse-count">219 Tables</span>
</button>
<button class="nav-tab active" data-tab="tab-clinical">
<span class="tab-icon">🏥</span> Clinical Phenotype & HPO
</button>
<button class="nav-tab" data-tab="tab-variants">
<span class="tab-icon">🧬</span> Chromosome & Variant Navigator
</button>
<button class="nav-tab" data-tab="tab-gene-burden">
<span class="tab-icon">📋</span> Candidate Gene Burden Matrix
</button>
<button class="nav-tab" data-tab="tab-syndromic-diff">
<span class="tab-icon">🩺</span> Phenotype Differential Matrix
</button>
<button class="nav-tab" data-tab="tab-acmg-matrix">
<span class="tab-icon">🧪</span> ACMG Variant Classification
</button>
<button class="nav-tab" data-tab="tab-therapeutic-targets">
<span class="tab-icon">💊</span> Precision Oncology Targets
</button>
<button class="nav-tab" data-tab="tab-mosaic-strat">
<span class="tab-icon">⚡</span> Mosaic Allelic Stratification
</button>
<button class="nav-tab" data-tab="tab-mitotic-machinery">
<span class="tab-icon">🔬</span> Mitotic Machinery Interactome
</button>
<button class="nav-tab" data-tab="tab-karyotype-matrix">
<span class="tab-icon">🌐</span> 24-Chromosome Karyotype Matrix
</button>
<button class="nav-tab" data-tab="tab-mosaic">
<span class="tab-icon">🔬</span> Mosaicism & VAF Spectrum
</button>
<button class="nav-tab" data-tab="tab-wgs">
<span class="tab-icon">📊</span> 4-Lane Sequencing QC Audit
</button>
<button class="nav-tab" data-tab="tab-pathway">
<span class="tab-icon">⚙️</span> Mitotic Checkpoint Pathway
</button>
</nav>
<!-- Tab 0: 219-Table Omniverse Hub -->
<section id="tab-omniverse" class="tab-content">
<div class="omniverse-layout">
<!-- Omniverse Controls Bar -->
<div class="omniverse-toolbar">
<div class="omniverse-top-row">
<div class="omniverse-title-box">
<div class="badge-omniverse-pulse">🏛️ 219-TABLE OMNIVERSE HUB</div>
<h2>Multi-Omics Analytical Matrix Explorer</h2>
<p class="omniverse-subtitle">Instant interactive browsing across 219 deep tables intersecting clinical phenomics, chromosome architecture, mitotic machinery, mosaicism strata, ACMG predictions, precision pharmacology, cytogenetics, sequencing QC, biophysical kinetics, and comparative oncology cohorts.</p>
</div>
<div class="omniverse-stats-summary">
<div class="omni-stat-box"><span class="omni-lbl">TOTAL TABLES</span><strong id="omniTotalTables">219</strong></div>
<div class="omni-stat-box"><span class="omni-lbl">CATEGORIES</span><strong>10 Hubs</strong></div>
<div class="omni-stat-box"><span class="omni-lbl">FILTERED MATCHES</span><strong id="omniFilteredCount" class="font-cyan">219</strong></div>
</div>
</div>
<!-- Category Filter Pills -->
<div class="category-pills-bar" id="omniCategoryPills">
<button class="cat-pill active" data-cat="ALL">All Categories (219)</button>
<button class="cat-pill" data-cat="Clinical & Phenomics">🏥 Clinical & Phenomics (25)</button>
<button class="cat-pill" data-cat="Chromosome Architecture">🧬 Chromosome Architecture (30)</button>
<button class="cat-pill" data-cat="Gene Panels & Interactome">📋 Gene Panels & Interactome (35)</button>
<button class="cat-pill" data-cat="Mosaicism Spectrum">⚡ Mosaicism Spectrum (25)</button>
<button class="cat-pill" data-cat="ACMG & In Silico Predictors">🧪 ACMG & In Silico (25)</button>
<button class="cat-pill" data-cat="Precision Oncology & Pharma">💊 Precision Oncology (25)</button>
<button class="cat-pill" data-cat="Cytogenetics & Aneuploidy">🌐 Cytogenetics & Aneuploidy (20)</button>
<button class="cat-pill" data-cat="Sequencing & Flowcell QC">📊 Sequencing QC (20)</button>
<button class="cat-pill" data-cat="Biophysical Kinetics">🔬 Biophysical Kinetics (15)</button>
<button class="cat-pill" data-cat="Comparative Oncology Cohorts">👥 Comparative Cohorts (15)</button>
</div>
<!-- Table Selector Search & Switcher -->
<div class="omniverse-search-row">
<div class="search-wrap">
<span class="search-icon">🔍</span>
<input type="text" id="omniGlobalSearch" placeholder="Fuzzy search across all 219 tables by keyword, gene, pathway, or metric..." class="omni-search-input">
</div>
<div class="table-dropdown-wrap">
<label for="omniTableSelect" class="table-select-lbl">ACTIVE TABLE:</label>
<select id="omniTableSelect" class="omni-table-select">
<!-- Populated via JS -->
</select>
</div>
</div>
</div>
<!-- Active Table Viewer Card -->
<div class="infotable-card omniverse-active-card">
<div class="infotable-header omniverse-card-header">
<div class="infotable-title-box">
<div class="omni-active-badge-row">
<span id="omniActiveCat" class="badge-cyan">Clinical & Phenomics</span>
<span id="omniActiveId" class="badge-patho font-mono">clin_01_hpo_hierarchy</span>
<span id="omniActiveRows" class="badge-mva-match">8 rows</span>
</div>
<h3 id="omniActiveTitle">HPO Term Ontological Hierarchy & Phenotypic Specificity</h3>
<p id="omniActiveDesc" class="infotable-desc">Detailed phenotypic depth, information content (IC), and syndromic specificity of proband HPO features.</p>
</div>
<div class="omni-action-buttons">
<input type="text" id="omniTableRowFilter" placeholder="Filter rows in active table..." class="search-input-sm">
<button id="btnExportCSV" class="btn-export">⬇ Export CSV</button>
<button id="btnExportJSON" class="btn-export">⬇ Export JSON</button>
</div>
</div>
<div class="table-scroll-lg">
<table class="infotable" id="omniverseDynamicTable">
<thead id="omniTableHead">
<!-- Rendered dynamically -->
</thead>
<tbody id="omniTableBody">
<!-- Rendered dynamically -->
</tbody>
</table>
</div>
</div>
<!-- Quick Table Discovery Matrix Grid -->
<div class="omni-discovery-section">
<div class="discovery-header">
<h4>📑 Table Discovery Matrix (Click any table card to load instantly):</h4>
</div>
<div class="omni-grid-cards" id="omniDiscoveryGrid">
<!-- Rendered dynamically -->
</div>
</div>
</div>
</section>
<!-- Tab 1: Clinical Phenotype & HPO Profile -->
<section id="tab-clinical" class="tab-content active">
<div class="clinical-grid">
<!-- Left Column: Patient Case Overview -->
<div class="card card-overview">
<div class="card-header">
<h3>📋 Proband Case Summary & Diagnostic Context</h3>
<span class="badge-rare">Rare Disease: MVA Syndrome</span>
</div>
<div class="card-body">
<div class="alert-box">
<strong>Clinical Presentation:</strong> Pediatric patient presenting with a coherent phenotypic cluster of embryonal malignancy (rhabdomyosarcoma), congenital nephrocalcinosis, severe intrauterine growth restriction (IUGR), microcephaly/short stature, failure to thrive, and parental history of recurrent miscarriages.
</div>
<div class="clinical-meta-grid">
<div class="meta-item">
<span class="meta-label">Primary Oncological Event:</span>
<span class="meta-val font-red">Rhabdomyosarcoma (Soft Tissue Tumour)</span>
</div>
<div class="meta-item">
<span class="meta-label">Renal Anomalies:</span>
<span class="meta-val font-gold">Congenital Nephrocalcinosis (Since Birth)</span>
</div>
<div class="meta-item">
<span class="meta-label">Gestational Age at Birth:</span>
<span class="meta-val">32 Weeks (Premature)</span>
</div>
<div class="meta-item">
<span class="meta-label">Birth Weight:</span>
<span class="meta-val">~1.0 kg (Severe IUGR / Small for Gestational Age)</span>
</div>
<div class="meta-item">
<span class="meta-label">Family Reproductive History:</span>
<span class="meta-val font-cyan">Parental Recurrent Spontaneous Abortions</span>
</div>
<div class="meta-item">
<span class="meta-label">Diagnostic Trigger:</span>
<span class="meta-val">Urgent Whole Genome Sequencing (WGS)</span>
</div>
</div>
<div class="insight-box">
<h4>💡 Syndromic Diagnostic Key:</h4>
<p>In chromosomal instability syndromes such as Mosaic Variegated Aneuploidy (MVA), no single finding is isolated. The hallmark is the triad of <strong>growth restriction + pediatric cancer predisposition + chromosome segregation/mitotic checkpoint defects</strong>. Parental recurrent pregnancy loss further points to segregation/aneuploidy vulnerability.</p>
</div>
</div>
</div>
<!-- Right Column: HPO Term Breakdown -->
<div class="card card-hpo">
<div class="card-header">
<h3>🏷️ Human Phenotype Ontology (HPO) Profile</h3>
<span id="hpoCountBadge" class="badge-count">8 Phenotypes</span>
</div>
<div class="card-body">
<div id="hpoList" class="hpo-list">
<!-- Rendered via JS -->
</div>
</div>
</div>
</div>
</section>
<!-- Tab 2: Chromosome & Variant Navigator -->
<section id="tab-variants" class="tab-content">
<div class="variants-layout">
<!-- Top Toolbar: Gene Panels & Filters -->
<div class="variant-toolbar">
<div class="filter-group">
<label for="geneFilter" class="filter-label">GENE PANEL:</label>
<select id="geneFilter" class="styled-select">
<option value="ALL">All Candidate Genes (16 Panels)</option>
<option value="BUB1B">BUB1B — MVA Type 1 (chr15)</option>
<option value="CEP57">CEP57 — MVA Type 2 (chr11)</option>
<option value="TRIP13">TRIP13 — MVA Type 3 (chr5)</option>
<option value="CEP192">CEP192 — MVA Type 4 (chr18)</option>
<option value="MAD1L1">MAD1L1 — MVA Susceptibility (chr7)</option>
<option value="MAD2L1">MAD2L1 — Checkpoint Core (chr4)</option>
<option value="BUB1">BUB1 — Kinetochore Kinase (chr2)</option>
<option value="BUB3">BUB3 — SAC Scaffold (chr10)</option>
<option value="SMC5">SMC5 — Chromosome Repair (chr9)</option>
<option value="CENPE">CENPE — Kinetochore Motor (chr4)</option>
<option value="CENPF">CENPF — Centromere Protein F (chr1)</option>
<option value="PLK1">PLK1 — Polo Like Kinase (chr16)</option>
<option value="AURKA">AURKA — Aurora Kinase A (chr20)</option>
<option value="TP53">TP53 — Li-Fraumeni / Sarcoma (chr17)</option>
<option value="WT1">WT1 — Wilms / Nephrocalcinosis (chr11)</option>
<option value="DICER1">DICER1 — Rhabdomyosarcoma (chr14)</option>
</select>
</div>
<div class="filter-group">
<label for="typeFilter" class="filter-label">TYPE:</label>
<select id="typeFilter" class="styled-select-sm">
<option value="ALL">All Types</option>
<option value="SNV">SNV (Single Nucleotide)</option>
<option value="Insertion">Insertion</option>
<option value="Deletion">Deletion</option>
</select>
</div>
<div class="filter-group">
<label for="mosaicFilter" class="filter-label">ZYGOSITY / MOSAICISM:</label>
<select id="mosaicFilter" class="styled-select-sm">
<option value="ALL">All Classifications</option>
<option value="Mosaic Somatic Candidate">Mosaic Somatic Candidates (5%-38% VAF)</option>
<option value="Germline Heterozygous">Germline Heterozygous (40%-60% VAF)</option>
<option value="Germline Homozygous">Germline Homozygous (85%-100% VAF)</option>
</select>
</div>
<div class="filter-group search-group">
<input type="text" id="variantSearch" placeholder="Search by position, dbSNP rsID, or allele..." class="search-input">
</div>
<div class="filter-stats">
<span>Showing <strong id="filteredCount">0</strong> / <span id="totalCandidateCount">0</span> variants</span>
</div>
</div>
<!-- Chromosome Ideogram Selector -->
<div class="chromosome-bar-wrapper">
<div class="chr-bar-header">
<span>GENOME-WIDE CHROMOSOME DENSITY (Click chromosome to filter):</span>
<button id="btnResetChr" class="mini-btn">Reset All Chromosomes</button>
</div>
<div id="chromosomeKaryotype" class="chromosome-karyotype">
<!-- Rendered via JS -->
</div>
</div>
<!-- Variants Table -->
<div class="table-card">
<div class="table-scroll">
<table class="variant-table">
<thead>
<tr>
<th>Gene</th>
<th>Chromosome:Position</th>
<th>Ref → Alt</th>
<th>Type</th>
<th>Genotype (GT)</th>
<th>Allelic Depth (AD)</th>
<th>Total DP</th>
<th>VAF (Allele Fraction)</th>
<th>Classification</th>
<th>Filter</th>
<th>Action</th>
</tr>
</thead>
<tbody id="variantTableBody">
<!-- Rendered via JS -->
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Tab 3: Candidate Gene Burden & ACMG Matrix -->
<section id="tab-gene-burden" class="tab-content">
<div class="infotable-card">
<div class="infotable-header">
<div class="infotable-title-box">
<h3>📋 Candidate Gene Burden & ACMG Pathogenicity Matrix</h3>
<p class="infotable-desc">Comprehensive comparative matrix analyzing all 16 candidate genes in the patient across OMIM phenotypes, variant burdens, inheritance models, and diagnostic tiers.</p>
</div>
<div class="table-search-box">
<input type="text" id="searchGeneBurden" placeholder="Filter by gene, syndrome, or pathway..." class="search-input">
</div>
</div>
<div class="table-scroll-lg">
<table class="infotable">
<thead>
<tr>
<th>Gene</th>
<th>OMIM / Cytoband</th>
<th>Syndromic Classification</th>
<th>Mitotic Complex / Role</th>
<th>Inheritance</th>
<th>Proband Variants</th>
<th>Highest VAF</th>
<th>Mosaic Loci</th>
<th>Clinical Presentation Link</th>
<th>Diagnostic Tier</th>
</tr>
</thead>
<tbody id="geneBurdenTableBody">
<!-- Rendered via JS -->
</tbody>
</table>
</div>
</div>
</section>
<!-- Tab 4: Phenotype Differential Matrix -->
<section id="tab-syndromic-diff" class="tab-content">
<div class="infotable-card">
<div class="infotable-header">
<div class="infotable-title-box">
<h3>🩺 Proband Phenotype Constellation vs Syndromic Differential Matrix</h3>
<p class="infotable-desc">Systematic cross-referencing of observed clinical HPO findings against competing pediatric cancer and primordial growth syndromes.</p>
</div>
<div class="table-search-box">
<input type="text" id="searchSyndromicDiff" placeholder="Filter by clinical feature or syndrome..." class="search-input">
</div>
</div>
<div class="table-scroll-lg">
<table class="infotable">
<thead>
<tr>
<th>Clinical Feature (HPO)</th>
<th>MVA Syndrome Match</th>
<th>Implicated Candidate Genes</th>
<th>Competing Syndromic Differentials</th>
<th>Cellular & Molecular Mechanism</th>
<th>Discriminatory Diagnostic Power</th>
</tr>
</thead>
<tbody id="syndromicDiffTableBody">
<!-- Rendered via JS -->
</tbody>
</table>
</div>
</div>
</section>
<!-- Tab 5: ACMG Variant Classification Table -->
<section id="tab-acmg-matrix" class="tab-content">
<div class="infotable-card">
<div class="infotable-header">
<div class="infotable-title-box">
<h3>🧪 ACMG / AMP Diagnostic Variant Pathogenicity Classification Table</h3>
<p class="infotable-desc">Formal ACMG/AMP clinical evidence tiering of prioritized candidate mutations across Spindle Assembly Checkpoint and sarcoma driver loci.</p>
</div>
<div class="table-search-box">
<input type="text" id="searchAcmgMatrix" placeholder="Filter by gene or classification..." class="search-input">
</div>
</div>
<div class="table-scroll-lg">
<table class="infotable">
<thead>
<tr>
<th>Gene</th>
<th>HGVSc / Protein Change</th>
<th>Genomic Coordinate (GRCh38)</th>
<th>Ref → Alt</th>
<th>Variant Type</th>
<th>VAF</th>
<th>ACMG Evidence Criteria</th>
<th>gnomAD v4.1 AF</th>
<th>REVEL / CADD</th>
<th>Final ACMG Tier</th>
</tr>
</thead>
<tbody id="acmgMatrixTableBody">
<!-- Rendered via JS -->
</tbody>
</table>
</div>
</div>
</section>
<!-- Tab 6: Precision Oncology Targets -->
<section id="tab-therapeutic-targets" class="tab-content">
<div class="infotable-card">
<div class="infotable-header">
<div class="infotable-title-box">
<h3>💊 Precision Oncology & Therapeutic Target Matrix</h3>
<p class="infotable-desc">Targeted therapies, synthetic lethality vulnerabilities, and investigational small molecules exploiting chromosomal instability (CIN) and mitotic spindle defects.</p>
</div>
<div class="table-search-box">
<input type="text" id="searchTherapeuticTargets" placeholder="Filter by drug, target, or mechanism..." class="search-input">
</div>
</div>
<div class="table-scroll-lg">
<table class="infotable">
<thead>
<tr>
<th>Drug / Small Molecule</th>
<th>Target Gene</th>
<th>Pharmacological Class</th>
<th>Mechanism of Action</th>
<th>Synergy with MVA Phenotype</th>
<th>Clinical Trial Status</th>
<th>Evidence Tier</th>
</tr>
</thead>
<tbody id="therapeuticTargetsTableBody">
<!-- Rendered via JS -->
</tbody>
</table>
</div>
</div>
</section>
<!-- Tab 7: Mosaic Allelic Stratification -->
<section id="tab-mosaic-strat" class="tab-content">
<div class="infotable-card">
<div class="infotable-header">
<div class="infotable-title-box">
<h3>⚡ Mosaic Somatic vs Germline Allelic Stratification Table</h3>
<p class="infotable-desc">Stratification of whole-genome variants by Variant Allele Frequency (VAF), developmental timing, and inferred tissue lineage penetrance.</p>
</div>
</div>
<div class="table-scroll-lg">
<table class="infotable">
<thead>
<tr>
<th>VAF Range</th>
<th>Classification & Timing</th>
<th>Total Variants</th>
<th>Mean Sequencing DP</th>
<th>Estimated Lineage Penetrance</th>
<th>Candidate Genes Affected</th>
<th>Pathological & Aneuploidy Consequence</th>
</tr>
</thead>
<tbody id="mosaicStratTableBody">
<!-- Rendered via JS -->
</tbody>
</table>
</div>
</div>
</section>
<!-- Tab 8: Mitotic Machinery & Interactome Functional Table -->
<section id="tab-mitotic-machinery" class="tab-content">
<div class="infotable-card">
<div class="infotable-header">
<div class="infotable-title-box">
<h3>🔬 Mitotic Spindle Assembly Checkpoint & Centrosome Interactome Matrix</h3>
<p class="infotable-desc">Biochemical, structural, and macromolecular properties of key mitotic proteins in the MVA syndrome network.</p>
</div>
<div class="table-search-box">
<input type="text" id="searchMitoticMachinery" placeholder="Filter by protein, complex, or function..." class="search-input">
</div>
</div>
<div class="table-scroll-lg">
<table class="infotable">
<thead>
<tr>
<th>Protein (UniProt)</th>
<th>Length</th>
<th>Subcellular Location</th>
<th>Biochemical Function & Activity</th>
<th>Macromolecular Complex</th>
<th>MVA Disease Association</th>
<th>Proband WGS Findings</th>
</tr>
</thead>
<tbody id="mitoticMachineryTableBody">
<!-- Rendered via JS -->
</tbody>
</table>
</div>
</div>
</section>
<!-- Tab 9: 24-Chromosome Karyotype & Instability Matrix -->
<section id="tab-karyotype-matrix" class="tab-content">
<div class="infotable-card">
<div class="infotable-header">
<div class="infotable-title-box">
<h3>🌐 24-Chromosome Karyotype Architecture & Genomic Instability Matrix</h3>
<p class="infotable-desc">Genome-wide breakdown of chromosomal physical lengths, variant densities, SNV/Indel ratios, and literature-reported MVA aneuploidy vulnerability rates.</p>
</div>
<div class="table-search-box">
<input type="text" id="searchKaryotypeMatrix" placeholder="Filter chromosomes..." class="search-input">
</div>
</div>
<div class="table-scroll-lg">
<table class="infotable">
<thead>
<tr>
<th>Chromosome</th>
<th>Length (GRCh38)</th>
<th>Total Variants</th>
<th>SNVs</th>
<th>Indels</th>
<th>Variant Density</th>
<th>SNV/Indel Ratio</th>
<th>Heterozygous / Homozygous</th>
<th>Reported MVA Aneuploidy Vulnerability in Literature</th>
</tr>
</thead>
<tbody id="karyotypeMatrixTableBody">
<!-- Rendered via JS -->
</tbody>
</table>
</div>
</div>
</section>
<!-- Tab 10: Mosaicism Spectrum -->
<section id="tab-mosaic" class="tab-content">
<div class="mosaic-grid">
<div class="card">
<div class="card-header">
<h3>🔬 Variant Allele Frequency (VAF) Spectrum & Mosaicism Analysis</h3>
<span class="badge-cyan">Somatic vs Germline Resolution</span>
</div>
<div class="card-body">
<p class="section-desc">
In Mosaic Variegated Aneuploidy, post-zygotic somatic mutations and mitotic nondisjunction events exhibit non-Mendelian allele frequencies. Variants with <strong>VAF between 5% and 38% (0.05 – 0.38)</strong> represent high-confidence mosaic somatic candidates.
</p>
<div class="vaf-distribution-chart">
<div class="vaf-bracket bracket-mosaic">
<div class="bracket-header">
<span>MOSAIC SOMATIC SPECTRUM</span>
<strong>5% – 38% VAF</strong>
</div>
<div class="bracket-body" id="mosaicListSummary">
<!-- JS generated -->
</div>
</div>
<div class="vaf-bracket bracket-het">
<div class="bracket-header">
<span>GERMLINE HETEROZYGOUS</span>
<strong>40% – 60% VAF</strong>
</div>
<div class="bracket-body" id="hetListSummary">
<!-- JS generated -->
</div>
</div>
<div class="vaf-bracket bracket-hom">
<div class="bracket-header">
<span>GERMLINE HOMOZYGOUS</span>
<strong>85% – 100% VAF</strong>
</div>
<div class="bracket-body" id="homListSummary">
<!-- JS generated -->
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>⭐ Top Mosaic Somatic Candidate Loci</h3>
<span class="badge-gold">Prioritized SAC & Centrosome Mutants</span>
</div>
<div class="card-body">
<div id="topMosaicTable" class="top-mosaic-container">
<!-- Rendered via JS -->
</div>
</div>
</div>
</div>
</section>
<!-- Tab 11: 4-Lane Sequencing QC Audit -->
<section id="tab-wgs" class="tab-content">
<div class="wgs-grid">
<div class="card">
<div class="card-header">
<h3>📊 Illumina NovaSeq 6000 Flowcell Quality Audit (4 Lanes)</h3>
<span class="badge-cyan">Flowcell ID: HGWCNDSX7</span>
</div>
<div class="card-body">
<div class="stats-overview-row">
<div class="overview-box">
<span class="box-label">Total Sequencing Data</span>
<span class="box-val font-cyan">78.86 GB</span>
</div>
<div class="overview-box">
<span class="box-label">Total Paired Reads</span>
<span class="box-val">805.8 Million</span>
</div>
<div class="overview-box">
<span class="box-label">Mean Genome Coverage</span>
<span class="box-val font-green">36.2×</span>
</div>
<div class="overview-box">
<span class="box-label">Bases ≥ Q30</span>
<span class="box-val font-gold">93.45%</span>
</div>
<div class="overview-box">
<span class="box-label">Mean Insert Size</span>
<span class="box-val">380 bp</span>
</div>
<div class="overview-box">
<span class="box-label">Duplication Rate</span>
<span class="box-val">8.4%</span>
</div>
</div>
<h4 class="subhead">Comprehensive Lane-by-Lane Telemetry Audit</h4>
<div class="lanes-table-wrapper">
<table class="lane-table">
<thead>
<tr>
<th>Lane ID</th>
<th>Read Pairs FASTQ Files</th>
<th>Total Size</th>
<th>Paired Reads</th>
<th>Q30 %</th>
<th>GC %</th>
<th>Est. Coverage</th>
<th>Dup Rate</th>
<th>Mapping Rate</th>
<th>Flowcell Status</th>
</tr>
</thead>
<tbody id="flowcellQcTableBody">
<!-- Rendered via JS -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- Tab 12: Mitotic Checkpoint Pathway Network -->
<section id="tab-pathway" class="tab-content">
<div class="pathway-grid">
<div class="card">
<div class="card-header">
<h3>⚙️ Spindle Assembly Checkpoint (SAC) & Centrosomal Protein Network</h3>
<span class="badge-rare">Mitotic Machinery</span>
</div>
<div class="card-body">
<div class="pathway-diagram" id="pathwayComplexes">
<!-- Rendered via JS -->
</div>
</div>
</div>
</div>
</section>
<!-- Variant Detail Modal -->
<div id="modalVariant" class="modal-overlay hidden">
<div class="modal-card">
<div class="modal-header">
<h2 id="modalVarTitle">🧬 Variant Details</h2>
<button id="btnCloseVarModal" class="modal-close">✕</button>
</div>
<div class="modal-body" id="modalVarBody">
<!-- Rendered via JS -->
</div>
</div>
</div>
<!-- Shortcuts Modal -->
<div id="modalHelp" class="modal-overlay hidden">
<div class="modal-card">
<div class="modal-header">
<h2>⌨ Studio Keyboard Shortcuts</h2>
<button id="btnCloseHelpModal" class="modal-close">✕</button>
</div>
<div class="modal-body">
<div class="shortcut-grid">
<div class="shortcut-item"><kbd>1</kbd><span>Clinical Phenotype & HPO Profile</span></div>
<div class="shortcut-item"><kbd>2</kbd><span>Chromosome & Variant Navigator (5.01M WGS)</span></div>
<div class="shortcut-item"><kbd>3</kbd><span>Candidate Gene Burden & ACMG Matrix</span></div>
<div class="shortcut-item"><kbd>4</kbd><span>Phenotype Differential Matrix</span></div>
<div class="shortcut-item"><kbd>5</kbd><span>ACMG Diagnostic Variant Classification</span></div>
<div class="shortcut-item"><kbd>6</kbd><span>Precision Oncology Targets</span></div>
<div class="shortcut-item"><kbd>7</kbd><span>Mosaic Allelic Stratification Table</span></div>
<div class="shortcut-item"><kbd>8</kbd><span>Mitotic Machinery Interactome</span></div>
<div class="shortcut-item"><kbd>9</kbd><span>24-Chromosome Karyotype Matrix</span></div>
<div class="shortcut-item"><kbd>0</kbd><span>Mosaicism & VAF Spectrum</span></div>
<div class="shortcut-item"><kbd>Q</kbd><span>4-Lane Sequencing QC Audit</span></div>
<div class="shortcut-item"><kbd>W</kbd><span>Mitotic Checkpoint Pathway Network</span></div>
<div class="shortcut-item"><kbd>/</kbd><span>Focus Variant Search bar</span></div>
<div class="shortcut-item"><kbd>Esc</kbd><span>Close modals</span></div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>