mukeshs/operify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Health page creation

Browse Source
This commit is contained in:
mukesh13
2025-08-12 11:50:37 +05:30
parent fcffef2883
commit 55b03ef145
62 changed files with 941 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
app/health/rare-disorders/components/OperifyExomeMito.jsx Normal file
View File

@ -0,0 +1,93 @@
export default function OperifyExomeMito() {
const features = [
{ title: "High Mean Target Depth", desc: "≥100X coverage for reliable detection." },
{ title: "High Base Quality", desc: "≥90% of bases with Q30 score." },
{ title: "Scope of Test", desc: "Covers SNVs/Indels, CNVs in nuclear and mitochondrial genome." },
{ title: "Uniparental Disomy", desc: "Detects regions important in rare recessive conditions." },
{ title: "Homologous Gene Analysis", desc: "Includes SMN1, SMN2, DMD." },
{ title: "Aneuploidy & Ploidy Estimation", desc: "Detects abnormal chromosome numbers and sex karyotype." },
{ title: "Reanalysis & Reclassification", desc: "Updates based on latest scientific knowledge." }
];
const genomeCoverage = [
{ genome: "Nuclear Genome", coverage: "Protein-coding regions of ~20000 genes" },
{ genome: "Mitochondrial genome", coverage: "37 genes" }
];
return (
<section className="mx-auto px-10 pt-12">
<h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Operify ExomeMito</h2>
<h3 className="text-xl font-semibold text-gray-700 mb-4">Boost diagnostic yield with Exome + Mito Sequencing</h3>
<div className="mb-8">
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
The Operify ExomeMito Panel offers a unified solution by integrating whole exome sequencing
with complete mitochondrial genome analysis—addressing both nuclear and mitochondrial causes
of disease.
</p>
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
This combined approach is especially valuable in diagnosing complex, multisystemic, and rare
disorders, where variants may exist across both genomes.
</p>
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
Mitochondrial disorders, though individually rare, are clinically significant, affecting
approximately 1 in 5,000 individuals and often missed in standard testing.
</p>
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
Studies show that adding mitochondrial sequencing to exome testing increases diagnostic
yield by up to 20%, offering greater clarity and clinical confidence. <em>(PMID: 30369941)</em>
</p>
<p className="text-gray-600 leading-relaxed text-base text-justify">
While screening for rare genetic disorders, it's essential not to overlook the rarest among
them-mitochondrial disorders, which occur in approximately 1 in 5,000 individuals. Although
individually rare, their cumulative impact is significant in the context of rare disease
diagnostics. Multiple studies have demonstrated a substantial increase in diagnostic yield—up
to 20%—when mitochondrial genome sequencing is performed alongside whole exome sequencing.
<em>Reference: PMID: 30369941</em>
</p>
</div>
<div className="mb-8">
<h3 className="text-2xl font-semibold text-gray-700 mb-4">Genome Coverage</h3>
<div className="overflow-x-auto">
<table className="w-full border-collapse border border-gray-300 rounded-lg">
<thead>
<tr className="bg-gray-50">
<th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Genome</th>
<th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Coverage</th>
</tr>
</thead>
<tbody>
{genomeCoverage.map((item, idx) => (
<tr key={idx} className="hover:bg-gray-50">
<td className="border border-gray-300 px-6 py-3 text-gray-700 font-medium">{item.genome}</td>
<td className="border border-gray-300 px-6 py-3 text-gray-600">{item.coverage}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<h3 className="text-2xl font-semibold text-gray-700 mb-4">Key Features</h3>
<div className="overflow-x-auto">
<table className="w-full border-collapse border border-gray-300 rounded-lg">
<thead>
<tr className="bg-gray-50">
<th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Feature</th>
<th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Description</th>
</tr>
</thead>
<tbody>
{features.map((feature, idx) => (
<tr key={idx} className="hover:bg-gray-50">
<td className="border border-gray-300 px-6 py-3 text-gray-700 font-medium">{feature.title}</td>
<td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
);
}