/**
* MVA Syndrome Multi-Dimensional Genomic Studio — Client Engine
* High-performance browser for Clinical Phenotypes, 5M WGS Variants, Mosaicism,
* Candidate Gene Burden, Syndromic Differentials, and Mitotic Interactome Matrix Tables.
*/
(function () {
'use strict';
// -------------------------------------------------------------
// Application State
// -------------------------------------------------------------
const state = {
clinical: null,
genesData: null,
chromosomes: null,
wgs: null,
pathway: null,
geneBurden: null,
syndromicDiff: null,
mosaicStrat: null,
mitoticMachinery: null,
karyotypeInstability: null,
// 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'),
// 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: Mosaic Allelic Stratification
mosaicStratTableBody: document.getElementById('mosaicStratTableBody'),
// Tab 6: Mitotic Machinery Interactome
mitoticMachineryTableBody: document.getElementById('mitoticMachineryTableBody'),
searchMitoticMachinery: document.getElementById('searchMitoticMachinery'),
// Tab 7: 24-Chromosome Karyotype Matrix
karyotypeMatrixTableBody: document.getElementById('karyotypeMatrixTableBody'),
searchKaryotypeMatrix: document.getElementById('searchKaryotypeMatrix'),
// Tab 8: Mosaicism Spectrum
mosaicListSummary: document.getElementById('mosaicListSummary'),
hetListSummary: document.getElementById('hetListSummary'),
homListSummary: document.getElementById('homListSummary'),
topMosaicTable: document.getElementById('topMosaicTable'),
// Tab 9: WGS
laneTableBody: document.getElementById('laneTableBody'),
// Tab 10: Pathway
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,
mosaicStratRes,
mitoticMachineryRes,
karyoInstabilityRes
] = 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/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())
]);
state.clinical = clinicalRes;
state.genesData = genesRes;
state.chromosomes = chrRes;
state.wgs = wgsRes;
state.pathway = pathRes;
state.geneBurden = geneBurdenRes;
state.syndromicDiff = syndromicDiffRes;
state.mosaicStrat = mosaicStratRes;
state.mitoticMachinery = mitoticMachineryRes;
state.karyotypeInstability = karyoInstabilityRes;
// 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();
} catch (e) {
console.error('Failed to load MVA datasets:', e);
}
}
function renderAllViews() {
renderClinicalTab();
renderChromosomeKaryotype();
applyVariantFilters();
renderGeneBurdenTable();
renderSyndromicDiffTable();
renderMosaicStratTable();
renderMitoticMachineryTable();
renderKaryotypeMatrixTable();
renderMosaicTab();
renderWGSTab();
renderPathwayTab();
}
// -------------------------------------------------------------
// 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} ${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 6: 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 7: 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 8: 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 9: WGS Sequencing Metrics
// -------------------------------------------------------------
function renderWGSTab() {
if (!state.wgs) return;
els.laneTableBody.innerHTML = '';
state.wgs.lanes.forEach(l => {
const tr = document.createElement('tr');
tr.innerHTML = `
${l.lane} ${l.r1_file} ${l.r1_size_gb} GB
${l.r2_file} ${l.r2_size_gb} GB
${l.total_reads_m} M
${l.q30_pct}% ${l.mean_coverage}× ${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 target = document.getElementById(tab.dataset.tab);
if (target) target.classList.add('active');
};
});
// 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.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 and 0)
window.onkeydown = (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
if (['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'].includes(e.key)) {
let idx = parseInt(e.key, 10) - 1;
if (e.key === '0') idx = 9;
if (els.navTabs[idx]) els.navTabs[idx].click();
} else if (e.key === '/') {
e.preventDefault();
if (els.navTabs[1]) els.navTabs[1].click();
els.variantSearch.focus();
} else if (e.key === 'Escape') {
els.modalVariant.classList.add('hidden');
els.modalHelp.classList.add('hidden');
}
};
}
// Launch on DOM ready
window.addEventListener('DOMContentLoaded', init);
})();