flowchart changes updated
This commit is contained in:
mukesh13
@ -33,7 +33,7 @@ const DNATable = () => {
|
||||
</a>{' '}
|
||||
and{' '}
|
||||
<a href="/dna-sequencing/enrichment-sequencing/targeted-sequencing" className="text-teal-600 hover:underline">
|
||||
Targeted Sequencing
|
||||
Custom Sequencing
|
||||
</a>
|
||||
</>
|
||||
),
|
||||
|
||||
@ -9,6 +9,7 @@ const EnrichmentIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
|
||||
const advantageItems = [
|
||||
"Provides a more affordable alternative to Whole Genome Sequencing (WGS), making it accessible to a wider range of researchers and clinicians.",
|
||||
"Enhances detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with sensitivity and accuracy comparable to WGS, particularly in exonic regions.",
|
||||
@ -16,38 +17,80 @@ const EnrichmentIntroduction = () => {
|
||||
"Focuses on exonic regions, which are more likely to harbor disease-causing variants, leading to a more efficient and targeted approach in identifying genetic variants."
|
||||
];
|
||||
|
||||
const customBadgeContent = (
|
||||
<div className="text-center">
|
||||
<div className="bg-teal-600 text-white px-4 py-2 rounded-lg mb-4">
|
||||
<span className="text-sm font-medium">ENRICHMENT SEQUENCING</span>
|
||||
</div>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
|
||||
Whole Exome DNA Sequencing
|
||||
return (
|
||||
<div className="w-full bg-white">
|
||||
{/* Main container with two columns */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
|
||||
|
||||
{/* Left Column - Content using existing IntroductionLayout structure */}
|
||||
<div className="px-6 lg:px-12 py-8">
|
||||
{/* Introduction Section */}
|
||||
<section className="mb-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Introduction and Workflow
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{contentItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* Advantage Section */}
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Advantage
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{advantageItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
|
||||
Amplicon Sequencing (16S/18S/ITS)
|
||||
</div>
|
||||
<div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
|
||||
Targeted Sequencing
|
||||
|
||||
{/* Right Column - Custom Content with Image and SVG */}
|
||||
<div className="relative p-4">
|
||||
<div className="flex flex-col h-full space-y-4">
|
||||
{/* Top Section - Flowchart with larger fixed width */}
|
||||
<div className="w-full flex items-center justify-center py-6">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/flowchart/enrichment_flow.svg"
|
||||
alt="ISO Certified Process Flow"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section - Image with same width */}
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/dna/whole_genome_seq-normal_denovo.png"
|
||||
alt="Enrichment Overview"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/enrichment-overview.png"
|
||||
imageAlt="Enrichment Overview"
|
||||
backgroundColor="#f8f9fa"
|
||||
customBadgeContent={customBadgeContent}
|
||||
useParagraphs={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnrichmentIntroduction;
|
||||
@ -12,7 +12,7 @@ const TargetedApplications = () => {
|
||||
|
||||
return (
|
||||
<ApplicationsLayout
|
||||
title="Applications of Targeted Sequencing"
|
||||
title="Applications of Custom Sequencing"
|
||||
applicationItems={applicationItems}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -4,7 +4,7 @@ import IntroductionLayout from '../../../../components/shared/IntroductionLayout
|
||||
|
||||
const TargetedIntroduction = () => {
|
||||
const contentItems = [
|
||||
"Targeted DNA Sequencing (also know as Gene Panel Sequencing) concentrate on specific genes or genomic regions of interest, allowing for in-depth analysis of mutations that are most relevant to particular diseases or conditions.",
|
||||
"Custom DNA Sequencing (also know as Gene Panel Sequencing) concentrate on specific genes or genomic regions of interest, allowing for in-depth analysis of mutations that are most relevant to particular diseases or conditions.",
|
||||
"The process begins with the selection of specific genes or regions, followed by the amplification of these targets through PCR. Sequencing is then performed on the amplified regions, ensuring high coverage and accuracy.",
|
||||
"Advanced bioinformatics tools are employed to analyze the sequencing data, providing detailed insights into genetic variants, their potential impact, and relevance to disease.",
|
||||
"Targeted sequencing is widely used in clinical settings for the diagnosis of genetic disorders, personalized medicine, and cancer genomics, providing actionable insights that can directly impact patient care."
|
||||
|
||||
@ -9,13 +9,13 @@ export default function TargetedSequencingPage() {
|
||||
{ label: 'Home', href: '/' },
|
||||
{ label: 'DNA Sequencing', href: '/dna-sequencing' },
|
||||
{ label: 'Enrichment Sequencing', href: '/dna-sequencing/enrichment-sequencing' },
|
||||
{ label: 'Targeted DNA Sequencing', current: true }
|
||||
{ label: 'Custom DNA Sequencing', current: true }
|
||||
];
|
||||
|
||||
return (
|
||||
<PageLayout fixedHeader={true}>
|
||||
<DNATitleBar
|
||||
title="Targeted DNA Sequencing"
|
||||
title="Custom DNA Sequencing"
|
||||
desc="Pinpoint Precision for Your Genetic Insights"
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
|
||||
@ -9,6 +9,7 @@ const EpigenomicsIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and epigenetic modifications.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
|
||||
const advantageItems = [
|
||||
"Provides comprehensive analysis of epigenetic modifications including DNA methylation, histone modifications, and chromatin accessibility, offering insights into gene regulation mechanisms.",
|
||||
"Enables single-base resolution mapping of epigenetic marks across the genome, allowing for precise identification of regulatory elements and their modifications.",
|
||||
@ -16,7 +17,6 @@ const EpigenomicsIntroduction = () => {
|
||||
"Identifies potential therapeutic targets and biomarkers for epigenetic-based treatments, supporting the development of personalized medicine approaches."
|
||||
];
|
||||
|
||||
|
||||
const serviceTypes = [
|
||||
"Whole Genome Bisulphite Sequencing (WGBS)",
|
||||
"Chip Sequencing",
|
||||
@ -24,19 +24,78 @@ const EpigenomicsIntroduction = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/epigenomics-overview.png"
|
||||
imageAlt="Epigenomics Overview"
|
||||
badgeText="EPIGENOMICS"
|
||||
serviceTypes={serviceTypes}
|
||||
backgroundColor="#f8f9fa"
|
||||
badgeColor="bg-teal-600"
|
||||
useParagraphs={true}
|
||||
/>
|
||||
<div className="w-full bg-white">
|
||||
{/* Main container with two columns */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
|
||||
|
||||
{/* Left Column - Content using existing IntroductionLayout structure */}
|
||||
<div className="px-6 lg:px-12 py-8">
|
||||
{/* Introduction Section */}
|
||||
<section className="mb-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Introduction and Workflow
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{contentItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* Advantage Section */}
|
||||
<section className="mb-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Advantage
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{advantageItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Custom Content with Image and SVG */}
|
||||
<div className="relative p-4">
|
||||
<div className="flex flex-col h-full space-y-4">
|
||||
{/* Top Section - Flowchart with larger fixed width */}
|
||||
<div className="w-full flex items-center justify-center py-6">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/flowchart/epigenomic_flow.svg"
|
||||
alt="Epigenomics Process Flow"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section - Image with same width */}
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/epigenomics-overview.png"
|
||||
alt="Epigenomics Overview"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
// app/dna-sequencing/genome-mapping/components/GenomeMappingIntroduction.jsx
|
||||
|
||||
import IntroductionLayout from '../../../components/shared/IntroductionLayout';
|
||||
|
||||
const GenomeMappingIntroduction = () => {
|
||||
@ -8,6 +9,7 @@ const GenomeMappingIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and structural arrangements.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
|
||||
const advantageItems = [
|
||||
"Provides detailed structural variant detection and genomic rearrangements, offering comprehensive insights into complex genomic architecture.",
|
||||
"Enables high-resolution analysis of large eukaryotic genomes and their structural features, facilitating better understanding of genome organization.",
|
||||
@ -21,19 +23,78 @@ const GenomeMappingIntroduction = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/genome-mapping-overview.png"
|
||||
imageAlt="Genome Mapping Overview"
|
||||
badgeText="GENOME MAPPING"
|
||||
serviceTypes={serviceTypes}
|
||||
backgroundColor="#f8f9fa"
|
||||
badgeColor="bg-teal-600"
|
||||
useParagraphs={true}
|
||||
/>
|
||||
<div className="w-full bg-white">
|
||||
{/* Main container with two columns */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
|
||||
|
||||
{/* Left Column - Content using existing IntroductionLayout structure */}
|
||||
<div className="px-6 lg:px-12 py-8">
|
||||
{/* Introduction Section */}
|
||||
<section className="mb-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Introduction and Workflow
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{contentItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* Advantage Section */}
|
||||
<section className="mb-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Advantage
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{advantageItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Custom Content with Image and SVG */}
|
||||
<div className="relative p-4">
|
||||
<div className="flex flex-col h-full space-y-4">
|
||||
{/* Top Section - Flowchart with larger fixed width */}
|
||||
<div className="w-full flex items-center justify-center py-6">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/flowchart/genome_mapping_flow.svg"
|
||||
alt="Genome Mapping Process Flow"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section - Image with same width */}
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/genome-mapping-overview.png"
|
||||
alt="Genome Mapping Overview"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,132 +1,48 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const HybridSequencingPipeline = ({
|
||||
title = "Hybrid Sequencing",
|
||||
leftSteps = [
|
||||
"Raw Sequencing Data from Short Read (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Assembly of reads"
|
||||
],
|
||||
rightSteps = [
|
||||
"Annotation & Downstream Advanced Analysis",
|
||||
"Scaffolds of the genome",
|
||||
"Contigs from short reads and mapped to long reads",
|
||||
"Genome Assembly (Contigs from short reads)"
|
||||
],
|
||||
title = "Bioinformatics Pipeline",
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/hybridseq.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
cardColor = "bg-blue-200",
|
||||
textColor = "text-blue-800",
|
||||
arrowColor = "text-gray-600",
|
||||
className = "",
|
||||
cardClassName = "",
|
||||
titleclass='',
|
||||
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleclass}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
{/* SVG Flowchart Container */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-full max-w-7xl">
|
||||
<div className="relative">
|
||||
{/* Mobile Layout - Single Column */}
|
||||
<div className="block sm:hidden">
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{/* Left side steps */}
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={`left-${index}`}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
<ArrowRight className={`w-5 h-5 ${arrowColor} my-2`} />
|
||||
|
||||
{/* Right side steps in reverse order */}
|
||||
{[...rightSteps].reverse().map((step, index) => (
|
||||
<React.Fragment key={`right-${index}`}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightSteps.length - 1 && (
|
||||
<ArrowUp className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{/* Long Read Data Box for mobile */}
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName} mt-4`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>Raw Sequencing Data from Long Read (fastq file)</h3>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 text-center">↑ connects to Scaffolds & Contigs</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Layout - Two Columns with Long Read positioned correctly */}
|
||||
<div className="hidden sm:block">
|
||||
<div className="grid grid-cols-2 gap-8 lg:gap-12">
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={`left-${index}`}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{rightSteps.map((step, index) => (
|
||||
<React.Fragment key={`right-${index}`}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightSteps.length - 1 && (
|
||||
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
<div className="w-full max-w-6xl">
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Arrow from Assembly of reads to Genome Assembly */}
|
||||
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||
) : (
|
||||
// Fallback message
|
||||
<div className="flex items-center justify-center h-40 text-gray-500">
|
||||
<p>Please provide SVG content or URL</p>
|
||||
</div>
|
||||
|
||||
{/* Long Read Data Box positioned to the right of Genome Assembly (same level) */}
|
||||
<div className="absolute bottom-4 right-0 transform translate-x-72">
|
||||
<div className={`${cardColor} rounded-lg p-4 w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>Raw Sequencing Data from Long Read (fastq file)</h3>
|
||||
</div>
|
||||
|
||||
{/* Direct vertical line and arrow to Scaffolds */}
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 -top-44">
|
||||
<div className="flex flex-col items-center">
|
||||
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||
<div className="w-0.5 h-36 bg-gray-400"></div>
|
||||
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// app/dna-sequencing/snp-genotyping/page.js
|
||||
import DNATitleBar from '../../components/shared/DNATitleBar';
|
||||
import HybridIntroduction from './components/HybridIntroduction';
|
||||
// import HybridSequencingPipeline from './components/HybridSequencingPipeline'
|
||||
import HybridSequencingPipeline from './components/HybridSequencingPipeline'
|
||||
import HybridApplications from './components/HybridApplications';
|
||||
import HybridSpecifications from './components/HybridSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
@ -47,7 +47,7 @@ export default function HybridGenomeSequencingPage() {
|
||||
<HybridIntroduction />
|
||||
|
||||
{/* Bioinformatics Pipeline Section */}
|
||||
{/* <HybridSequencingPipeline /> */}
|
||||
<HybridSequencingPipeline />
|
||||
|
||||
{/* Applications Section */}
|
||||
<HybridApplications />
|
||||
|
||||
@ -2,31 +2,26 @@ 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"
|
||||
}
|
||||
@ -95,9 +90,6 @@ const LongReadComparison = () => {
|
||||
<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>
|
||||
@ -112,11 +104,6 @@ const LongReadComparison = () => {
|
||||
<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)}
|
||||
@ -132,60 +119,6 @@ const LongReadComparison = () => {
|
||||
</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>
|
||||
);
|
||||
|
||||
@ -0,0 +1,57 @@
|
||||
const SNPGenotypingTechniques = ({
|
||||
title = "Types of SNP-Based Genotyping using technique:",
|
||||
backgroundColor = "bg-teal-50"
|
||||
}) => {
|
||||
const techniques = [
|
||||
{
|
||||
name: "PCR:",
|
||||
description: "Utilizes PCR to amplify DNA regions containing SNPs, relying on allele-specific primers, probes, or melting curve differences for SNP detection.",
|
||||
examples: "TaqMan Assay, KASP, ARMS-PCR, qPCR, High-Resolution Melting (HRM)."
|
||||
},
|
||||
{
|
||||
name: "Microarray:",
|
||||
description: "Employs DNA microarrays to detect and analyze SNPs across the genome using hybridization with oligonucleotide probes specific to SNP loci.",
|
||||
examples: "Affymetrix GeneChips, Illumina Infinium Arrays, SNPlex, Axiom Array Platforms, MALDI-TOF Mass Spectrometry Arrays."
|
||||
},
|
||||
{
|
||||
name: "NGS:",
|
||||
description: "Uses Next-Generation Sequencing (NGS) for high-resolution, high-throughput SNP detection and analysis.",
|
||||
examples: "Whole-Genome Sequencing (WGS), Exome Sequencing, Targeted Sequencing, Genotyping-by-Sequencing (GBS), Double Digest Restriction-site Associated DNA (ddRAD) Sequencing."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className={`py-5 lg:py-5 ${backgroundColor}`}>
|
||||
<div className="container-fluid px-4 lg:px-6">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<ol className="space-y-4 lg:px-6" style={{color: '#555555'}}>
|
||||
{techniques.map((technique, index) => (
|
||||
<li key={index} className="leading-relaxed">
|
||||
<div className="flex items-start">
|
||||
<span
|
||||
className="inline-flex items-center justify-center w-6 h-6 rounded-full text-white font-bold text-sm mr-3 flex-shrink-0 mt-0.5"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
<div className="flex-1">
|
||||
<span className="font-semibold text-base">{technique.name}</span>
|
||||
<br />
|
||||
<span className="text-base">{technique.description}</span>
|
||||
<br />
|
||||
<span className="font-semibold" style={{color: '#faae31'}}>Examples: </span>
|
||||
<span className="text-base italic">{technique.examples}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default SNPGenotypingTechniques;
|
||||
@ -3,7 +3,10 @@ import IntroductionLayout from '../../../components/shared/IntroductionLayout';
|
||||
|
||||
const SNPIntroduction = () => {
|
||||
const contentItems = [
|
||||
"SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome, offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in population genetics, evolutionary biology, and plant and animal breeding."
|
||||
"ddRAD sequencing (Double Digest Restriction-site Associated DNA) is based on the Restriction Fragmentation technique combined with Next-Generation Sequencing (NGS). It is a robust approach for \"genotyping and SNP discovery\" that doesn't require a reference genome.",
|
||||
"The ddRAD workflow utilizes the precise cut-site specificity of restriction endonucleases to create library fragments from unique genomic regions. These fragments are then selected and sequenced, capturing data from identical genomic regions across samples.",
|
||||
"In the bioinformatics analysis, reads are aligned to either a reference genome or de novo assembly to detect SNVs and other genetic variations. This analysis supports studies on genetic diversity, population structure, and trait associations, with advanced tools enabling the processing of large datasets to achieve high genotyping accuracy.",
|
||||
"With the potential to develop hundreds to tens of thousands of genetic markers, ddRAD is ideal for applications in population genetics, germplasm assessment, marker-trait associations, GWAS, and QTL mapping. Its targeted, reproducible approach makes it a valuable tool for ecological and agricultural genomics."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Allows for precise identification of genetic variations at a single nucleotide level, enabling detailed mapping of genetic diversity.",
|
||||
@ -12,7 +15,6 @@ const SNPIntroduction = () => {
|
||||
"Can reveal associations between genetic variations and complex traits, allowing researchers to identify genetic contributors to health, disease, or productivity in agriculture."
|
||||
];
|
||||
|
||||
|
||||
const serviceTypes = [
|
||||
"DNA Sequencing",
|
||||
"RNA Sequencing",
|
||||
@ -20,19 +22,36 @@ const SNPIntroduction = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/SNP-based_genotyping_(ddRAD).png"
|
||||
imageAlt="SNP Genotyping Overview"
|
||||
badgeText="ISO CERTIFIED"
|
||||
serviceTypes={serviceTypes}
|
||||
backgroundColor="#f8f9fa"
|
||||
badgeColor="bg-teal-600"
|
||||
useParagraphs={true}
|
||||
/>
|
||||
<>
|
||||
{/* Main Heading Section */}
|
||||
<section className="py-5 lg:py-5">
|
||||
<div className="container-fluid px-4 lg:px-6">
|
||||
<div className="lg:px-6">
|
||||
<h1 className="text-3xl font-bold text-teal-700 mb-2">
|
||||
Double Digest Restriction-site Associated DNA (ddRAD) Sequencing
|
||||
</h1>
|
||||
<p className="text-base leading-relaxed" style={{color: '#faae31'}}>
|
||||
Focused, Cost-Effective Genotyping with ddRAD
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Introduction Layout */}
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/SNP-based_genotyping_(ddRAD).png"
|
||||
imageAlt="SNP Genotyping Overview"
|
||||
badgeText="ISO CERTIFIED"
|
||||
serviceTypes={serviceTypes}
|
||||
backgroundColor="#f8f9fa"
|
||||
badgeColor="bg-teal-600"
|
||||
useParagraphs={true}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
const SNPWorkflow = ({
|
||||
workflowImage = "/images/flowchart/WGS_flow.svg"
|
||||
}) => {
|
||||
return (
|
||||
<section className={'py-5 lg:py-5'}>
|
||||
<div className="container-fluid px-4 lg:px-6">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Introduction and Workflow
|
||||
</h2>
|
||||
|
||||
<div className="lg:px-6 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<p className="text-base leading-relaxed" style={{color: '#555555'}}>
|
||||
SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome,
|
||||
offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in
|
||||
population genetics, evolutionary biology, and plant and animal breeding.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center lg:justify-end">
|
||||
<img
|
||||
src={workflowImage}
|
||||
alt="SNP Genotyping Workflow"
|
||||
className="max-w-full h-auto rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default SNPWorkflow;
|
||||
@ -1,8 +1,10 @@
|
||||
// app/dna-sequencing/snp-genotyping/page.js
|
||||
import DNATitleBar from '../../components/shared/DNATitleBar';
|
||||
import SNPWorkflow from './components/SNPWorkflow ';
|
||||
import SNPIntroduction from './components/SNPIntroduction';
|
||||
import SNPApplications from './components/SNPApplications';
|
||||
import SNPSpecifications from './components/SNPSpecifications';
|
||||
import SNPGenotypingTechniques from './components/SNPGenotypingTechniques';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
export default function SNPGenotypingPage() {
|
||||
@ -23,6 +25,8 @@ export default function SNPGenotypingPage() {
|
||||
/>
|
||||
|
||||
<div className="page-content">
|
||||
<SNPWorkflow/>
|
||||
<SNPGenotypingTechniques/>
|
||||
<SNPIntroduction />
|
||||
<SNPApplications />
|
||||
<SNPSpecifications />
|
||||
|
||||
@ -9,6 +9,7 @@ const WGSIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are then assembled to construct the genome or aligned to a known reference genome.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
|
||||
const advantageItems = [
|
||||
"Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing.",
|
||||
"Identifies both small (SNVs, CNVs, InDels) and large structural variants that may be missed with targeted approaches, offering valuable insights into inherited genetic conditions and characterizing mutations driving cancer progression.",
|
||||
@ -17,15 +18,78 @@ const WGSIntroduction = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_genome_seq-normal_denovo.png"
|
||||
imageAlt="Sample Process Steps"
|
||||
useParagraphs={true}
|
||||
/>
|
||||
<div className="w-full bg-white">
|
||||
{/* Main container with two columns */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
|
||||
|
||||
{/* Left Column - Content using existing IntroductionLayout structure */}
|
||||
<div className="px-6 lg:px-12 py-8">
|
||||
{/* Introduction Section */}
|
||||
<section className="mb-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Introduction and Workflow
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{contentItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* Advantage Section */}
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Advantage
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{advantageItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Custom Content with Image and SVG */}
|
||||
<div className="relative p-4">
|
||||
<div className="flex flex-col h-full space-y-4">
|
||||
{/* Top Section - Flowchart with larger fixed width */}
|
||||
<div className="w-full flex items-center justify-center py-6">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/flowchart/WGS_flow.svg"
|
||||
alt="WGS Process Flow"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section - Image with same width */}
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/dna/whole_genome_seq-normal_denovo.png"
|
||||
alt="WGS Overview"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user