Docker config
This commit is contained in:
@ -0,0 +1,19 @@
|
||||
import AdvantagesLayout from '../../../components/shared/AdvantagesLayout';
|
||||
|
||||
const LongReadAdvantages = () => {
|
||||
const advantageItems = [
|
||||
"Captures long DNA strands in a single read, providing complete and accurate genome representation.",
|
||||
"Reduces gaps and errors, enabling precise detection of large structural variants.",
|
||||
"Facilitates high-quality de novo genome assembly.",
|
||||
"Real-time sequencing allows faster insights and decision-making, especially in clinical settings."
|
||||
];
|
||||
|
||||
return (
|
||||
<AdvantagesLayout
|
||||
title="Advantages of Long Read Sequencing"
|
||||
advantageItems={advantageItems}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default LongReadAdvantages;
|
||||
@ -0,0 +1,20 @@
|
||||
// LongReadApplications.jsx
|
||||
import ApplicationsLayout from '../../../components/shared/ApplicationsLayout';
|
||||
|
||||
const LongReadApplications = () => {
|
||||
const applicationItems = [
|
||||
"Structural Variant Detection- Identifies large insertions, deletions, duplications, inversions, and translocations that short reads often miss.",
|
||||
"De Novo Genome Assembly- Generates complete genome assemblies even in repetitive or uncharted genomic regions.",
|
||||
"Haplotype Phasing- Spans long stretches of DNA, useful for understanding inherited traits and allelic relationships.",
|
||||
"Complex Region Analysis- Effective in resolving telomeres, centromeres, MHC, and other challenging genomic regions."
|
||||
];
|
||||
|
||||
return (
|
||||
<ApplicationsLayout
|
||||
title="Applications of Long Read Sequencing"
|
||||
applicationItems={applicationItems}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default LongReadApplications;
|
||||
@ -0,0 +1,219 @@
|
||||
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, isHighlighted = false) => {
|
||||
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-12 bg-white">
|
||||
<div className="container-fluid px-4 lg:px-12">
|
||||
<h2 className="text-2xl lg:text-3xl text-gray-700 mb-8">
|
||||
Comparison of Sequencers
|
||||
</h2>
|
||||
|
||||
{/* Original Image Section */}
|
||||
<div className="mb-12">
|
||||
<div className="text-center">
|
||||
<img
|
||||
src="/images/long-read-comparison.jpg"
|
||||
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-8">
|
||||
<h3 className="text-xl lg:text-2xl text-gray-700 mb-6 text-center">
|
||||
Comparison and specification of sequencing platforms between short-read and long-read sequencing on WGS
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col xl:flex-row gap-8">
|
||||
{/* Mobile Card Layout (hidden on desktop) */}
|
||||
<div className="xl:hidden space-y-6">
|
||||
{/* Mobile Table Header */}
|
||||
<div className="bg-gray-100 rounded-lg p-4 mb-6">
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
<div className="font-semibold text-gray-700 text-center text-lg">Platform Types</div>
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div className="font-medium text-gray-600 text-sm">Illumina NovaSeq 6000</div>
|
||||
<div className="font-medium text-gray-600 text-sm">PacBio Sequel II/IIe</div>
|
||||
<div className="font-medium text-gray-600 text-sm">Nanopore PromethION</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{comparisonData.map((row, index) => (
|
||||
<div key={index} className="bg-white border border-gray-300 rounded-lg shadow-sm">
|
||||
<div className="bg-gray-100 px-4 py-3 rounded-t-lg">
|
||||
<h4 className="font-semibold text-gray-700">{row.category}</h4>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<h5 className="font-medium text-sm text-gray-600 mb-2">Illumina NovaSeq 6000</h5>
|
||||
<div className="text-sm text-gray-600 whitespace-pre-line leading-relaxed">
|
||||
{row.illumina}
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<h5 className="font-medium text-sm text-gray-600 mb-2">PacBio Sequel II/IIe</h5>
|
||||
<div className="text-sm text-gray-600 whitespace-pre-line leading-relaxed">
|
||||
{formatContent(row.pacbio)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium text-sm text-gray-600 mb-2">Nanopore PromethION</h5>
|
||||
<div className="text-sm text-gray-600 whitespace-pre-line leading-relaxed">
|
||||
{formatContent(row.nanopore)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Desktop Table Layout (hidden on mobile) */}
|
||||
<div className="hidden xl:flex flex-1">
|
||||
<table className="w-full border-collapse border border-gray-300 bg-white shadow-lg rounded-lg">
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
<th className="border border-gray-300 p-3 text-left font-semibold text-gray-700">
|
||||
Platform Types
|
||||
</th>
|
||||
<th className="border border-gray-300 p-3 text-center font-semibold text-gray-700">
|
||||
Illumina NovaSeq 6000
|
||||
</th>
|
||||
<th className="border border-gray-300 p-3 text-center font-semibold text-gray-700">
|
||||
PacBio Sequel II/IIe
|
||||
</th>
|
||||
<th className="border border-gray-300 p-3 text-center font-semibold text-gray-700">
|
||||
Nanopore PromethION
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{comparisonData.map((row, index) => (
|
||||
<tr key={index} className={index % 2 === 0 ? "bg-white" : "bg-gray-50"}>
|
||||
<td className="border border-gray-300 p-3 font-medium text-gray-700 bg-gray-50">
|
||||
{row.category}
|
||||
</td>
|
||||
<td className="border border-gray-300 p-3 text-sm text-gray-600">
|
||||
<div className="whitespace-pre-line leading-relaxed">
|
||||
{row.illumina}
|
||||
</div>
|
||||
</td>
|
||||
<td className="border border-gray-300 p-3 text-sm text-gray-600">
|
||||
<div className="whitespace-pre-line leading-relaxed">
|
||||
{formatContent(row.pacbio)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="border border-gray-300 p-3 text-sm text-gray-600">
|
||||
<div className="whitespace-pre-line leading-relaxed">
|
||||
{formatContent(row.nanopore)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Right side - Key Highlights */}
|
||||
<div className="xl:w-80 flex-shrink-0">
|
||||
<div className="bg-gradient-to-br from-teal-50 to-blue-50 rounded-lg p-6 h-full">
|
||||
<h3 className="text-lg font-semibold text-gray-700 mb-4 border-b border-teal-200 pb-2">
|
||||
Key Technology Highlights
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<h4 className="font-medium text-green-600 mb-2">Oxford Nanopore</h4>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
<li>• Real-time sequencing via protein nanopores</li>
|
||||
<li>• Portable devices for field diagnostics</li>
|
||||
<li>• Direct base modification detection</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<h4 className="font-medium text-green-600 mb-2">PacBio SMRT</h4>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
<li>• Hi-Fi reads with 99.9% accuracy</li>
|
||||
<li>• Excellent for complex genomes</li>
|
||||
<li>• Haplotype resolution in polyploids</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<h4 className="font-medium text-green-600 mb-2">Illumina</h4>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
<li>• High accuracy for SNVs and InDels</li>
|
||||
<li>• Cost-effective for large studies</li>
|
||||
<li>• Mature bioinformatics tools</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LongReadComparison;
|
||||
@ -0,0 +1,26 @@
|
||||
// LongReadIntroduction.jsx
|
||||
import IntroductionLayout from '../../../components/shared/IntroductionLayout';
|
||||
|
||||
const LongReadIntroduction = () => {
|
||||
const contentItems = [
|
||||
"Whole Genome Long Read Sequencing captures an organism's entire genome in a single read using extended strands, allowing precise analysis of complex genomic regions and structural variations.",
|
||||
"Technologies like Oxford Nanopore and PacBio enable real-time sequencing with high accuracy. The process involves DNA isolation, fragmentation, and advanced bioinformatics analysis for accurate variant detection.",
|
||||
"This workflow supports sequencing for humans, animals, plants, bacteria, and disease-related microbes using long continuous reads for better genome assembly."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
imageUrl="/images/long-read-intro.png"
|
||||
imageAlt="Long Read Sequencing"
|
||||
badgeText="LONG READ SEQUENCING"
|
||||
badgeSubtext="Oxford Nanopore & PacBio Platforms"
|
||||
backgroundColor="#f8f9fa"
|
||||
badgeColor="bg-teal-600"
|
||||
useParagraphs={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default LongReadIntroduction;
|
||||
@ -0,0 +1,84 @@
|
||||
// 7c - LongReadNanopore.jsx
|
||||
const LongReadNanopore = () => {
|
||||
return (
|
||||
<section className="py-0 md:py-12 lg:py-16">
|
||||
<div className="container-fluid px-0">
|
||||
<h2 className="text-2xl lg:text-3xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-8">
|
||||
Long Read Sequencing Technologies
|
||||
</h2>
|
||||
|
||||
{/* Oxford Nanopore Technology Section */}
|
||||
<div className="mb-12">
|
||||
<h3 className="text-xl lg:text-2xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-4">
|
||||
Long Read Sequencing using Oxford Nanopore Technology
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_1.14fr] min-h-[140px] lg:min-h-[280px]">
|
||||
<div
|
||||
className="bg-cover bg-center bg-no-repeat min-h-[220px] lg:min-h-[280px] flex items-center justify-center bg-gray-100 order-2 lg:order-1"
|
||||
style={{
|
||||
backgroundImage: "url('/images/oxford-nanopore-tech.png')",
|
||||
backgroundColor: '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
<div className="text-center p-4">
|
||||
<div className="bg-blue-600 text-white px-4 py-2 rounded-lg mb-4">
|
||||
<span className="text-sm font-medium">OXFORD NANOPORE</span>
|
||||
</div>
|
||||
<div className="text-gray-600 text-sm">
|
||||
Real-time DNA Analysis
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 lg:px-9 py-6 lg:py-0 order-1 lg:order-2">
|
||||
<ul className="list-disc list-inside space-y-3 text-gray-600 leading-relaxed">
|
||||
<li>Long-read Sequencing using Oxford Nanopore Technologies (ONT) delivers longer, continuous, and unambiguously assembled sequences, resulting in fewer contigs and enhancing overlap for accurate genome assembly.</li>
|
||||
<li>Helps in sequencing long stretches of DNA for complete genome assemblies of microbial, human, animal and plant species.</li>
|
||||
<li>Enables direct, real-time analysis of long DNA or RNA fragments by measuring changes in electric current as they pass through a nanopore embedded in a flow cell.</li>
|
||||
<li>Nanopore sequencing offers advantages across multiple research areas, including genome assembly, full-length transcript detection, base modification detection, and specialized applications like rapid clinical diagnoses and outbreak surveillance.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PacBio Technology Section */}
|
||||
<div>
|
||||
<h3 className="text-xl lg:text-2xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-4">
|
||||
Long Read Sequencing using PacBio Technology
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.14fr_1fr] min-h-[140px] lg:min-h-[280px]">
|
||||
<div className="px-6 lg:px-9 py-6 lg:py-0">
|
||||
<ul className="list-disc list-inside space-y-3 text-gray-600 leading-relaxed">
|
||||
<li>PCR-free SMRT technology producing Hi-Fi reads via circular consensus sequencing (CCS) mode, yielding long reads up to 25 kb with 99.9% base level accuracy.</li>
|
||||
<li>Enables rapid and cost-effective generation of contiguous, complete, and accurate de novo genome assemblies, even for complex genomes.</li>
|
||||
<li>Allows the haplotype resolution of complex polyploids, particularly in plants.</li>
|
||||
<li>The technology can be utilized to provide a comprehensive view of the epigenome and transcriptome, as well as uncover different variants such as SNPs, homopolymer repeats, translocations, structural variants, and copy number variants.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="bg-cover bg-center bg-no-repeat min-h-[220px] lg:min-h-[280px] flex items-center justify-center bg-gray-100"
|
||||
style={{
|
||||
backgroundImage: "url('/images/pacbio-tech.png')",
|
||||
backgroundColor: '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
<div className="text-center p-4">
|
||||
<div className="bg-green-600 text-white px-4 py-2 rounded-lg mb-4">
|
||||
<span className="text-sm font-medium">PACBIO SMRT</span>
|
||||
</div>
|
||||
<div className="text-gray-600 text-sm">
|
||||
Hi-Fi Circular Consensus Sequencing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LongReadNanopore;
|
||||
@ -0,0 +1,57 @@
|
||||
// LongReadSpecifications.jsx
|
||||
import Link from 'next/link';
|
||||
import SpecificationsLayout from '../../../components/shared/SpecificationsLayout';
|
||||
|
||||
const LongReadSpecifications = () => {
|
||||
const specificationItems = [
|
||||
{
|
||||
icon: "/images/homepage-2/NGS-Icons-45.svg",
|
||||
title: "Sample Requirement",
|
||||
renderContent: () => (
|
||||
<div>
|
||||
<div className="mb-4">
|
||||
<p className="text-gray-600">Genomic DNA, Cultivated cells, Blood, tissues, and other samples</p>
|
||||
</div>
|
||||
<div className="mt-4 text-sm">
|
||||
<strong>
|
||||
Please refer to{" "}
|
||||
<Link href="/sample-submission-guideline" className="text-teal-600 underline hover:text-teal-700">
|
||||
sample submission guidelines
|
||||
</Link>
|
||||
{" "}or{" "}
|
||||
<Link href="/contact-us" className="text-teal-600 underline hover:text-teal-700">
|
||||
Contact Us!
|
||||
</Link>
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
icon: "/images/homepage-1/service/Advantages-NGS-Icons-20.svg",
|
||||
title: "Sequencing Platform",
|
||||
content: "PacBio, Oxford Nanopore"
|
||||
},
|
||||
{
|
||||
icon: "/images/service/social-support.png",
|
||||
title: "Deliverables",
|
||||
renderContent: () => (
|
||||
<ul className="list-disc pl-5 space-y-2 text-gray-600 text-start">
|
||||
<li>The original sequencing data</li>
|
||||
<li>Experimental results</li>
|
||||
<li>Bioinformatics and Data Analysis Report</li>
|
||||
<li>Details of Whole Genome ReSequencing (customizable)</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<SpecificationsLayout
|
||||
title="Service Specifications"
|
||||
specificationItems={specificationItems}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default LongReadSpecifications;
|
||||
36
app/dna-sequencing/long-read-sequencing/page.js
Normal file
36
app/dna-sequencing/long-read-sequencing/page.js
Normal file
@ -0,0 +1,36 @@
|
||||
import TitleBar from '../../components/shared/TitleBar';
|
||||
import LongReadIntroduction from './components/LongReadIntroduction';
|
||||
import LongReadComparison from './components/LongReadComparison';
|
||||
import LongReadNanopore from './components/LongReadNanopore';
|
||||
import LongReadAdvantages from './components/LongReadAdvantages';
|
||||
import LongReadApplications from './components/LongReadApplications';
|
||||
import LongReadSpecifications from './components/LongReadSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
export default function LongReadSequencingPage() {
|
||||
const breadcrumbs = [
|
||||
{ label: 'Home', href: '/' },
|
||||
{ label: 'Research', href: '/research' },
|
||||
{ label: 'DNA Sequencing', href: '/dna-sequencing' },
|
||||
{ label: 'Whole Genome Long Read Sequencing', current: true }
|
||||
];
|
||||
|
||||
return (
|
||||
<PageLayout fixedHeader={true}>
|
||||
<TitleBar
|
||||
title="Whole Genome Long Read Sequencing"
|
||||
desc="Sequencing the Complete Genome, Long and Clear"
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
|
||||
<div className="page-content">
|
||||
<LongReadIntroduction /> {/* 7a */}
|
||||
<LongReadComparison />
|
||||
<LongReadNanopore />
|
||||
<LongReadAdvantages />
|
||||
<LongReadApplications />
|
||||
<LongReadSpecifications />
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user