/**
* MVA Syndrome Multi-Dimensional Genomic Studio — Client Engine
* High-performance browser for Clinical Phenotypes, 5M WGS Variants, Mosaicism,
* Candidate Gene Burden, Syndromic Differentials, ACMG Classifications, Precision Oncology,
* 4-Lane Flowcell QC, Mitotic Interactome, and the 219-Table Omniverse Hub.
*/
(function () {
'use strict';
// -------------------------------------------------------------
// Application State
// -------------------------------------------------------------
const state = {
clinical: null,
genesData: null,
chromosomes: null,
wgs: null,
pathway: null,
geneBurden: null,
syndromicDiff: null,
acmgMatrix: null,
therapeuticTargets: null,
mosaicStrat: null,
mitoticMachinery: null,
karyotypeInstability: null,
flowcellQc: null,
// 219-Table Omniverse Hub
omniCatalog: null,
omniActiveTableData: null,
omniSelectedCat: 'ALL',
omniSearchQuery: '',
omniActiveTableId: 'clin_01_hpo_hierarchy',
omniTableRowFilter: '',
// Variant Filters
selectedGene: 'ALL',
selectedType: 'ALL',
selectedMosaic: 'ALL',
selectedChr: null,
searchQuery: '',
// Flat List of All Candidate Variants
allVariants: [],
filteredVariants: []
};
// -------------------------------------------------------------
// DOM References
// -------------------------------------------------------------
const els = {
// Tabs
navTabs: document.querySelectorAll('.nav-tab'),
tabContents: document.querySelectorAll('.tab-content'),
// Stats Header
statCandidateCount: document.getElementById('statCandidateCount'),
statMosaicCount: document.getElementById('statMosaicCount'),
// Omniverse Hub Elements
omniTotalTables: document.getElementById('omniTotalTables'),
omniFilteredCount: document.getElementById('omniFilteredCount'),
omniCategoryPills: document.getElementById('omniCategoryPills'),
omniGlobalSearch: document.getElementById('omniGlobalSearch'),
omniTableSelect: document.getElementById('omniTableSelect'),
omniActiveCat: document.getElementById('omniActiveCat'),
omniActiveId: document.getElementById('omniActiveId'),
omniActiveRows: document.getElementById('omniActiveRows'),
omniActiveTitle: document.getElementById('omniActiveTitle'),
omniActiveDesc: document.getElementById('omniActiveDesc'),
omniTableRowFilter: document.getElementById('omniTableRowFilter'),
btnExportCSV: document.getElementById('btnExportCSV'),
btnExportJSON: document.getElementById('btnExportJSON'),
omniTableHead: document.getElementById('omniTableHead'),
omniTableBody: document.getElementById('omniTableBody'),
omniDiscoveryGrid: document.getElementById('omniDiscoveryGrid'),
// Tab 1: Clinical
hpoList: document.getElementById('hpoList'),
hpoCountBadge: document.getElementById('hpoCountBadge'),
// Tab 2: Variants
geneFilter: document.getElementById('geneFilter'),
typeFilter: document.getElementById('typeFilter'),
mosaicFilter: document.getElementById('mosaicFilter'),
variantSearch: document.getElementById('variantSearch'),
filteredCount: document.getElementById('filteredCount'),
totalCandidateCount: document.getElementById('totalCandidateCount'),
chromosomeKaryotype: document.getElementById('chromosomeKaryotype'),
btnResetChr: document.getElementById('btnResetChr'),
variantTableBody: document.getElementById('variantTableBody'),
// Tab 3: Gene Burden Matrix
geneBurdenTableBody: document.getElementById('geneBurdenTableBody'),
searchGeneBurden: document.getElementById('searchGeneBurden'),
// Tab 4: Syndromic Differential Matrix
syndromicDiffTableBody: document.getElementById('syndromicDiffTableBody'),
searchSyndromicDiff: document.getElementById('searchSyndromicDiff'),
// Tab 5: ACMG Variant Classification
acmgMatrixTableBody: document.getElementById('acmgMatrixTableBody'),
searchAcmgMatrix: document.getElementById('searchAcmgMatrix'),
// Tab 6: Precision Oncology Targets
therapeuticTargetsTableBody: document.getElementById('therapeuticTargetsTableBody'),
searchTherapeuticTargets: document.getElementById('searchTherapeuticTargets'),
// Tab 7: Mosaic Allelic Stratification
mosaicStratTableBody: document.getElementById('mosaicStratTableBody'),
// Tab 8: Mitotic Machinery Interactome
mitoticMachineryTableBody: document.getElementById('mitoticMachineryTableBody'),
searchMitoticMachinery: document.getElementById('searchMitoticMachinery'),
// Tab 9: 24-Chromosome Karyotype Matrix
karyotypeMatrixTableBody: document.getElementById('karyotypeMatrixTableBody'),
searchKaryotypeMatrix: document.getElementById('searchKaryotypeMatrix'),
// Tab 10: Mosaicism Spectrum
mosaicListSummary: document.getElementById('mosaicListSummary'),
hetListSummary: document.getElementById('hetListSummary'),
homListSummary: document.getElementById('homListSummary'),
topMosaicTable: document.getElementById('topMosaicTable'),
// Tab 11: WGS / Flowcell QC
flowcellQcTableBody: document.getElementById('flowcellQcTableBody'),
// Tab 12: Pathway Network
pathwayComplexes: document.getElementById('pathwayComplexes'),
// Modals
modalVariant: document.getElementById('modalVariant'),
modalVarTitle: document.getElementById('modalVarTitle'),
modalVarBody: document.getElementById('modalVarBody'),
btnCloseVarModal: document.getElementById('btnCloseVarModal'),
modalHelp: document.getElementById('modalHelp'),
btnShortcuts: document.getElementById('btnShortcuts'),
btnCloseHelpModal: document.getElementById('btnCloseHelpModal')
};
// -------------------------------------------------------------
// Initialization
// -------------------------------------------------------------
async function init() {
setupEventListeners();
await loadAllDatasets();
renderAllViews();
}
async function loadAllDatasets() {
try {
const [
clinicalRes,
genesRes,
chrRes,
wgsRes,
pathRes,
geneBurdenRes,
syndromicDiffRes,
acmgRes,
therapeuticRes,
mosaicStratRes,
mitoticMachineryRes,
karyoInstabilityRes,
flowcellQcRes,
omniCatalogRes
] = await Promise.all([
fetch('data/clinical_phenotype.json').then(r => r.json()),
fetch('data/candidate_genes_variants.json').then(r => r.json()),
fetch('data/chromosome_stats.json').then(r => r.json()),
fetch('data/wgs_sequencing_metrics.json').then(r => r.json()),
fetch('data/pathway_network.json').then(r => r.json()),
fetch('data/gene_burden_matrix.json').then(r => r.json()),
fetch('data/syndromic_differential_matrix.json').then(r => r.json()),
fetch('data/acmg_variant_classification_matrix.json').then(r => r.json()),
fetch('data/therapeutic_targets_matrix.json').then(r => r.json()),
fetch('data/mosaic_stratification_matrix.json').then(r => r.json()),
fetch('data/mitotic_machinery_matrix.json').then(r => r.json()),
fetch('data/karyotype_instability_matrix.json').then(r => r.json()),
fetch('data/flowcell_quality_audit_matrix.json').then(r => r.json()),
fetch('data/table_catalog.json').then(r => r.json()).catch(() => null)
]);
state.clinical = clinicalRes;
state.genesData = genesRes;
state.chromosomes = chrRes;
state.wgs = wgsRes;
state.pathway = pathRes;
state.geneBurden = geneBurdenRes;
state.syndromicDiff = syndromicDiffRes;
state.acmgMatrix = acmgRes;
state.therapeuticTargets = therapeuticRes;
state.mosaicStrat = mosaicStratRes;
state.mitoticMachinery = mitoticMachineryRes;
state.karyotypeInstability = karyoInstabilityRes;
state.flowcellQc = flowcellQcRes;
state.omniCatalog = omniCatalogRes;
// Flatten all candidate variants
state.allVariants = [];
Object.entries(state.genesData.genes).forEach(([gname, gentry]) => {
gentry.variants.forEach(v => {
state.allVariants.push({ ...v, geneInfo: gentry.info });
});
});
// Update Header Stats
els.statCandidateCount.textContent = state.allVariants.length.toLocaleString();
const mosaicCount = state.allVariants.filter(v => v.classification === 'Mosaic Somatic Candidate').length;
els.statMosaicCount.textContent = mosaicCount.toLocaleString();
els.totalCandidateCount.textContent = state.allVariants.length.toLocaleString();
if (state.omniCatalog && els.omniTotalTables) {
els.omniTotalTables.textContent = state.omniCatalog.total_tables || '219';
}
} catch (e) {
console.error('Failed to load MVA datasets:', e);
}
}
function renderAllViews() {
renderOmniverseCatalog();
loadAndRenderOmniverseTable(state.omniActiveTableId);
renderClinicalTab();
renderChromosomeKaryotype();
applyVariantFilters();
renderGeneBurdenTable();
renderSyndromicDiffTable();
renderAcmgMatrixTable();
renderTherapeuticTargetsTable();
renderMosaicStratTable();
renderMitoticMachineryTable();
renderKaryotypeMatrixTable();
renderMosaicTab();
renderFlowcellQcTable();
renderPathwayTab();
}
// -------------------------------------------------------------
// Omniverse 219-Table Hub Engine
// -------------------------------------------------------------
function renderOmniverseCatalog() {
if (!state.omniCatalog) return;
let tables = state.omniCatalog.tables || [];
// Filter by Category
if (state.omniSelectedCat !== 'ALL') {
tables = tables.filter(t => t.category === state.omniSelectedCat);
}
// Filter by Search Query
if (state.omniSearchQuery.trim() !== '') {
const q = state.omniSearchQuery.toLowerCase().trim();
tables = tables.filter(t =>
t.title.toLowerCase().includes(q) ||
t.description.toLowerCase().includes(q) ||
t.id.toLowerCase().includes(q) ||
(t.tags && t.tags.some(tag => tag.toLowerCase().includes(q)))
);
}
if (els.omniFilteredCount) {
els.omniFilteredCount.textContent = tables.length;
}
// Populate Select Dropdown
if (els.omniTableSelect) {
els.omniTableSelect.innerHTML = '';
tables.forEach(t => {
const opt = document.createElement('option');
opt.value = t.id;
opt.textContent = `[${t.category}] ${t.title} (${t.row_count} rows)`;
if (t.id === state.omniActiveTableId) opt.selected = true;
els.omniTableSelect.appendChild(opt);
});
}
// Populate Discovery Grid Cards
if (els.omniDiscoveryGrid) {
els.omniDiscoveryGrid.innerHTML = '';
tables.forEach(t => {
const card = document.createElement('div');
card.className = `omni-card-item ${t.id === state.omniActiveTableId ? 'selected' : ''}`;
card.innerHTML = `
${t.category}
${t.row_count} rows × ${t.columns_count} cols
${t.title}
${t.description}
`;
card.onclick = () => {
loadAndRenderOmniverseTable(t.id);
};
els.omniDiscoveryGrid.appendChild(card);
});
}
}
async function loadAndRenderOmniverseTable(tableId) {
state.omniActiveTableId = tableId;
try {
const res = await fetch(`data/tables/${tableId}.json`);
if (!res.ok) throw new Error(`Table ${tableId} not found`);
const tableData = await res.json();
state.omniActiveTableData = tableData;
// Update Card Meta
if (els.omniActiveCat) els.omniActiveCat.textContent = tableData.category;
if (els.omniActiveId) els.omniActiveId.textContent = tableData.id;
if (els.omniActiveRows) els.omniActiveRows.textContent = `${tableData.row_count} rows × ${tableData.columns.length} columns`;
if (els.omniActiveTitle) els.omniActiveTitle.textContent = tableData.title;
if (els.omniActiveDesc) els.omniActiveDesc.textContent = tableData.description;
renderOmniverseActiveTableRows();
// Update Active Highlight in Discovery Grid
document.querySelectorAll('.omni-card-item').forEach(card => {
card.classList.remove('selected');
});
if (els.omniTableSelect) els.omniTableSelect.value = tableId;
} catch (e) {
console.error(`Failed to load table ${tableId}:`, e);
}
}
function renderOmniverseActiveTableRows() {
if (!state.omniActiveTableData) return;
const { columns, rows } = state.omniActiveTableData;
// Render Headers
if (els.omniTableHead) {
els.omniTableHead.innerHTML = `${columns.map(c => `${c} `).join('')} `;
}
// Filter Rows if row filter is active
let displayRows = rows;
if (state.omniTableRowFilter.trim() !== '') {
const q = state.omniTableRowFilter.toLowerCase().trim();
displayRows = rows.filter(r => r.some(cell => String(cell).toLowerCase().includes(q)));
}
// Render Body
if (els.omniTableBody) {
els.omniTableBody.innerHTML = '';
if (displayRows.length === 0) {
els.omniTableBody.innerHTML = `
No rows match the filter query in this table.
`;
return;
}
displayRows.forEach(row => {
const tr = document.createElement('tr');
tr.innerHTML = row.map((cell, idx) => {
const str = String(cell);
let styledCell = str;
if (idx === 0) {
styledCell = `${str} `;
} else if (str.includes('%') || str.includes('bp') || str.includes('Gb') || str.includes('×') || str.includes('Phred')) {
styledCell = `${str} `;
}
if (str.includes('Pathogenic') || str.includes('Critical') || str.includes('Severe')) {
styledCell = `${str} `;
} else if (str.includes('Synergistic') || str.includes('Nominal') || str.includes('Concordant')) {
styledCell = `${str} `;
}
return `${styledCell} `;
}).join('');
els.omniTableBody.appendChild(tr);
});
}
}
function exportActiveTable(format) {
if (!state.omniActiveTableData) return;
const { id, title, columns, rows } = state.omniActiveTableData;
let content = '';
let mimeType = 'text/plain';
let filename = `${id}.${format}`;
if (format === 'csv') {
mimeType = 'text/csv';
const escapeCsv = (val) => `"${String(val).replace(/"/g, '""')}"`;
const headerLine = columns.map(escapeCsv).join(',');
const rowLines = rows.map(r => r.map(escapeCsv).join(','));
content = [headerLine, ...rowLines].join('\n');
} else {
mimeType = 'application/json';
content = JSON.stringify(state.omniActiveTableData, null, 2);
}
const blob = new Blob([content], { type: mimeType });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// -------------------------------------------------------------
// Tab 1: Clinical Phenotype
// -------------------------------------------------------------
function renderClinicalTab() {
if (!state.clinical) return;
els.hpoList.innerHTML = '';
const feats = state.clinical.clinical_features || [];
els.hpoCountBadge.textContent = `${feats.length} Phenotypes`;
feats.forEach(f => {
const item = document.createElement('div');
item.className = 'hpo-card-item';
item.innerHTML = `
${f.notes}
`;
els.hpoList.appendChild(item);
});
}
// -------------------------------------------------------------
// Tab 2: Chromosome Ideogram & Variant Table
// -------------------------------------------------------------
function renderChromosomeKaryotype() {
if (!state.chromosomes) return;
els.chromosomeKaryotype.innerHTML = '';
const maxDensity = Math.max(...state.chromosomes.chromosomes.map(c => c.density_per_mb));
const mvaChromosomes = new Set(['15', '11', '5', '18', '7', '4', '2', '10', '9', '1', '16', '20', '17', '14']);
state.chromosomes.chromosomes.forEach(c => {
const pill = document.createElement('div');
pill.className = `chr-pill-bar ${mvaChromosomes.has(c.chr) ? 'has-mva' : ''} ${state.selectedChr === c.chr ? 'selected' : ''}`;
pill.title = `Chr ${c.chr}: ${c.total_variants.toLocaleString()} variants (${c.density_per_mb} / Mb)`;
const fillPct = Math.max(15, (c.density_per_mb / maxDensity) * 100);
pill.innerHTML = `
${c.chr}
`;
pill.onclick = () => {
state.selectedChr = state.selectedChr === c.chr ? null : c.chr;
renderChromosomeKaryotype();
applyVariantFilters();
};
els.chromosomeKaryotype.appendChild(pill);
});
}
function applyVariantFilters() {
let list = state.allVariants;
if (state.selectedGene !== 'ALL') {
list = list.filter(v => v.gene === state.selectedGene);
}
if (state.selectedType !== 'ALL') {
list = list.filter(v => v.type === state.selectedType);
}
if (state.selectedMosaic !== 'ALL') {
list = list.filter(v => v.classification === state.selectedMosaic);
}
if (state.selectedChr) {
list = list.filter(v => v.chrom === state.selectedChr);
}
if (state.searchQuery.trim() !== '') {
const q = state.searchQuery.toLowerCase().trim();
list = list.filter(v =>
String(v.pos).includes(q) ||
v.dbsnp.toLowerCase().includes(q) ||
v.gene.toLowerCase().includes(q) ||
v.ref.toLowerCase().includes(q) ||
v.alt.toLowerCase().includes(q)
);
}
state.filteredVariants = list;
els.filteredCount.textContent = list.length.toLocaleString();
renderVariantTable();
}
function renderVariantTable() {
els.variantTableBody.innerHTML = '';
const slice = state.filteredVariants.slice(0, 150);
if (slice.length === 0) {
els.variantTableBody.innerHTML = `
No variants found matching the selected filter criteria.
`;
return;
}
slice.forEach(v => {
const tr = document.createElement('tr');
let classTag = `${v.classification} `;
if (v.classification === 'Mosaic Somatic Candidate') {
classTag = `⚡ Mosaic (${(v.vaf * 100).toFixed(1)}%) `;
} else if (v.classification === 'Germline Homozygous') {
classTag = `Homozygous `;
}
tr.innerHTML = `
${v.gene} chr${v.chrom}:${v.pos.toLocaleString()}
${v.ref} → ${v.alt} ${v.type}
${v.gt}
${v.ad_ref},${v.ad_alt}
${v.dp}×
${(v.vaf * 100).toFixed(1)}% ${classTag}
${v.filter} Inspect ${g.pathogenicity_tier} `;
if (g.pathogenicity_tier.includes('Tier 1')) {
tierBadge = `${g.pathogenicity_tier} `;
} else if (g.pathogenicity_tier.includes('Tier 3')) {
tierBadge = `${g.pathogenicity_tier} `;
}
tr.innerHTML = `
${g.gene} ${g.omim} ${g.cytoband} ${g.syndrome} ${g.complex} ${g.role} ${g.inheritance} ${g.patient_variants} ${g.highest_vaf} ${g.mosaic_candidates > 0 ? `${g.mosaic_candidates} loci ` : '0'}
${g.clinical_link}
${tierBadge}
`;
els.geneBurdenTableBody.appendChild(tr);
});
}
// -------------------------------------------------------------
// Tab 4: Phenotype Differential Matrix
// -------------------------------------------------------------
function renderSyndromicDiffTable(filter = '') {
if (!state.syndromicDiff) return;
els.syndromicDiffTableBody.innerHTML = '';
let phenos = state.syndromicDiff.phenotypes || [];
if (filter.trim() !== '') {
const q = filter.toLowerCase().trim();
phenos = phenos.filter(p =>
p.feature.toLowerCase().includes(q) ||
p.hpo.toLowerCase().includes(q) ||
p.competing_syndromes.toLowerCase().includes(q) ||
p.mva_genes.toLowerCase().includes(q) ||
p.molecular_mechanism.toLowerCase().includes(q)
);
}
phenos.forEach(p => {
const tr = document.createElement('tr');
tr.innerHTML = `
${p.feature} ${p.hpo}
${p.mva_syndrome_match} ${p.mva_genes} ${p.competing_syndromes}
${p.molecular_mechanism}
${p.discriminatory_power} ${v.acmg_class} `;
if (v.acmg_class.includes('Likely Pathogenic')) {
classBadge = `${v.acmg_class} `;
} else if (v.acmg_class.includes('VUS') || v.acmg_class.includes('Uncertain')) {
classBadge = `${v.acmg_class} `;
}
tr.innerHTML = `
${v.gene} ${v.hgvsc} ${v.genomic_coord}
${v.ref_alt}
${v.variant_type}
${v.vaf} ${v.acmg_criteria}
${v.gnomad_af}
${v.revel_cadd}
${classBadge}
`;
els.acmgMatrixTableBody.appendChild(tr);
});
}
// -------------------------------------------------------------
// Tab 6: Precision Oncology & Therapeutic Targets
// -------------------------------------------------------------
function renderTherapeuticTargetsTable(filter = '') {
if (!state.therapeuticTargets) return;
els.therapeuticTargetsTableBody.innerHTML = '';
let targets = state.therapeuticTargets.targets || [];
if (filter.trim() !== '') {
const q = filter.toLowerCase().trim();
targets = targets.filter(t =>
t.drug_name.toLowerCase().includes(q) ||
t.target_gene.toLowerCase().includes(q) ||
t.mechanism.toLowerCase().includes(q) ||
t.mva_relevance.toLowerCase().includes(q) ||
t.clinical_status.toLowerCase().includes(q)
);
}
targets.forEach(t => {
const tr = document.createElement('tr');
tr.innerHTML = `
${t.drug_name} ${t.target_gene} ${t.target_class} ${t.mechanism}
${t.mva_relevance}
${t.clinical_status} ${t.evidence_tier} ${b.vaf_range} ${b.category} ${b.inferred_timing} ${b.variant_count} ${b.mean_dp}
${b.tissue_penetrance} ${b.key_genes_affected} ${b.biological_impact}
`;
els.mosaicStratTableBody.appendChild(tr);
});
}
// -------------------------------------------------------------
// Tab 8: Mitotic Machinery & Interactome Functional Table
// -------------------------------------------------------------
function renderMitoticMachineryTable(filter = '') {
if (!state.mitoticMachinery) return;
els.mitoticMachineryTableBody.innerHTML = '';
let proteins = state.mitoticMachinery.proteins || [];
if (filter.trim() !== '') {
const q = filter.toLowerCase().trim();
proteins = proteins.filter(p =>
p.protein.toLowerCase().includes(q) ||
p.uniprot.toLowerCase().includes(q) ||
p.complex.toLowerCase().includes(q) ||
p.mva_type.toLowerCase().includes(q) ||
p.biochemical_function.toLowerCase().includes(q)
);
}
proteins.forEach(p => {
const tr = document.createElement('tr');
tr.innerHTML = `
${p.protein} UniProt: ${p.uniprot}
${p.length_aa} aa
${p.subcellular_location}
${p.biochemical_function}
${p.complex} ${p.mva_type} ${p.proband_findings}
`;
els.mitoticMachineryTableBody.appendChild(tr);
});
}
// -------------------------------------------------------------
// Tab 9: 24-Chromosome Karyotype Matrix
// -------------------------------------------------------------
function renderKaryotypeMatrixTable(filter = '') {
if (!state.karyotypeInstability) return;
els.karyotypeMatrixTableBody.innerHTML = '';
let chrs = state.karyotypeInstability.chromosomes || [];
if (filter.trim() !== '') {
const q = filter.toLowerCase().trim();
chrs = chrs.filter(c =>
c.chr.toLowerCase().includes(q) ||
c.aneuploidy_vulnerability.toLowerCase().includes(q)
);
}
chrs.forEach(c => {
const tr = document.createElement('tr');
const isMvaKey = ['chr15', 'chr11', 'chr5', 'chr18', 'chr7', 'chr8'].includes(c.chr);
tr.innerHTML = `
${c.chr} ${c.length_bp}
${c.total_variants} ${c.snvs}
${c.indels}
${c.density_per_mb} ${c.snv_indel_ratio}
${c.heterozygous} / ${c.homozygous}
${c.aneuploidy_vulnerability}
`;
els.karyotypeMatrixTableBody.appendChild(tr);
});
}
// -------------------------------------------------------------
// Tab 10: Mosaicism Spectrum
// -------------------------------------------------------------
function renderMosaicTab() {
const mosaicVars = state.allVariants.filter(v => v.classification === 'Mosaic Somatic Candidate');
const hetVars = state.allVariants.filter(v => v.classification === 'Germline Heterozygous');
const homVars = state.allVariants.filter(v => v.classification === 'Germline Homozygous');
els.mosaicListSummary.innerHTML = `
${mosaicVars.length} variants
Putative post-zygotic mosaic somatic alterations across candidate loci.
`;
els.hetListSummary.innerHTML = `
${hetVars.length} variants
Standard heterozygous germline alleles (~50% VAF).
`;
els.homListSummary.innerHTML = `
${homVars.length} variants
Homozygous germline alternate alleles (100% VAF).
`;
// Top mosaic loci
els.topMosaicTable.innerHTML = '';
mosaicVars.slice(0, 15).forEach(v => {
const row = document.createElement('div');
row.className = 'mosaic-row-card';
row.innerHTML = `
${v.gene} (chr${v.chrom}:${v.pos})
${v.ref} → ${v.alt}
VAF: ${(v.vaf * 100).toFixed(1)}%
DP: ${v.dp}× (AD: ${v.ad_ref},${v.ad_alt})
`;
els.topMosaicTable.appendChild(row);
});
}
// -------------------------------------------------------------
// Tab 11: 4-Lane Sequencing QC Audit Table
// -------------------------------------------------------------
function renderFlowcellQcTable() {
if (!state.flowcellQc) return;
els.flowcellQcTableBody.innerHTML = '';
state.flowcellQc.lanes.forEach(l => {
const tr = document.createElement('tr');
tr.innerHTML = `
${l.lane_id}
${l.r1_file} ${l.r2_file}
${l.total_size_gb}
${l.read_pairs} ${l.q30_pct} ${l.mean_gc}
${l.mean_coverage} ${l.dup_rate}
${l.mapping_rate} ${l.flowcell_tile_status} ${c.name}
${c.components.map(comp => `${comp} `).join('')}
${c.role}
`;
els.pathwayComplexes.appendChild(card);
});
}
// -------------------------------------------------------------
// Modal: Variant Inspection
// -------------------------------------------------------------
function openVariantModal(v) {
els.modalVarTitle.textContent = `🧬 ${v.gene} — chr${v.chrom}:${v.pos.toLocaleString()}`;
els.modalVarBody.innerHTML = `
Gene: ${v.gene}
Role: ${v.geneInfo.role}
Position (GRCh38): chr${v.chrom}:${v.pos}
dbSNP Accession: ${v.dbsnp}
Ref → Alt Allele: ${v.ref} → ${v.alt}
Variant Type: ${v.type}
Genotype: ${v.gt}
VAF (Allele Fraction): ${(v.vaf * 100).toFixed(1)}%
Allelic Depth (Ref, Alt): ${v.ad_ref}, ${v.ad_alt}
Total Sequencing Depth: ${v.dp}×
GATK Quality Score: QUAL = ${v.qual}
Filter Status: ${v.filter}
Classification:
${v.classification}
${v.classification === 'Mosaic Somatic Candidate'
? 'This variant exhibits an allelic frequency between 5% and 38%, which is a hallmark signature of post-zygotic somatic mosaicism in Mosaic Variegated Aneuploidy (MVA).'
: 'Consistent with Mendelian germline inheritance at high sequencing depth.'}
`;
els.modalVariant.classList.remove('hidden');
}
// -------------------------------------------------------------
// Event Listeners & Shortcuts
// -------------------------------------------------------------
function setupEventListeners() {
// Navigation Tabs
els.navTabs.forEach(tab => {
tab.onclick = () => {
els.navTabs.forEach(t => t.classList.remove('active'));
els.tabContents.forEach(c => c.classList.remove('active'));
tab.classList.add('active');
const targetId = tab.dataset.tab;
const targetEl = document.getElementById(targetId);
if (targetEl) {
targetEl.classList.add('active');
window.scrollTo({ top: 0, behavior: 'smooth' });
}
};
});
// Omniverse Category Filter Pills
if (els.omniCategoryPills) {
els.omniCategoryPills.addEventListener('click', (e) => {
if (e.target.classList.contains('cat-pill')) {
document.querySelectorAll('.cat-pill').forEach(p => p.classList.remove('active'));
e.target.classList.add('active');
state.omniSelectedCat = e.target.dataset.cat;
renderOmniverseCatalog();
}
});
}
// Omniverse Global Search
if (els.omniGlobalSearch) {
els.omniGlobalSearch.oninput = (e) => {
state.omniSearchQuery = e.target.value;
renderOmniverseCatalog();
};
}
// Omniverse Dropdown Switcher
if (els.omniTableSelect) {
els.omniTableSelect.onchange = (e) => {
loadAndRenderOmniverseTable(e.target.value);
};
}
// Omniverse Row Filter
if (els.omniTableRowFilter) {
els.omniTableRowFilter.oninput = (e) => {
state.omniTableRowFilter = e.target.value;
renderOmniverseActiveTableRows();
};
}
// Omniverse Exports
if (els.btnExportCSV) els.btnExportCSV.onclick = () => exportActiveTable('csv');
if (els.btnExportJSON) els.btnExportJSON.onclick = () => exportActiveTable('json');
// Variant Filters
els.geneFilter.onchange = (e) => {
state.selectedGene = e.target.value;
applyVariantFilters();
};
els.typeFilter.onchange = (e) => {
state.selectedType = e.target.value;
applyVariantFilters();
};
els.mosaicFilter.onchange = (e) => {
state.selectedMosaic = e.target.value;
applyVariantFilters();
};
els.variantSearch.oninput = (e) => {
state.searchQuery = e.target.value;
applyVariantFilters();
};
els.btnResetChr.onclick = () => {
state.selectedChr = null;
renderChromosomeKaryotype();
applyVariantFilters();
};
// Infotable Search Filters
if (els.searchGeneBurden) {
els.searchGeneBurden.oninput = (e) => renderGeneBurdenTable(e.target.value);
}
if (els.searchSyndromicDiff) {
els.searchSyndromicDiff.oninput = (e) => renderSyndromicDiffTable(e.target.value);
}
if (els.searchAcmgMatrix) {
els.searchAcmgMatrix.oninput = (e) => renderAcmgMatrixTable(e.target.value);
}
if (els.searchTherapeuticTargets) {
els.searchTherapeuticTargets.oninput = (e) => renderTherapeuticTargetsTable(e.target.value);
}
if (els.searchMitoticMachinery) {
els.searchMitoticMachinery.oninput = (e) => renderMitoticMachineryTable(e.target.value);
}
if (els.searchKaryotypeMatrix) {
els.searchKaryotypeMatrix.oninput = (e) => renderKaryotypeMatrixTable(e.target.value);
}
// Modals
els.btnCloseVarModal.onclick = () => els.modalVariant.classList.add('hidden');
els.btnShortcuts.onclick = () => els.modalHelp.classList.remove('hidden');
els.btnCloseHelpModal.onclick = () => els.modalHelp.classList.add('hidden');
// Keyboard Shortcuts (1-9, 0, Q, W, E)
window.onkeydown = (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
const key = e.key.toLowerCase();
let tabIndex = -1;
if (key === 'e') {
tabIndex = 0; // Omniverse Hub
} else if (['1','2','3','4','5','6','7','8','9'].includes(key)) {
tabIndex = parseInt(key, 10);
} else if (key === '0') {
tabIndex = 10;
} else if (key === 'q') {
tabIndex = 11;
} else if (key === 'w') {
tabIndex = 12;
} else if (key === '/') {
e.preventDefault();
if (els.navTabs[2]) els.navTabs[2].click();
els.variantSearch.focus();
return;
} else if (key === 'escape') {
els.modalVariant.classList.add('hidden');
els.modalHelp.classList.add('hidden');
return;
}
if (tabIndex >= 0 && els.navTabs[tabIndex]) {
els.navTabs[tabIndex].click();
}
};
}
// Launch on DOM ready
window.addEventListener('DOMContentLoaded', init);
})();