Upload index.html with huggingface_hub

index.html

@@ -1,19 +1,410 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!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">5D 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 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-mosaic">
+        <span class="tab-icon">🔬</span> Mosaicism & VAF Spectrum
+      </button>
+      <button class="nav-tab" data-tab="tab-wgs">
+        <span class="tab-icon">📊</span> WGS Sequencing & Flowcells
+      </button>
+      <button class="nav-tab" data-tab="tab-pathway">
+        <span class="tab-icon">⚙️</span> Mitotic Checkpoint Pathway
+      </button>
+    </nav>
+
+    <!-- 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: Mosaicism & VAF 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 \in [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 4: WGS Sequencing & Flowcells -->
+    <section id="tab-wgs" class="tab-content">
+      <div class="wgs-grid">
+        <div class="card">
+          <div class="card-header">
+            <h3>📊 Illumina NovaSeq 6000 Flowcell Metrics</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">Lane-by-Lane Sequencing Breakdown (4 Flowcell Lanes)</h4>
+            <div class="lanes-table-wrapper">
+              <table class="lane-table">
+                <thead>
+                  <tr>
+                    <th>Lane</th>
+                    <th>Read 1 (R1) FASTQ</th>
+                    <th>R1 Size</th>
+                    <th>Read 2 (R2) FASTQ</th>
+                    <th>R2 Size</th>
+                    <th>Total Reads</th>
+                    <th>Q30 %</th>
+                    <th>Est. Coverage</th>
+                  </tr>
+                </thead>
+                <tbody id="laneTableBody">
+                  <!-- Rendered via JS -->
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Tab 5: Mitotic Checkpoint Pathway -->
+    <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>⌨ 5D 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>Switch to Clinical Phenotype tab</span></div>
+            <div class="shortcut-item"><kbd>2</kbd><span>Switch to Variant Navigator tab</span></div>
+            <div class="shortcut-item"><kbd>3</kbd><span>Switch to Mosaicism Spectrum tab</span></div>
+            <div class="shortcut-item"><kbd>4</kbd><span>Switch to WGS Sequencing tab</span></div>
+            <div class="shortcut-item"><kbd>5</kbd><span>Switch to Mitotic Pathway tab</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>