Docker config

This commit is contained in:
mukesh13
2025-06-16 15:53:12 +05:30
commit da3df17022
411 changed files with 24117 additions and 0 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View 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>
);
}