194 lines
8.6 KiB
JavaScript
194 lines
8.6 KiB
JavaScript
const LongReadComparison = () => {
|
|
const comparisonData = [
|
|
{
|
|
category: "Read Length",
|
|
illumina: "Paired-end 150 bp or 250bp\nHighly accurate (> 99.9%) while Limited to ~500bp",
|
|
pacbio: "Average ≥ 15 kb\nbp to kb",
|
|
nanopore: "Average > 17 kb\nKb to Mb"
|
|
},
|
|
{
|
|
category: "Variant Calling",
|
|
illumina: "Accurately detect the SNVs and InDels\nWhile Lower accuracy on the complex SVs detection",
|
|
pacbio: "Long Read Length with High Accuracy: Good coverage of highly repetition and complexity area\nDetect SVs with high precision",
|
|
nanopore: "Long Read Length with High Accuracy: Good coverage of highly repetition and complexity area\nDetect SVs with high precision"
|
|
},
|
|
{
|
|
category: "Amplification/GC Bias",
|
|
illumina: "PCR for cluster generation:\n1.Clonally amplified templates masquerade as variants\n2.Underrepresentation of AT-rich and GC-rich regions",
|
|
pacbio: "NO GC Bias & Amplification Bias\nPCR-free to allow a uniform coverage and High Contiguity",
|
|
nanopore: "NO GC Bias & Amplification Bias\nPCR-free to allow a uniform coverage and High Contiguity"
|
|
},
|
|
{
|
|
category: "Machine Errors",
|
|
illumina: "Signal Decay and Dephasing:\nGradual consumption of reagent\nSeq error rate increases with the length of reads",
|
|
pacbio: "Relaxed requirement for cycle efficiency",
|
|
nanopore: "Relaxed requirement for cycle efficiency"
|
|
},
|
|
{
|
|
category: "DNA Methylation Detection",
|
|
illumina: "WGBS or RRBS is required and limited on detection of CpG, CHH, CHG",
|
|
pacbio: "Simultaneous Epigenetic Characterization\nDiverse DNA methylation types: CpG, CHH, CHG, 6mA, 4mC, 5hmc",
|
|
nanopore: "Simultaneous Epigenetic Characterization\nDiverse DNA methylation types: CpG, CHH, CHG, 6mA, 4mC, 5hmc"
|
|
}
|
|
];
|
|
|
|
const formatContent = (content) => {
|
|
if (content.includes("Long Read Length")) {
|
|
return (
|
|
<div>
|
|
<span className="text-blue-600 font-medium">Long Read Length with High Accuracy:</span>
|
|
{content.replace("Long Read Length with High Accuracy:", "")}
|
|
</div>
|
|
);
|
|
} else if (content.includes("NO GC Bias")) {
|
|
return (
|
|
<div>
|
|
<span className="text-blue-600 font-medium">NO GC Bias & Amplification Bias</span>
|
|
{content.replace("NO GC Bias & Amplification Bias", "")}
|
|
</div>
|
|
);
|
|
} else if (content.includes("Simultaneous")) {
|
|
return (
|
|
<div>
|
|
<span className="text-blue-600 font-medium">Simultaneous Epigenetic Characterization</span>
|
|
{content.replace("Simultaneous Epigenetic Characterization", "")}
|
|
</div>
|
|
);
|
|
}
|
|
return content;
|
|
};
|
|
|
|
return (
|
|
<section className="py-4 bg-gray-50">
|
|
<div className="container max-w-none px-6">
|
|
<h2 className="text-3xl font-bold text-teal-700 mb-8">
|
|
Comparison of Sequencers
|
|
</h2>
|
|
|
|
{/* Original Image Section */}
|
|
<div className="mb-12">
|
|
<div className="text-center">
|
|
<img
|
|
src="/images/comparison-sequencers.png"
|
|
alt="Long Read Comparison Chart"
|
|
className="w-full max-w-4xl mx-auto rounded-lg border shadow-md"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Detailed Comparison Table Section */}
|
|
<div className="mb-6">
|
|
<h3 className="text-lg font-semibold text-gray-600 mb-4">
|
|
Comparison and specification of sequencing platforms between short-read and long-read sequencing on WGS
|
|
</h3>
|
|
<div className="mb-6 text-justify">
|
|
<p className="text-gray-600 leading-relaxed text-base">
|
|
Different sequencing platforms have unique characteristics and applications. The comparison below highlights key differences:
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto mb-8 justify-center">
|
|
<table className="w-full border-collapse border border-gray-300 text-sm bg-white shadow-sm">
|
|
<thead>
|
|
<tr className="bg-teal-50">
|
|
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
|
|
Platform Types
|
|
</th>
|
|
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
|
|
Illumina NovaSeq 6000
|
|
</th>
|
|
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
|
|
PacBio Sequel II/IIe
|
|
</th>
|
|
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
|
|
Nanopore PromethION
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{comparisonData.map((row, index) => (
|
|
<tr key={index} className={`${index % 2 === 1 ? 'bg-gray-50' : 'bg-white'} hover:bg-teal-25 transition-colors`}>
|
|
<td className="border border-gray-300 px-4 py-3 align-top text-gray-600 font-medium text-base">
|
|
{row.category}
|
|
</td>
|
|
<td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
|
|
<div className="whitespace-pre-line">
|
|
{row.illumina}
|
|
</div>
|
|
</td>
|
|
<td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
|
|
<div className="whitespace-pre-line">
|
|
{formatContent(row.pacbio)}
|
|
</div>
|
|
</td>
|
|
<td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
|
|
<div className="whitespace-pre-line">
|
|
{formatContent(row.nanopore)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Key Technology Highlights */}
|
|
<div className="bg-gradient-to-br from-teal-50 to-blue-50 rounded-lg p-6">
|
|
<h3 className="text-lg font-semibold text-gray-600 mb-4 border-b border-teal-200 pb-2">
|
|
Key Technology Highlights
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="bg-white rounded-lg p-4 shadow-sm">
|
|
<h4 className="font-medium text-teal-600 mb-2">Oxford Nanopore</h4>
|
|
<ul className="space-y-1">
|
|
{["Real-time sequencing via protein nanopores", "Portable devices for field diagnostics", "Direct base modification detection"].map((item, index) => (
|
|
<li key={index} className="flex items-start">
|
|
<span
|
|
className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
|
style={{backgroundColor: '#faae31'}}
|
|
></span>
|
|
<span className="text-sm text-gray-600">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg p-4 shadow-sm">
|
|
<h4 className="font-medium text-teal-600 mb-2">PacBio SMRT</h4>
|
|
<ul className="space-y-1">
|
|
{["Hi-Fi reads with 99.9% accuracy", "Excellent for complex genomes", "Haplotype resolution in polyploids"].map((item, index) => (
|
|
<li key={index} className="flex items-start">
|
|
<span
|
|
className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
|
style={{backgroundColor: '#faae31'}}
|
|
></span>
|
|
<span className="text-sm text-gray-600">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg p-4 shadow-sm">
|
|
<h4 className="font-medium text-teal-600 mb-2">Illumina</h4>
|
|
<ul className="space-y-1">
|
|
{["High accuracy for SNVs and InDels", "Cost-effective for large studies", "Mature bioinformatics tools"].map((item, index) => (
|
|
<li key={index} className="flex items-start">
|
|
<span
|
|
className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
|
style={{backgroundColor: '#faae31'}}
|
|
></span>
|
|
<span className="text-sm text-gray-600">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default LongReadComparison; |